I am trying to find a way to enable my pop up window expand in a similar fashion as the Facebook Birthday popup expands. If you login to your Facebook page and click the "others" link next to where it shows how many of your friends have birthdays today, you will notice the pop up window shows up very small and then grows in a vertical fashion.
How am I able to do this?
I created a fiddle to show what I have so far.
https://jsfiddle.net/05w8fpL5/
I have added..
.fadeIn("slow");
and
.fadeOut("slow");
So far which I like, but I wish I had some say so on how long it took to fadeIn and Out.
Does anyone know how I could accomplish this?
You can achieve this using the .slideUp() and .slideDown events in Jquery. This will provide the vertical expanding animation that you are looking for. So change your .fadeIn and fadeOut functions, an important note that the slide functions do not work with min-height, you will need to remove that CSS from .admin_help_popup for this to work:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow");
});
$('.close_admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideUp("slow");
});
If it's completely necessary you have that min-height property, you can set min-height back to it's default value after .slideDown. You can try and make it smoother by using .animate(). Make sure to set mine-height to 0px on the slide up:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow", function(){
$(".admin_help_popup").animate({"min-height": "380px"}, "fast");
});
});
$('.close_admin_popup').on('click',function(){
$(".admin_help_popup").css("min-height", "0px");
$(".light_admin,.white_overlay").slideUp("slow");
});
Basic SlideUp/Down Fiddle Example without min-height
Fiddle example with min-height
Related
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..
I have a working JSFiddle where I'd like to be able to change how "filled" the progress bar is depending on the button clicked. When I click said buttons, nothing is happening.
I (previously) added in alerts/logs to make sure that I had the click functionality correct and due to those alerts/logs working once a button was clicked, I'm lead to believe that I just have something wrong in the way I am trying to move the progress bar.
$('.quarter').click(function(){
$(this).parent().prev().children('span').css('width','25%');
});
$('.half').click(function(){
$(this).parent().prev().children('span').css('width','50%');
});
$('.three-quarters').click(function(){
$(this).parent().prev().children('span').css('width','75%');
});
$('.full').click(function(){
$(this).parent().prev().children('span').css('width','100%');
});
$(this) is probably not returning what you think it is. Consider that $(this) relates to the container that the code itself is in; ponder on that for a while and make a comment if you need me to elaborate.
David784 has a great solution for your code as is. Alternatively, consider giving the span that is the moving part of your progress bar some identifier. As an example, while the following will work for changing your progress bar to 100%,
$('span').css('width', '100%');
you'll be changing every span in your code if you have them.
Change
$(this).parent().prev().children('span')
to
$('.progress-bar > span')
With jquery, using these .parent().prev().etc chains will never end well. It's too easy to break by making small changes to your DOM.
fiddle
Your paragraph holding the links was closed, but not opened:
<p> <!-- Here -->
25%
50%
75%
100%
</p>
Fixed JSFiddle: https://jsfiddle.net/j6jxpLwx/
I have to do something like pexeso. When you hover element, it will flip front to back side (they have different texts) and when your mouse is out, it will fade from back to front side. This is example HTML, how it looks like:
<div class="pexeso">
<div class="pad">
<div class="front">1</div>
<div class="back">ONE</div>
</div>
etc...
There is some CSS, to look it well (it is in the jsFiddle source, attached bellow). Then Handling mouse enter and leave with jQuery:
$('.pexeso .pad').each(function() {
var el = $(this);
var back = el.find('.back');
el.on('mouseenter', function() {
back.removeAttr('style');
el.removeClass('before-fade').addClass('do-flip');
});
el.on('mouseleave', function() {
el.removeClass('do-flip').addClass('before-fade');
back.stop(true, true).fadeOut(250, function() {
el.removeClass('before-fade');
});
});
});
Here is full example in jsFiddle: DEMO
Try to hover any element from left or right side of your screen, it will works great. But now try to hover from top or bottom, it will do weird things to graphic and also, sometimes it stucks and remains invisible.
Probably know the problem: When you hover from top or bottom, it will start flipping, and when you are too slow, it also fires event mouseleave, because flipping is in progress and you are actually at empty space. Then it calls 1st function, then second, a lot of time and it got stuck. But I don't know how to fix it, can you help me?
Ok guys, don't try anymore, I already found a solution. Whoever is interested, how I fixed it, here is solution:
In CSS, make .back element always visible, so find this line &.do-flip { and add this style .back { display: block !important; }
In jQuery, there is no need to have back.removeAttr('style');, also this did mess with opacity style (fading effect)
Now wrap every "pad" with parent, for example .pad-container and give him exact sizes as .pads, now we will manipulate with him
Each function will take these wrappers, not "pads", so in jQuery $('.pexeso .pad-container').each(function() {...
Bind events mouseenter and mouseleave on this wrapper, but changing classes remain on "pads" and fadeOut effect on back element. Also, add function .show() to this back element before fadeOut.
That's all. Here is updated version: UPDATED DEMO
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/
You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/