I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link
Tried jquery:
$('.dropdown-toggle').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
But it is not working...
In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into
.navbar .btn-group:hover > .dropdown-menu {
display: block;
}
it should work with your example code.
You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)
Try this
jQuery(function ($) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function () {
location.href = this.href;
});
});
Related
this is what i have so far - i'm trying to get the text only to show when the 'timelineTile' is made bigger..
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
fiddle also
Add the following css as well to show text only when box is bigger
.timelineTile table{
display: none;
}
.timelineTile.clicked table{
display: block;
}
http://jsfiddle.net/devools/gjyksjuh/1/
try that fiddle?
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').removeClass('show');
$(this).children('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
I'm developing a horizontal menu with submenus. I need to use Javascript to show the submenu when the user hovers over the parent menu.
I wrote an example in JSFiddle, but it appears to fail in FireFox! In Chrome, IE and Safari is running!
Here's the test page:
www.andreferreira.eu5.org
Here's the code:
jsfiddle.net/R2ySL/
<script>
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function() {
$('li', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"", "color":"#FFF"});
}
);
});
</script>
You can make that without changing css rules via javascript just add the following to your stylesheet
#menu li:hover > a {
color: #debe65;
background-color: #FFF;
text-decoration:none;
}
and javascript should looks like
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function () {
$('li', this).stop(true, true).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!
Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});
Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('.navi').addClass('.navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
http://jsfiddle.net/Samfr/8/
I think hover might be a little better for what you are doing.
http://api.jquery.com/hover/
Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
try this:
define a new class, for example dinamic-li
$('.dinamic-li').on("mouseenter", function () {
$(this).addclass('navi');
$(this).removeclass('navi2');
});
$('.dinamic-li').on("mouseleave", function () {
$(this).addclass('navi2');
$(this).removeclass('navi');
});
Will this work?
JSFiddle
Jquery:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
$(this).attr('class', 'red');
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).attr('class', '');
});
there is my solution:
$('.navi > li').on("mouseover", function () {
$(this).addClass('active').siblings().removeClass(active);
$('.hover-name', this).show();
}).on("mouseout", function() {
if( $(this).hasClass('active'))
$(this).removeClass('active');
$('.hover-name').hide();
});
Working fiddle
Why not use a CSS solution, it's much easier:
.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }
Check your updated Fiddle
http://jsfiddle.net/Samfr/14/
This is that what u mean...
$('.navi > li').on("mouseover", function () {
$(this).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).removeClass('navi2').addClass('navi');
});
When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!
I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
});
});
Using jQuery's one function is perfect for this.
$(function() {
$("#header-translate ul li").click(function(e) {
e.preventDefault();
var $toClose = $("#header-translate li ul")
$toClose.slideToggle(500, function() {
if($toClose.is(':visible')) {
$('body').one('click', function(e) {
e.preventDefault();
$toClose.slideUp(500);
});
}
else {
$('body').unbind('click');
}
});
});
});
What this will do is assure that this click handler will only get executed once, and only when the element is shown.
I believe you need to add a click() handler to the $('body'), and also event.stopPropagation() to your element.
$(function() {
$("#header-translate ul li").click(function(e) { // don't forget that 'e'
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
$("#header-translate").hide();
});
});
You'll want to check if
$(function()
{
var elToHideSelector = "#header-translate li ul";
$("body").click(function(e)
{
if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
{
$(elToHideSelector).hide();
}
});
});
I've used this code:
$(function() {
$("#header-translate ul li").click(function(e) {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
});
});
Add a click handler to BODY tag that will slide the element up and add event.stopPropagation() to the element that opens the element in the first place so the click to open is not send to BODY.
You can add a listener to the document (since the event bubbles up, you can capture it in a parent element)
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
$(document).one('click', function(){
$("#header-translate li ul").hide();
});
});
});