Move my site content to the appropriate location

I am working on a single-paged website built with Jquery and HTML. The main content is housed within a div called #site-content, which has a width of 4400px. Each "page" is positioned within this div, with the first page starting at left: 0px, the second at left: -1100px, the third at left: -2200px, and the fourth at left: -3300px. However, after reaching the third page, the positioning resets back to the beginning.

<div id="site-content" style="left: -2200px;">

Is there a way to ensure that the positioning does not reset back to 0px after a page refresh? I want it to start again at left: -2200px.

If possible, could someone provide a code example to achieve this? Any help is greatly appreciated.

Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

Consider utilizing anchor-navigation for a smoother user experience.

For this code to function properly, the URL structure should resemble: or a similar pattern.

$(document).ready(function(){
  var anchor = window.location.hash; // ensure proper extraction of anchor
  $("#site-content").animate({ left:(1100*anchor)+"px" }, 500);
});

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

When the parent element's CSS property is set to display: none, ng-repeat fails to function

I have a division with a specific class in the CSS named display: none;. When I click on a button, I switch the class using a toggle class feature called ng-class="vm.showing ? 'zoomIn' : 'zoomOut'". The issue arises when Angular does n ...

javascriptangularjs

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here https://i.sstatic.net/F2LXV.png ...

htmlcsshtml-table

Using TypeScript generics with the `keyof` operator may result in rejection

I created a custom method using the RXJS library which looks like this : function Subject<T>(t: T):T { return t; } In addition, I defined an interface that specifies the structure of my application values. Additional keys can be added to this i ...

javascripttypescript

Unable to Get Basic jQuery .load Example to Function

Seeking assistance with a jQuery issue regarding loading HTML snippets into a page. When the snippet contains just HTML, it loads fine. However, when it includes a script, there seems to be an issue. Simplified code provided below for better understandin ...

javascriptjquery

Dividing Trapezoid Shapes, Cropping Background Images

I am attempting to design a website layout with trapezoid shapes similar to the attached image. Each section should have a background image that fills the background with cover or a similar effect. I successfully created the first section (dark blue) usin ...

htmlcssbackground-imagecss-transformsclip-path

Image Carousel Extravaganza

Trying to set up a sequence of autoplaying images has been a bit of a challenge for me. I've attempted various methods but haven't quite nailed it yet. Take a look at what I'm aiming for: https://i.stack.imgur.com/JlqWk.gif This is the cod ...

javascripthtmlcssanimation

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

I need to implement a delay when users click on the link to close a window. The purpose of this delay is to allow time for playing random "signoff" audio files, such as "Thanks!" or "See you next time!". Currently, without the delay, the audio stops abrupt ...

javascriptjqueryhtml

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

Implementing React.JS to dynamically update a value from a websocket and store it within

I want to create a dynamic stock price table that updates with live stock prices using websockets. I have all the necessary data and need to update my stock price object with the live price. How can I access the variable and insert the value into the obj ...

javascriptreactjs

What is the best way to display two arrays next to each other in an Angular template?

bolded text I am struggling to display two arrays side by side in an angular template. I attempted to use ngFor inside a div and span but the result was not as expected. A=[1,2,3,4] B=[A,B,C,D] Current Outcome using ngFor with div and span : Using Div : ...

javascripthtmlcssarraysangular

Additional spacing within nested divs utilizing the display: table property

In my current project, I am working on styling a list to resemble a table layout for horizontal alignment. The first column contains labels, while the second column features groups of buttons using Bootstrap's btn-group-justified class. This setup ess ...

csstwitter-bootstrap

Plugin for creating custom dropdown menus using JQuery

Recently stumbled upon a new JQuery plugin for Dropdown menus, but struggling to figure out how to use it without any documentation provided. Here is the link to check it out: http://code.google.com/p/jqueryselectcombo/ Are there any alternative free plug ...

jquery

The overflow:hidden property does not seem to be effective for controlling the display of the

I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected. Approa ...

htmlcssoverflowhtml-lists

What is the best way to add a filter to a nested array?

I am currently facing a challenge in creating a multiple filter for multiple arrays without duplicating the nested array. I am working with vuejs and some plugins that are relying on the array, so my only option is to filter it without modifying it. Using ...

javascriptarraysvue.jsfilter

What sets apart the process of installing AngularJS and AngularJS Core using NuGet?

I am curious about the difference between these two packages in my packages.config file. Would it be advisable to uninstall one of them? <?xml version="1.0" encoding="utf-8"?> <packages> <package id="angularjs" version="1.3.15" targetFr ...

javascriptangularjs

There seems to be an issue with your SQL syntax that is preventing the data from being entered correctly into the database using Node.js, MySQL, and Express

After successfully displaying data from my database, I attempted to add data to it using the following code snippet: exports.tambahData = (req, res) => { var keyy = req.body.keyy; var valuee = req.body.valuee; var brand = req.body.brand; ...

javascriptmysqlnode.jsexpress

I am eager to showcase a Pokémon image sourced from the API, but I am faced with the challenge of only having the image URL and not knowing how to display it effectively

As a beginner in programming, I am seeking some assistance. I have been able to retrieve a random Pokémon from an API and gather its data, including the ID, name, and picture. My main focus now is to display the image of the Pokémon in the custom modal I ...

javascriptimageapivue.jsurl

Dawn Break Alarm Timepiece - Online Platform

My buddy recently purchased a "sunrise alarm clock" that gradually brightens to mimic a sunrise and make waking up easier. I had the thought of replicating this effect with my laptop, but I've been facing issues with getting the JavaScript time funct ...

javascripthtmlcssweb

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

javascriptjqueryhtml

What is the most efficient way to merge two form fields and send them as a single field using jQuery?

My current issue is that I have created a form where users can input multiple items with quantities, and they can add more fields if necessary. You can access the form at: In order for my shopping cart to recognize multiple items submitted, it needs to b ...

jquerye-commercevelocity