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
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!
I have the following jQuery code at 2 places of the same JS file;
$("#myGrid").delegate(".icon-right", "click", function() {
//Some code
});
$("#myGrid").delegate(".icon-down", "click", function() {
//Some code
});
So the diff is I am listening to click events on icon-down/icon-right
Is it possible to optimize / merge these 2 statements ?
Combine both of them
$("#myGrid").delegate(".icon-right", "click", function () {
//Some code
}).delegate(".icon-down", "click", function () {
//Some code
});
Use .on() after jQuery 1.7
Make the selector match both:
$("#myGrid").delegate(".icon-right,.icon-down", "click", function() {
//Some code
});
Try to use the multiple selector,
same function for all the elements:
$("#myGrid").delegate('click','.icon-right,.icon-down', function(e){
});
different functionality for different elements:
$("body").delegate('click','.icon-right,.icon-down', function(e){
if ($(this).is('.icon-right')) { }
else { }
});
yes you can do this:
$("#myGrid").delegate(".icon-right, .icon-down", "click", function () {
if(this.className === 'icon-right'){ // some code}
else if(this.className === 'icon-down'){ // some code}
});
If you are using jquery 1.7+ then you can try with .on() with switch:
$("#myGrid").on("click", ".icon-right, .icon-down", function () {
switch(this.className){
case 'icon-right':
//some code
break;
case 'icon-down':
// some code
break;
}
});
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 use this to toggle the sidebar:
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle();
});
});
you can see it work here:
http://jsfiddle.net/Jacob_Sell/Ye7wp/
I think the toggle looks to jumpy at the moment, how can I add a transition to make it look smoother?
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(300);
});
});
Updated DEMO
http://jsfiddle.net/Praveen16oct90/Ye7wp/4/
**$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(2000);
});
});**
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");
}
});
}
});