We Keep Coding

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});

I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!

You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.

You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

Bootstrap popover: hide when cursor moves outside of the window

I want to display a popover which contains several buttons when user hovers over a text link
The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)
This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.
But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).
Funny thing: it works with another div! If I replace
$('.popover').mouseleave(function(){
$('#example').popover('hide');
});
By this
$('.square').mouseleave(function(){
$('#example').popover('hide');
});
The popover is indeed hidden when no longer hovering the blue square.
Why doesn't work with .popover?

You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document
$(document).on('mouseleave','.popover-content',function(){
$('#example').popover('hide');
});
http://jsfiddle.net/o4o9rrsq/2/

Click function making page scroll in odd way (not to top of page)

First time asker, long time lurker.
I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.
That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.
Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.
But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.
There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.
Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML.
The code for both toggles is the same, just with the IDs switched around.
The script:
$('#left-toggle > a').click(function(c)
{
c.preventDefault();
c.stopPropagation();
$('#right-toggle').removeClass('toggle-active');
$('#left-toggle').addClass('toggle-active');
$(pricing_subscriptionID).fadeOut('fast', function(){
$(pricing_singleID).fadeIn('fast', function(){
});
});
});
The HTML for the toggles:
<div id="chart-toggle">
<div id="left-toggle" class="toggle-active">Single Pricing</div>
<div id="right-toggle">Subscription Pricing</div>
</div>
"toggle-active" is just for styling.
Any ideas?
It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.
JSFiddle: http://jsfiddle.net/TmrLw/

It's because of your link to #. Here are some ways you can fix this:
1. Replace "#" with something else
Instead of
Subscription Pricing
Try this:
Subscription Pricing
This will give you the cursor pointer you're looking for and avoid the page jump.
2. Create a class with the pointer effect
If you use this CSS rule:
.pointer {
cursor: pointer;
}
Then you can wrap your text with this class instead:
<div class="pointer">Subscription Pricing</div>
3. Remove the default effect of "#"
This Javascript will get rid of its default effect:
$('a[href="#"]').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
Hope this helps

Probably its because the link's href is # which links to the top of the document.
try to remove the href attribute

Jquery Remove Clear Top CSS attribute

I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks

Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.

Homemade Jquery lightbox, but z-index won't change back afterwards

So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});

Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});

This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});