The Jquery Scroller should come to a halt once it reaches the end of the scroll

On one of my websites, I have implemented a scroller. However, when I try to scroll using the down arrow and reach the end where the time is 10:00 PM, clicking the down arrow again causes the scroller to move up and disappear completely. I am looking for a way to disable the functionality of the down arrow once the end time has been reached.

The same issue occurs when clicking on the up arrow. We have attempted to fix this problem but have been unsuccessful so far.

You can find the code on Jsfiddle here: http://jsfiddle.net/Xh59R/3/

Attached is an image showing the issue.

Thank you in advance for any help.

javascriptjqueryhtmlcss

Answer №1

Make sure to visit the jsfiddle link provided below for a demonstration:

http://jsfiddle.net/Xh59R/8/

Instructions for clicking the next button:

$scrollerNextButton.click(function(e){

//ADD THESE AT THE BOTTOM
var divMarginTop = parseInt(document.getElementById("DemoShowHide").style.top);
var divMaxTopAllowed = parseInt(-1600);
if(divMarginTop <= divMaxTopAllowed) {
    $scrollerNextButton.stop().hide("fast");
}
});

Instructions for clicking the previous button:

var divMinMarginTop = parseInt(document.getElementById("DemoShowHide").style.top);
var divMinMaxTopAllowed = parseInt(0);
if(divMinMarginTop >= divMinMaxTopAllowed) {
    $scrollerPrevButton.stop().hide("fast");
}

Explore more by visiting the following jsfiddle link: http://jsfiddle.net/Xh59R/8/

Answer №2

Here is a possible solution that you might find helpful:

$scrollButton.on('click', function (event) {
    var divs = $("div[style*='width:100%']");
    var totalHeight = divs.outerHeight(true) * divs.length;
    if ($scroller.position().top > totalHeight) {
        $scrollButton.stop().hide("fast");
    }
});

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

Update the class of a div element and transfer its events to a different class using JQuery

Looking to change a div class to another class along with its events, here's what I have: <ul class="pants"> <li><a href="#" ><img src="images/1.png" alt="a" /></a></li> <li><a href="#" ><i ...

jqueryclasseventsreplace

Using Angular Ionic for a click event that is triggered by a specific class

I am utilizing Highcharts and would like to click on the legend upon loading. With the use of Angular Ionic, how can I trigger a click on the .highcharts-legend-item class within the ngOnInit() {} method? I am aiming to click on this class as soon as the ...

javascriptangulartypescriptionic-framework

Is Selenium suitable for testing single page JavaScript applications?

As a newcomer to UI testing, I'm wondering if Selenium is capable of handling UI testing for single-page JavaScript applications. These apps involve async AJAX/Web Socket requests and have already been tested on the service end points, but now I need ...

javascripttestingselenium

The significance of using `jshint globalstrict: true` alongside 'use strict'

It's quite common for me to come across these two lines at the beginning of JavaScript source code. /* jshint globalstrict: true */ 'use strict'; While I understand the significance of 'use strict';, I am curious about why jshint ...

javascriptjshint

Determine a comparative measurement using specific numerical values

I am currently in the process of creating a webpage and I want to ensure that it is responsive by adjusting certain values based on the width of the viewport. Specifically, I have a DIV element that I want to split into 2 columns. For smaller screens (min ...

csscss-gridcss-calc

What could be the reason for this JavaScript malfunctioning in both Chrome and Safari browsers?

Why is it that the javascript works fine in Firefox for the gallery on the page below, but doesn't seem to be functioning properly in Chrome and Safari? In Chrome, the big image isn't displaying but the thumbnails are, and in Safari nothing show ...

javascriptcssgoogle-chromesafari

Display Information in Tooltip Using Text from a Different Source

I'm seeking a way to create tooltips on a webpage that provide definitions for specific words. However, these definitions are located on a separate page within the same website. Is it possible for me to extract the text I need to display in the toolti ...

javascriptjqueryhtml

Implementing Pagination for Dynamically Generated HTML Table in Asp.net MVC

I've created a dynamic HTML table in MVC which looks like this: <table id="dt_basic" class="table dataTable"> <thead style="text-align: left;"> <tr> <th><i class="fa fa-lg fa-plus-circle"&g ...

jqueryasp.net-mvc-4pagination

Modify the color of the background div beforehand

How can I change the background color of the div "#cont-comentarios" when a checkbox is clicked? The change should occur in a loop using 'this'. I have tried numerous solutions before reaching out for help. See the code snippet below for better u ...

jquerycss

The request to access /test.php has resulted in an error (404) indicating that the file cannot be found

Disclaimer: I am completely new to php. I recently followed a tutorial on creating a php script that captures input from a sign-up page (html) and saves it in a database (mysql/Wamp). However, when I attempted to test the functionality, I encountered the ...

phphtmlmysqlwamp

Modify the content in the v-navigation-drawer upon clicking

I am currently working on a project with a v-navigation-drawer and two buttons. The first button is designed to open the drawer, while the second one should change the content of the drawer without closing it. I want the content to update instantly without ...

javascriptvue.jsvuetify.jsv-navigation-drawerv-btn

I'm looking to achieve the same effect repeatedly with JQuery every time I click

Below is my JQuery code. I have implemented functionality where clicking on the '+' link will slide down a text box, which is working fine. However, I want the same effect to occur every time the '+' link is clicked again. Can anyone he ...

phpjquerycodeigniter

Angular 5 form validation - validating user inputs

I am currently developing a MEAN stack application and working on implementing form validation. Everything seems to be functioning correctly except for the paragraph tag containing the error message, which is not displaying properly. Additionally, I want a ...

htmlvalidationtypescriptmean

Animating container heights in React allows for smooth transitions and dynamic

Check out my demo here This demo features a simple app with four buttons and a text area. Each button click loads different text, which varies in length and causes the grey container to adjust its height accordingly. I'm wondering if it's poss ...

cssreactjs

Can you inherit from a class in a different file using SASS?

All the information needed is in this question. For example, if I decide to utilize Twitter Bootstrap, would it be possible for me to create classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or is SASS inheritance restricte ...

cssinheritancestylesheetsass

Deleting object properties in JavaScript is not possible

obj = {a: []} I need to remove the element obj.a. The following code does the job: if(!obj.a.length) delete obj.a // it works However, the below code does not achieve the desired result: function _delete(o) { if(!o.length) delete o } _d ...

javascriptnode.jsobject

Prevent the execution of an onClick function

In an array of elements featuring class="pageOpener" that navigate through different pages using jQuery's .on('click', ... ) events, there is a specific page where I need to validate input before proceeding. To handle this, I've assigne ...

javascriptjqueryhtml

Exploring Angular 10: Managing Two Promises in ngOnInit

I am currently working on integrating the Strava API into my Angular app. To summarize briefly: When a user clicks on a button to connect to Strava They are redirected to Strava for authentication (using PKCE) Strava then redirects back to my app with a ...

javascriptangularfirebasepromiseangularfire2

Use jquery or javascript to align a button to the center

Can the vote button be centered in the script below? <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> <noscript><a href="http://polldaddy.com/poll/6352993/">This is a le ...

javascriptjquery

The CSS hover effect for text backgrounds is acting unexpectedly when the mouse moves away

I’ve added a hover effect to an h1 tag (check out the code and demo below), but it’s acting strangely when I move the mouse away, almost flickering before returning to its original state. Any suggestions on how to smoothly transition back to its origi ...

csscss-animationslinear-gradients