I know at least some of you may find javascript code, and even jQuery code, to be confusing or simply that mysterious code library that you just accept as necessary, but never really come to understand. Well that’s a shame because jQuery is actually not that difficult to at least understand and even use in basic ways once you understand some foundational aspects of how it works.
In this tutorial I’m not going to go into much depth or even use any kind of teaching structure, but instead I wanted to go at it with a more hands-on approach, playing around with it and providing you with the tools, code snippets, and know-how to do the same.
So be sure to check out the following screencast and you’ll be dragging your website elements around in no time! 🙂
Tools Used:
- Genesis Framework
- Dynamik Website Builder (though either Extender Plugin provides the same tools I used, but this can also be done with any theme through hard-coding a Child Theme)
- Google Search
- jQuery.com
- My imagination 🙂
The Screencast:
Code Snippets:
For your Custom Hook Box (hooked into wp_head):
For your JS file/textarea:
Initially playing around:
jQuery(document).ready(function($) {
$(‘.breadcrumb’).click(function() {
$(‘.sidebar’).fadeOut();
});
});
Dragging any element around the page (this was crazy!):
jQuery(document).ready(function($) {
$(‘.breadcrumb’).click(function() {
$(‘*’).draggable();
});
});
Final use-case example:
jQuery(document).ready(function($) {
$(‘.breadcrumb’).click(function() {
var styles = {
width: ‘auto’,
maxWidth: ‘800px’,
float: ‘none’,
margin: ‘0 auto’
};
$(‘.content’).css(styles);
$(‘.sidebar’).fadeOut();
});
});
Have Fun!! 😀
Follow & Share:
