2020-08-05
88
Many people ask me how to have the panel “push” the content down instead of overlapping it so I thought I would answer it here instead of answering each comment individually. This is actually extremely easy to do so. All you have to do is open slide.css (Appearance>Editor) and find:
| 12345678910 | /* sliding panel */ #toppanel { position: absolute; top: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto;} |
Change position:absolute; for position:relative;. That’s it!
Fade colors using jQuery
Retweetradar has nice little effect in the footer – links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.
In the example in this tutorial we’ll will fade links in unordered list like in the example below.
<ul id="links"> <li><a href="#">Some text here</a></li> <li><a href="#">Some text here</a></li>...</ul>Fade links using opacity property
In the first example, we will use opacity CSS property and apply different opacity to each link in unordered list. To do so we need two variables – the number of links and the number that will determine the step for decreasing the opacity. See in code that, for determing the step, we divide 90 with the number of links. This means that the last link will be 90% transparent. If we would divide 100 with the number of links, the last link will be completely transparent and thus invisible.
function fadeElements(color) { var count = $("ul#links li").size(); var step = 90 / count; $("ul#links li").each(function(i) { var currentOpacity = 100 - (step * i); $(this).find("a").css("color", color).css("opacity", currentOpacity = 100? "1": "0." + parseInt(currentOpacity)); });}Next, we determine opacity intensity for each link (currentOpacity) and assign it through CSS, together with chosen color (which is passed to the function by parameter). Note that I used inline “if” statement to assign opacity value of 1 if it is the first link, and less than one for all others.
|
|
|
You can then call fadeElements function and pass it the color you wish to fade. In the example above it’s black.
Fade links using RGB values
If you don’t want to use opacity for whatever reason, here’s the complicated version – using RGB values. Let me explain the code below. The first four functions (that I found on the Web long time ago and reuse since then) convert Hex color values to red, green and blue values.
function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }function cutHex(h) { return (h.charAt(0) == "#")? h.substring(1, 7): h }Function fadeElements that you’ve seen earlier in this tutorial is now slightly complicated. Basically, it is doing the same job and that is fading colors. Only this time it won’t make one color transparent but rathar scale original color and make several variations.
function fadeElements(color) { var count = $("ul#links li").size(); var r = HexToR(color); var g = HexToG(color); var b = HexToB(color); var stepR = (230 - r) / count; var stepG = (230 - g) / count; var stepB = (230 - b) / count; $("ul#links li").each(function(i) { var valueR = parseInt(r + (stepR * i)); var valueG = parseInt(g + (stepG * i)); var valueB = parseInt(b + (stepB * i)); $(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")"); });}Easy Display Switch with CSS and jQuery
Getting Started
All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.
<!doctype html><html lang="en-US"><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Switch Display Options - DesignMag Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designm.ag/favicon.ico"> <link rel="icon" href="http://designm.ag/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script></head>The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.
|
|
|
I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.
The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.
Page Design with CSS
All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google. The HTML page background uses a repeating image Cartographerfrom Subtle Patterns.
.options { display: block; text-align: right; font-size: 1.2em; line-height: 16px; font-weight: bold; color: #eee; margin-bottom: 8px;}.options.sorticon { position: relative; top: 3px;}.options.sorticon img { opacity: 0.6; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}.options.sorticon img:hover { opacity: 1.0;}.options.sorticon.active img { opacity: 1.0;}Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity won’t change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.
/* list styles */#listdisplay { display: block;} #listdisplay li { display: block; width: 100%; padding: 12px 8px; margin-bottom: 1px; border-bottom: 1px solid #aaa;}#listdisplay li a img { display: block; float: left; padding: 5px; border: 2px solid #bbb; background: #fff; margin-right: 20px;} #listdisplay li.innercontent h2 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 3.0em; line-height: 1.35em; margin-bottom: 4px; color: #73ed95; font-weight: bold;} #listdisplay.thumbview li { display: block; width: 360px; float: left; margin-right: 10px; margin-bottom: 7px; border: 0;}#listdisplay.thumbview li a img { display: block; float: none; margin: 0 auto; margin-bottom: 4px;}#listdisplay.thumbview li.innercontent { display: block; text-align: center;}#listdisplay.thumbview li.innercontent h2 { font-size: 2.2em;}#listdisplay.thumbview li.innercontent p { display: none;}Getting into the list properties you will notice there isn’t much to be confused about. #listdisplay is always being used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view. Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail + image centered, no descriptive text.
You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your audience.
