Slide inside a div to move content

Check out the script I've been experimenting with for bringing in a menu from the left:

Demo Fiddle

To make this work, the sliding DIV needs to not only appear on the left but also push the 'left panel' and 'right panel' accordingly. Instead of just hovering over the left panel, it should actively move it.

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});
jquerycss

Answer №1

Here are the steps you can take:

To achieve this effect, modify the CSS by removing the absolute positioning and setting the width to 0%.

CSS:

.hidden {
    width:0%;
    background:#f90;
    color:#000;
}

Next, animate the value of width instead of the value of left:

JavaScript:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"width":"0%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"width":"25%"}, "slow").addClass('visible');
    }
    });
});

Check out the DEMO here: http://jsfiddle.net/X5mP3/

Alternatively, you can animate the left margin value instead of the width. Keep in mind that depending on your code structure, you may need to set overflow: hidden on a parent element to hide the div behind it: http://jsfiddle.net/652RY/

Answer №2

If you want to achieve this effect, one way is to animate the container that holds all three div elements. You can animate the container's left property by the width of your left side menu.

Check out the example here: http://jsfiddle.net/ZQTFq/1916/

Here's the HTML code:

<div class="container">
    <div class="hidden">Here I am!</div>
    <div class="left">Left panel</div>
    <div class="right">Right panel</div>
    <div class="clear"></div>
</div>
<div>
<a href="#" id="slide">Show/hide Slide Panel</a>
</div>

And the JS code:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
     if (hidden.hasClass('visible')){
        hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"140px"}, "slow").addClass('visible');
    }
    });
});

Lastly, here is the CSS code:

.container{
    position:absolute;
    width:100%;
}
.left, .hidden {
    float: left;
    height:350px;
    position:absolute;
    left:-140px
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

#slide{
    position:fixed;
    bottom:0;
}
}

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

What are the ways to personalize the material UI select component?

I am looking to customize a MUI select component that I have rendered on a dark background. My goal is to make the outline and all its contents light colors, specifically grey and white. https://i.sstatic.net/HFUBj.png So far, I have successfully changed ...

cssreactjsmaterial-ui

Send multiple input groups using Ajax POST requests

I need help setting up a form with 4 groups of checkboxes for refining search results. My goal is to send an array for each checkbox group that contains the IDs of the currently selected checkboxes. $.ajax({ url: "/stay_in_belfast/accommodation", t ...

javascriptjqueryajaxformspost

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

htmlcss

Fill in the missing keys, values, and data within the JSON object

My JSON data consists of various objects with unique dates and site names. The dataset contains distinct dates such as: 2019-10-01, 2019-10-02, 2019-10-03, 2019-10-04, 2019-10-05. Some dates might be missing for certain sites in the dataset. For example, o ...

javascriptjqueryarraysjsonjavascript-objects

Issue with Datatable when making an ajax request

My web application utilizes Datatable and AJAX to retrieve data. Below is a snippet of my code: <script> $(document).ready(function() { $('#mytable').DataTable(); } ); </script> <body> <h2>AJAX SELECT&l ...

phpjqueryajaxdatatabledatatables

MySQL long polling technique in PHP

I stumbled upon a script that utilizes PHP long polling. It uses the code below to detect changes in a text file and returns its contents to the browser. Is there a way to modify this script so it can check a table for new events instead? $filename = dir ...

phpjquerymysqlajaxlong-polling

The interaction between jQuery Masonry and Bootstrap results in unexpected grid behavior

I've spent hours trying to solve this problem, but I can't seem to get it to work as intended. I want the layout of my boxes to be like this using Bootstrap grids: However, after implementing the jQuery Masonry plugin (which I used to manage va ...

htmlcsstwitter-bootstrapjquery-masonry

The PhoneGap integration causing issues with jQuery Slide Panel functionality

My code runs smoothly in browsers, but faces issues with PhoneGap compilation. The SCROLL FROM LEFT/SCROLL FROM RIGHT functionality doesn't seem to work as expected. Despite this, the LEFT/RIGHT menus can be accessed by clicking the button at the top ...

jqueryjquery-mobilecordova

The clickable areas for the href and onclick functions are extremely small and positioned inaccurately on the screen

The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center o ...

htmlcss

Arranging an accordion in alphabetical order using jQuery

Could someone help me with organizing my accordions alphabetically? I would like to have 4 buttons at the top of all accordions to sort them alphabetically by: Name, Lastname, Street, City Here is the HTML Code I currently have. <div class="all"&g ...

jquerysortingaccordionalphabetical

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...

javascriptjquerycsshtml

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

Converting RSS title to HTML format with the help of JavaScript

I am currently working on populating a menu on a webpage with the 5 latest topics from our site's RSS newsfeed using JavaScript (specifically jQuery version 1.9.1). I have been searching for a solution, but most answers I find reference deprecated scr ...

javascriptjqueryhtmlxmlrss

Is it possible to reorganize the order of elements in a

My goal is to create a flex column layout where the image appears first. However, I'm facing an issue with the code below, as it only changes the order when the flex direction is set to row (image on the left). It does not work for rows. </head> ...

htmlcsstailwind-css

What is the best way to nest a div within a flexbox container?

I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div. My goal is for the "content" div to be responsive to 90% ...

htmlcss

Tips for automatically focusing a div upon page load

Here is a code snippet for you to review: <div id="details"> <nav> <a href="#1"><span>Summary</span></a> <a href="#2"><span>Perso ...

phpjqueryhtml

Invoke a codebehind function using jQuery

I am encountering an issue while trying to complete a simple task. I am attempting to pass values to a code behind method, perform some calculations, and then return the result. Initially, I started with a test method but have not been successful in making ...

c#javascriptjqueryasp.netajax

Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success. http://jsfiddle.net/9HP9Q/1/ The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. .order_table tab ...

htmlcsshtml-tableinternet-explorer-8border

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

css

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte