CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
llama
llama

Reputation: 55

Sliding css and js content filter

I'm making a jquery mobile app and have a page that needs to filter some posts. I have the posts put in as well as the design of the filter.

You can see what it looks like below:

enter image description here

I've been trying to animate it so if the user presses "social" on the right, "outside" and "business" will get pushed out to the left so the filter you have selected is always in the centre, between the two dividers.

Here's an example of the sort of js I was going to use to move the divs around but just for 1 div instead of 3:

$(function(){
    var c=0;
    $("#click").click(function(){
        $(this).stop().animate({left: ++c%2*100 }, 'fast');
    });  
});

The problem i was having is that if the user was to press the button on the right or left every time it would need to have an infinite number of divs sliding in and I was just wondering how to implement this.

Here's a jsfiddle with the assets I'm using (Without the jquery mobile styling) https://jsfiddle.net/xczy346z/

EDIT: Here's also a gif of what I want to happen if you can't understand what I'm trying to make. Example Gif

Upvotes: 3

Views: 429

Answers (2)

Asons
Asons

Reputation: 87191

Theoretically, may I suggest that you remove your dividers (#divider_***), both from the html and css, and add them as a pseudo on the text_slider like this

#text_slider:after {
  content: "";
  position: absolute;
  left: 33%;
  top: 10%;
  bottom: 10%;
  width: 33%;
  border-left: 1px solid white;
  border-right: 1px solid white;
  pointer-events: none;
}

Doing like this keeps the side_scroll clean and only the "buttons" to work with when animate.

Now you can simply just animate your side_scroll to right or left having the selected "button" in the middle no matter how many they will be.

Here is an updated fiddle of yours showing the pseudo:

Upvotes: 0

hardcoder
hardcoder

Reputation: 184

Use this javascript 

$(document).ready(function(){
    $("#social_one").click(function(){
        $("#side_scroll").animate({marginLeft: '-=130px'}, 500);
    });
});

`

Upvotes: 1

Related Questions