217 posts
  • 8 Years of Membership
  • Author Level 4
  • Canada
  • Collector Level 1
+1 more
CreativeStable
says

I am making a site that has a navigation that you can choose to show/hide. I used the tutorial here: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers

That works really well and it’s simplistic… but my problem is that as soon as you navigate to another page, the menu will refresh back to it’s original state. How can you force it to stay closed across pages if that is what the user chooses?

743 posts
  • Elite Author
  • Weekly Top Seller
  • Featured Item
  • Most Wanted Winner
+5 more
Orbital_Themes
says

Cookies? :)

217 posts
  • 8 Years of Membership
  • Author Level 4
  • Canada
  • Collector Level 1
+1 more
CreativeStable
says

mmmmm cooooookieeessss :P

haha that’s sort of what I was thinking but Im not sure how to use them?

217 posts
  • 8 Years of Membership
  • Author Level 4
  • Canada
  • Collector Level 1
+1 more
CreativeStable
says

nevermind… I found my answer using google… who knew! :P

2036 posts Quality Manager
  • Affiliate Level 2
  • Author Level 4
  • Collector Level 4
  • Envato Team
+14 more
jremick
Envato team
says
nevermind… I found my answer using google… who knew! :P

Would you mind posting the info. that answered your question? I’m curious too. :-)

217 posts
  • 8 Years of Membership
  • Author Level 4
  • Canada
  • Collector Level 1
+1 more
CreativeStable
says

This is REALLY delayed but I thought I should post in case this is helpful for someone :P

I used the tutorial here: http://www.bramme.net/2008/09/a-jquery-slider-on-cookies/ and it works very well. Not sure if this is the most elegant solution but it seems to work well and degrades properly. I chose the non-degrading route for personal reasons though hah :P

Basically include a copy of jquery and jquery.cookie.js: http://plugins.jquery.com/project/cookie

My html looks like: <div id="box"> <p>some content that i want slideable... slide slide baby.</p> </div> <p class="slide" id="top"><a href="#" class="btn-slide">toggle</a></p>

js looks like:

<script> $(document).ready(function() { var panel = $("#box"); var button = $("#top a"); var initialState = "expanded"; var activeClass = "hidden"; var visibleText = "hide"; var hiddenText = "show"; if($.cookie("panelState") == undefined) { $.cookie("panelState", initialState); } var state = $.cookie("panelState"); if(state == "collapsed") { panel.hide(); button.text(hiddenText); button.addClass(activeClass); } button.click(function(){ if($.cookie("panelState") == "expanded") { $.cookie("panelState", "collapsed"); button.text(hiddenText); button.addClass(activeClass); } else { $.cookie("panelState", "expanded"); button.text(visibleText); button.removeClass(activeClass); } panel.slideToggle("slow"); return false; }); }); </script>

sorry I can’t make TF display my code nicely with indents… haha.. looks a lot better in my files

by
by
by
by
by
by