JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome.

UPDATE: Included a JSFiddle

jQuery Code:

$(document).ready(function() {      
    //console.log($('.nav-up'));
$('.nav-controls').on('click', '.nav-up', function(e) {
    e.preventDefault();
    //alert('clicked');
    var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
    var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
    if((el.height() - navHeight) < el.position().top) {
        el.animate({ top: '+=19' }, 'fast');
        console.log(el.css('top'));
    }
});});

HTML Structure:

<div class="horz-scroll">
<div class="block-nav-wrapper">
<div class="block-nav">
<ul>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
    <li>
    <div class="wrap-box-name">&nbsp;<span><img src="../../../upload/1/img/arrow.png" /></span>&nbsp;Orinda Union School District</div>
    </li>
</ul>
</div>
</div>

<div class="nav-controls">
<ul>
    <li><a class="nav-up" href="#"><img src="../../../upload/1/img/prev.jpg" /></a></li>
    <li><input class="nav_down" name="submit" src="../../../upload/1/img/next.jpg" type="image" /></li>
</ul>
</div>
</div>

CSS Styling:

.nav-controls {
    right: 10px;
    top: 25px;
    margin-left: 37%;
}

.nav-controls ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-controls ul li{
    display: inline;
    padding-right: 16px;
}
.block-nav-wrapper {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
}

.block-nav {
    position: relative;
    height: 130px;
    margin: 10px;
    overflow: hidden;
}
.block-nav ul{

}
.block-nav ul li{
    list-style:none;
    line-height:35px;
}


console.log(el.height()); = 175
console.log(navHeight); = 130
console.log(el.position().top); = 0
javascriptjquerycss

Answer №1

Before revealing the answer, there are a couple of things to note.

  1. If you are using jQuery, make sure to include it in your fiddle.
  2. As suggested by Chris Rockwell, use a placeholder site like

Now here is the link to the fiddle: http://jsfiddle.net/QmxWc/1/. The main issue was the missing declaration of position:relative on the <ul> element you wanted to move. Additionally, there were some logic errors in your JavaScript code.

CSS:

.block-nav ul {
    position: relative;
}

JS:

$('.nav-controls').on('click', '.nav-up', function (e) {
    e.preventDefault();
    //alert('clicked');
    var navHeight = $(e.currentTarget).closest('.horz-scroll').find('.block-nav').height();
    var el = $(e.currentTarget).closest('.horz-scroll').find('.block-nav > ul');
    if ((el.height() - navHeight) > Math.abs(el.position().top)) {
        el.animate({
            top: '-=19'
        }, 'fast');
        console.log(el.css('top'));
    }
});

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

Determine the parent sibling of the image wrapper by using the specified selector

I am trying to write code that, when a button is clicked on, will find the parent elements' siblings (specifically an image within an "img_wp" div). However, my current code doesn't seem to be working. Can anyone spot where I might have gone wron ...

jquery

Managing Recursive Promises: A Guide

function Authenticate() { this.invalidAccessToken = false; } Authenticate.prototype.checkTokenValidity = function (accessToken, refreshToken) { var token; var self = this; return new Promise(function (resolve, reject) { Authenticat ...

javascriptnode.jsexpresscallbackpromise

Obtaining static images from the public directory with getStaticProps in Next.js

Next.js provides a thorough method for accessing images from the /public/ folder, where static assets are stored. This involves using Node's fs module and fetching them within the getStaticProps function. Here is an example: export async function get ...

javascriptnode.jsnext.jsfs

URL JSON data will not display markers

I am currently working on a map that fetches data from the police.uk API by allowing users to drag and drop a dot on the map to display crimes within a 1-mile radius. However, I'm facing an issue when trying to implement geocoding functionality by tak ...

javascriptjqueryjsongoogle-mapsgoogle-maps-api-3

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...

javascriptjqueryhtml

PHP MySQL data not getting saved when button is clicked and $.ajax function is executed

Having an issue with the code below regarding saving form data: "fsField" is the class assigned to all form elements. The autosave() function is triggered when a user moves away from a field by clicking out, except when they click the 'save_secL&apos ...

phpjquerymysqlajaxpost

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

javascriptcssvue.jsfrontendvuejs3

Conceal the column title for order items in the WooCommerce admin panel

I've been attempting to hide certain columns within the administrative section of Woocommerce, but have had no success with the code I'm using. I'm currently stuck and my question is: Is there a way for me to conceal specific column names i ...

csswoocommerceorders

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

SliderCarousel - maintaining variable width image in the middle of the carousel

I am working with a collection of variable width images that I want to display in a carousel. After some research, I have decided to use 'carouFredSel' as it appears to be highly customizable. My goal is to always have one image centered horizont ...

jquerycarouselcaroufredsel

Unable to locate the reverse for 'my_views_name' without any arguments in Django. Bridging server-side code with client-side JavaScript using jQuery

How can I create a button to update a URL after fetching data from the database using jQuery AJAX? This is my code in views.py: def list_maingroup(request): lists = MainGroup.objects.all().order_by('-pk') data = [] for i in lists: ...

javascriptpythondjangoajax

Scale the cylinder in Three.js from a specific point

Can a cylinder be resized along the Y-axis starting from a particular point? Instead of the cylinder expanding from its center in both directions to the new scale, is it possible for it to grow upwards/downwards only like a bar chart? Current code : fu ...

javascriptthree.js

The function of the React index key appears to be malfunctioning within the map function

I've been encountering issues despite using the index key and also attempted utilizing a unique id from JSON data, but unfortunately haven't found a solution yet. ERROR Warning: Each child in a list should have a unique "key" prop. const fa ...

javascriptreactjslistecmascript-6jsx

search engine optimized for easy input via keyboard

I have successfully incorporated AJAX search functionality into my project, inspired by this example here. The unique feature of this implementation is the ability to navigate through search results using the TAB key. The structure of my search results tab ...

javascriptjquerycss

The utilization of CakePHP buttons for submitting forms, along with the seamless integration of

<?php echo $this->Form->button('A Button'); echo $this->Form->button('Another Button', array('type'=>'button')); echo $this->Form->button('Reset the Form', array('type'=> ...

phpjqueryajaxcakephp

Under what circumstances is it possible to iterate through an empty array?

When defining arrays in JavaScript using Array(n), it creates an empty array. If I write the following code: Array(2).map((val) => console.log(val)) Nothing happens when running this code, but if I spread out the elements of the array into another a ...

javascriptarrays

React: encountering issues with accessing component props after page refresh

Whenever I try to reload the 'details' page (not the homepage) on my app, I encounter the following error: "TypeError: Cannot destructure property 'flag' of 'country' as it is undefined." It seems that the data is ...

javascriptreactjsreact-nativewebpack

Discovering the magic of delving into nested JSON objects with Ajax

Even though I am still in the learning process, I have spent countless hours attempting to figure out how to handle this Ajax call in my WordPress setup and make it function properly. My goal is to retrieve the "price" (in USD) from the JSON object and sto ...

jqueryajaxwordpressobject

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

My website features a basket functionality where users can enter an author's name and see the available books. After selecting desired books, they have the option to click on another author for more selection. The displayed list includes books by Step ...

javascriptjqueryajaxpromise

Collaborative session sharing between two node applications through Single Sign-On (SSO

I currently have a website created with express and node.js. I need to add a nodebb forum to this website, which is a separate node application. Both the main site and the forum use Facebook login, but users have to log in separately using the same Faceboo ...

javascriptnode.jssessionexpresssingle-sign-on