Show div (preloader) only once - until cache/session is cleared - javascript

I have a preloader on a landing page I've created (normally against this type of thing buy hay-ho). The preloader works fine, it displays, animates for a second then fades out displaying the website.
What I'd like to achieve is to show this only once, when the user first visits the page and then never again until they clear their cache or at least for a lengthly timescale. To do this I'm trying to use jquery-cookie (https://github.com/carhartl/jquery-cookie) - but I just can't get it to work, it still displays every time I refresh the page. The mark-up/script I'm using is below...
HTML:
<div id="preloader">
<span></span>
</div>
Original JS (displays everytime page is visited):
jQuery(document).ready(function($) {
$(window).load(function(){
$('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
});
});
New JS (not working) attempting to use a cookie:
$(document).ready(function($) {
if ($.cookie('noPreloader')) $('#preloader').hide();
else {
$(window).load(function(){
$('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
});
}
});
I'd greatly appreciate if someone would shed some light on this as I'm a bit stuck!
Thanks in advance!

I fail to see where you create a cookie for your check. It suppose to be something like this:
if (!$.cookie('noPreloader')) {
// show your preloader
...
// and now we create 1 year cookie
$.cookie('noPreloader', true, {path: '/', expire: 365});
}
Please note - in my example your block suppose to be hidden on load. You show it afterwards(since you want to show it only 1st time).

Thanks a lot for the help UtherTG! Here is my final script for anyone else who is trying to achieve something similar...
$(document).ready(function($) {
if ($.cookie('noPreloader'))
{
$('#preloader').hide();
}
else
{
$(window).load(function() {
$('#preloader').delay(1200).fadeOut(800,function() {
$(this).remove();
});
});
// and now we create 1 year cookie
$.cookie('noPreloader', true, {path: '/', expire: 365});
}
});

Related

Scroll down to specific position after page refresh issue

I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}
You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp
Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}

Using localStorage() to save a "closed" state on modal so it doesn't show for that user again

I have a pop-over modal that I am loading on my page on load, I would like to make it once it's closed to not show up again for that user. I've done similar things with localStorage(); but for some reason can't figure out the syntax to make this work.
I tried a solution where it sets a class, but on refresh it will reload the original element, so now I am trying this idea where I change the state of of the modal to "visited". Any ideas what I could be missing to get this to work in the same way I'm hoping?
localStorage function:
$(function() {
if (localStorage) {
if (!localStorage.getItem('visited')) {
$('.projects-takeover').show();
}
} else {
$('.projects-takeover').show();
}
$('.projects-close').click(function() {
$('.projects-takeover').fadeOut();
});
localStorage.setItem('visited', true);
return false;
});
Here is a jsfiddle with the code implemented as well, thanks for the help!
You javascript code is correct. Good thing you added a jsfiddle as the problem becomes very easy to identify - the modal's style is set in such a way that it is always visible. Simply change the display property to nonŠµ in the .projects-takeover class and it should work. Check out the updated fiddle
Try this ->
$(function() {
var pt = $('.projects-takeover'); //i just hate repeating myself.
if (localStorage) {
if (!localStorage.getItem('visited')) {
pt.show();
} else {
pt.hide(); //this bit was missing
}
} else {
pt.show();
}
$('.projects-close').click(function() {
pt.fadeOut();
});
localStorage.setItem('visited', true);
return false;
});

Could 'jekyll' interfere with jquery.cookie?

I have managed to implement jquery.cookie in another project with fancyapp with no problems; e.g. tested modal fires once, and to make it fire again I just delete the cookie and it will propagate again (see below).
UPDATE
Here is the example where it works;
If you go to this page: http://avonexampleone.antonio-p-ortiz.com/prior.html click the banner, the modal will fire in the subsequent page and honor the expiration i.e. j.cookie('visited', 'yes', {expires: 1}); wont fire again till a day, And if you clear your cookies and test again the modal will fire. All as expected.
However, I have the same code in another project (jekyll blog), and it appears to work once in a while when tested.
Could there be some weird privacy concern or some setting in jekyll which would prevent this?
Any help would be appreciated!
HTML:
<a id="clickbanner" href="/assets/images/beauty_for_a_purpose/Beauty_for_a_Purpose_Sheri_Card_EN.jpg" rel="gallery"></
JS:
var j = jQuery.noConflict();
j(document).ready(function() {
function openFancybox() {
setTimeout(function() {
j("#clickbanner").trigger('click');
}, 500);
};
var visited = j.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
};
j.cookie('visited', 'yes', {
expires: 1
});
j("#clickbanner").click(function() {
j.fancybox({
href: this.href,
type: "image",
maxWidth: 750,
maxHeight: 502
});
return false;
});
});
It turns out the problem derived from the script tag path not being properly configured. As you can see in the image below, the pages are nested in folders and would need to be marked accordingly to get to the scripts.
So <script type="text/javascript" src="../../../assets/javascript/ya_jquery.fancybox.ready.function.js"></script> as an example did the trick!
Strange thing was, I wasn't getting an error in the console saying I was missing the scripts.

