Jumpy container on first click
Page 1 of 1
dingo_d
VIP Member



Posts: 14555

PostPosted: Tue, 31st Mar 2015 14:29    Post subject: Jumpy container on first click
http://stackoverflow.com/questions/29368397/jump-animation-on-first-click-normal-on-second

I have a 'featured gallery' element. When you click on the image you get all the info stored in data attributes in another div that should expand underneath the image you've clicked on. The problem is that when I click the first time, the window just jumps open (my guess is that it has to do with the fact that I'm detaching the div and attaching it to the correct row).

If you close it, and open it again, the animation is nice and smooth.

Any idea why is this happening?


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
Interinactive
VIP Member



Posts: 29477

PostPosted: Wed, 1st Apr 2015 02:29    Post subject:
⁢⁢


Last edited by Interinactive on Tue, 5th Oct 2021 01:04; edited 1 time in total
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Wed, 1st Apr 2015 03:11    Post subject:
I answered your question dingo, but honestly, that is one terrible solution dude Laughing

Some tips:
There is no need to set a timeout to run an action after a jQuery animate is complete. That is what callbacks are used for:
previously
Code:
    $(document).on('click', '#close_wrapper', function(e) {
        e.preventDefault();
            $loaded_content.animate({
                    height: 0}, 500, "linear")
            setTimeout(function(){
                $loaded_content.hide()
            }, 500);
            $('#pointer').hide();
    });


afterwards:
Code:
    $('#close_wrapper').on('click', function() {
            $loaded_content.animate({height: 0}, 500, "linear", function(){
                $loaded_content.hide();
                $('#pointer').hide();
            });
    });



$(document).on('click')
^^ is terrible if you don't do it on purpose. Every single click on your page will be registered by jQuery and then a check will be done if the clicked element somehow matches your css selector.
Instead you should attach the event registration ONLY on your target element. (by doing detachments and other silly stuff with your dom, you can break even handling though! Don't fuck with your dom if you attached events!)

$(...).animate has a callback function
animate({what}, howlong, how, function(){thisShouldHappenWhenTheAnimationIsOver});

and much more Smile


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Wed, 1st Apr 2015 09:14    Post subject:
That code was a leftover when I used AJAX to pull the info from the post into the container (and that just took too long, so we dropped the AJAX and decided to use data-* instead). Then the close wrapper wasn't in the document, untilthe AJAX call, so I had to do it like this. I'll fix it.

Now that I look at the code, it's too big and clunky, and I should do half of the transitions with css instead.


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Wed, 1st Apr 2015 10:20    Post subject:


Sorry for being cranky, it was very late yester... uh... today Laughing


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Wed, 1st Apr 2015 12:19    Post subject:
Crancky? Didn't notice really Very Happy

Any time I can learn how to code better (by someone pointing out the flaws) is a good thing Very Happy


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
shole




Posts: 3363

PostPosted: Wed, 1st Apr 2015 14:49    Post subject:
unrelated to actual question, the given $this=$(this) tip is very worthwhile
creating a jquery object every single time is super expensive
if fiddling with dom in a loop, cache the jq object outside the loop function
Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Wed, 1st Apr 2015 15:06    Post subject:
shole wrote:
unrelated to actual question, the given $this=$(this) tip is very worthwhile
creating a jquery object every single time is super expensive
if fiddling with dom in a loop, cache the jq object outside the loop function
Then give me a thumbs up on stack Very Happy


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Fri, 3rd Apr 2015 09:52    Post subject:
I've created a git https://github.com/dingo-d/featured-portfolio

I added slideToggle, that seems to be working the best, and I've floated the elements, and now the transitions is great. The only thing that is not that great is that I need to make it so, that when I have opened an image, when I click on other image, they'll load in the container without closing it.

Now it just toggles the slide.

How should I fix this? Add a class, and then check if it has a class and toggle the slide, and if it doesn't have a class not toggle it? Any tip?


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
PumpAction
[Schmadmin]



Posts: 26759

PostPosted: Fri, 3rd Apr 2015 09:58    Post subject:
Only call the slide toggle to close when you click on the same element again.


=> NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse
Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Fri, 3rd Apr 2015 12:16    Post subject:
How do detect if I have clicked on the same element? With event.target?


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
dingo_d
VIP Member



Posts: 14555

PostPosted: Thu, 16th Apr 2015 10:07    Post subject:
Ok I've fixed it, and it works great (especially on wordpress theme I'm working on atm Very Happy)

https://github.com/dingo-d/featured-portfolio


"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson
chiv wrote:
thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Back to top
Page 1 of 1 All times are GMT + 1 Hour
NFOHump.com Forum Index - Programmers Corner
Signature/Avatar nuking: none (can be changed in your profile)  


Display posts from previous:   

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group