Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows:

My objectives are twofold:

  1. Both slide1 and slide2 should occupy the full width of the page.
  2. Additionally, I am looking for a function that smoothly transitions from slide1 to slide2 when called, and vice versa upon subsequent calls.

While exploring options like fullpage.js, it was found to have unnecessary side effects such as restrictions on vertical scrolling, content centering, and lack of responsive font resizing, which does not align with the requirements.

The goal is to achieve this functionality in a concise manner without overcomplicating the code. Any guidance on creating two full-width divs acting as independent "body-elements" controlled by a simple JavaScript/jQuery function would be greatly appreciated.

javascriptjqueryhtmlcssfullpage.js

Answer №1

Is this the solution you were looking for?

Code Sample

A basic jQuery script:

$( "#element1" ).click(function() {
  $("#element1").css("left","-100%");
  $("#element2").css("left","0");    
});

$( "#element2" ).click(function() {
  $("#element2").css("left","100%");
  $("#element1").css("left","0");    
});

This snippet uses CSS to slide the div left and right smoothly over a 1-second transition.

Answer №2

Don't stress about the number of lines when using fullPage.js - it's only 6Kb gzipped!

It offers compatibility with older browsers (IE 8+, Opera 12, and non-CSS3 browsers), works smoothly on touch devices by detecting touch movements, includes URL anchors, and features a variety of functions you may find useful.

If desired, you have the option to disable vertical centering and text resizing.

If you're unsure about vertical scrolling, consider using autoScrolling:false to achieve a layout similar to this example, which includes horizontal slides along with normal vertical scrolling.

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

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

Canvas ctx.drawImage() function not functioning properly

I've encountered an issue while trying to display images in a canvas using my rendering function. Here is the code snippet: function populateSquareImages(){ for(var i = 0, ii = squares.length; i < ii; i++) { if(squares[i].hasImage) { ...

javascripthtmlcanvasdrawimage

Tips on implementing Dynamic arrays in the useEffect hook within React applications

Does anyone have experience with using a dynamic array as input in the dependency array of the useEffect hook? I'm encountering an issue where the array is being passed as a string and therefore not triggering the hook correctly. const [formData,setFo ...

javascriptnode.jsreactjsreact-hooksdependency-injection

How to handle Component binding change events in AngularJS

I have developed a component in AngularJS that displays data. However, when the customer binding changes, I need to call a service in the component controller, but it is not updating. Below is the code snippet: In my Test1.html file: <tab-customer tit ...

javascripthtmlangularjs

The issue with the material design checkbox change functionality not functioning as expected

Currently, I am attempting to dynamically set the state of checkboxes to either true or false. The following code snippet demonstrates what I have tried so far: for(var i = 0; i < bookmakers.length; i++) { $('#' + bookmakers[i].id + &apos ...

javascriptjquerycheckboxmaterial-design

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...

javascripthtmldateif-statementquickbase

AngularJS is unable to properly show the full calendar on the screen

Currently working with fullcalender.js in conjunction with AngularJS. Encountering an issue where the calendar is not displaying without any error indication, making it difficult to identify the missing component. This marks my initial attempt at combinin ...

jqueryangularjs

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

javascriptcssdom-eventsjavascript-objects

Expanding the functionality of list div/html tags with Jquery

I am working with a code snippet containing div elements: <div>content1</div> <div>content2</div> <div>content3</div> <div>content4</div> How can I append content to the second div? <div>content1< ...

jquery

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

cssreactjs

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

javascriptjqueryajax

Using a key as an argument in the `map` function invocation

I keep getting a warning message stating that each child in the array does not have a unique key. const ITEMS = [ { "name": "apple", displayName: "Apple" "name": "orange", displayName: "Orange" }, { "name": "banana", di ...

javascriptreactjs

How to disable JQuery accordion functionality?

Is there a method to effortlessly toggle between displaying content with an accordion format and without it? Essentially, can the styles and behaviors applied to my divs be reversed back to their original state before being "accordionized"? ...

jqueryjquery-ui-accordion

Employing res.sendStatus(200) in conjunction with JQuery AJAX

I've implemented a form that triggers an AJAX call to my backend, utilizing Node and Express. The onsubmit function is responsible for this interaction. Once the submission is successful, I use res.sendStatus(200) to inform the client. This results i ...

jqueryajaxnode.jsexpress

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

Having an issue where, when I set the width of the combobox and the value inside it is longer than expected, the full value isn't displayed. I am considering displaying the value on multiple lines to ensure the entire content is visible. Unfortunatel ...

htmlcss

Trigger the function upon successful completion of Stripe Checkout

I have a requirement in my Nodejs/Express API to execute a series of confirmation code once the checkout process is successfully completed in Stripe by the client. Below is the checkout function responsible for handling the checkout phase: // Checkout con ...

javascriptnode.jspostgresqlexpressstripe-payments

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

Tree Grid in jqGrid with Offline Data

Accessing the jqGrid documentation for tree grid, I discovered the following information: "At present, jqGrid can only interact with data that is returned from a server. However, there are some tips and resources available that explain how to work w ...

javascriptjqueryjqgrid

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

javascripthtml

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...

htmlnode.jsexpressauthenticationpassport.js