I have a multiple alert that displays across a website. I want a situation where if any of the is closed, let it stay closed in all the document until the browser is closed. I have succeeded in differentiating the alerts with ID’s but it sill doesn’t work properly. It closes and then shows again when it should remain hidden. I have asked so many questions on this topic but still can’t get it right.
// Alert session cookie starts here
$(document).ready(function(){
$('.alert-box').attr('id', function(i) {
return 'alert'+(i+1);
});
function closBox(){
var closeBox = $('.alert-box:visible').hide();
// - Notice how we pass a function and get an integer
$.cookie('Box-closed', true, {path: '/'});
}
console.log('Box-closed');
// - Simply checks the alert box above
if($.cookie('Box-closed')){
console.log('Closing the alert box automatically...');
closBox();
}
// Close the box on click
$('.alert-switch').click(function () {
$(this).parent.hid();
});
});
Are you aware with your jsfiddle example, that $.cookie is not a function?
I suspect that you’re going to need an additional plugin for that to work, such as from http://cdnjs.com/libraries/jquery-cookie
The following code is bad:
$(this).parent.hid();
It should instead be something like this:
$(this).parent().hide();
Also, when the alert is closed, aren’t you supposed to update the cookie to say that it’s been closed?
That was a typo probably. I just found out that I had the wrong link. @Paul_Wilkins thank you so much for the link you provided. Also getting it to work properly has been a heck of a problem for me. It works now, though not perfect. Trying to make it leaner and faster. Question, how do I update the cookie to say that it is closed? the code now looks as below.
// Mobile Nav Display condition //
var $ = jQuery.noConflict();
// Alert session cookie starts here
$(document).ready(function(){
$('.alert-box').attr('id', function(i) {
return 'alert'+(i+1);
});
function closeBox(){
var closeBox = $('#alert1').remove();
// - Notice how we pass a function and get an integer
$.cookie('Box-closed', true, {path: '/'});
}
// - Simply checks the alert box above
if($.cookie('Box-closed')){
console.log('Closing the alert box automatically...');
closeBox();
}
// Close the box on click
$('#alert1 .alert-switch').click(function () {
closeBox();
});
function closeBox2(){
var closeBox2 = $('#alert2').remove();
// - Notice how we pass a function and get an integer
$.cookie('Box2-closed', true, {path: '/'});
}
// - Simply checks the alert box above
if($.cookie('Box2-closed')){
console.log('Closing the alert box automatically...');
closeBox2();
}
// Close the box on click
$('#alert2 .alert-switch').click(function () {
closeBox2();
});
function closeBox3(){
var closeBox3 = $('#alert3').remove();
// - Notice how we pass a function and get an integer
$.cookie('Box3-closed', true, {path: '/'});
}
// - Simply checks the alert box above
if($.cookie('Box3-closed')){
console.log('Closing the alert box automatically...');
closeBox3();
}
// Close the box on click
$('#alert3 .alert-switch').click(function () {
closeBox3();
});
});
Thank you, that looks to be the same code I was looking at earlier. Please see post #2 for actions that you need to take in regard to that jsfiddle code,