Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last selected link.

Here is the code snippet for the 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>

Next up, we have the jQuery code responsible for controlling the behavior of the div:

$(document).ready(function () {
    $(".desktop").click(function() {
        $(".iframe").animate({"width" : "100%"},{queue: false, duration: 1000 });
        $(".iframe").animate({"height" : "100%"},{queue: false, duration: 1000 });
    });
    // Other click functions for tablet, tabletP, and mobile
});

I am currently using the jQuery Cookie Plugin to create and manage the cookie. Here's an example of how I'm implementing it along with the jQuery code:

// Code snippets for each link click event setting a cookie

Now, my task involves reading the created cookie to automatically select the corresponding link and adjust the div size as needed.

While exploring similar queries, I came across this discussion, which seemed relevant. However, the suggested code in that thread appears somewhat complex.

Below is an excerpt from that discussion showcasing how cookies are utilized to remember link selections:

// Sample code from the mentioned discussion

If anyone could provide guidance on how to effectively read and utilize the cookie value to auto-select the appropriate link, I would greatly appreciate it.

I trust this explanation clarifies my requirements.

Answer №1

The provided code snippet demonstrates how to retrieve the value from a cookie. The specific line responsible for this action is:

cookieVal= $.cookie('lastState')

Additionally, there is a line that checks whether any value was retrieved:

if (cookieVal)

This means you now have the ability to both obtain the value from the cookie and verify if it exists. If a value is indeed present, you can proceed to the next step, which involves selecting a particular link based on the cookie's value.

Since the element's class is stored in the cookie, you can utilize this information when specifying the selector for your simulated click event. For instance:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The element is unclickable due to being obstructed by another element

My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull-right"> How can I work around ...

Mongoose: An unexpected error has occurred

Recently, I developed an express app with a nested app called users using Typescript. The structure of my app.js file is as follows: ///<reference path='d.ts/DefinitelyTyped/node/node.d.ts' /> ///<reference path='d.ts/DefinitelyTyp ...

Using React's useEffect function with an empty dependency array to trigger a change in the

In the React application I'm currently working on, the useEffect function is triggered whenever the prop value changes from an empty array to another empty array. I am fetching query parameters from the page and passing them down to a component that ...

Change the order of the table data elements using the nth-child CSS selector

I need the second td in my table to appear on top of the first one when I resize the screen. @media screen and (min-width: 200px) and (max-width: 872px) { td :nth-child(1) {display:bottom} td :nth-child(2) {display:top} } <table border="0" cell ...

What steps do I need to take to translate jQuery code into standard JavaScript code?

Can someone please help me convert this jQuery code to plain JavaScript? window.addEventListener('scroll', function() { document.querySelectorAll('.container p').forEach(function(el) { var scrollTop = window.scrollY, ...

Acquire key for object generated post push operation (using Angular with Firebase)

I'm running into some difficulties grasping the ins and outs of utilizing Firebase. I crafted a function to upload some data into my firebase database. My main concern is obtaining the Key that is generated after I successfully push the data into the ...

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

Overlapping borders in Bootstrap 4 design

Working on my project with Bootstrap 4 and encountered a coding issue. Here is the code snippet: .form-info-tab { border: 1px solid #ccc; border-collapse: separate; border-spacing: 0px; padding:5px; text-align:center; } <link ...

How can we transfer animation duration and `@keyframe` values through a function in CSS?

In my angular project, I am currently adding animations to text. However, I want to make these animations dynamic. For instance, I have a CSS class called .slide-in-top with an animation time set to 1.3s. Instead of this static value, I want to be able to ...

The CSS within the WebComponent nesting is not valid

Upon testing, I have found that writing CSS directly using nesting is effective. However, when used within a WebComponent and nested with the :host selector, it becomes invalid. Below is a demo code snippet showcasing this issue. My Chrome version number i ...

After the Parent Component has successfully mounted, the Child Component will render

I am currently working with a third party library that has a unique prop allowing the user to pass in a string which is used to retrieve a DOM element and return its bottom value. <Sticky bottomBoundary="#some-id"> <MyChildComponentMightBeANa ...

What are the steps to take in order to successfully deploy an Express server on GitHub Pages?

I heard that it's possible to host an Express server on GitHub Pages, but I'm not sure how to do it. Is the process similar to deploying a regular repository on GitHub Pages? ...

Ways to avoid unintentional removal of contenteditable unordered lists in Internet Explorer 10

How can I create a contenteditable ul element on a webpage while avoiding the issue in Internet Explorer 10 where selecting all and deleting removes the ul element from the page? Is there a way to prevent this or detect when it happens in order to insert ...

Adjust the border hue of the MUI disabled outline input

I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...

Using Javascript to save a numeric value and accessing it on a different webpage

I'm encountering an issue with a specific feature on my website. I want users to click on a hyperlink that will redirect them to an application form page. The challenge is ensuring that the reference number (a 5-digit code displayed as a header) is st ...

Click the edit button to access the options in the material table

https://i.stack.imgur.com/Inyow.png Currently, I am utilizing Material Table within Reactjs to display the table Data. However, I have encountered a hurdle where I need to alter state upon clicking on the edit option/icon. My objective is not to modify th ...

Mapping the changes in the checkbox of a material tree node

Check out this demo on StackBlitz: Tree View I'm having issues with the tree not displaying as desired. I would like it to look like this: Manager Sublist Manager 1 Manager 2 Manager 3 Could you please review and provide some advic ...

Issue with setting and showing the PHP data array within the vue.js variable

I am encountering an issue with transferring an array of data from a PHP session variable to a Vue.js variable Here is how I am trying to assign an array of data to a Vue.js variable: permissions:['<?php echo json_encode($_SESSION['permission ...

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...