When you hover over the arrow it should toggle the footer down so you can see its content. When the mouse is inside the #footer the div should remain opened so you can read the content.
The problem is when you hover on the arrow the div just opens and closes.
here is a working example: http://jsfiddle.net/MEJgb/1/
try changing this line
jQuery(this).next("#footer_toggle").slideToggle("slow");
to
jQuery(this).next("#footer_toggle").stop().slideToggle("slow");
Or try something like this I guess if I understand your question right
http://jsfiddle.net/MEJgb/21/
Instead of using hover event use click event for this
jQuery("#toggleDiv").click(function() {});
Working Demo is here!!
I hope it will works..
$(document).ready(function() {
// footer Toggle
$("#footer_toggle").hide();
$("#toggleDiv").click(function() {
$("#footer_toggle").slideToggle();
if($("#toggleDiv").hasClass('active'))
$("#toggleDiv").removeClass("active");
else
$("#toggleDiv").addClass("active");
});
});
Related
I have a block of repeating images, each with a caption underneath. I am using slideToggle to show and hide the caption for each image when the image is clicked.
$('.imageholder').click(function() {
$(this).next().slideToggle("fast");
});
A working fiddle showing my method is here.
This works as it should but I want to prevent multiple captions from being visible simultaneously. As a user clicks an image, any open captions should close. In my example, you will see it is possible to open all captions. This is what I want to prevent.
Would appreciate a nudge in the right direction. Thanks.
Just do something like this?
$('.imageholder').click(function() {
$('.description').slideUp();
$(this).next().slideToggle("fast");
});
You should try hiding the other visible elements:
$('.imageholder').click(function() {
$('.description:visible').not($(this).next()).slideToggle("fast");
$(this).next().slideToggle("fast");
});
slideUp() all descriptions that aren't the current one, then slideToggle() the current one.
$('.imageholder').click(function() {
var $desc = $(this).next();
$('.description').not($desc).slideUp('fast');
$(this).next().slideToggle("fast");
});
I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy
I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here..
Is there anybody who know how to add a X (Close button) to the right corner?
The code I am using can be found over here:
http://jsfiddle.net/z1nw3pt4/2/
layer.on('click', function (e) {
document.getElementById("info").innerHTML = feature.properties.name;
$("#feature_infos").stop();
$("#feature_infos").fadeIn("1000");
console.log(feature.properties.name);
});
The code above her is for opening the popup.
When you click any of the dots, the info box is shown using
$("#feature_infos").fadeIn("fast");
You can add an extra element inside the box that does the opposite (.fadeOut("fast")) when you click it:
HTML:
<span class="close">X</span>
JS:
$('.close').click(function() {
$('#feature_infos').fadeOut('fast');
});
Working demo: jsFiddle
The only styling I added is to position the X in the top right, but obviously you can do whatever you want with it. All that matters is binding the fadeOut method to the click event to close the popup again.
I have an issue with jQuery's .hover() method. I have a few paragraphs inside a tags which I use as a menubar. What I intend to do is, if I hover one of these menulinks, a new element gets displayed over the menulink which contains links to submenu links. The problem is, that the .hover() stops working immediately.
I did a simple FIDDLE to show my problem.
Any help is much appreciated.
Edit: Worth to say is, that I also want the sublinks to be clicked, so the hover must be still working then. It only stops when I leave the red div.
What about this?
$('p').hover(function() { $('div').fadeIn(); }, function() { });
$('div').hover(function() { }, function() { $('div').fadeOut(); });
Demo fiddle: http://jsfiddle.net/lparcerisa/1urs0wfr/2/
I write this code to hide div when user click anywhere in body outside this div.. but is wrong what is the problem ?
$('body').click(function() {
$('.mydiv').hide();
});
If u give like this
$('body').click(function() {
$('.mydiv').hide();
});
This DIV will get Hidden even if you click inside the DIV.
Have you tried replacing
hideMenu()
with
$('#cMenu').hide();
Instead of giving that function to the body onclick event, you can make two container divs: One for everything in the body above your menu, and one for everything below your menu within the body tag, and give those two divs the onclick function you're currently giving to the body.