News

Unleash jQuery and CSS to create expanding panels

Recreate the expanding panel hover effect found at www.outdatedbrowser.com

Unleash-jQuery-and-CSS-to-create-expanding-panels

Unleash jQuery and CSS to create expanding panels

inspiration: www.outdatedbrowser.com

There are various different approaches that can be taken when dealing with the issue of cross-browser compatibility. Add to that the proliferation of devices over recent years and it’s easy to see why developers sometimes feel they spend more time ironing out compatibility issues than creating engaging and rewarding online experiences.

Therefore, anything that helps developers out in this area is welcomed – and outdatedbrowser.com by Bürocratik has a created an out-of-the-box solution that you can add to any site to alert users that they are using an outdated browser, explain that their experience may be affected, and provide a link to the latest version of the browser they’re using. Their award-winning project website is pretty special as well.

TECHNIQUE
Expanding <div> effect on hover

HTML first

Links to the two stylesheets are established; ‘jquery.kwicks.css’ is for the universal styling required for any Kwicks slider and demo.css is for page specific styling. Each panel is a list item in an unordered list and content is placed and styled using <div>s. This demo uses SVG images deployed by declaring classes within <div>s – this is all explained in detail in the Technique section.

001    <link rel=’stylesheet’ type=’text/css’
href=’css/jquery.kwicks.css’ />
002    <link rel=’stylesheet’ type=’text/css’
href=’css/demo.css’ />
003    </head>
004    <body>
005    <div id=”header”><h1>Top 5 tea 
producing countries</h1></div>
006    <ul class=’kwicks kwicks-horizontal’>
007    <li id=’china’>
008    <div id=”percent”><h2>35.13%</h2>of 
global tea production<br />1,640,310 
m/t</div>
009    <div class=”phoca-flagbox”><span 
class=”phoca-flag cn”></span></div>
010    <div id=”footer”><h3>China</h3></div>
011    </li>
012    

Scripts

After the HTML for each panel, the scripts are loaded and the Kwicks function called. To match the Outdated Browser site, the maxSize for the active panel has been set to 36%. There’s scope to radically change the look by changing this value. The Kwicks plugin is capable of much more than what it’s used for here, and also works very well with different easing options. Refer to the ‘kwicks-master.zip’ for examples and more inspiration.

demo.css

The header is fixed to the top of the page with top:0 and position:absolute. Z-index brings it in front of the slide panels. The percent class sets the font-size and positioning of that element and is set to hidden. When hovered, its visibility is then set to visible.

The slider container

Minimum heights and widths are used to stop the layout from becoming ugly if the browser is reduced below the allowed for sizes. Setting height:100% to have the panel fill the page wouldn’t work here but height:100vh sets the <div> to 100% of the viewport height and works very well in all modern browsers.

001    .kwicks {
002        text-align:center;
003        min-width: 800px;
004    }
005    .kwicks > li {
006        height:100vh;
007        min-height: 440px;
008    }
009    </li>

Style the flags

The Outdated Browser site uses CSS sprites and uses a white version of the browser logo in the inactive state and a full-colour version on hover. This demo uses CSS-drawn images. The height and width of the flags can be set to any size. The panel background colour is also set here.

001    .phoca-flagbox {
002        width:120px;
003        height:120px;
004        display:inline-block;
005        position:relative;
006    }
007    .phoca-flag {
008        position:absolute;
009        top:0;
010        bottom:0;
011        left:0;
012        right:0;
013        margin:auto;
014        display:inline-block;
015        vertical-align:middle;
016    }
017    #china {
018        background-color:#ed553b;
019    }
020    .cn {
021        background:url(data:image/svg+xml; xx);
022        width:100%;
023        height:66.666666666667%;
024        background-size:100% 100%;
025    }
×