Creating Horizontal Sliding Effect for Multiple Divs

[sukhmeet032795]

I have multiple divs. I am trying to create horizontal sliding effect for these divs when the adjacent div is clicked. I am trying to replicate this effect http://www.themezaa.com/html/resume/default/index.html?page=introduction

I am a beginner to FrontEnd development and have spent an entire day on this making it complex in every way possible. Can anyone help me with the correct approach?

I would be very grateful :).

[Paulie_D]

We’d need to see what you have so far, ideally in a Codepen.io demo but the site you linked is quite complex and not an easy thing to achieve for a “beginner”.

[sukhmeet032795]

Hi,

Sorry for the late reply. Here is the link to my initial design.

http://codepen.io/sukhmeet032795/pen/pRJRMm

I have created this based upon the link. I still can’t figure out why it is not perfectly working. Also what should be the ideal approach?

[Shikkediel]

If you bind the event to #next and then change the id to another element, the handler will still be cached for the original element. To make this “dynamic” (so that it will always pick the current element with the id), you can use a delegated event handler:

$('.container').on('click', '#next', function() { .. });

[sukhmeet032795]

Thank you Shikkediel for your reply. Is my approach correct for sliding the divs when the next one is clicked?

[Shikkediel]

It seems to be working fine. Although it might not be very intuitive as a sole option to have to click on the box itself for the average visitor. Adding a more obvious navigation might be a good idea. Personally, I would use translate instead of margin to change position. Doing this will be a bit “lighter” on CPU drain.

[Author]

Posts