javascript - Remembering last selected href/button through a cookie with jQuery -

javascript - Remembering last selected href/button through a cookie with jQuery -

i have document uses 4 links on top navigation. upon clicking link div right below changes size. want accomplish utilize cookie remember lastly selected link.

here code links:

<li><a href="#" class="desktop">desktop</a></li> <li><a href="#" class="tablet">tablet</a></li> <li><a href="#" class="tabletp">tablet (p)</a></li> <li><a href="#" class="mobile">mobile</a></li>

and after have jquery code controls div.

$(document).ready(function () { $(".desktop").click(function() { $(".iframe").animate({"width" : "100%"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "100%"},{queue: false, duration: 1000 }); }); $(".tablet").click(function() { $(".iframe").animate({"width" : "1040px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); }); $(".tabletp").click(function() { $(".iframe").animate({"width" : "788px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); }); $(".mobile").click(function() { $(".iframe").animate({"width" : "350px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); }); });

for using jquery cookie pluging have created next code create cookie. tweaked above jquery code this:

$(".desktop").click(function() { $(".iframe").animate({"width" : "100%"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "100%"},{queue: false, duration: 1000 }); $.cookie("laststate", "desktop", { expires: 7 }); }); $(".tablet").click(function() { $(".iframe").animate({"width" : "1040px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); $.cookie("laststate", "tablet", { expires: 7 }); }); $(".tabletp").click(function() { $(".iframe").animate({"width" : "788px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); $.cookie("laststate", "tabletp", { expires: 7 }); }); $(".mobile").click(function() { $(".iframe").animate({"width" : "350px"},{queue: false, duration: 1000 }); $(".iframe").animate({"height" : "488px"},{queue: false, duration: 1000 }); $.cookie("laststate", "mobile", { expires: 7 }); });

now need know how read cookie created , give out necessary output, auto select link alter size of above mentioned div.

i had @ other questions. this seemed close looking for. code suggested in question little confusing

below code question:

$(function() { var $activelink, activelinkhref = $.cookie('activelinkhref'), activeclass = 'activelink'; $('.navbar').on('click', 'a', function() { $activelink && $activelink.removeclass(activeclass); $activelink = $(this).addclass(activeclass); $.cookie('activelinkhref', $activelink.attr('href')); }); // if cookie found, activate related link. if (activelinkhref) $('.navbar a[href="' + activelinkhref + '"]').click(); });​

i hope question clear enough.

the code posted shows how value cookie, line sets gets value cookie:

cookieval= $.cookie('laststate')

and line check see if found:

if (cookieval)

so given that, know how value cookie, , how check see if value found. if found value, go onto next step, select specific link using value got cookie.

you're storing class of element in cookie, can utilize in selector simulated click event ex:

$('.' + cookieval).click();

javascript jquery html css cookies