anIDEA

The Theme Drawer

Lets write the HTML structure for the Theme Drawer. Place the following BEFORE the body closing tag.

<div id="theme-wrapper">
<div class="drawer-toggler">Change Theme!</div>
<div id="theme-drawer">

</div><!-- end #theme-drawer -->
</div><!-- end #theme-wrapper -->

This is the empty drawer… we are not going to worry about the themes for now. The theme-wrapper id holds the theme-drawer, which will contain the theme thumbnails and the drawer-toggler. The reason for building it this way is that we want to keep every DIV of the switcher wrapped in one DIV, hence the theme-wrapper (naming conventions that are self explanatory speed up development!) Open styles.css and let’s take care of the position and the UI with some lovely CSS:

/* @group Theme Drawer */

#theme-wrapper {
position: fixed;
bottom: 0;
z-index: 900;
width: 100%;
}

.drawer-toggler {
background: #ff006f;
color: #fff;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 10px 0;
width: 140px;
position: absolute;
top: -30px;
right: 0;
}

#theme-drawer {
background: #eee;
border-top: 5px solid #666;
clear: both;
overflow: hidden;
position: relative;
z-index: 905;
}

/* @end */

The theme-wrapper will have a fixed position at the bottom of the browser’s viewport (viewable area, regardless of your scroll position on the page). The Z-Index is used as a safety measure to make sure it displays above any other content on the page.

We must also define an absolute positioning for the theme-toggler button just outside of the container on the right side. Now, when we toggle to hide the drawer, the toggle will be still visible, since the JavaScript hides based on the zero-point of the viewport. The theme-toggler button is just a DIV with copy, there is no link on it, but we still need to have a visual indicator so the user knows they can click to activate it.

It’s best good practice to give the user visual hints that something is happening or will happen. The theme-drawer has a 5 pixel border on top, so it becomes a visual representation that there is something hiding beyond the bottom of the page.

Now to make the drawer to actually show and hide, we are going to create a function for it. The reason we are going to create this as a function is so that we can use it in different events. Plus we want to make sure a few things happen. Open the theme-switcher.js file and write the following:

/* theme drawer hider */
function hideDrawer() {
$("#theme-drawer").slideToggle("normal", function () {
if ($("#theme-drawer").is(":visible")) {
$("#wrapper").css("margin-bottom", "150px");
} else {
$("#wrapper").css("margin-bottom", "20px");
}
});
}

Reviewing the code above, we’re simply instructing the DIV ID “theme-drawer” to trigger a slideToggle at “normal” speed. Then we want to run a function that will check if the drawer is visible, it needs to have a 150-pixel margin to the bottom of the DIV wrapper. This is to ensure that the drawer does not hide the content from the wrapper DIV. If it’s not visible, just change the margin of the bottom of the wrapper DIV to 20 pixels. Pretty easy huh?

Now we are going to call the function when the user clicks on the “drawer-toggler” DIV.

$(document).ready(function(){

$(".drawer-toggler").click(function() {
hideDrawer();
});
});

Save your files and test it. If you followed through, your theme drawer should show and hide. Now on to the theme carousel!

Follow the author: @Omar12 Follow AgencyNet: @agencynet

Pages: 1 2 3

blog comments powered by Disqus