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

Exploring AngularJS tab navigation and injecting modules into the system

Two separate modules are defined in first.js and second.js respectively: first.js var app = angular.module('first',['ngGrid']); app.controller('firstTest',function($scope)) { ... }); second.js var app = angular.mo ...

javascriptangularjsmodel-view-controllerdependency-injection

Extract JSON data from a web address using JavaScript

A unique system has been created to parse JSON and style it using CSS. Instead of outputting the data within the script, the goal is to retrieve data from a local or remote URL. <script type='text/javascript'> $(window).load(function(){ va ...

javascriptjson

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

Guide on using a pipe feature with varying arguments when the main function is called

I am delving into functional programming for the first time and have a query regarding using pipes. Imagine I have this particular function: const updateArray = R.curry((index, value, array) => Object.assign([], array, {[index]: v ...

javascriptfunctional-programming

Create a new attribute within the ng-model object once it has been updated through ng-repeat

I am trying to figure out how to add a "discountRate" property to an ng-model object after it has been changed within an ng-repeat block. Check out this example for more information Another example can be found here Although the ng-model is updated as e ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Store the advertisement click into the database utilizing PHP, subsequently access the provided hyperlink

I am developing a custom WordPress widget that displays advertisements. I want to track clicks on these ads and store the data in a database. The database table for click tracking is already set up, and I have a function called f1_add_advert_click($advert ...

javascriptphpwordpress

What is the best way to run a function within an if statement without duplicating code if the condition is false?

When working with relay mutation code, I find it necessary to reload the store in order for it to sync with the database. This is because if the text being added is the same as previously added text, the relay store throws an error called flattenChildren.. ...

javascriptreactjsecmascript-6relayjs

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

When attempting to apply the bootstrap link and css files to the URL "/list/:customListName", they are not working. However, changing the URL to "/:customListName" somehow makes it work. What is the reason behind this behavior and how can I properly style ...

javascriptnode.jsmongodbexpressmongoose

Is it possible to execute an npm package without using the npm run command?

Is there a way to initiate the next.js build process directly through the command line without needing to use the package.json file? Can we execute it without relying on npm run? Perhaps running next build in the command line could achieve this instead of ...

javascriptnpmnext.js

Tips for setting variable values in Angular 7

I'm encountering an issue with assigning values to variables in my code. Can anyone provide assistance in finding a solution? Here is the snippet of my code: app.component.ts: public power:any; public ice:any; public cake:any; changeValue(prop, ...

javascripttypescriptangular7

Executing JavaScript code in the Selenium IDE

I'm having trouble figuring out how to execute JavaScript within the Selenium IDE. The objective is to enter text into an input field, with a backend setup that verifies the current time in the input field for testing purposes: Here's the input f ...

javascriptseleniumselenium-webdriverselenium-ide

Searching for specific elements in jQuery by using their unique id followed by numbers within HTML tags

When working with HTML code like this: <table> <tr> <td bgcolor=yellow>LED #1</td> <td id=led0 bgcolor=red>ON</td> </tr> <tr> <td bgcolor=yellow>LED #2</td> ...

jqueryloops

Tips for resolving the 'route.search' bug in Express.js

I recently started working on a basic Express app (with Node) and I am in the initial setup phase. However, I have encountered an error that is proving to be quite challenging to resolve. Despite my attempts to search for solutions online and browse throu ...

javascriptnode.jsexpress

Sending the value of "username" between two components within Angular 2

I have a good understanding of nesting child components within parent components in Angular 2, but I'm a bit unclear on how to pass a single value from one component to another. In my scenario, I need to pass a username from a login component to a cha ...

javascriptangulartypescriptsocket.io

Creating duplicates of elements and generating unique IDs dynamically

I'm in the process of cloning some form elements and I need to generate dynamic IDs for them so that I can access their content later on. However, I'm not well-versed in Jquery/Javascript and could use some guidance. Here's a snippet of my ...

javascriptjqueryhtml

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

phpjavascriptjqueryhtmlmysql

Cycle through every jQuery selector individually

Struggling with some calculations on my website application. Here's the situation: This is the structure of my HTML code: <table> <tr> <td><span class="sub_total">10</span></td> </tr> <tr& ...

jqueryeach

Incorporate Diverse Content into Div Tags on Your Wordpress Site

Wondering how to achieve a similar effect in Wordpress like the one on Wendys.com website. My client wants clickable areas that will load content at the top of the page. Looking for advice on the most logical way to implement this in Wordpress. I've ...

phpjqueryajaxwordpress

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

I have been given a project that involves API integration. I have successfully retrieved data from the API, but there is a pop-up appearing asking for a username and password. Although I have these credentials, I would like to log in without that pop-up ap ...

javascriptnode.jsreactjsapi

Issue with fancyBox not functioning properly when integrated with a caption script

Hey there! I've been working with both jQuery's fancyBox for displaying image/video galleries and the Capty script for showing image titles on images. However, I've run into a snag - when the title is displayed on the image, fancyBox st ...

jqueryhtmlcssfancyboxfancybox-2