I have a working concept of User clicks on image to display a div.
I use the javascript:void(0); and onclick="showElem('div40');" to open and close the divs
I have a jsFiddle here: http://jsfiddle.net/dillon/M4t5Q/
What I want is to only allow one div to be open at a time. So if one of the divs is open, it will close when another is clicked on.
I couldn't figure out a solution by myself so I would love any help.
The simplest solution would just be to modify showElem so that it closes all possibly open divs before opening the active one.
To hide all currently open DIVs, you can use:
// close all other DIVs with class 'show'
var currentlyShown = document.getElementsByClassName('show');
for(var i in currentlyShown) {
currentlyShown[i].className = 'hide';
}
Demo: http://jsfiddle.net/M4t5Q/3/
Related
on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear.
From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.
The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems
As I already mentioned the links are within this div.
unfortunately I cannot add a class or an id to the links because I only have frontend access.
The website is here.
https://test.vereinonline.org/HTC_Uhlenhorst/?module=*Tennis Please note that the menu button only appears on mobile devices (width < 1000px)
In this jsfiddle the Problem is scaled down to the root.
http://jsfiddle.net/TheBB23/d6s3Ln50/3/
I am pretty sure that the problem is with the javascript:
document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
document.getElementById('mobilemenuitems').remove();
});
I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -
$('a').click(function(e){
e.preventDefault();
if ($(this).parents('.mobilemenuspace').length) {
$('.mobilemenuspace').hide();
}
});
Working sample - https://jsfiddle.net/zv18xuhL/
A pure JS solution forked from your Fiddle -
http://jsfiddle.net/e69snqjk/
I am using the [jsImageBox jquery plugin][1]. It allows one to make an image gallery. Anyone know how to close the image popup by clicking anywhere on the image instead of having to click the x on top right.
]: http://static.tumblr.com/qrevc1p/3FWlxvqbb/jsibox_basic.js
You can use the jquery on click behavior to close the image dialog.
If your images div is with id="images"
$("#images").click(function(){
$("#images").hide(); // or change the element attribute which ever closes the div
});
Please share your code to help you better.
Looking through the code reveals that you can set your own methods of closing the image. Simply call the jsiBoxClose() function included in jsibox_basic.js.
I am Playing around with
http://codepen.io/ettrics/pen/Jdjdzp
But because of the
var closers = $qsa('.modal__close'); // an element used to close the modal
If you put a link inside the container it wont work with left click but does with right click -> open link in new tab.
Is there anyway to keep the close element but also make it so links work?
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
I have a super fish menu, the delay is set to 800, but when I move from one drop-down to another it still shows the previous drop-down and the new drop-down at the same time. until the 800ms delay is over then the previous drop-down goes away. I do not want to change the delay, but if a new drop-down is opened, I want the previously opened drop-down to close right away without delay. I hope this makes sense.
Is there a way to do that?
Thanks!!
Click to view
On its website, delay is set to 800 and I guess it works fine, it doesn't display old popup. Did you make any other changes in its code?
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Edit:
Ok here is a solution if you don't want to modify your multiple UL menu structure to a single UL. Just give unique ids to each UL, then modify over = function() in superfish.js like this
over = function(){
var $$ = $(this), menu = getMenu($$);
$('.sf-menu').each(function(){
if ($(this).attr('id') != $(menu).attr('id')) {
$(this).hideSuperfishUl();
}
});
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
this may cause some other side effects but I don't see any for now.