jQuery Next-In-DOM is a jQuery plugin for traversing the DOM in a top-down fashion looking for a matching next/previous element regardless of the actual DOM structure. It is like looking vertically up/down from an element on a printed out version of the DOM till you find a match.
Check it out here: http://techfoobar.com/jquery-next-in-dom/
jQuery Style Listener is a jQuery plugin that monitors changes to computed style and issues a callback when it detects one (i.e. a change). It takes in an array of styles to monitor and a callback function to call when the value of one of the styles changes.
Check it out here: http://techfoobar.com/jquery-style-listener/
Supposed you wanted to trigger the click on a link programmatically via jQuery, the following will likely be the first thing you try.
Suppose your link is like: <a id="foo" href="http://mysite.com">Hello</a>
Your code would be: $('#foo').trigger('click'); or $('#foo').click();
Unfortunately, the above won’t work.
You might then attempt to add a dummy event handler that returns true in the hope that it will cause the default action to take place. That wont work too.
Fortunately, there is one technique that works. We can dynamically create a form element with the href of the link we want to click as its action attribute, and then trigger a submit on this form. It goes like:
var a = $('#foo');
// create a temporary form with the href of the link as action and method as get.
$('<form/>')
.attr('id', 'dummyForm')
.attr('action', a.attr('href'))
.attr('target', a.attr('target'))
.attr('method', 'get')
.appendTo('body')
.submit(); // submit it
setTimeout(function() {
$('#dummyForm').remove(); // remove the temp form
}, 100);
Lets create a multi-level drop-down navigation menu. OK. Big deal. But wait, I need it to function even if JS is disabled (No, I don’t need graceful degradation. Thank You.). I want it made using 100% CSS and HTML.
The :hover Selector
The CSS :hover selector can be taken advantage of in a rather interesting way. As we already know, the :hover selector gets applied to an element when you hover your mouse over it. This is something we regularly use for links. But no so much for other elements. In fact, we can hook into this class change for detecting mouseover events.
Explanation
An element with class “a” becomes one with “a:hover” when the mouse pointer is over it.
.a { /* normally */
}
.a:hover { /* help! the mouse is on me */
}
If it has a child element with class “b”, we can style it as:
.a .b {
}
Now lets say, b is normally not shown. It should be shown only when the mouse is over a.
.a .b {
display: none;
}
.a:hover .b { /* b will be visible only when mouse is on a */
display: block;
}
That is the basic “event handling” for the menu. Entirely with CSS, we alter the “display” property of an element when the mouse is over its parent. In the above example, “a” can be considered a menu item containing sub-items, and “b” can be considered as the element holding the child menu items.
Demo here: http://www.techfoobar.com/examples/purecssmenu.html
CSS
<style>
.menu {
overflow: visible;
}
.menuitem {
position: relative;
overflow: visible;
background-color: #eee;
border: 1px solid transparent;
color: #444;
padding: 1px 6px;
cursor: pointer;
}
.menuitem:hover {
background-color: #777;
color: #fff;
}
.subitems {
position: absolute;
padding: 3px;
border-radius: 5px;
border: 1px solid #777;
display: none;
width: 120px;
background-color: #eee;
}
.menu > .menuitem {
float: left;
clear: none;
margin-right: 10px;
border-radius: 3px;
}
.menu > .menuitem > .subitems {
top: 20px;
left: 10px;
z-index: 2;
}
.menu > .menuitem:hover > .subitems {
display: block;
}
.subitems > .menuitem {
}
.subitems > .menuitem > .subitems {
top: 5px;
left: 50px;
z-index: 4;
}
.subitems > .menuitem:hover > .subitems {
display: block;
}
</style>
HTML
<div class="menu">
<div class="menuitem">Home
<div class="subitems">
<div class="menuitem">Home #1</div>
<div class="menuitem">Home #2</div>
<div class="menuitem">Home #3</div>
</div>
</div>
<div class="menuitem">About
<div class="subitems">
<div class="menuitem">Home #1
<div class="subitems">
<div class="menuitem">Home #1</div>
<div class="menuitem">Home #2</div>
<div class="menuitem">Home #3</div>
</div>
</div>
<div class="menuitem">Home #2</div>
<div class="menuitem">Home #3</div>
</div>
</div>
<div class="menuitem">Hello
<div class="subitems">
<div class="menuitem">Home #1</div>
<div class="menuitem">Home #2</div>
<div class="menuitem">Home #3</div>
</div>
</div>
</div>
Proudly powered by Wordpress and designed by code reduction
About Me