Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using

$(document).ready(function(){
  $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");
  });
});

I also have a slider function that works perfectly. However, when the div changes, the slider stops working. How can I make it target the hidden divs when they are displayed? Is it related to variables?

This is my slider code:

$(function() {
var scrollPane = $('#info'),
    scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;

$("#slider-vertical").slider({
  orientation: "vertical",
  range: "max",
  min: 0,
  max: scrollableHeight,
  value: scrollableHeight,
  slide: function(event, ui) {
    scrollPane.css({top: ui.value - scrollableHeight});
  }
});

});

To better understand, here is a link to a working example (please excuse the messy code):

Thank you in advance.

Answer №1

To ensure that all your sliding divs are included in the scroll functionality along with #info, it is recommended to assign them a shared class like class="info". Modify the code snippet as follows:

var scrollPane = $('.info'),
    scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;

Additionally, remember to reset the slider to its default position when showing or hiding any of the divs:

$(document).ready(function(){
  $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");

    // Reset slider to top
    var max = $("#slider-vertical").slider("option", "max);
    $("#slider-vertical").slider("value", max);
  });
});

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

Ways to modify the text color of an inactive TextField in Material UI React JS

After researching how to change the disabled TextField font color on Stack Overflow, I implemented the solution using Material-UI. However, when I tried to create a new customized TextField based on the example provided, it did not work as expected and dis ...

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

Bootstrap Table with Numerous Rows and Columns

I am striving to create a table layout similar to the one shown in the image using bootstrap 5. https://i.sstatic.net/lEnYX.png My attempt so far looks like this <table class="table table-bordered"> <thead> <tr> ...

Ways to broaden the map of a variable in SCSS

Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the document ...

Having issues changing the color of fontawesome icons

I am struggling to change the color of a fontawesome icon when it is clicked. <a id="thumbsup">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a> My goal is to have the icon start off as gray, turn blue when clicke ...

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

a function that repeats every single second

A challenge I am facing is creating a countdown timer with a time that refreshes every second. My current implementation uses setInterval, but it only seems to run once instead of every second. Can anyone help me identify the issue in my code? var countDo ...

Scrollbar malfunction in Angular and Bootstrap主 The main scrollbar in Angular and Bootstrap is un

I am currently facing an issue with my Angular app using Bootstrap 5. The main html/body scrollbar does not work when elements overflow the view. I have tried various solutions such as setting a fixed height, adjusting overflow-y to scroll or auto for body ...

What causes webkit browsers to reduce the size of certain floating elements on mobile devices?

Struggling to create a responsive layout for a web app, specifically dealing with rendering issues on mobile webkit browsers. The floating elements are shrinking in an unpredictable way, causing problems on Chrome and Safari for Android and iOS devices. ...

What steps do I need to take to develop a feature similar to Tabzilla?

Exploring the innovative navigation bar on Mozilla.org seems intriguing; commonly referred to as tabzilla, it smoothly moves down to reveal the menu at the top of the page. I wonder if there are any existing libraries or ready-made jQuery code snippets tha ...

Choose with text partially aligned on the right side

Is there a way to align a portion of the option's text to the right? Below, you will see a select element with names on the left and "(vertical)" on the right. I want to move "(vertical)" to the right side. Is it possible to achieve this? https://i. ...

Adjust the spacing of a div based on the fluctuating height of another dynamically changing div

Is it possible to dynamically adjust the margin of a div using jQuery or JS? Currently, I have set a margin on a div by calculating the height of a container that includes images. var articleImageHeight = $('.slides_control').height(); $(' ...

Opera browser encountering issue with styled image overlay in select list

We have implemented images in CSS to customize our select fields and they appear correctly in most browsers, except for Opera where the images are not displaying. To better illustrate the issue, I have set up a JSfiddle. Please try it out in Opera to expe ...

Obtain the ID of element 1 by clicking on element 2 using JQuery

In the world of javascript/jquery, When button1 is clicked, we can get its id like this: var button1id = $(this).attr("id"); If button2 is clicked, how do we retrieve button1's id? This brings us to the question: How does button2 access the i ...

What are the advantages of importing variables from components?

Let's start with some context. Our primary sass file is named main.scss, which mainly imports other scss files. /* ========================================================================== Base ================ ...

One button triggers the appearance of two sliding div elements

I am looking to create a unique effect where two slide-in divs are triggered by a single button. After experimenting with different options, I found inspiration at this link. My goal is to achieve a seamless pair of curtains effect: on the first click, t ...

Utilizing a switch to deactivate all currently active classes on individual div elements

I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...

Unable to submit CSV file for Controller Action

I am encountering an issue with uploading a csv file to my backend action method. I have an action method called UploadPropertyCSV in Controller PropertyController that is supposed to process the file and add it to the database. However, when I click submi ...

Troubleshooting problem with CSS alignment within Bootstrap framework

Having trouble with the alignment when using bootstrap CSS. My desired layout is as follows: Place name: dropdownbox Gender (radio-button)Male (radio-button)Female Amount Max: textbox Min: textbox Any advice on how to achieve this? ...

Improving the method of accomplishing a task using AngularJS

Clicking on an item in the tobeclicked list will transfer the data to the find empty list. The goal is to locate an empty list and update it by cloning the image there. The actual values and lists will include images. When an image is clicked, the system s ...