I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?
you can use jquery mouseout()
Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});
This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});
Related
I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.
You just need to change the if condition so it depends on the value of white-space property:
$(document).ready(function () {
$('tr').click(function () {
var $this = $(this);
if($this.css('white-space') === 'nowrap') {
$this.css('white-space', 'normal');
}
else {
$this.css('white-space', 'nowrap');
}
});
});
You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:
$(document).ready(function () {
$('tr').click(function () {
if($(this).css("white-space") == "nowrap") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
Hopefully this helps!
To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/
I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.
toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed.
I tried using if else with no sensible results. Am I missing something here?
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("footer").hide(300);
} else {
$("footer").show(300);
}
});
});
});
Try this,
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300, function(){
if($("p:visible").length == 0)
$("footer").show(300);
else
$("footer").hide(300);
});
});
});
Check jsfiddle
try like this:
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("#footer").hide(300);
} else {
$("#footer").show(300);
}
});
});
});
I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo
I have a pretty basic code html code for a dropdown, as can be seen here it works, but is there a way to simplify this js code?
$(document).ready(function() {
var n = ".dropdown-menu", no = 'drop';
$('.dropdown').click(function () {
if($(n).hasClass(no)) {
$(n).removeClass(no);
} else {
$(n).addClass(no);
}
}).mouseover(function() {
$(n).addClass(no);
}).mouseout(function() {
if($(n).mouseover()){
$(n).removeClass(no);
}
})
});
please note that I am aware that I can go css only by adding just one line.. so that isn't the question.
#navigation-top #navigation-holder li:hover > ul {
display: block;
}
We can use toggleClass instead of add/remove class.
In the below code we can remove the if check and directly call removeClass
if ($(n).mouseover()) {
$(n).removeClass(no);
}
So the final optimized code like this:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).mouseover(function () {
$(n).addClass(no);
}).mouseout(function () {
$(n).removeClass(no);
})
Fiddle Demo
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function() {
$(n).addClass(no);
}, function() {
$(n).removeClass(no);
}
);
Not tested, but that should do what you're looking for.
Refs:
https://api.jquery.com/toggleClass/
https://api.jquery.com/hover/
Off the top of my head, use toggleClass() to optimize the class switching
As well as the use of hover() to replace mouseover & mouseout events.
Therefore your code will turn out this way:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function () {
$(n).addClass(no);
}
,function () {
$(n).removeClass(no);
}
);
JS Fiddle Link: http://jsfiddle.net/g9zyd/4/
You can use toggleClass method from jQuery library, and some little trick to do your task!
function rp(el){
$(n).toggleClass(no, el.data);
}
var n = ".dropdown-menu",
no = 'drop';
$('.dropdown').click(rp).mouseover(true, rp).mouseout(false, rp);
Try demo
I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});