Set Divs in Absolute Position Relative to Each Other

I need to create a simple navigation system using <div> elements as individual pages. The goal is to have "next" and "back" buttons that allow users to switch between these pages with a smooth fade-in and fade-out effect, all powered by jQuery. However, styling the divs with position:absolute causes them to overlay other elements on the page, which isn't ideal.

Is there a way to make these <div> elements appear stacked on top of each other without interfering with the layout of surrounding content? I've tried containing them within a relative position element, but this approach led to overflow issues.

Edit:

For reference, here is a basic fiddle showcasing my current implementation: http://jsfiddle.net/9AXS4/4/

Apologies for any confusion between $ and jQuery. I've been experimenting with jQuery extensively since implementing jQuery.noConflict().

javascriptjquerycsspositioningslideshow

Answer №1

If your pages, referred to as such, are set dimensions in terms of width and height, then you have the option to designate their container as position:relative while ensuring it also matches the same width and height of the pages.

.container{
   position:relative;
   width:500px; /*total width of a page, including padding and borders*/
   height:400px; /*total height of a page, including padding and borders*/
}

This will enable the container element to properly handle the arrangement of other elements within it.

Your updated corrected fiddle can be found here: http://jsfiddle.net/gaby/9AXS4/2/

(be sure to factor in paddings and borders when specifying the width/height of the container)
Also note that instead of targeting the container using .pagecontainer, you should use #pagecontainer (since an id was utilized)

Update (response to comment regarding variable heights..)

If the height of your pages is not fixed, utilizing jQuery to dynamically resize the container is necessary.

A complete demo can be accessed here: http://jsfiddle.net/gaby/9AXS4/7/

Answer №2

It's not possible to position the divs absolutely in relation to each other, but they can be positioned absolutely in relation to an outer div. The container holding the page divs needs to have position: relative to contain the inner page divs that are absolutely positioned.

If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want scrolling. Make sure to provide a height and width when using the overflow property for the browser to know where the overflow should occur.

http://jsfiddle.net/vkTXs/

$(".page").each(function(){
    jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
    jQuery(this)
    .parent().fadeOut()
    .next().fadeIn();
    var page = $(this).parent().next();
    resizeContainer(page);
});
$(".back").click(function() {
    jQuery(this)
    .parent().fadeOut()
    .prev().fadeIn();
    var page = $(this).parent().next();
    resizeContainer(page);
});

function resizeContainer(page){
    // get height of next page
    var newPageHeight = $(page).height();
    // add padding and border
    newPageHeight = newPageHeight + 14;
    $('#pagecontainer').height(newPageHeight);
}

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

Generating dynamic JSON objects in Node.js

Here is the initial JSON data I have: { "fullName": "abc", "age": 19, ... } I am looking to utilize Node.js in order to add elements from the above JSON to an object called Variables within the following JSON: { &q ...

javascriptnode.jsjson

Using a dojo widget within a react component: A beginner's guide

Has anyone found a way to integrate components/widgets from another library into a react component successfully? For example: export default function App() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + ...

javascriptreactjsdojo

Click event in jQuery to change the background color of <td> element

I'm still getting the hang of jQuery, so please bear with me. :) The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for a ...

jquerycsscolors

The button on my page refuses to align in the center, and I'm at a loss as

Struggling to center a button within my div, despite having all other content centered. Here is my code: .middle { width: 100%; height: auto; text-align: center; position: relative; ...

htmlcssbuttoncenter

Creating blinking or flashing text using CSS 3 is a fun way to add eye-catching animation

Here's the current code I'm using: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timi ...

htmlcsscss-animationsopacity

The combination of Backbone.js and underscore.js is causing disorganized HTML code

When it comes to creating HTML elements, I typically use a combination of backbone.js and underscore.js. Here is an example snippet from my usual workflow: _.template($('#html-container').html(), this.model.toJSON()); I then append this code wh ...

jqueryhtmlbackbone.jsunderscore.jstemplating

What are the techniques used to minimize JavaScript functions?

Is there a more efficient way to reduce the amount of JavaScript code needed for functions that share the same call procedure? I'm struggling to find a clear explanation but here's the code snippet below... JavaScript: $(function() { $( &a ...

javascriptjqueryfunction

Having trouble decoding a cookie received from a React.js front-end on an Express server

When using React js for my front end, I decided to set a cookie using the react-cookie package. After confirming that the request cookie is successfully being set, I moved on to configure the Express server with the cookie parser middleware. app.use(cookie ...

javascriptnode.jsreactjstypescriptexpress

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

javascripthtmlvue.jstemplate-literals

Accessing a Variable in Jquery from Outside a Function

I am facing an issue with a function where I define a variable and can call it within the function without any problems. However, when I try to use alert outside of the function, it does not work as expected. Can you please guide me on what mistake I am ma ...

jqueryfunctionvariablesalert

What is the best way to execute multiple controller functions for a single route?

I have a specific route set up for users to submit loan applications. What I want to achieve is to call different controller functions based on the amount of the loan that the user is applying for. app.use('/submitLoanRequest50kMore', mw1, mw2, ...

javascriptnode.jsexpress

Ways to deselect checkboxes with Typescript and Jquery

I have a set of checkboxes all labeled with the same 'types' class. There is a button on my webpage that should be able to toggle between selecting and deselecting all the checkboxes in this group. When checking the boxes, I use the following sc ...

jqueryangularjs

What's a way to pass a PHP variable directly to Javascript without using AJAX?

In my setup, I've implemented a JavaScript code that validates and sends the 'artwork' file to a PHP script on my server. This PHP script also performs its own checks for redundancy before writing the file to /uploads directory. The challen ...

javascriptphpajaxvariables

The width of the Bootstrap shadow container is not optimized for large viewports

Having recently started using bootstrap (less than six hours of documentation/development time), I encountered an issue where the width of my shadow container extends too far on smaller screen sizes. Any screen size above 991px leaves unwanted white space ...

htmlcssbootstrap-5

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

Error encountered while generating PDF using xhtml2pdf Pisa.CreatePDF() due to CSS parsing issue

Currently, I am referencing the xhtml2pdf instructions. I opted to utilize one of the provided sample html files and saved it as test.html: <html> <head> <style> @page { size: a4 portrait; @frame header_frame { ...

pythonhtmlcsspdfxhtml2pdf

The parameters 'event' and 'event' are not compatible with each other

I'm currently working on a page that involves submitting a form: import React from 'react'; import Form from 'react-bootstrap/Form'; import { useSignIn } from '../../hooks/Auth/useSignIn'; import { useHistory } from &apos ...

javascriptreactjstypescript

jQuery autocomplete function fails to run when embedded within a dynamically loaded AJAX form on a Ruby on

In my Rails application, I am loading a compose mail form by making an AJAX request. The code in my compose.js file looks like this: $('#main').html("<%= j render :partial =>"smails/form" %>"); When implementing an autocomplete fiel ...

jqueryruby-on-railsajaxcoffeescript

Executing a JavaScript function when an element is clicked using inline

Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...

javascriptonclick

Can the html content provided by the user be extracted and highlighted?

When utilizing the onClick function in ReactJS, I am receiving the entire property which includes Lorem Ipsum is simply dummy text. However, I only require the highlighted content like "is simply dummy". Is there a way to achieve this?</p> ...

javascripthtmlreactjsonclickdom-events