Smoothly scroll through divs using JQuery

Let me share an issue I'm facing.

I have implemented smoothDivScrolling on my webpage.

The problem is that the scrollable area containing all the items to be scrolled always ends up being larger than the actual content.

When I reach the last item in the scrollable area, it continues scrolling empty. It seems like smoothdivscrolling automatically adjusts the width of the scrollable area to twice the necessary value!

If you need a code snippet for reference:

<figure  id='block$id'>
 <img src='$img' alt='image $name' />
 <h2>$name</h2>
</figure> 

These are the items within my

<div class="scrollableArea"></div>

I have multiple such scrollable areas and they are all working as expected.

Here's the CSS for my figure element:

figure {
    display:block;
    position: relative;
    float:left;
    vertical-align:top;
    width:172px;
    height:125px;
    // Additional styling properties...
}

The figures are displaying correctly. But I am puzzled as to why the scrollable area is double the size of my content.

CSS for my scrollable area :

div.scrollableArea {
    display: block;
    position:relative;
    float:left;
    // Additional styling properties...
}

Even if I provide a width value for the scrollable area, the result remains the same.

Below is the line calling for smoothdivscrolling:

$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart", 
autoScrollDirection: "backandforth", 
autoScrollStep: 2,
autoScrollInterval: 15, 
startAtElementId: "startme", 
visibleHotSpots: "always"
});

If you require more code snippets for analysis, please let me know. I am eager to resolve this issue.

Thank you

Answer №1

$(document).ready(function(){
    var initialWidth = $('element').width();
    $('element').css('width', initialWidth/2);
});

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

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

Issue with Google Maps Marker Being Strangely Stretched

I have come across an odd issue with Google Maps (as shown in the attached image). Does anyone have any insight into why this might be happening? Has anyone else encountered this before? Check out the code snippet below: <script> <!-- var ...

ChooseMe date selector - eliminated the preset current date

I have implemented the PickMeUp multi date picker and here is my jQuery code. $('.multiple').pickmeup({ position : 'top', hide_on_select : false, mode : 'multiple' }); Currently, the calend ...

Utilize a PHP-AJAX request to retrieve JSON data and then transfer the data to JGauge.js in order to display the value

scenario where I need to transfer an ajax-called value to another script (specifically a widget script) within the same file, I have managed to successfully execute the ajax call and implement a justgage widget on a single page. While I can effectively dis ...

Guide to making a vertical clickable separator/line using bootstrap

Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hid ...

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

Trigger a JQuery selector when a click event occurs

I'm trying to set up an event trigger when clicking on a specific class within a div. Here's what I've attempted: $("div .event").click(function() { alert($( this ).text()); }); And also tried the following: $("div").on("click", $(&a ...

When attempting to pass Rgraph image data through a jQuery AJAX call, a 403 Forbidden error is being

I have been working on a project that involves creating graphs/charts using the Rgraph PHP library. To generate these charts, my script follows these steps: Calculate the graph points and render the graph using the Rgraph Draw() method. Create an image d ...

Error message displayed on PHP web page

I'm working on a page that will display "no query string" if $_REQUEST is null, and if not, it will show a page with the content saying "query string". Additionally, it should output the line "The query string is: var_dump($_REQUEST)". I've writt ...

Issue with animating multi-column layout in Chrome causing display problems

I'm currently utilizing jQuery to create an animated multi-column layout that extends off the screen horizontally. I have implemented two controllers - one red and one blue - to navigate back and forth within the layout. Strangely enough, while the an ...

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

Alerts for drop down menu validation with multiple buttons

My goal is to design a multi-step form that collects user information. This form consists of 5 stages: Step 1: User details (Name, email, phone, age, gender) Step 2: Yes or No question Step 3: Yes or No question Step 4: Yes or No question Step 5: Yes o ...

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

Does the jQuery function val() not clear new lines properly?

Am I missing something here? $('textarea').val('') It still keeps new line in the textarea if there were any. Any suggestions for a solution? ...

Using CURL in PHP to make a post request on a form

this is the form: <textarea name="message" id="messageContent" rows="18" wrap="virtual" tabindex="2"></textarea> <span id="formSubmit"> <a href="#" class="formSubmit" tabindex="3"> <img src="/clear.gif" class="master-sprite ...

Showing the value of a JavaScript variable within an HTML input field

Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

Is it possible to use speech recognition on browsers besides Chrome?

Is there a way to utilize a microphone with JavaScript or HTML5 without relying on Flash technology? I was able to achieve this in Chrome by using webkit-speech, but I am looking for solutions that will work in other browsers as well. Any suggestions wou ...