• 0

[Javascript] Sidebar Location Swap


Question

Hi all, basically I have a sidebar that I want to flip sides when a certain element is clicked.

By default it is on the right hand side and it does flip to the left but then it doesn't go back to the right.

Why not?

Btw this needs jQuery to work ^^

var x = false;
$(document).ready(function() {
	var swap_sidebar = function() {
		if(x == false)
		{
			sidebar_L();
			x = true;
		}
		else
		{
			sidebar_R();
			x = false;
		}
	}

	var sidebar_L = function() {
		$('#wrap').css({'margin':'0 0 0 220px'})
		$('#sidebar').css({'float':'left','margin':'0 0 0 -220px'})
	}

	var sidebar_R = function() {
		$('#wrap').css({'margin':'0 220px 0 0'})
		$('#sidebar').css({'float':'right','margin':'0 -220px 0 0'})
	}

	$('#swap').bind('mousedown',swap_sidebar);
});

#wrap {
	margin-right:220px;
	position:relative;
}

#sidebar {
	float:right;
	margin-right:-220px;
	width:220px;
}

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Change this line...

$('body').one('mousedown',swap_sidebar);

to this...

$('body').bind('mousedown',swap_sidebar);

The "one" function unbinds itself after the first time it runs, so when you click the body the second time, nothing runs. :)

Link to comment
Share on other sites

  • 0

Ah ok thank you very much.

Darn I was looking at every single line except that one as I was sure that there could be nothing wrong lol.

*EDIT*

Hmm It's still not working. I've updated the code with what I now have and some relevant CSS.

*EDIT AGAIN*

Apparently using .bind() doesn't work but .click() does, not too sure why.

Link to comment
Share on other sites

  • 0
Darn I was looking at every single line except that one as I was sure that there could be nothing wrong lol.

Don't worry, that's a habit you'll soon lose when you're writing JavaScript. Assume nothing :laugh:

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.