This Ajax javascript code not working right

So I have been busy building a site for a customer. Now I need to do some ajax on menu clicks. The code below is successful in showing the loading.gif and not 100% sure it does the ajax as the dang page still loads up regular style with the gif spinning. Works but doesn't..
Anyways heres a link to it: and login is
username:
password:
Click on "Friends" Link to see the spinner and the code below is viewable via firebug. Any help here is good help, this is actually my first time messing with ajax.
Thanks,
Nick
<script type="text/javascript">
$(function() {
$(".item-206").click(function() {
$("#dvloader").show();
$.load("friends", function(){ $("#dvloader").hide(); });
return false;
});
});
</script>
You have to tell it where to load the html into:
$('#div-you-want-to-populate').load("friends", function() { ... });
If you make an array of div ids, and name them the same as the target divs, you can do:
var ids = ['id1', 'id2','id3'];
for (i=0; i<ids.length, i++) {
$('#'+ids[i]).load("friends #"+ids[i], function() { ... });
};
use
$('element or id or class').load("friends", function(){ $("#dvloader").hide(); });

using javascript to create separate pages for messages?

Ok this may be a bit of a confusing question. I have the below javascript in my messages.php page which controls which div will show. Each div has a seperate function.
There's message-content-p1 which contains a while loop that gets all the messages and limits it to 20 messages to show, the second is message-content-p2 and so on each one containing the next while loop only ever showing 20 messages in each.
The idea of this javascript is to create the illusion that there are more messages to be shown on page 2, page 3 and so on.
So far the javascript shows each div on the click of 'm_p1' or m_p2' and fades out the current page and fades in the next page. This works fine for that function. the problem i get is if a user wants to skip a page and go to page 3 or page 5 without going to page 2 or 4 then the script won't work and nothing is faded in or out.
Like wise if the user goes back to page 1 from page 5 the script doesnt work and does not fade out page 5 and fade in page 1.
Is there a way of doing what i have described and if so could someone please show me how.
Thank you.
<script>
$(".message-content-p2").hide();
$('.m_p2').click(function () {
if ($('.message-content-p2').is(":hidden")) {
$('.message-content-p1').fadeOut(500);
$('.message-content-p2').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p3").hide();
$('.m_p3').click(function () {
if ($('.message-content-p3').is(":hidden")) {
$('.message-content-p2').fadeOut(500);
$('.message-content-p3').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p4").hide();
$('.m_p4').click(function () {
if ($('.message-content-p4').is(":hidden")) {
$('.message-content-p3').fadeOut(500);
$('.message-content-p4').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p5").hide();
$('.m_p5').click(function () {
if ($('.message-content-p5').is(":hidden")) {
$('.message-content-p4').fadeOut(500);
$('.message-content-p5').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p6").hide();
$('.m_p6').click(function () {
if ($('.message-content-p6').is(":hidden")) {
$('.message-content-p5').fadeOut(500);
$('.message-content-p6').delay(700).fadeIn(500);
}
});
</script>
This looks all very manual and not very scalable for any number of pages.
Why would you not just have the same class for each "page", and on the click of whatever control determines which pages to skip to, just fade out all pages and then fade in only the page corresponding to the index value of the control that was clicked? For example say all you message "pages" have the class .message-content and let's say you have a set of buttons all with class .m. Your jQuery could simply look like this:
$('.m').click(function() {
$('.message-content').fadeOut(500);
var index = $(this).index();
$('.message-content').get(index).delay(700).fadeIn(500);
}

Categories