jQuery SlideOver - Arranging Divs in a horizontal layout

Question

jQuery SlideOver - Arranging Divs in a horizontal layout

Currently, I am working on an application wizard that is designed to slide panels in order to display different sections of the resume application. You can view my site here: . The issue I am having is that when you click anywhere on the form, the panels are supposed to slide up but they end up being stacked on top of each other first. Do you have any suggestions on how to fix this problem? I apologize if my question is unclear - I found it difficult to articulate, but I believe the example on the website speaks for itself. Thank you for any assistance you can provide.

I would like to achieve a similar effect as demonstrated in this example: http://jsfiddle.net/jtbowden/ykbgT/2/

jquery html css

Answer 1

Answer №1

What is the issue with this hyperlink?

HTML:

<div id="box-container">
    <div id="item1" class="item">Item #1</div>
    <div id="item2" class="item">Item #2</div>
    <div id="item3" class="item">Item #3</div>
    <div id="item4" class="item">Item #4</div>
    <div id="item5" class="item">Item #5</div>
</div>

CSS:

body {
    padding: 10px;    
}

#box-container {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;  
}

.item {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#item1 {
    background-color: green;
    left: 50%;
}

#item2 {
    background-color: yellow;
}

#item3 {
    background-color: red;
}

#item4 {
    background-color: orange;
}

#item5 {
    background-color: blue;
}

JS:

$('.item').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#box-container');
    });

    $(this).next().animate({
        left: '50%'
    }, 500);
});

Just modify the content and you're good to go!

Answer 2

What is the issue with this hyperlink?

HTML:

<div id="box-container">
    <div id="item1" class="item">Item #1</div>
    <div id="item2" class="item">Item #2</div>
    <div id="item3" class="item">Item #3</div>
    <div id="item4" class="item">Item #4</div>
    <div id="item5" class="item">Item #5</div>
</div>

CSS:

body {
    padding: 10px;    
}

#box-container {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;  
}

.item {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#item1 {
    background-color: green;
    left: 50%;
}

#item2 {
    background-color: yellow;
}

#item3 {
    background-color: red;
}

#item4 {
    background-color: orange;
}

#item5 {
    background-color: blue;
}

JS:

$('.item').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#box-container');
    });

    $(this).next().animate({
        left: '50%'
    }, 500);
});

Just modify the content and you're good to go!

Answer 3

Answer №2

It appears that floating the container to the left may solve your issue. Give it a try and inform me of the outcome.

Answer 4

It appears that floating the container to the left may solve your issue. Give it a try and inform me of the outcome.

jQuery SlideOver - Arranging Divs in a horizontal layout

Answer №1

Answer №2

Similar questions

Error: The URL specified in /accounts/detail could not be found

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

Determine future dates based on selected date and time

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am endeavoring to send out multiple data requests using a function, ensuring that the code execution occurs only once all the results have been received

grabbing data from different domains using jQuery

The nested table is overflowing beyond the boundaries of its outer parent table

Safari alters the header color on mobile devices

Is there a way to create a 100% height effect using divs instead of tables exclusively with CSS?

Having trouble retrieving the Rest Post response using Jquery Ajax post request

Is there a way to make the product list view in Magento much more compact and smaller in size?

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

Get your hands on large files with ease by utilizing jQuery or exploring alternative methods

How can we determine the total character count of a file that has been loaded into a textarea

Utilizing PHP for loading a fresh webpage within a specific div element of an existing page through AJAX

Align anchor tag text in the center vertically after adjusting its height using CSS

How can JQuery be used to dynamically assign values to Attribute Filters?

Find an XML element that shares a common attribute with another element at the same level

What is the best way to link styleUrls to a CSS file located in a different directory?

The sidebar appears to be hovering above the footer section