Why doesn't this JQuery stylesheet switcher store a cookie? - javascript

I have a downloaded stylesheet switcher that doesn't seem to work properly.
The switcher works in as much as the new stylesheet is loaded, however the cookie that it is meant to store and read never actually occurs (I assume as much, as when I refresh the page it reverts back to the default stylesheet).
The console in chrome returns the following error:
Uncaught ReferenceError: readCookie is not defined
Now my theory was that the readCookie variable wasnt defined and i should move it to the top, but that just rendered the script completely inactive.
I'm not a complete newbie when it comes to jQuery, however this is a downloaded script and I've had no experience with javascript cookies before.
Any help would be HUGELY appreciated.
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[#rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}

Related

How to force a page to refresh only once every visit

I've tried about 10 different ways that I found on here and the only found one that works close. I'm having an issue with Hostgator all of a sudden not displaying new content on php pages that access and display data from text files and/or databases. These pages have been in place for years working fine and continue to do so on other hosts. The only problem I have with the script below is that it won't refresh the page on the first visit. After the first refresh it will then show changes. I need something that will refresh all the time regardless of a visitors history or browser settings.
<script type='text/javascript'>
(function()
{
if( window.localStorage ) {
if( !localStorage.getItem( 'firstLoad' ) ) {
localStorage[ 'firstLoad' ] = true;
window.location.reload();
}
else
localStorage.removeItem( 'firstLoad' );
}
})();
</script>
you can use a cookie:
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
(function()
{
var value = readCookie('mycookiereload');
if(value == null)
{
var date = new Date();
date.setTime(date.getTime()+(3600000));
var expires = "; expires="+date.toGMTString();
document.cookie = "mycookiereload=1"+expires+"; path=/";
alert("going to reload");
window.location.reload();
}
else
{
var date = new Date();
date.setTime(date.getTime()-(3600000));
var expires = "; expires="+date.toGMTString();
document.cookie = "mycookiereload="+expires+"; path=/";
alert("kill cookie");
}
})();
this will reload the page once. everytime you visit a page, it checks the cookie, if it's not there, creates and reloads, if it's there, removes the cookie to get the same effect again.

Javascript and passing Cookies issue

I am working on a script which takes the vertical scroll posistioning of a div container and on document unload it stores the vertical posistion within a cookie and then loads it on load.
Originally I had the following:
$('#GridViewContainer').load('claims.php', function() {
$(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});
Which is ok if you are refreshing the page but if you are reloading the page with parameters it will lose it's position. Solution? Store it in a cookie...
However I am having issues with storing the value and loading it on load. I am using php to return all current Cookies and I can see I am setting the cookie "div_yCookie" but the content seems to be:
'div_yCookie' => string '[object Object]' (length=15)
(I am a complete Javascript and jQuery novice... No doubt it is something obvious but can someone help?
<script>
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
$(document).ready(function () {
$('#GridViewContainer').load('claims.php', function() {
var x = readCookie('div_yCookie');
$(this).scrollTop($(this).prop("scrollHeight") - x);
//$(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});
});
window.onbeforeunload = function(){
var div_y = $('#GridViewContainer').scrollTop($('#GridViewContainer').prop("scrollHeight") - $('#GridViewContainer').height());
createCookie('div_yCookie',div_y,0.5);
};
</script>
UPDATE
It turns out it actually works when you refresh the page however it still doesn't work when you reload the page.

Javascript Cookie function

I have an question relating to my cookie function. Does it really have to have the $(function) for the if(readCookie) or can I specify just function like the rest of the code above it?
I've tried setting it a few different ways but without the $function it doesn't read the set cookie.
Can anybody help put me in the right direction. Thank you.
<script>
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}`enter code here`
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
$(function(){
if(readCookie("style") == 'Dark'){
$("body").removeClass().addClass("colour-scheme-1");
$(".styleswitch a").removeClass().addClass("Dark");
}
else {
}
});
</script>
Yes, that's required. What that's doing is deferring execution of the code in that function until after the DOM has been completely built. If you didn't have that, then depending on exactly where on the page that script is imported it might not work at all.
If you were to move the whole <script> block to the very end of the <body>, it'd work without the jQuery "ready" setup.

How to create html5 audio and toggle it depending on a cookie

I have the following code, that tries to play an audio file, and then on pressing the link, you can toggle it on or off (it saves a cookie to save your preference). For some reason the audio does play, but clicking the link does nothing. Ideas? I'm thinking there's something obvious in the cookie part I missed, because this is the first time I'm touching cookies with javascript.
<p>Ääni päälle/pois<br />
<script>
window.onload=function(){
var pre='';
var ele=document.getElementById('test');
ele.play();
//when the song ends start a new one
ele.onended=function(){
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ele.play();
}
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
function toggle() {
if(!readCookie(sound)){
createCookie(sound,false,100);
}
else if(readCookie(sound)==false){
createCookie(sound,true,100);
ele.play();
}
else if(readCookie(sound)==true){
createCookie(sound,false,100);
ele.pause();
}
}
</script></p>

Cookie to show a popup every 30 days

<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
What's wrong with my above code my facebook like popup is called every time the page is loaded in my blog. I just to show only one time every 30 days.How i can do that?
Your particular implementation looks like it has you checking the cookie for 'visited=false', but setting the cookie to 'visited=true' so your if statement will never match.
I'd suggest you use a proven set of cookie manipulation functions and then your task will be pretty easy.
Here are the cookie functions I use when my environment doesn't already have them:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
Once you have those, you can do this:
jQuery(document).ready(function() {
var visited = readCookie('visited');
if (!visited || visited !== "true") {
createCookie('visited', "true", 30);
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});

Categories