fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button.

While I have found solutions for fixed width columns like this: http://jsfiddle.net/nheldman/GB7Hc/3/

I am facing a challenge in implementing this functionality with responsive width columns.

<div class="row">
<div class="col-md-1 arrow"><i class="fa fa-chevron-left"></i></div>
<div class="col-md-3">
<div class="country"><a href="">Afghanistan</a></div>
<div class="country"><a href="">Albania</a></div>
<div class="country"><a href="">Algeria</a></div>
<div class="country"><a href="">Andorra</a></div>
<div class="country"><a href="">Angola</a></div>
<div class="country"><a href="">Antigua</a></div>
</div>
  <div class="col-md-3">
<div class="country"><a href="">Argentina</a></div>
<div class="country"><a href="">Armenia</a></div>
<div class="country"><a href="">Australia</a></div>
<div class="country"><a href="">Austria</a></div>
<div class="country"><a href="">Azerbaijan</a></div>

</div>
  <div class="col-md-3">
<div class="country"><a href="">Bahamas</a></div>
<div class="country"><a href="">Bahrain</a></div>
<div class="country"><a href="">Bangladesh</a></div>
<div class="country"><a href="">Barbados</a></div>
<div class="country"><a href="">Belarus</a></div>
<div class="country"><a href="">Belgium</a></div>
</div>

 (additional columns of countries would be included here)

<div class="col-md-1 arrow"><i class="fa fa-chevron-right"></i></div>

</div>
jquerycsstwitter-bootstrap

Answer №1

The demonstration you shared features an animation with a fixed value of 152

$('.table-container').animate({scrollLeft:'+=152'}, 'slow');

Therefore, the task at hand is to track the width of col-md-3 on DOM ready and window resize:

$(function(){ // DOM IS NOW READY

    var $colMD3 = $('.col-md-3'); // Storing selected element for efficiency
    var colW;

    function getColW(){
       colW = $colMD3.outerWidth(true);
    }
    getColW(); // Retrieve width on DOM ready
    $(window).resize( getColW ); // Update on window resize

    // ADDITIONAL CODE HERE

});

Your click events should then be structured as follows:

 // ADDITIONAL CODE HERE
 $('#previous-column, #next-column').click(function(event) {
    event.preventDefault();
    var np = this.id.match("next") ? "+=" : "-=" ;
    $('.table-container').stop().animate({scrollLeft: np+colW}, 800);        
 });

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

Determining the final value of the last handle in a jQuery UI slider with multiple sliders present

I need help retrieving the first and last handle values from a jQuery UI range slider when there are multiple sliders on the page. Currently, my code is set up to grab the last value from the last slider's last handle. I attempted to address this by u ...

javascriptjqueryjquery-uislider

Managing paths for JavaScript and CSS scripts using Jquery Ajax for both direct and remote access

When using Jquery Ajax, I have a main entry script called "index.php." This script allows the user to request "/folder2/index.php" using ajax. I also use the same path "/folder2/index.php" for direct access. However, because of the ajax call, I need to ...

jqueryajax

Enhance your user interface by incorporating badges into specific elements using Bootstrap version 5.2

I am currently using the most recent version of Bootstrap v5.2 and Vue 3 (for learning purposes). While searching on Stackoverflow, I came across a similar question, but it was related to an older Bootstrap version. In my project, I have a select element ...

javascripttwitter-bootstrapbootstrap-5

Styling hover effects on links in Bootstrap 4 with underlines

In Bootstrap 4, the anchor tags have the text-decoration: underline; property added only on hover. Is there a pre-existing helper or utility class to remove this underline? I went ahead and created my own helper class in CSS to remove the underline, but ...

csstwitter-bootstrapbootstrap-4

File Check with AJAX - Experiencing a significant delay in the verification process

My goal is to efficiently check for the presence of a video based on an item that was clicked, and then load it. The process of checking if the video exists can be time-consuming, especially when the file size exceeds 10mb. Currently, I have implemented a ...

jqueryajaxfileloadsize

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

I am experimenting with using Rails to display an .html.erb template via an ajax request under specific conditions. By default, I am consistently receiving the .js.erb file when making an ajax request. Without delving into the reasons behind this choice, ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Incorporate unique color variables from the tailwind.config.js file

I am working on a project using nextjs and typescript, with tailwind for styling. In my tailwind.config.js file, I have defined some colors and a keyframe object. My issue is how to access these colors to use as background values in the keyframe. Here is ...

javascriptcssreactjsnext.jstailwind-css

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css

Leveraging oembed for dynamic content integration with SoundCloud in JSON

I'm looking to retrieve the latest 10 tracks of a user using oembed with json. $.getJSON("http://soundcloud.com/oembed", {url: "https://soundcloud.com/aviciiofficial", format: "json"}, function(data) { console.log(data.html); }) The d ...

jqueryajaxjsonsoundcloudoembed

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

Discovering all asp.net elements with a customized suffix through the power of jQuery

Is there a way to target all asp.net elements with a suffix _val using dynamic client ID, instead of static client ID? The usual approach is: $('div[id$="_val"]') We also know how to select individual elements: $(document).ready(function () { ...

jqueryasp.net

The content returned by a Jquery ajax call is failing to populate the HTML form

Issue with HTML and JQuery Integration: When I try to echo this content in a PHP file, only the 'Contact Us' text is displayed. The remaining part of the HTML form does not show up. <div > Contact Us <form name="profile" action="" m ...

phpjqueryajax

unable to connect to the web service using webview

When attempting to call a web service or display an alert, I am encountering some issues: Here is the code from my activity: mWebView = (WebView)findViewById(R.id.webViewRootAciviy); mWebView.setWebViewClient(new WebViewClient()); mWebView.setWebChromeCl ...

javascriptandroidjqueryhtml

Error generated by Jquery Ajax Call due to undefined response

I've been struggling with sending two variables to PHP using a Jquery Ajax call. It seems to work fine when async is set to false, but for some reason fails when it's set to true. Additionally, the code functions properly if only one variable is ...

phpjqueryajax

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

Utilize jQuery $.ajax to integrate a RESTful WCF service within an MVC 4 web application

I'm currently working on an MVC 4 application and am attempting to consume a RESTful WCF service using the jQuery $.ajax function, but I'm encountering some issues. Here is the jQuery code I have written: $(document).ready(function () { $.ajax( ...

jqueryajaxasp.net-mvcwcf

Issue with React app: IconMenu does not expand when clicked

Seeking assistance with a react app and IconMenu from material-ui. I've been researching similar issues extensively but haven't found a solution yet :( In the code below, I am looking to manually trigger the expansion of a menu - this is essenti ...

javascriptjqueryreactjseventsmaterial-ui

jQuery fails to hide DIVs when jQuery.show() has been utilized in a previous event

I've always considered myself pretty proficient in jQuery, but this particular issue has me stumped. Essentially, I have a click event that should hide one DIV (a placeholder) and show two others (an input section and control buttons section). However ...

javascriptjquerycsshtml

convert webpages and images to PDF with a custom watermark

Looking to convert images fetched from the server into PDF format with a watermark by clicking a button. It would be ideal if there is a plugin that allows for PDF preview with disabled user selection and copy options. The website's platform is Sales ...

javascriptjquerypdfpdf-generation