CODEWITHSUNDEEP
javascriptjquerycss
00 00
00 00

Reputation: 55

jQuery: Move div to the left on click and bring it back to its original position (with the same button)

Here I am again, drowning in my noobness. I have been searching for literally HOURS to solve this problem! I am totally a beginner in jQuery/Javascript so I need some help.

This is what I want to do:

I have a navigation bar that when you click on a button, it hides it, then when you click again, it toggles it back, so the navigation bar is visible again. I have done this with jQuery and it works perfectly.

Now what happens is that, when you click that button and hide the navbar, I want the div content to slide to the left a few pixels and take up the full width (thus growing a bit bigger and filling up the useless whitespace, I especially want this for mobile-users). Again, this works perfectly.

However...if I click back on the famous button, the navigation bar comes back but the div content is still to the left, slightly hidden by the navbar. Whereas I want that when to navigation comes back, the div content comes back to its original place and width aswell.

Thus I have tried many many different codes but nothing seems to work! It either stays left or it just does not do anything. Although interesting and fun, it gets kind of frustrating after a few hours.

Here are a few things I have tried:

-toggle

-animate/stop

-if/else

-Get x position

I did not save any jQuery/javascript code but if need be, I shall provide a snippet. The reason I do not want to provide any code is because it is insanely LONG and confusing and complex!

As such, thank you very much in advance for your help! =)

Ah one last thing: Again, please keep in mind that you are talking to a beginner! So may you please be very specific and methodical (and keep it simple if possible ^^'), I would very much appreciate it since I have been searching for hours on Google and stackoverflow.

Oh woops I forgot! I do not use pixels for my units. I use "%" for the sake of responsiveness...I don't know if that actually works with jQuery...Enlighten me!

**ALRIGHT! Here is my super complicated fiddle...Somehow the jQuery is not working in my fiddle but it is working on my browser.

<html>Some super random code because it won't let me post fiddle without it but all my code is in the fiddle...</html>

https://jsfiddle.net/czcvucxL/1/**

Upvotes: 2

Views: 1508

Answers (1)

Juan
Juan

Reputation: 5060

you can get it done toggling a class from .content1 instead of using jquery

Demo

$(document).ready(function(){
    $("#CharaCircle a").click(function(){
        $("#Header").animate({width:'toggle'},350);
        $("#Sidebar, #Sidebar ul li").animate({height:'toggle'},250);


        $(".content1").toggleClass("fullwidth");
        return false;
    });

});

add this class

.fullwidth {
    width: 95%;
    left: 0;
    margin-left: 0;
}

add these to .content1 so the div starts with 10% on the left and allow the animation(transition)

.content1{
    left: 10%;
    -webkit-transition: left 0.2s ease-in, width 0.2s ease-in;
            transition: left 0.2s ease-in, width 0.2s ease-in;
}

EDIT: if you want it only with jquery Demo

$(document).ready(function () {
    $("#CharaCircle a").click(function () {
        $("#Header").animate({
            width: 'toggle'
        }, 350).toggleClass("hidden");

        $("#Sidebar, #Sidebar ul li").animate({
            height: 'toggle'
        }, 250);

        var properties;
        var $content = $(".content1");

        //build your set of properties width and marginleft 
        //are the ones you need to change
        if ($("#Header").hasClass("hidden")) {
            properties = {
                width: "100%",
                marginLeft: "0"
            };
        } else {
            properties = {
                width: "62%",
                marginLeft: "19.4%"
            };
        }

        $content.animate(properties, 250);
        return false;
    });
});

Upvotes: 1

Related Questions