Cookie slide down div and remember on reload - javascript

I am working on Notice bar which remembers when it has been closed and slides down if it has never been closed before.
However, if you do not close the Notice, and if you navigate through the pages of my website, it slides down each time. This can be irritating to the viewers.
How can I change the code so it slides down on the first view of the website, and then never again if you navigate other pages? I want it to slide down of first view, and then if you click a link it is just open. I tried making some changes to the last part, but could not figure it out.
Live view
var clearCookie = function() {
var result = $.removeCookie('JSFiddleCookieNotification');
if (result) {
alert('Cookie removed, please reload.');
} else {
alert('Error: Cookie not deleted');
}
}
var closeCookie = function() {
$("#notice").slideUp(400, function() {
$(this).remove();
});
$('#fixed').animate({
top: 0
}, 400);
$.cookie('JSFiddleCookieNotification', 'Notified', {
expires: 7
});
}
// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$(".exit").on("click", closeCookie);
// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
$('#notice').slideDown(1000);
var timer = setInterval(function() {
$('navmenu, navmenu-mobile, #fixed').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
}
Changes to not slide down:
var isUserSawNotify = $.cookie('userSawNotify') != null;
if (!isUserSawNotify) {
$.cookie('userSawNotify', 'Notified', {
expires: 7
});
}
// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
$('#notice').slideDown(isUserSawNotify ? 0 : 1000);
var timer = setInterval(function () {
$('navmenu, navmenu-mobile, #fixed').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
}

I'm just explaining how to do the last part from my comment. (when the page is loaded, set a cookie that the user already see the notice. Next time the user will get the page, check if the cookie exist and if so, don't slideToggle)
$(document).ready(function() {
// this is the new part
var isUserSawNotify = $.cookie('userSawNotify') != null;
if (!isUserSawNotify) {
$.cookie('userSawNotify', 'Notified', {
expires: 7
});
}
if ($.cookie('JSFiddleCookieNotification') == null) {
// edit the specific line in your existing code
// if user already saw the notify, just pass 0 to the duration so it will show the notify without the transition
$('#notice').slideDown(isUserSawNotify ? 0 : 1000);
}
});

Related

cannot set innerHTML property of null on Qualtrics

I am using Qualtrics to make a survey, and I need to do a bit of JS to make a timer. Unfortunately, I'm constantly running into "cannot set innerHTML property of null" for element "s5".
I've read the other thread about this issue (albeit the OP doesn't seem to be using qualtrics), and thought that perhaps changing "Qualtrics.SurveyEngine.addOnload" to "Qualtrics.SurveyEngine.addReady" might do the trick, but it doesn't, and I've already tried changing the id's quite a few times to no avail. Could someone help me find where my error is?
I got marked previously for the same question (as something that's already been answered), but that thread didn't help me at all. I've tried ready() as shown in the commented out section in the first code snippet, but that only gave me a "startThinkingTimer is not defined" error. When I tried it the second way in the second code snippet, I didn't get any errors, but my timer wasn't visible/working at all either. I can't move script or use defer b/c Qualtrics does not have all the HTML/CSS/JS in one file, but has different sections for them and honestly I'm not sure how they connect the different files. Regarding using .on(), I'm not sure which event to use here, and would really like some help.
I've tried replacing all the document.getElementById for element "s5" with something like this:
$("s5").innerHTML="10";
but this doesn't work, either.
(Should I try to move the html code inside the JS portion (esp. the div timeShower part)? I'm not too sure how to do that though, so if someone could help me do that, that'd be awesome.)
window.thinkingTimer_;
window.typingTimer_;
Qualtrics.SurveyEngine.addOnload(function(){
that = this;
var thinkingTimeLimit = 15;
var typingTimeLimit = 10;
jQuery(".InputText").hide();
$('NextButton').hide();
document.getElementById("instructions5").innerHTML = "You have 15 seconds to think about the prompt and come up with your two most favourite fruits, either from the list or from your previous choices. Textboxes will appear when the time is up.";
function startTypingTimer() {
that.enableNextButton();
typingTimer_ = setInterval( function(){
if (typingTimeLimit > 0) {
document.getElementById("s5").innerHTML=pad(--typingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(typingTimeLimit/60,10));
}
if (typingTimeLimit == 0) {
clearInterval(typingTimer_);
jQuery("#NextButton").click();
}
}, 1000);
}
/*
$(function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
});
*/
function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
}
function pad (val) {
return val > 9 ? val : "0" + val;
}
startThinkingTimer();
});
<div id="instructions5"> </div>
<div id="timeShower1">time: <span id="minutes5">00</span>:<span id="s5">15</span></div>
window.thinkingTimer_;
window.typingTimer_;
Qualtrics.SurveyEngine.addOnload(function(){
that = this;
var thinkingTimeLimit = 15;
var typingTimeLimit = 10;
jQuery(".InputText").hide();
$('NextButton').hide();
document.getElementById("instructions5").innerHTML = "You have 15 seconds to think about the prompt and come up with your two most favourite fruits, either from the list or from your previous choices. Textboxes will appear when the time is up.";
function startTypingTimer() {
that.enableNextButton();
typingTimer_ = setInterval( function(){
if (typingTimeLimit > 0) {
document.getElementById("s5").innerHTML=pad(--typingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(typingTimeLimit/60,10));
}
if (typingTimeLimit == 0) {
clearInterval(typingTimer_);
jQuery("#NextButton").click();
}
}, 1000);
}
$(function () {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
});
/*
function startThinkingTimer() {
that.disableNextButton();
thinkingTimer_ = setInterval( function(){
if (thinkingTimeLimit >0) {
document.getElementById("s5").innerHTML=pad(--thinkingTimeLimit%60);
document.getElementById("minutes5").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
}
if (thinkingTimeLimit == 0) {
clearInterval(thinkingTimer_);
document.getElementById("s5").innerHTML="10";
document.getElementById("minutes5").innerHTML="00";
jQuery(".InputText").show();
document.getElementById("instructions5").innerHTML = "You now have 10 seconds to type in the two fruits. The page will automatically move on to the next page once time is up.";
startTypingTimer();
}
}, 1000);
}*/
function pad (val) {
return val > 9 ? val : "0" + val;
}
//startThinkingTimer();
});

