Filtering content with a sliding effect using CSS and JavaScript

I'm currently developing a jQuery mobile app that requires filtering posts on a specific page. I have already added the posts and designed the filter.

Take a look at how it appears below:

https://i.sstatic.net/mVh9X.png

I am working on animating the filter so that when the user selects "social" on the right, "outside" and "business" will slide out to the left, keeping the selected filter in the center between the two dividers.

Here's an example of the JavaScript code I was planning to use to move the divs around, but for just 1 div instead of 3:

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

The issue I encountered is that if the user keeps pressing the button on the right or left repeatedly, it would require an infinite number of divs sliding in. I am seeking advice on how to implement this more effectively.

Here's a JSFiddle with the assets I am using (minus the jQuery mobile styling): https://jsfiddle.net/xczy346z/

EDIT: Additionally, here is a GIF demonstrating the desired animation in case there are any difficulties understanding what I am trying to achieve: Example Gif

javascriptjqueryhtmlcssanimation

Answer №1

Implement the following javascript 

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

`

Answer №2

Perhaps, it would be beneficial to consider eliminating the dividers (#divider_***) from both the html and css, and instead inserting them as a pseudo element 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;
}

By following this approach, the side_scroll remains orderly with only the "buttons" for manipulation during animation.

Now, you can effortlessly animate your side_scroll to the right or left while ensuring that the selected "button" remains centered regardless of their quantity.

Check out this revised version of your fiddle showcasing the pseudo element in action:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To display the newly received ajax content on the page, I must ensure that the DOM can properly render the new divs

Currently, I have a page that undergoes a lot of ajax operations. The ajax function loads a table of products which contains buttons for updating and deleting items. However, these buttons don't respond unless I include $(document).ready inside the su ...

jqueryajax

AngularJS Data Binding Issue - Watch cycle fails to trigger

View the JSFiddle example here: https://jsfiddle.net/pmgq00fm/1/ I am trying to achieve real-time updating of my NVD3 chart by utilizing the setInterval() function on line 39, which updates the data bound to the directive. Here is a brief overview of the ...

javascriptangularjsd3.jsnvd3.js

How to incorporate Bootstrap carousel into WordPress without relying on a plugin?

I've successfully integrated the bootstrap carousel into my Wordpress site. The slides are sourced from pages, with a specific page called "carousel" containing subpages where post-thumbnails are extracted. I'm still learning the ropes of using W ...

phpjquerywordpressbootstrap-4

Error 414: The URL exceeds the maximum length and cannot be processed

I am currently utilizing vuejs and sending an axios request to the server in order to download a csv file. download() { var that = this //this.records = [{id: 1, name: 'Jack'}, {id: 2, name: 'Jacky'}, {id: 3, name: &apos ...

javascriptvue.jshttpaxios

JavaScript constructor functions may trigger ReSharper warnings for naming convention

When it comes to JavaScript coding, I personally prefer using PascalCase for constructor functions and camelCase for other functions. It seems like my ReSharper settings are aligned with this convention. However, when I write code like the following: func ...

javascriptnaming-conventionsresharper

Executing function after completion of ajax call

I have 2 buttons and 3 links that trigger an ajax request. I want to display an alert only when the request initiated by one of the buttons is completed, but not when a link is clicked. Below is my code: HTML: <button id="ajax1">Ajax 1</button&g ...

javascriptjqueryajax

``The modification of an input value after it has been initially

I find myself in a perplexing situation where I am setting a value to an input element from a route parameter. <input type="search" class="form-control search-control" :value="search"> Below is the search computed function: computed: { search() ...

javascriptvue.jsvue-routervuex

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...

javascripthtmljquery

What is the best way to modify the height of a div before fetching an image using Ajax, and then revert it back to its original height once the image has been

Using a form and Ajax, I'm dynamically pulling an image to replace another image in the .results div. Initially, when the image was removed and loaded, the page jumped up and down, so I tried adding a style attribute to set the div height and then rem ...

javascriptjqueryajax

Create a new function in jQuery validation

Currently, I am in the process of validating my form using the jQuery validation plugin. However, I have encountered a problem that I need help with and also have a specific question regarding my implementation. View my code on fiddle. The issue at han ...

javascriptjqueryajaxvalidation

Steps to reveal a child element when the parent is set to overflow:hidden

There seems to be an issue with a child element having overflow:visible; while the parent element has overflow:hidden;. The height of the child element exceeds that of the parent element. Why is the child element hidden even when its overflow property is ...

cssoverflow

What exactly does the response represent within the success function parameter (response) in AJAX?

I'm a bit confused about my approach. I am passing a URL for an Ajax 'GET' request with query parameters (?abc='a'), but when I console.log(response) in the success function, the response doesn't contain the abc value. ...

jqueryajaxurl

Placing an element in a fixed position behind a non-fixed element

I am facing a challenge with an element that has two children, one of them is absolutely positioned. My goal is to position this absolutely placed element behind its sibling. Unfortunately, the z-index property doesn't seem to be working as expected. ...

htmlcssz-indexabsolute

Refreshing an iframe located on disparate domains

There is a webpage called "main.jsp" within the domain "domain1". This page contains an iframe that loads content from another domain known as "domain2". Essentially, "main.jsp" serves as a common content platform, with the iframe displaying content from v ...

javascripthtmljspiframe

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Encountering issues with properly implementing the .replaceWith(jQuery('#content')) function in CodeIgniter

I'm having trouble with using the jQuery function .replaceWith(jQuery('#content') in Codeigniter. While I can successfully replace the "content" part of my html, the page background image is not showing up. Controller: public function inde ...

phpjqueryhtmlcodeigniter

Add "http://www" to the beginning of data-src using jQuery

I am currently in the process of creating a basic web scraping tool and I want to add URL domain names to the image results. Below is the code that I have written up until now: function pageFunction(context) { var $ = context.jQuery; var results = ...

jquery

The ASP.NET Core MVC controller encounters a null input parameter when called by an ajax request

Here is the scenario involving an ajax call: ... $("#testBtn").click(function (e) { e.preventDefault(); $.ajax({ url: "/profile/GuestList", data: {"keytype": "1"}, method: "POST&q ...

javascriptc#ajaxasp.net-core.net-core

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

javascripthtml

Use a for loop to fill an array with values and then showcase its contents

I have been trying to figure out how to populate an array and display it immediately when targeting the route in my NodeJS project. Currently, I am able to console log a list of objects. However, I want to populate an array and show it when accessing loca ...

javascriptarraysnode.jsexpress