Incorporating a cookie to enhance the style switch functionality of

Question

Incorporating a cookie to enhance the style switch functionality of

I need help adding functionality to a single button on my site. My goal is to switch the style of the site to a high contrast version when the button is clicked (by appending the high_contrast.css stylesheet to the head). Currently, my code only changes the style for the current page and reverts back to the default style when navigating to another page. I believe the issue lies in me setting the variable highContrast every time. I would like to incorporate the query cookie plugin (https://github.com/carhartl/jquery-cookie) but am unsure how to implement it in this scenario.

This is the HTML

<div id="contrast-btn"><a href="#" rel="css/high-contrast.css">high contrast</a></div>

This is the script

$(document).ready(function(){
    var highContrast = false;
    $("#contrast-btn a").click(function () {
        if (!(highContrast)) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            highContrast = true;
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            highContrast = false;
        }
    });
});

Any assistance is greatly appreciated. Thank you!

jquery css cookies styles switch-statement

Answer 1

Answer №1

To access and modify the value, you must use the cookie method:

$(document).ready(function(){
// Function to add stylesheet
function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>'); 
}
// Add the style sheet if the cookie is set to true
if ($.cookie('high_contrast') == 'true') {
  appendStyleSheet();      
}
$("#contrast-btn a").click(function () {
    if ($.cookie('high_contrast') != 'true') {

        appendStyleSheet();      
        $.cookie('high_contrast', 'true'); // Set cookie to true
    }       
    else {
        // Remove high-contrast style
        $("#hc_stylesheet").remove();
        $.cookie('high_contrast', 'false');
    }
});
});

You can customize the cookie by setting options such as expiration date or domain-wide validity. For example, to make the cookie valid for a year:

$.cookie('high_contrast', 'false', {expires: 365});

If you want it to be valid across your entire domain, specify the path as '/':

$.cookie('high_contrast', 'false', {path: '/'});

Answer 2

To access and modify the value, you must use the cookie method:

$(document).ready(function(){
// Function to add stylesheet
function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>'); 
}
// Add the style sheet if the cookie is set to true
if ($.cookie('high_contrast') == 'true') {
  appendStyleSheet();      
}
$("#contrast-btn a").click(function () {
    if ($.cookie('high_contrast') != 'true') {

        appendStyleSheet();      
        $.cookie('high_contrast', 'true'); // Set cookie to true
    }       
    else {
        // Remove high-contrast style
        $("#hc_stylesheet").remove();
        $.cookie('high_contrast', 'false');
    }
});
});

You can customize the cookie by setting options such as expiration date or domain-wide validity. For example, to make the cookie valid for a year:

$.cookie('high_contrast', 'false', {expires: 365});

If you want it to be valid across your entire domain, specify the path as '/':

$.cookie('high_contrast', 'false', {path: '/'});

Answer 3

Answer №2

To simplify your code, you can define the highContrast variable within the global context for future reference on the same page:

var highContrast = false;
$(document).ready(function(){
    // [...]
    highContrast = true;
    // [...]
});

However, this value will be reset on each page refresh. To address this, you can utilize cookies with the help of the jquery-cookie plugin:

$.cookie('highContrast', 'true', { path: '/' });

Retrieve and check the cookie value on page load:

if ($.cookie('highContrast') && $.cookie('highContrast') === "true") {};

By setting path = '/', the cookie will remain accessible across the entire domain.

With these adjustments, your code would look like this:

$(document).ready(function(){
    // Add the stylesheet when the page loads
    if ($.cookie('highContrast') === "true") {
        $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
    }
    // Implement a click handler to toggle the stylesheet
    $("#contrast-btn a").click(function () {
        if (!(($.cookie('highContrast') === "true"))) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            $.cookie('highContrast','true',{path:'/'});
        }       
        else {
            // Remove the high-contrast style
            $("#hc_stylesheet").remove();
            $.cookie('highContrast','false',{path:'/'});
        }
    });
});

Answer 4

To simplify your code, you can define the highContrast variable within the global context for future reference on the same page:

var highContrast = false;
$(document).ready(function(){
    // [...]
    highContrast = true;
    // [...]
});

However, this value will be reset on each page refresh. To address this, you can utilize cookies with the help of the jquery-cookie plugin:

$.cookie('highContrast', 'true', { path: '/' });

Retrieve and check the cookie value on page load:

if ($.cookie('highContrast') && $.cookie('highContrast') === "true") {};

By setting path = '/', the cookie will remain accessible across the entire domain.

With these adjustments, your code would look like this:

$(document).ready(function(){
    // Add the stylesheet when the page loads
    if ($.cookie('highContrast') === "true") {
        $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
    }
    // Implement a click handler to toggle the stylesheet
    $("#contrast-btn a").click(function () {
        if (!(($.cookie('highContrast') === "true"))) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            $.cookie('highContrast','true',{path:'/'});
        }       
        else {
            // Remove the high-contrast style
            $("#hc_stylesheet").remove();
            $.cookie('highContrast','false',{path:'/'});
        }
    });
});

Incorporating a cookie to enhance the style switch functionality of

Answer №1

Answer №2

Similar questions

Utilize Bootstrap's form-inline feature to arrange fields side by side in one neat

Designating a class for the main block

What are the ramifications of using the 'new' keyword in JavaScript?

Trouble with AJAX BitMovin: unable to process GET request

enclose code within square brackets

I am attempting to properly arrange my navigation links and logo in alignment

Guide on creating a stationary side navigation bar in HTML with Bootstrap 5 and CSS

Passing a JSON object to a different page using jQuery

Display a DIV element when a specific date is chosen using bootstrap-datepicker

What is the best way to update the src of an input using an onclick event?

Tips for effectively utilizing the page-break property within CSS

The hyperlinks in the navigation bar are leading me to incorrect destinations

SimpleLightBox refuses to function

Enhance your Coda experience with custom Jade and Stylus syntax highlighting!

Is there a method for capturing a single frame from a video and storing it in memory?

A useful Javascript function to wrap a string in <mark> tags within an HTML document

Determine the hexadecimal color value by combining two different colors along with a specified percentage/position

What could be causing this element to not float left in Firefox?

`Turn a photo into a circular shape by cropping it`

Experiment with altering the layout of certain navigation bars