PDA

View Full Version : Help with Cookies Jquery Toolbar



mulaus
03-21-2013, 06:07 AM
Hi im currently testing this toolbar script in localhost

http://www.pvmgarage.com/2009/12/nice-and-simple-toolbar-for-your-website-with-css3-and-jquery/



//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
});

//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
});


all is working only i need the toolbar to be closed in other page or refresh after user click the hidebutton
and the bar will only be shown again if user click show button

i thing i need to use cookie, i found this tutorial below but can't get it working
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/



can anyone take a look

TQ

Beverleyh
03-21-2013, 06:39 AM
JQuery cookies have always worked fine for me but there is nothing in the code you've posted that relates to jQuery cookies. You need to set a cookie on hide, and then delete the cookie on show. Youll also need some if statements that do something once the cookie is found. The part relating to cookies is towards the bottom of the tutorial. Lastly, if you havent already done it, you'll need to have the jQuery cookie plugin linked to your page.

The cookie logic would go something like;
//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
// set the cookie
});

//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
// destroy the cookie
});

if (cookie == found) {
keep toolbar hidden
}


If you need more help, please post a link to your page/sample page - upload it to a temporary testing area and then you can remove it again once you've got it working.

mulaus
03-21-2013, 08:00 AM
I have uploaded it here (http://mulaus.5gbfree.com/2.html)

i have limited knowledge in jquery but heres what i tried so far




//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
$.cookie('sample1', 'close');
});

//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
$.cookie('sample1', null);
});



before </body>



<script type="text/javascript">
var sample1 = $.cookie('sample1');
if (sample1 == 'close') {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
};

</script>

Beverleyh
03-21-2013, 08:32 AM
You'll need to download and link to the jQuery cookie plugin too. At the moment you only link to jquery-1.3.2.min.js

Tested and working;

//hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeIn("slow");
$.cookie('toolbar', 'hide');
});


//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
$("#toolbar").slideToggle("fast");
$("#toolbarbut").fadeOut();
$.cookie('toolbar', 'null');
});

//cookie action
var toolbar = $.cookie('toolbar');
if (toolbar == 'hide') {
$("#toolbarbut").fadeIn("slow");
$("#toolbar").css({"display":"none"});
};

mulaus
03-21-2013, 10:18 AM
Thank you Beverly

You made my day..

but i have strange issue, i tried in localhost its now working fine but when i tried in live server (http://mulaus.5gbfree.com/2.html) it is not working . I have reuploaded all the files twice...

refresh and clear browser cache close reopem browser but its just not working in live server. can you try here (http://mulaus.5gbfree.com/2.html) if its working 4 u ?

Beverleyh
03-21-2013, 10:54 AM
Looks like you haven't uploaded the "jquery.cookie.js" file.

The path in your markup says it should be sat in the same folder as both "jquery-1.3.2.min.js" and your "2.html" web page, but at the moment, it isn't there.

mulaus
03-21-2013, 11:29 AM
its there uploaded it twice ...but the file is inaccessible

i rename it to jquery-cookie.js

and now its working fine

Thanks again Beverly :-)