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

Switching between play and pause for the video element using a component for the child

Trying to toggle the play/pause of a child video by clicking on a parent div can be challenging, especially when dealing with multiple instances of the same div and video. A normal function may only work for one specific video, as mentioned by @ken. I hav ...

javascripthtmlvue.jsvue-component

Leveraging the power of AngularJS to run JavaScript functions saved as strings

Is it possible to dynamically inject JavaScript code that is stored in a string into AngularJS controllers? var dynamicJS = "function DoSomething(value){var x = 1+1 return 2;}" I need to inject the above function dynamically into my AngularJS controller ...

javascriptangularjs

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

javascriptcssreactjssassstyled-components

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg

The tablet is having trouble playing the mp3 audio file

When clicking on an mp3 audio file, I want the previous file to continue playing along with the new one. While this works perfectly on browsers with Windows machines, there seems to be an issue when using a tablet. The second mp3 stops playing when I clic ...

javascriptphpjquerytablet

Testing inherit from a parent class in a unit test for Angular 2

Trying to create a unit test that checks if the method from the base class is being called This is the base class: export abstract class Animal{ protected eatFood() { console.log("EAT FOOD!") } } Here is the class under test: export ...

javascriptunit-testingangularkarma-jasmine

An alternative solution for forms within forms

I'm in need of nested forms, but since they are not allowed in HTML, I've come up with a solution. I decided to have several submit buttons within one form. Now, my problem is figuring out how to determine which of the submit buttons is pressed ...

htmlformsviewcodeigniter-2

Having trouble getting the Socket.io package to install on Node.js in Windows 7?

Hey there! I'm having trouble installing the socket.io module using npm install socket.io. Unfortunately, I encountered the following error: npm WARN package.json <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f80c3869 ...

javascriptasp.net-mvc-3node.jssocket.io

Determine the value of an object by iterating through its keys

UPDATE: (for clarification) I currently have a table named modelCoa +----+----------+-------+--------------------+ | id | id_parent| code | name | +----+----------+-------+--------------------+ | 1 | 0 | 1 | asset ...

javascriptvue.js

Reactjs: Prop Type Error - Issue with retrieving the values from props during data submission

Currently, I am developing a social app where users can post screams, like posts, and add comments. The issue I'm encountering is that I am not receiving the props value when posting a new scream initially, but after refreshing the page, everything wo ...

javascriptreactjsreact-reduxmaterial-uireact-props

Troubleshooting: Google Tag Manager showing a blank page

After attempting to integrate Google Tag Manager into my website, I encountered a strange issue where upon refreshing the page, it would go completely blank with no specific error displayed. I followed the only upvoted solution from a thread on Stack Over ...

javascriptgoogle-tag-manager

Implementing CSS styles with jQuery

Looking for a way to dynamically add CSS attributes to different form elements like text fields, text areas, checkboxes, and dropdowns? There's also a separate block that lists possible CSS properties such as font, font-style, width, and padding. What ...

javascriptjqueryhtmlcss

AJAX form in a partial view displaying a summary of validations

I am facing an issue with my application that utilizes an AJAX form. Whenever the form is submitted and fails validation, I return the partial view in which the form resides. In this scenario, I would expect the Validation Summary to be displayed. However, ...

c#jqueryajaxasp.net-mvc-4validation

What is the process for using the scrollIntoView function on an svg element like a rectangle?

I have a graph panel with an SVG. The nodes in the SVG are listed in a separate panel. I would like for when a node is clicked in the node list, the SVG will scroll to that specific node. Each node is represented by a rectangle shape. However, I noticed th ...

javascriptextjssvgextjs4

What is the best way to include a subscript (small letter) beneath a word using html and css bootstrap 5?

Is it possible to add a small letter (sub) below a word in HTML and CSS? I have included a screenshot for reference. I want to display "Max 100, Min 1" just like shown in the image. Here is my code: <input type="text" class="textarea" ...

htmlcssbootstrap-5

The drop-down menu keeps flickering instead of remaining open when clicked

I am facing an issue with a dropdown menu in my webpage. The menu is initially hidden, but should become visible when the list element containing it is clicked. I have written JavaScript code to add a class that changes the visibility property to visible u ...

javascripthtmljquerycss

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

Problem with Pinia: nested array in an object

My unique store located within a vue3 application, contains an object called currentReservation with a property named pricings which is an array. Each pricing includes an id and quantity. When I add a new pricing, it is added to both the store and compone ...

javascriptvue.jsvuejs3pinia

Leveraging dynamic visuals for your Twitter metadata image

My Twitter application automatically posts the current title being broadcast on my web radio every 20 minutes. It includes details like the artist, number of listeners, and playlist, but does not display album covers. To work around this limitation, I am ...

javascripthtmlimagetwittermeta-tags

Accessing and displaying all states in $stateProvider using AngularJS and ui-router

Here's a simple question: how can I find all instances of $stateProvider.state in my app.js, which is my AngularJS config file? In the past with ngRoute, I could achieve this by using a similar approach in my .run() block: .run(function ($route) { ...

javascriptangularjsangular-ui-router