Tanoru Posted December 19, 2010 Share Posted December 19, 2010 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 More sharing options...
0 +Majesticmerc MVC Posted December 19, 2010 MVC Share Posted December 19, 2010 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 More sharing options...
0 Tanoru Posted December 19, 2010 Author Share Posted December 19, 2010 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 More sharing options...
0 +Majesticmerc MVC Posted December 19, 2010 MVC Share Posted December 19, 2010 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 More sharing options...
0 sweetsam Posted December 19, 2010 Share Posted December 19, 2010 Use classes to store your styles. It will keep js clean and avoid mistakes and formatting issues. Link to comment Share on other sites More sharing options...
Question
Tanoru
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