Creating a cookie on click event to change the background

Question

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value of the cookie.

Could someone provide some guidance or suggestions on how to resolve this issue?

<div class="container">


<div class="col-md-6">

<div class="one"><a id="1" onClick="addcookie()" href="#">First Link</a></div>

</div>



<div class="col-md-6">

<div class="two"><a id="2" onClick="addcookie()" href="#">Second Link</a></div>

</div>




</div>
<script src=js/jquery-1.11.1.js></script>
<script src="js/jquery.cookie.js"></script>

<script>

var cookieName = 'cookie1';
function addcookie(){



    var date = new Date();
    var minutes = 5;
    date.setTime(date.getTime() + (minutes * 60 * 1000));

    var idi = getDocumentById(this.id);

    var cookieValue = "http://path to image/image"+idi+".png";

    $.cookie(cookieName, cookieValue, { expires: date });

    $('.one').css('background', $.cookie('cookieName'));

}

</script>



<script src=js/bootstrap.js></script>
</body>

javascript jquery css cookies background

Answer 1

Answer №1

Aside from @George's noted correction in a comment (replacing getDocumentById() with document.getElementById()), it is crucial to ensure that the image URL is properly encoded. Instead of...

$('.one').css('background', $.cookie('cookieName'));

...you should do this...

$('.one').css('background', 'url("' + $.cookie(cookieName) + '")');

The correct CSS syntax for background URLs is not...

background:http://path to image/image.png

...but...

background:url("http://path to image/image.png");

Furthermore, when using a variable as a function parameter, the quotes around it must be omitted, like from $.cookie('cookieName') to $.cookie(cookieName).

Additionally, this.id will only return the element's id if you pass this as a parameter in your inline function like this:

onClick="addcookie(this)"

...then reference it in your function like so:

function addcookie(that)

...and use it as follows:

var idi = that.id;

Here is a jsfiddle where you can experiment with this: http://jsfiddle.net/yxj8w6d0/

EDIT: By making slight adjustments (removing the one and two classed divs, and adding no-repeat to the background), you can neatly add the background only to the intended element. Check it out here: http://jsfiddle.net/yxj8w6d0/1/

EDIT #2: To load images if the cookie already exists, create a function that executes on document ready to iterate through your links and compare them with existing cookies, as shown below:

$(document).ready(function() {
    $('.container div a').each(function(){
        if ($.cookie(this.id))
            $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat');
    });
});

I have updated the fiddle accordingly. Test it by clicking the links first, then rerun the script - you'll notice the links will retain their background: http://jsfiddle.net/yxj8w6d0/2/

Answer 2

Aside from @George's noted correction in a comment (replacing getDocumentById() with document.getElementById()), it is crucial to ensure that the image URL is properly encoded. Instead of...

$('.one').css('background', $.cookie('cookieName'));

...you should do this...

$('.one').css('background', 'url("' + $.cookie(cookieName) + '")');

The correct CSS syntax for background URLs is not...

background:http://path to image/image.png

...but...

background:url("http://path to image/image.png");

Furthermore, when using a variable as a function parameter, the quotes around it must be omitted, like from $.cookie('cookieName') to $.cookie(cookieName).

Additionally, this.id will only return the element's id if you pass this as a parameter in your inline function like this:

onClick="addcookie(this)"

...then reference it in your function like so:

function addcookie(that)

...and use it as follows:

var idi = that.id;

Here is a jsfiddle where you can experiment with this: http://jsfiddle.net/yxj8w6d0/

EDIT: By making slight adjustments (removing the one and two classed divs, and adding no-repeat to the background), you can neatly add the background only to the intended element. Check it out here: http://jsfiddle.net/yxj8w6d0/1/

EDIT #2: To load images if the cookie already exists, create a function that executes on document ready to iterate through your links and compare them with existing cookies, as shown below:

$(document).ready(function() {
    $('.container div a').each(function(){
        if ($.cookie(this.id))
            $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat');
    });
});

I have updated the fiddle accordingly. Test it by clicking the links first, then rerun the script - you'll notice the links will retain their background: http://jsfiddle.net/yxj8w6d0/2/

Creating a cookie on click event to change the background

Answer №1

Similar questions

The inability to display a Stylesheet is due to the unsupported MIME type, even though the MIME type seems to be missing when checking for errors

In production, all Next.js API routes consistently return an "Interval Server Error," whereas in development, all routes operate smoothly without any issues

Struggling with getting my Vue-CLI app deployed on Heroku

To modify the color of the breadcrumb navigation bar from purple to #d6df23 using PHP

Inquiry regarding the process of object creation in JavaScript

Ways to stop React from refreshing the page upon clicking the submit button

The Electron forge project from publisher-github is failing to detect the environment variable GITHUB-TOKEN

Deactivate Mongoose connection in Node.js after completing tasks

Retrieve data from a URL using jQuery's .get method and iterate over each element using

Utilizing loop variables in ng-class and ng-click directive

A step-by-step guide on incorporating RAW css into your Jekyll website

"Incorporate React Redux to dynamically load an endless stream of items in batches of x at a time

Is there a way to modify the background color of a button once it has been clicked, specifically using JavaScript?

What is causing the duplication of leaves when using this DFS implementation?

Don't forget to retain the checkboxes that were chosen in the

Creating an array of objects in Node.js can be achieved by simply declaring an array

Create a customized navigation menu with both dropdown and dropup options

Instructions for obtaining and assigning a reference to a recently cached associated object within the Apollo client InMemoryCache

Following conventional methods often results in oversized containers and monolithic code

Tips for storing unique values in an object using JavaScript