Keeping slide-out div flush with left side of window upon window resize

[Gnuey]

I have a slide-out div, absolutely positioned in a relatively positioned parent, which moves nearly off the left side of the screen upon the click of a button.

I’m animate() -ing the css left property to move it. It looks fine until you resize the window. Upon resize, the div is then either too far into the page or too far outside of the page (depending on if you are enlarging or shrinking the window).

How can I keep the div flush with the page upon resize?

Basically I want the right side of the div to always be 15px from the window border when the div is “slid out”.

I was able to replicate the problem on Codepen, but not jsFiddle:

http://cdpn.io/hjnHz

Click the “<" sign on the top right of the slideout div to slide it out.

[georgearnall]

Probably a less bloated way of doing it but here is an example of how you could do it. [(http://cdpn.io/fGCjg)](http://cdpn.io/fGCjg “http://cdpn.io/fGCjg&#8221;)

If I were trying to do this myself I would probably use CSS Transitions instead of jQuery Animate because I have noticed a tendency for it to be delayed until you finish resizing.

:)

[Gnuey]

Thanks! It even handled the min-width case. Would you recommend just using addClass() along with CSS transitions? I haven’t gotten to test this out on my project yet but will get back on if it works soon.

[georgearnall]

An example that used CSS transitions would look something like this: [http://codepen.io/georgearnall/pen/Kzkqa](http://codepen.io/georgearnall/pen/Kzkqa “http://codepen.io/georgearnall/pen/Kzkqa&#8221;)

And would be even easier if you did not need a `min-width` : [http://codepen.io/georgearnall/pen/cHBAx](http://codepen.io/georgearnall/pen/cHBAx “http://codepen.io/georgearnall/pen/cHBAx&#8221;)
Plus, by changing `addClass` to `toggleClass` you could easily have this box hide and unhide from view.

The only thing to mention about CSS transitions is browser computability but you should ask yourself wether animated transitions are just a nice touch or a key part of your design.

Hope this is useful.

[Gnuey]

Thanks so much! Yes this was really really helpful, and that was great code. Many kudos!

Btw, sorry I don’t mean to be creepy and snoop, but the “young developers” thread really caught my attention (since I’m kinda young-ish as well), and I think it’s really impressive that you’ve just been developing for half a year. I’m 19 and tentatively started javascript/jQuery last year and went through a year of computer science. You should definitely keep it up, like the others said!

[georgearnall]

Yeah, as you may have read I’ve been doing a few client sites for practise ( + money :P ) and have only just recently started using these forums to help people. I haven’t really done much in the way of learning jQuery myself. I basically just learn it as I need it but generally all I ever use it for is toggling classes.

For the time being, I am definitely going to continue doing this because its fun! Plus, it does help me afford things :)

[Gnuey]

Oh nice! Yeah that is the best way to go about it. It’s great that you’re getting paid while building up a portfolio. I tried to do some volunteer web design and I spent wayy too much effort and time into it, however it did get me a job which I’m thankful for.

All that being said though, I think the most important thing is that it’s fun and stays fun. Don’t ever let it become a “job” (even if it is a job), or anything so that it is no longer fun. I’m not that experienced either, but that’s my opinion so far at least!

[Author]

Posts