I'd like to optimize this script on multiple div's.
Now is working, but for single div.
$(document).ready(function(){
$(".hideDiv").hide();
$(".buttonshow").show();
$('.buttonshow').click(function(){
$(".hideDiv").slideToggle();
$(".buttonshow").hide();
});
$('.buttonhide').click(function(){
$(".hideDiv").slideToggle();
$(".buttonshow").show();
});
});
DEMO
Try:
$(document).ready(function () {
$(".hideDiv").hide();
$('.buttonshow').click(function () {
$(this).next(".hideDiv").slideToggle();
$(".buttonshow").hide();
});
$('.buttonhide').click(function () {
$(this).parent().slideToggle();
$(".buttonshow").show();
});
});
jsFiddle example
JQuery:
$(".hideDiv, .buttonshow").toggle();
$('.buttonshow').click(function(){
$(".hideDiv, .buttonshow").slideToggle();
});
$('.buttonhide').click(function(){
$(".hideDiv, .buttonshow").slideToggle();
});
CSS:
.hideDiv{
display: block; } .buttonshow {
display: none; }
DEMO
Related
Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}
It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc
I have container, contain numbers of box images. when i mouseover the image hide box will appear on the image. but when i use this script all the box get open...
$(".conbx img").mouseover(function() {
$(".topics-active").show()
});
$(".conbx img").mouseout(function() {
$(".topics-active").hide()
});
jsfiddle.net/xqfv3fhq
You've to get the current elements siblings.
$(".conbx img").mouseover(function() {
$(this).siblings(".topics-active").show()
});
Demo: https://jsfiddle.net/tusharj/xqfv3fhq/1/
Optimizations
$(".conbx").on('mouseover', 'img', function() {
$(this).siblings(".topics-active").show()
}).on('mouseout', 'img', function() {
$(".topics-active").hide()
});
Alternatively, you can also use hover:
$(".conbx img").hover(function() {
$(this).siblings(".topics-active").show()
}, function() {
$(".topics-active").hide()
});
Use this
$(".conbx img").mouseover(function() {
$(this).next('.topics-active').show()
});
$(".conbx img").mouseout(function() {
$(this).next('.topics-active').hide()
});
use this
$(".conbx img").mouseover(function(){
$(this).closest('.fltlft').find(".topics-active").show();
});
$(".conbx img").mouseout(function(){
$(this).closest('.fltlft').find(".topics-active").hide();
});
DEMO HERE
or you can just use just css without need to jquery at all
.fltlft:hover .topics-active{
display: block;
}
DEMO HERE
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;
});
});
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');
});
});
On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
Try this :
script :
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hover');
}, function () {
$('#wrapper').removeClass('hover');
}
);
style :
.hover {
display : block;
background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn { display: none; }
.hover #Image_logo { display: none; }
.hover #headlineText { display: none; }
Fiddle : http://jsfiddle.net/U4EF8/7/
$("#searchput").hover(function() {
$('#wrapper').addClass("hover");
}, function() {
$('#wrapper').removeClass("hover");
});
Here is the Code :
$(document).ready(function(){
$( "#disclaimer" )
.mouseover(function() {
$('#wrapper').addClass('hovered');
})
.mouseout(function() {
$('#wrapper').removeClass('hovered');
});
});
and my html is :
<div id="wrapper"></div>
<div id="disclaimer" style="border:1px solid black;">
hello
</div>
Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!
did you already try this ?
$('#disclaimer').mouseenter(
function () {
$('#wrapper').addClass('hovered');
}
);
$('#disclaimer').mouseleave(
function () {
$('#wrapper').removeClass('hovered');
}
);
or with pure css
#disclaimer:hover {
//put any attribute on "hovered" class here
}
or maybe i don't understand your question enough.