Ways to display a block within the visible window by simply clicking on another block

I'm in need of assistance with this issue. Please take a look at the fiddle link below to understand the specific requirement.

$(document).ready(function(){
  $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function()      {
    $('[class*="b-"]').removeClass(function(index, className) {
      return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
    });
    var stand_class= $(this).attr('class');
    $('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
    $('div.'+stand_class).addClass('b-'+stand_class);
  });
});

https://jsfiddle.net/oz2k1xav/2/

Currently, when I click on a stadium block on the left, it slides down on top of the right container.

After scrolling down, the left container is fixed while the right container is scrollable. When clicking on a stadium block, it appears at the top of the right container.

However, I would like the right container blocks to be visible within the window when I scroll down and click on a stadium block in the left container, not at the top of the right container.

I really need help with this. Please assist me with a solution.

Thank you

javascriptjqueryhtmlcss

Answer №1

Your solution effectively places the required element at the top of the container, but what is actually needed is to scroll to that element.

To achieve this, I have integrated a useful jQuery plugin called scrollTo, which can be found in the following jsfiddle link:

https://jsfiddle.net/oz2k1xav/5/

Highlighted below are the key modifications:

    //$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);

    $.scrollTo($('div.'+stand_class)[0], 1000, {
    offset: -100
    });

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

Is there a way to have the information on the table automatically update based on the selection made in a drop-down menu?

When a user is selected from the combo box, I want the table displaying user data from the database to only show information related to the selected user. I attempted to use an array to store values but was unable to make it work. A Combo Box that allows ...

phphtmlmysql

Modifying or enhancing a jQuery method

As a newcomer to jquery, I may not have the exact terminology down pat, but I am looking to either override or extend a function in a jquery .js file that is included on all our pages by the lead developer in our team. Currently, the existing function in ...

jquery

Encountering issues with JSON.Parse in JavaScript leads to errors

I'm encountering issues with JSON parsing in my code and I can't figure out the cause of it. I have a function that calls two ajax functions, one at the start and another in the success function. Everything seems to be working fine until I try to ...

javascriptjqueryjson

Dispatch an angular POST Request

I am facing an issue where Angular is sending a GET request instead of a POST request when I want to send a post request. The code for my Angular request is as follows: $http({ method: 'POST', url: pages_url, params: { ...

javascriptangularjspostrequest

The functionality of IE's .attr disabled feature appears to be ineffective

My function to check if a product is available overnight is not functioning properly in Internet Explorer, although it works fine in other browsers. function checkOvernight() { id = $_2("[name='product']").val(); if(id.length > 0) { ...

jqueryajaxcross-browser

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...

css

In React, the Textarea component that displays the character count only updates its value after a page reload

Contained within this element is the following component: import React, { useEffect, useState } from 'react'; import { TextareaTestIds } from '../utils/test-ids'; export interface TexareaProps extends React.TextareaHTMLAttributes<H ...

htmlreactjstypescriptreact-hooks

import component dynamically from object in Next.js

Currently, I have a collection of components that I am aiming to dynamically import using next/dynamic. I'm curious if this is achievable. Here's the object in interest: // IconComponents.tsx import { Tick, Star } from 'components ...

javascriptreactjstypescriptnext.js

Navigating intricate JSON information using AngularJS

I am working on displaying JSON data in an HTML form using ng-repeat. I have managed to retrieve data from some objects, but I am facing challenges due to the nested structure of objects like "Obj => Obj => Obj". In the JSON object provided below, I ...

htmljsonangularjs

Node.js is being utilized to upload data to an FTP server with the help of js

I'm attempting to send a file to an FTP server using Node.js with the help of jsftp module.exports = async function() { const jsftp = require("jsftp"); console.log(__dirname) const ftp = new jsftp({ host: "host.name", ...

javascriptnode.jsnpmftpnpm-scripts

Should we store $(this) in jQuery's cache, or leave it be?

When dealing with a selector such as $(this), does the act of creating and reusing a reference actually have a noticeable impact on performance? I find it more efficient to create references for jQuery selectors that are used repeatedly within the same sc ...

javascriptjquery

Using Angular 4 to delete selected rows based on user input in typescript

I am facing a challenge with a table that contains rows and checkboxes. There is one main checkbox in the header along with multiple checkboxes for each row. I am now searching for a function that can delete rows from the table when a delete button is clic ...

javascriptangulartypescript

Enhancing Browser Experience: The correct method for dynamically adding an AngularJS controller through a Chrome Extension's Content

Currently, I am in the process of developing a Chrome extension using AngularJS. To attach a controller to the required DOM elements on a webpage, I have been utilizing the following content script code: setController() { if(this.setContollerConditio ...

javascriptangularjsgoogle-chrome-extension

Adding hyperlinks to images on a Project Page in Squarespace with the help of JQuery

I'm currently creating a website on Squarespace and facing a challenge with the project pages. While Squarespace allows me to add images with titles and descriptions, I do not have direct access to edit the page. Unfortunately, the platform does not h ...

javascriptjqueryhtmlclasssquarespace

Working with string interpolation in SQLite3 and Nodejs

Just starting out with this and I'm running into an issue with trying to insert a variable into my sqlite3 query. I keep getting the error { [Error: SQLITE_ERROR: no such column: shmee] errno: 1, code: 'SQLITE_ERROR' } where "shmee" is actua ...

javascriptnode.jsexpresssqlitestring-interpolation

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

htmlcsscss-selectorspseudo-element

Transform Arabic numerals into Roman numerals using only CSS styling

Currently developing a custom theme for a website and faced with the restriction of not being able to use Javascript. My goal is to translate certain numbers into Roman numerals. I attempted the following: .score:before { counter-reset: mycounter att ...

htmlcssroman-numeralscss-contentcss-counter

Utilizing Ajax to serialize or transfer JSON objects

I have received a Json object and I am looking to extract the data using JavaScript. Specifically, I need help with looping through fields and extracting the data. def For_Sale_Listing(request,id): try: listing = Listing.objects.filter(pk=id) ...

javascriptdjangoajax

Issue with incorrect date being retrieved in MongoDB response from a node server

My date in mongodb is structured as follows: ISODate("2020-08-03T00:00:00.000+05:30"), However, after querying the date, it appears like this: 2020-08-02T18:30:00.000Z I am looking to get the correct date of 2020-08-03. What could I be doing wr ...

javascriptnode.jsdatemongoosemongoose-schema

Error: The function coolArr.printArray is not defined in the npm package being imported

My custom package contains an index.js file with the following code: module.exports = class CoolArray extends Array { printArray() { console.log(this); } } After transpiling the code using es2015 syntax with Babel, I connected the package to my te ...

javascriptnode.jsnpmbabeljses6-class