Show a div only once per visit / set cookie

I'm trying to set an element so it's being shown only once per visit. It's a scroll down arrow on my homepage and so once the user gets it it won't be necessary to keep it anymore. So I don't want it to be shown while the user is surfing on my website however, when he visits it again in the future it's there again. I'm a newbie and can't quite solve it.
My code:
setTimeout(function () {
$('.scroll_down').show()
}, 2000);
var $element = $('.scroll_down'); // fade out / in on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$element.fadeOut(1000);
}
});
I also would like the arrow to fade in but my attempts were not successful. Thanks guys
Please write cookie code as follow:
jQuery(document).ready(function($){
if($.cookie('show_div_once') != 'yes'){
your_code_for_show_div;
}
$.cookie('show_div_once', 'yes', { path: '/', expires: 365 });
});
I used localStorage
firstSiteLoad = (function() {
var checkSupport;
checkSupport = function() {
var e, error, support;
try {
support = 'localStorage' in window && (window['localStorage'] != null);
} catch (error) {
e = error;
support = false;
}
return support;
};
return function() {
if (!checkSupport()) {
return false;
}
if (localStorage.getItem("not_first_load")) {
return false;
} else {
localStorage.setItem("not_first_load", 'true');
return true;
}
};
})();
you can use it by if (firstSiteLoad()) { //your code }

SetTimeOut speeds Up with multiple tabs opened

I have a timer ticker on Layout(MVC4.0) (With 1 Second Interval) page and it works fine when only 1 page of website(In one tab) is opened
var timeOutMinutes = 10;
var timeOutSeconds = timeOutMinutes * 60;
localStorage.setItem("SessionCounter", timeOutSeconds);
var popUpShown = false;
var logOutCalled = false;
$(document).ready(function () {
setInterval(TimerDecrement, 1000);
});
function TimerDecrement() {
if (timeOutSeconds > 0) {
if (parseInt(localStorage.getItem("SessionCounter"), 10) > 0) {
timeOutSeconds = parseInt(localStorage.getItem("SessionCounter"), 10);
}
timeOutSeconds--;
localStorage.setItem("SessionCounter", timeOutSeconds);
}
else {
if (!logOutCalled) {
logOutCalled = true;
LogOut();
}
else {
logOutCalled = true;
}
}
document.getElementById("seconds").innerHTML = timeOutSeconds;
document.getElementById("secondsIdle").innerHTML = timeOutSeconds;
if (timeOutSeconds < 500) {
//alert(history.length);
popUpShown = true;
$("#pnlPopup").dialog("open");
}
else {
if ($("#pnlPopup").dialog("isOpen")) {
popUpShown = false;
$("#pnlPopup").dialog("close");
}
}
}
But when I open multiple tabs of website timer jumps to decrease quickly.
How can I maintain the timer to decrement Uniformly even if website is opened in multiple tabs?
FIDDLE
The problem is that you are using the counter that is being decremented is common to all tabs, because it is kept in LocalStorage. So the solution really depends on what you intention is for the decrement counter.
If the intention is for each session (each tab) to have it's own separate counter, then you would be better served using a variable instead of LocalStorage -- or alternatively, use a unique session id for each counter in LocalStorage.
If the intention is to have all tabs share the same decrement counter, but for it to only be decremented once per second regardless of how many tabs are open, then perhaps you want to store the counter as well as the last decrement time.
EDIT: Here is a forked fiddle that might do what you need:
http://jsfiddle.net/y68m4zwr/8/
The gist of it is to add:
var lastUpdated = localStorage.getItem("SessionCounterUpdatedOn"),
now = new Date(), shouldCheck = false;
if (lastUpdated == null) {
localStorage.setItem("SessionCounterUpdatedOn", now);
} else if (now.getTime() - new Date(lastUpdated).getTime() >= 1000) {
// set this immediatedly so another tab checking while we are processing doesn't also process.
localStorage.setItem("SessionCounterUpdatedOn", now);
shouldCheck = true;
}
which checks for a last updated record for the counter and it if was updated less that second ago, it just updates the time left, otherwise performs the logic to decrement.

HTML5 Progress Bar Pause when in another tab

My progress bar loader which i'm using to display a sorten amount of seconds while my page is loading in Javascript is having some trouble.
If i click another tab while its counting it will pause, and will only resume when you go back.
How would i go by allowing it to count even though you're in another tab
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (800/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate); $(".demo-wrapper").remove(); $("#details").fadeIn("slow"); $("#motion1").html("Report for Registration."); $("#motion").remove();
}
if (value == 1) {
$("#motion").html("Loading Page..");
}
if (value == 86) {
$("#motion").html("Connecting..");
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
Here's an example http://jsfiddle.net/w977Q/
Maybe have a look at the accepted answer here: How can I make setInterval also work when a tab is inactive in Chrome?
It appears this is basically a function of the browser not wanting to use processing power on tabs that aren't in focus.
Hope this helps you
setInterval('yourFunction();', 1000); // this will work even on other tab
and
setInterval(yourFunction, 1000); // this will run only if on current tab

Page Reload for Opera

I'm trying to get this page reload function to work in the new Opera v12. The function allows you to click away from a page & then come back and at that point the page is reloaded with a clean cache, ie fresh. What do I need to change to get it to work for Opera?
window.onload = function() {
var rel = document.getElementById('forme').toBeReloaded.value; //get the current var value
if (rel==1) { // retrieved from the server (reloaded)
if ($.browser.webkit || $.browser.msie) {
window.location.reload(); //loaded from the cache
}
if ($.browser.mozilla) {
buttonPlace();
console.log('Firefox Reload: ');
}
if ($.browser.opera) {
window.location.reload(true);
console.log('Opera Reload: ');
}
}
else {
document.getElementById('forme').toBeReloaded.value = 1;
}
}
Thanks, Bill
Figured it out using document ready and:
$(function() {
var rel = $('[name=toBeReloaded]');
if(rel.val() == 1) {
rel.val(0);
if ($.browser.opera) {
location.href = location.href; // reload
}
else {
location.href = location.href; // reload
}
}
else {
rel.val(1);
}
});
Bill

Categories