Modification of window size using jQuery animations

Question

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%.

However, when I try to reveal the sidebar by swiping or pressing a button, the page resizes and zooms out to accommodate the sidebar. I have found that by setting the container width to less than 100%, I can prevent this from happening, but I still want my content to be the full width of the page.

This is the code snippet I am using to move the sidebar:

$("allContainer").animate({left: '40%'});

You can find the code here on JSFiddle for reference.

Any help or suggestions would be greatly appreciated. Thank you :)

javascript jquery html css

Answer 1

Answer №1

The reason for the awkward animation is due to animating the entire container allContainer, causing everything to shift left. To fix this, focus on animating just the sidebar itself.

Check out the live example here: http://jsfiddle.net/bc4kau0w/3/

Here's the relevant CSS:

#sidebar {
  width: 40%;
  height: 100%;
  float: left;
  background: blue;
  margin-left: -40%;
  position: absolute;
}

button {
  float: right;
}

And the JavaScript code:

var isMoved = false;
$("button").click(function() {
    if (isMoved) {
        $("#sidebar").animate({
            left: '0px'
        });
    } else {
        $("#sidebar").animate({
            left: '40%'
        });
    }
    isMoved = !isMoved;
});

If you don't want the sidebar to cover any content, this updated fiddle demonstrates the content shrinking as the sidebar expands, ensuring nothing is obscured. Ultimately, the key issue was animating the allContainer instead of its individual components.

View the adjusted fiddle here: http://jsfiddle.net/bc4kau0w/4/

Answer 2

The reason for the awkward animation is due to animating the entire container allContainer, causing everything to shift left. To fix this, focus on animating just the sidebar itself.

Check out the live example here: http://jsfiddle.net/bc4kau0w/3/

Here's the relevant CSS:

#sidebar {
  width: 40%;
  height: 100%;
  float: left;
  background: blue;
  margin-left: -40%;
  position: absolute;
}

button {
  float: right;
}

And the JavaScript code:

var isMoved = false;
$("button").click(function() {
    if (isMoved) {
        $("#sidebar").animate({
            left: '0px'
        });
    } else {
        $("#sidebar").animate({
            left: '40%'
        });
    }
    isMoved = !isMoved;
});

If you don't want the sidebar to cover any content, this updated fiddle demonstrates the content shrinking as the sidebar expands, ensuring nothing is obscured. Ultimately, the key issue was animating the allContainer instead of its individual components.

View the adjusted fiddle here: http://jsfiddle.net/bc4kau0w/4/

Modification of window size using jQuery animations

Answer №1

Similar questions

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

Avoid navigating through hidden tab indexes

Having difficulty sending a value with %45 to a REST API

Tips on adding a hotspot to an image using jQuery for selecting a specific area

Showing a div with a smooth fade-in effect while switching its display property to inline using jQuery

Is it possible for Django's trans tags to incorporate HTML tags?

Display a hyperlink in an iframe on the main page from a different domain using JavaScript

What is the reason that TypeScript does not automatically infer void & {} as the never type?

AngularJS Login Popup with SpringSecurity

Passing a particular object from an array of objects as props in React Native

What is the best way to access the text content of a nested HTML element for automation tasks with Selenium or Protractor?

Customizing and adjusting the CSS for all individuals accessing the website

Using jQuery to insert HTML content into a div element by replacing a specific string

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

extract element from a string with the help of jquery

Extract several "documents" from one compilation

worldpay implements the useTemplateForm callback function

show a function written in JavaScript

Transferring PHP array to JavaScript with the help of AJAX

The sticky HTML table header feature is functional, however, the header's border disappears while scrolling