Sideways and alternative directional scrolling

I need assistance achieving a horizontal scroll with the main content centered in a div, while having links that move left and right.

<div id="left">
Scrolls left
</div>

<div id="home">
Opens on this
</div>

<div id="right">
Scrolls right
</div>

Although I came across a discussion on stackoverflow about a similar topic, the solutions provided are not working for me. Moreover, the thread dates back to 2012, so I am hoping for more up-to-date methods to achieve this effect now. Horizontal scrolling layout LEFT/RIGHT: jQuery/CSS quiz

The desired effect I wish to accomplish is akin to

Any guidance on how to achieve this? http://jsfiddle.net/gaby/en9sw/15/

EDIT:

In essence, I want the website to initially display #home and shift to #left when a specific link is clicked (thus scrolling left).

javascriptjquerycssscroll

Answer №1

This creation is just for you http://jsfiddle.net/uniquecreator123/ZRt85/

Website Design

<div class="top">Slides up</div>
<div class="bottom">Slides down</div>

<div class="content">
    <div class="section">example1</div>
    <div class="section">Starts here</div>
    <div class="section">example3</div>
</div>

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

The thumb of the range input is misaligned with the axis markers

The handle, also known as the knob in this input[type=range] codepen, is not aligning correctly with the ticks. It appears to be off by varying amounts (either left or right) depending on the value. Move the handle to see for yourself. What CSS properties ...

htmlcssinputsassinput-type-range

Adjusting the input in a Textfield within React using Material UI

const [formData, setFormData] = useState({}); useEffect(() => { fetch("/formdata") .then((res) => res.json()) .then((data) => setFormData(data)); }, []); console.log("Form Data", formData); //Sorting by order let attr; ...

javascriptreactjsreact-hooksmaterial-ui

The transparent image is causing the menu item to be hidden underneath it because of z-index complications

Could you please review this jsfillde? <nav role="navigation" class="nav-main"> <ul class="nav nav-pills" id="menu-primary-navigation"> <li class="active menu-home"><a href="/">Home</a></li> <li ...

htmlcss

Is it possible to pass a variable to a text constant in Angular?

In my constant file, I keep track of all global values. Here is the content of the file: module.exports = { PORT: process.env.PORT || 4000, SERVER: "http://localhost:4200", FAIL_RESULT: "NOK", SUCCESSFUL_RESULT: "OK ...

javascriptnode.jsangulartypescript

Can you identify the issue with the phase control in my sine wave program?

I have recently developed an interactive sine wave drawing web application. Below is the code snippet for reference: const canvas = document.getElementById("canvas"), amplitude_slider = document.getElementById("amplitude_control"), wavelength_slider ...

javascripthtmlhtml5-canvassign

Printing a list of values from a C# page to the presentation layer (ASPX)

I am dealing with a list object in my Cs page that has 2 rows. So, how can I access it separately on my Aspx page? For instance, for a single value, the code would look like this: $("#txtBilldate").val(data.d.lphBillDate); But how can I retrieve a list ...

javascriptjqueryasp.netajaxjson

modify the material to fit within the specified width

I am facing an issue with my tooltip as the data it displays is overflowing the width of the tooltip. I want to adjust the content to fit within the tooltip width. The tooltip is essentially a badge that shows additional information on hover. I want to set ...

htmlcssvue.js

What is the process of incorporating external links into an angular application?

Attempting to embed an external URL within my Angular app using an iframe has resulted in the following issue: https://i.sstatic.net/liSmX.png The error message reads as follows: https://i.sstatic.net/u9GWw.png Below is the template where I am trying t ...

javascriptangular

Accessing the initial element inside a DIV using CSS

In the structure of my code, I have a WYSIWYG editor enclosed in a table within a div element: <div class="mydiv"> <li> <table>My WYSIWYG</table> </li> </table> Within the WYSIWYG editor itself, there a ...

csshtml

Obtain the title of the text generated by clicking the button using a script function

I am working on a piece of code that generates a text box within a button's onclick function. My goal is to retrieve the name value of each text box using PHP. <script language="javascript"> var i = 1; function changeIt() ...

javascriptphphtml

Load content into multiple divs simultaneously using jQuery

Here is the code snippet I am currently using: $("#box1").load(""+ siteAddress +"page/internal-url-1/"); $("#box2").load(""+ siteAddress +"page/internal-url-2/"); var refreshId = setInterval(function(){ $("#box1").load(""+ siteAddress +"page/int ...

phpjavascriptajaxjquery

Is there a way to eliminate a style from the final element of a list?

I have just completed a project that looks similar to this: I am wondering if there is a way to remove the line at the end of the last column? (it's within a PHP while loop) Here is the code snippet: <div style="border-bottom: 1px solid #cdc ...

cssheight

Issues with Submitting Form using Jquery, PHP, and Mysql

As a beginner, I find this task quite stressful. I want to create a simple chat system where users can send messages to the database without refreshing the page. Why isn't this code working (I've used similar code successfully before)..? <scr ...

javascriptphpjquerymysql

How to send JSON data from jQuery to a Rails controller?

Despite seeing numerous similar requests, I couldn't find a clear solution: I am utilizing the Google API geocoder to retrieve detailed information about an address, and the API returns the data in json format. My goal is to pass this json data to my ...

jqueryruby-on-railsajaxjson

The issue of execution order in JavaScript Recursion with promises

In the process of developing a method for creating markup to be used in a web app's off-canvas navigation. One of the challenges I am facing is making an asynchronous callback to another service that provides children nodes for the parent menu node (r ...

javascriptasynchronousrecursion

Is extracting the title of an image from Flickr?

I have a JavaScript code that randomly pulls single images from Flickr every time the page is refreshed. Now, I want to add a feature where the title of the image is displayed when it's hovered over. However, I've been searching for a solution fo ...

javascriptjqueryjsonrandomflickr

Step-by-step guide to tweeting with Codebird PHP from a pop-up window

I want to enhance the visitor experience on my website by allowing them to easily post a tweet with an image directly from the site. To achieve this, I have implemented the Codebird PHP library. While everything is functioning correctly at the moment, ther ...

javascriptphpjquerytwittercodebird

What is the best method for deleting the wording "Facebook social plugin"?

I recently integrated the Facebook social plugin comments on my website and encountered a dilemma. When embedding it, a script generated an iFrame containing the text "Facebook social plugin" along with the Facebook logo positioned at the bottom (refer to ...

jqueryfacebookcssfbml

Struggling to make jQuery code function in an external file without causing clashes with additional jQuery code

When incorporating this simple code into its own separate file, I encounter some jQuery conflicts with another piece of code. jQuery(function ($) { $(".tabContents").hide(); $(".tabContents:first").show(); $("#tabContainer ul li a").click(fun ...

javascriptjqueryconflict

Angular2: the setTimeout function is executed just a single time

Currently, I am working on implementing a feature in Angular2 that relies on the use of setTimeout. This is a snippet of my code: public ngAfterViewInit(): void { this.authenticate_loop(); } private authenticate_loop() { setTimeout (() =& ...

javascriptangulartypescriptsettimeout