Develop Reference

Close popup on content click in jsImageBox

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.

Prevent closing of a navbar with another element's trigger click

I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.
Here is the twitter scroll code:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.

For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.
Simply add 'data-autohide="false"'to the offcanvas element.
I then added a function to toggle the navbar state on click of a link within the navbar as follows;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.

If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
in your code. that's it.
Note: It's work like charm in single page application.

Using JavaScript to hide a div placed in front of an iframe after clicking any link

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.

Javascript open/close div using onclick="showElem

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/

Remove all instances of object

Edit: Example - http://jsfiddle.net/JWx7z/9/
I'm using a lightbox plugin https://github.com/premasagar/nitelite and I'm hacking it a bit to get it to behave how I want.
The lightbox is made up of two elements: the overlay (dark slightly transparent window), and the content containing window.
Normally when a lightbox is closed the overlay is faded out and removed. When opening a lightbox it is added and faded in.
However when traversing from lightbox to another lightbox this makes the transition undesirable. I have hacked it so the old overlay remains, and the new overlay is aborted if we are going between 2 lightboxes, so it is just the content window that changes.
This means of course the overlay is a seperate instance of the lightbox to the current content window. Which in turn means when I try and close the lightbox by clicking on the overlay, only the overlay is removed - leaving the content window still on my page.
...
$(this.overlay)
.bind('add', function() {
this.node
.one('click', function(){
lb.close();
});
});
Note: Each instance of the lightbox is called lb.
I can remove this window by adding an artificial click to the close button:
$('#lightbox p.close a').click();
but this has reprecussions later as some remnants of lb still exist - for example if I want to open a new lightbox it thinks a lightbox already exists and we're moving between the two, so doesn't add an overlay as it thinks there is already one there.
How can I work it so all instances of lb are closed when clicking on the overlay?
Thanks
Edit: Code for aborting addition of overlay if coming from a lightbox
...
open: function(contents, transition){
var lb = this;
if (transition !== 0) {
this.overlay.add();
}
...

You can change your overlay click function to fadeOut the .nitelite-lightbox-container as well on close:
$(this.overlay)
.bind('add', function(){
this.node
.one('click', function(){
...
$(this).next('.nitelite-lightbox-container').fadeOut();
lb.close();
});
});
See fiddle.
It alerts "lb already exists" when you reopen the lightbox, however it still behaves correctly.