How to make a static div adjust its size in the presence of a neighboring div

I am looking to create a feature where the user can click a button to reveal a new div to the right of an existing one. Check out this Fiddle for reference: http://jsfiddle.net/AV2mZ/.

While the functionality works fine when both divs are visible, resizing the window causes layout issues. I have been trying to address this problem myself but could use some expert advice.

Any detailed help on this matter would be greatly appreciated.

Thank you!

<div id="change">
    <div style="width:56px;height:56px;position:absolute;background:#999;left:0;top:0;">Stay?</div>
    <div style="width:56px;height:56px;position:absolute;background:#999;right:0;top:0;">Stay?</div>
</div>
<div id="right" style="width:300px;height:100%;background:#000;position:fixed;right:-300px;">

</div>
<br><br><br><br><br><br><br><br>
<button id="toggle">slide it</button>
$('button').live("click",function() {
    $('#change').animate({
        width: $('#change').width()-$('#right').width()
    }, 300);
    $('#right').animate({
        right: "0"
    }, 300);
    return false;
});
$(window).resize(function() {alert($('#change').width()-$('#right').width());
  $('#change').animate({
        width: $('#change').width()-$('#right').width()
    }, 300);
});

Answer №1

Avoid using the width of #change if you plan on changing it, as this can cause unexpected results. For instance, if you click "slide it," the width will be set to "initWidth - 300." If you then resize the window, the width will become "initWidth - 300 - 300" and so forth.

To achieve the desired effect in your example, consider using the width of the body instead:

$('#change').animate({
        width: $('body').width()-$('#right').width()
  }, {duration: 300, queue: false});

http://jsfiddle.net/j7Nxj/1/

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

When the second click triggers the loading of a JSON lot via AJAX

As a newcomer to jQuery and ajax, I am in the process of developing an application where content is loaded from a JSON file based on the navigation option selected. Here is the code snippet I've been working on: $(document).ready(functi ...

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...

Failed to retrieve Json data from the designated remote url

I have been trying to figure this out for hours. I'm struggling to retrieve the JSON data from a remote REST API. My goal is to fetch the JSON data and display the "html_url" field from it on my website. <html> <head> ...

Switching between links while using Vue Router may cause jQuery to become disabled

I am currently utilizing vue router to facilitate navigation on my website. Within this setup, I have various pages such as a home page and an about us page. The issue I am facing pertains to some jQuery functionality that is implemented in a separate JS f ...

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

An effective way to determine the size of a browser through javascript

In an effort to enhance the responsiveness of a website, I have included the following code snippet on one of my pages: document.write(screen.width+'x'+screen.height); However, I am encountering an issue where the code displays my screen resolu ...

Speedy PHP Pagination

When running a MYSQL query that retrieves approximately 10,000 rows for reporting purposes, my current pagination system loads all the rows initially and then reduces them based on the page limit. This process significantly slows down the load time. In ad ...

The Facebook share button on my website is malfunctioning

Could someone please help me figure out why my custom Facebook share button is not functioning properly? When I click the button, the share window fails to appear. I have tested it as an html file on a live web server and have thoroughly reviewed the Faceb ...

Error in processing AJAX request for Datatables

Currently, I am utilizing DataTables for server-side processing by fetching information from a form. Upon submitting the form, DataTables triggers an Ajax request which is then handled by a Java Servlet. Encountering some issues, I turned to Firebug for d ...

proper method for sending parameter in ajax request

When attempting to send a string to a service using Ajax, I encountered an error message stating unexpected token illegal function main() { age = <%= myclass._age %>; passedname = encodeURIComponent( <%= myclass._namestrings %> ); ...

Utilize multiple background images in CSS with a set of three unique images

I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...

Implementing a jQuery full-screen scroller with AJAX functionality

Having an issue with implementing Jquery fs scroller on my website. The challenge is that I want to add a scrollbar through fs scroller using an ajax call on certain pages, but the js library doesn't load properly in the ajax success function. Can som ...

Interactions in JQuery UI

Having issues with jQuery UI events. I have sliders in my app and occasionally need to adjust the "min" option. However, I'm facing a problem where the change() event is not triggered after making the adjustment. I would assume that every time the val ...

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

Stop the Text Table from being highlighted

My webpage includes a dynamic table where users can select multiple rows. jQuery events and CSS are utilized to provide visual feedback when a row is selected. However, pressing the shift key sometimes causes text to become highlighted, which is not idea ...

jQuery AJAX Concurrent Event

I have encountered a problem similar to ones discussed on SO, but none exactly match my specific issue. Here's the situation: var x = 5; if( some condition ){ $.ajax({ url:"...", success: function(response){ x = respo ...

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

Guide to positioning a top navigation menu with dropdown items in the center using CSS: absolute positioning

I have implemented a pure CSS menu from this source on my website. It functions properly in the 'hamburger menu' mode, but I am encountering difficulties when attempting to center or right-align the menu in other modes. Despite trying various so ...