I am using this drop down menu code: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ and I am trying (with no success) to keep the top level highlighted even when the mouse moves down to the lower links on a dropdown menu.
The html:
<ul id="jsddm">
<li>JavaScript
<ul>
<li>Drop Down Menu</li>
<li>jQuery Plugin</li>
<li>Ajax Navigation</li>
</ul>
</li>
<li>Effect
<ul>
<li>Slide Effect</li>
<li>Fade Effect</li>
<li>Opacity Mode</li>
<li>Drop Shadow</li>
<li>Semitransparent</li>
</ul>
</li>
<li>Navigation</li>
<li>HTML/CSS</li>
<li>Help</li>
</ul>
The original Javascript:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
P.S. Three cheers to the guy that wrote this, I love it, keeps my html super clean and easy to update.
Add
ul li:hover {
background:...
}
In your stylesheet and you should get the desired effect. because your submenu is nested within your list item - whilst hovering over your sub-menu you a still effectively hovering over its parent (list item) also.
You can keep the hover on ul li a - if you like but this won't keep your styles as the submenu is not nested within it.
Related
How can I make my webpage switch buttons from on hover to on toggle when the width of the screen is less than 769px.
The hover or toggle script is selected based on what size the browser starts on and cannot switch when changing the size .
$(document).ready(myFunction);
function myFunction() {
var ww = document.body.clientWidth;
if (ww < 769) {
$(".button").click(function() {
$("ul").toggle();
});
} else {
$(".button").hover(function() {
$("ul").toggle();
});
}
}
.button {
display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Men
<ul class="menu">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
Add document ready and resize events, both of them combined, to make when the document is ready and when the window is resized too.
I make an improvement with the events, take a look at the on() function
$(document).ready(myFunction);
$(window).on('resize', myFunction);
function myFunction() {
var event;
var ww = document.body.clientWidth;
if (ww < 769) {
event = "click";
} else {
event = "hover";
}
// here is the improvement
$(".button").on(event, function() {
$("ul").toggle();
});
}
.button {
display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Men
<ul class="menu">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
click and hover are used to add event handlers not trigger events, to manually cause an event use trigger().
I have a fixed height unordered list <ul> with fixed height list items <li>
My ul height is 600px and it contains 200 li items with 40px height.
I need to create a script which scrolls down the list when the mouse hovers the bottom of the list and scrolls up when the mouse hovers the top of the list.
I tried this: http://archive.plugins.jquery.com/project/hoverscroll but it is not as smooth as it should be, so I need to create a custom one (maybe not using jQuery at all).
Any ideas or examples? How can I achieve the desired effect?
Thanks
Try to use $wrapper.animate({scrollTop: step});
for example
JS:
var isScroll = false;
$(document).ready(function () {
$('#up').hover(function () {
isScroll = true;
gotoNext(true);
}, function () { isScroll = false; });
$('#down').hover(function () {
isScroll = true;
gotoNext(false);
}, function () { isScroll = false; });
});
function gotoNext(dir) {
if (isScroll) {
isScroll = true;
var step = dir ? '-=20' : '+=20';
$('#wrapper').animate({
scrollTop: step
}, 200, "linear");
setTimeout(function () { gotoNext(dir); }, 200);
}
}
HTML:
<div style="height:10px; background:green; width:200px;" id="up"></div>
<div style="height:200px; overflow:auto; width:200px;" id='wrapper'>
<ul>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
<li style="height:30px;">7</li>
<li style="height:30px;">8</li>
<li style="height:30px;">9</li>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
</ul>
</div>
<div style="height:10px; background:green; width:200px;" id="down"></div>
it is looks pretty good for me
Why not devide your screen into a grid? once the mouseX and mouseY hit the top grid it will scroll up with a predefined integer value
I've written a simple accordion-style navigation sidebar (several lists of nav options):
<nav>
<ul>
<li class="section">
<h2>Section 1 Header</h2>
<ul>
<li>First Option</li>
<li>Second Option</li>
<li>Third Option</li>
</ul>
</li>
<li class="section">
<h2>Section 2 Header</h2>
<ul>
<li>First Option</li>
<li>Second Option</li>
<li>Third Option</li>
</ul>
</li>
</ul>
...
</nav>
jQuery script that hides/reveals lists of nav options when a given section's h2 is clicked:
$(document).ready(function() {
$('li.section ul').hide();
$('li.section h2').click(function() {
$(this).toggleClass('active');
$(this).parent().children('ul').toggle('blind', { direction: 'vertical' });
});
});
The whole effect works fine, but I'm running into trouble with double-clicks.
The animation of the accordion effect is handled by the script above--but the "highlight" color of the activated header area is handled with a simple CSS3 transition, which takes effect when the class is toggled by the script.
When I double-click the h2, my toggle blind animation fires only once (which I like), but the toggleClass happens twice (so I'm switched quickly into and out of the 'active' state--leaving it out of sync with the state of the blind animation).
Is there a way to ignore the second click of a double-click so this toggle only happens once per toggle animation?
Or maybe it's better to think of it as ignoring a given section's h2 click events while the toggle blind animation is happening on that section...?
Try making the header area "active" after toggle completion. I have not tested, just make a try.
$(document).ready(function() {
$('li.section ul').hide();
$('li.section h2').click(function() {
var thiz = $(this);
thiz.parent().children('ul').toggle('blind', { direction: 'vertical' }, function() {
// make it active after toggle
thiz.toggleClass('active');
});
});
});
Maybe..
....
$('li.section h2').bind('click dblclick',function() {
....
or
$(document).ready(function() {
$('li.section ul').hide();
$('li.section h2').click(function() {
$t = $(this); /* Aliased for ease of use */
if( !$t.hasClass('active') ){
/* Not marked as Active yet */
$('li.section h2.active')
.not($t)
.removeClass('active')
.parent().children('ul')
.toggle('blind', { direction: 'vertical' });;
/* Above assumes you want only one h2 to be active at a time.
If not, remove the above two lines... */
$t
.toggleClass('active')
.parent().children('ul')
.toggle('blind', { direction: 'vertical' });
}else{
/* Already Active! Do Nothing!! */
}
});
});
I am using jstree to build a tree menu.
When you select an item in the tree a div on the right brings up certain information. The information can be deleted.
When it is deleted I remove that item from the tree.
The problem is when the last li is removed from the ul, I need to remove the ul and also remove the "open" and "close" classes from the parent li and add the class "leaf".
I am having a hard time targeting the ul and in turn targeting the parent li as well.
I have to use the "clicked" class as a starting reference.
Here is the tree html:
<li id="447" class="open">
<ins> </ins>ZigBee Remote Pairing-D
<ul>
<li id="470" class="leaf last clicked">
<ins> </ins>RCA TV2 - Audio Quality-F
</li>
</ul>
</li>
here is the jquery:
var numLi = $(".clicked").parent("ul:first > li").size();//get number of li in ul
if (numLi == 1){
$(".clicked").parent("ul:first").parent("li:first").removeClass().addClass("leaf");
}
$(".clicked").parent("li:first").remove();//remove the list item from the tree
Something like this should work:
var clickedLi = $('.clicked').parent('li');
var parentUlOfClickedLi = clickedLi.parent('ul');
if (parentUlOfClickedLi.children('li').length === 1) {
parentUlOfClickedLi.parent('li')
.removeClass('open close')
.addClass('leaf');
}
clickedLi.remove();
I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.