Build the ANidea Theme Switcher using jQuery
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!
NetOperator Wibby…
I’ve been a fan of ANidea’s theme switcher for some time but I felt like it was kind of taboo to look through the sourcecode, lol.
Thanks for the tutorial!
Ryan Paul Thompson…
Awesome breakdown, I can’t wait to go through this
Thanks!
jQueryGlobe…
Impressive. I just don’t like frames
Max.W…
Thanks for this, I was really hoping you would post a tutorial someday on this. It’s a lovely tool to have and really adds value to the site, it gives users a choice on how they view the site which is a really great thing to see.
Alice…
Awesome!! Is part 2 up yet?
Alice…
Okay not to be a pain in the ass but I’ve worked through this (thanks so much, it’s great) and would love to see Part 2 and work it into Wordpress… just sayin’!
Omar…
Thanks everyone for the positive feedback! Part 2 is in the works! I’m doing my best to break it down so its easier to follow.
shawn…
Any possibility of getting part 2 added so that we can learn how to add this to our wordpress themes?
Hitesh Panchal…
Hi, your work is very nice. but its not working in IE 6. so can you pls tell me how to i will run it in IE 6 ??
Regards,
Hitesh Panchal
Tim…
can’t wait to see part 2 !
Chris Pierre…
Pretty interesting Tut, thanks a lot and like everyone else Im anticipating part 2.
Chris Pierre
Lis…
This seems pretty straight forward. I look forward to trying it. I am EXCITED though to see how it will work with WP!