jQuery Cookies Function not Working in Chrome - javascript

I am facing a problem in a jQuery code. It's working in Safari and Firefox but is not working in the Chrome. Here is the explanation of the function below.
Once the user click on closebtn div, and then after refreshing the page, fade and form should not display for 24 hours. But just for that particular user who clicked on "closebtn".
Fade and Form should not work for next 24 hours on that particular ip address or computer or in that browser of that person's computer. Fade and Form can open if the webpage gets opened from any other computer.
Here is the code:
$(function(){
//var flag = Cookies.get('hideFormAndFade');// this returns value if set else undefined if cookie not found
var flag=$.cookie("hideFormAndFade")
alert(flag);
if(flag == false || flag==undefined){ // if cookie found and if cookie value is not true
setTimeout(function(){
$('.fade').show();
$('.closebtn').show();
$('.form').show();
},2000);
}
$('.closebtn').click(function(){
$('.fade').hide();
$('.form').hide();
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie("hideFormAndFade", true , { expires: 1 });
//Cookies.set('y', "sd"); // 1 is 1 day
//Cookies.set('hideFormAndFade', true, { path: '/' , expires: 1 }); // 1 is 1 day
});
});
Please help with this functionality.

Related

How to display notification if request takes a certain amount of time?

This is what i've done:
response.config.responseTiming = performance.now();
var timing = response.config.responseTiming - response.config.requestTiming;
if (timing > 15000) {
var toastr = $injector.get('toastr');
toastr.info($filter('i18n')('_request_info_'));
angular.extend(toastrConfig, {
preventOpenDuplicates: true
});
}
But the problem is, the notification will appear when the request is completed, not when 15-sec pass(example: if it goes over 30sec, it will display notification after 30 sec not on 15 sec). Any idea how to do this?

Show block (with page breaks) for fixed time

I want to set up a block with a number of questions (and page breaks), which after exactly 2 minutes will progress to the next block, regardless of what the subject has accomplished / clicked / performed in that block.
I set variables in the embedded data: TimeLeft1 = 120, TimeFlag1 = 0, and wrote the following code in each question in the block-
Qualtrics.SurveyEngine.addOnload(function()
{
var timeleft1 = parseInt("${e://Field/TimeLeft1}");
var timeflag1 = parseInt("${e://Field/TimeFlag1}");
var timer = setInterval(function(){
if (timeleft1<=0){
clearInterval(timer);
timeflag1 = 1;
$('NextButton').click();
}
timeleft1--;
}, 1000);
$('NextButton').onclick = function(event){
Qualtrics.SurveyEngine.setEmbeddedData('TimeLeft1',timeleft1);
Qualtrics.SurveyEngine.setEmbeddedData("TimeFlag1",timeflag1);
}
});
after that, I insert display logic, which display "if flag = 1".
Unfortunately, the survey doesn't proceed after 2 minutes, and the block that should appear, not appear..
If anyone can help, I would be very grateful!

need javascript to automatically reload page when minute updates

I am using the following code in my website which displays the current time
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML =
h + ":" + m;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
i am also using the automatic refresher tag in my html which reloads page after every 60 seconds
<meta http-equiv="refresh" content="60">
what i want is whenever the time changes to next minute the page reloads
which means if current time is 14:05 and when it hits 14:06 the page reloads by reading this time change and NOT by 60 seconds interval from which the user opens the page.
You can set timeout looking at the clock, just get the actual seconds and wait til 60 to reload:
var date = new Date();
setTimeout(function(){
window.location.reload(1);
},(60 - date.getSeconds())*1000)
Just put that at the head inside a script tag
Try using this
setTimeout(function(){
window.location.reload(1);
}, 60000); // 60 sec
Source: How to reload page every 5 second?
or take a look at this too
setTimeout(function(){
var minutes = (new Date()).getMinutes()
if ( !minutes%15 ) location.reload(); // if minutes is a multiple of 15
},60000); // 60.000 milliseconds = 1 minute
Source: jQuery auto refresh page on clock time
Handling the local time using client side script is not recommended because the user's clock might be messed up and thus your system would turn out to be faulty.
So it is better you fetch time from your server using any server-side language like PHP
In PHP:
<?php
echo date("h:i");
?>
Now you can call this function using AJAX and you can easily handle your time.
var result=null;
function getDate(){
var result=$.ajax({
url: "script.php",
type: "POST",
success: function(data){
setTimeOut(function(){getDate();},60000);
}
}).responseText;
}

Combine ASP.net AJAX timer with javascript countdown

I am currently working on porting a vb.net winforms program over to a web based version, and one of the functions in the original program has be stumped.
In the original program, every 5 minutes, a form pops up for user input. There is also a label control on the main form which counts down to the next popup. This is accomplished with a single timer control with a 1 second duration. every tick, it decrements the countdown, and when the countdown reaches 0, it pops up the form and then resets. Simple enough, but in my web app, I can't afford to be doing a postback every second, so what I am attempting is to combine a javascript countdown widget with an AJAX timer. Essentially, what should happen is that when the page loads, the countdown begins decrementing from 300 seconds, and the AJAX timer begins with a duration of 300 seconds. My idea is that when the timer ticks, it will run my function, as well as reset the countdown to 300 seconds again.
My problem, is that I am not able to reset the countdown with the code that I have, and I know that I am doing something (likely very simple) wrong, but I don't know enough Java to know what.
If I hardcode the Timer var to 300, the countdown works, and the timer ticks (fires the additional functons), but the countdown just keeps counting down (into negative numbers). How do I reset the countdown variable from code behind?
Here is the countdown function
var Timer = <%= CountDown %>;
function updateClock() {
// Update Countdown
Timer -= 1;
var TimerMin = Math.floor(Timer / 60);
var TimerSec = Timer - (TimerMin * 60);
TimerSec = (TimerSec < 10 ? "0" : "") + TimerSec;
var TimerFormat = TimerMin + ":" + TimerSec;
// Update the countdown display
document.getElementById("javaCountdown").firstChild.nodeValue = TimerFormat
}
Here is the body code
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
And the Code Behind
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Countdown = 300
End Sub
PProtected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer1.Tick
Countdown = 300
'Additional Functions
End Sub
This solution uses jQuery.
<script>
var intervalSecond = null;
var interval5minutes = null;
$(document).ready(function() {
// enable both intervals
enableIntervals();
// onsubmit event for your form
$("#popupForm").submit(function() {
// hide the form again
$("#popupForm").css("display", "none");
// enable intervals again.
enableIntervals();
});
});
function enableIntervals() {
// every second interval
intervalSecond = setInterval(function() {
$("#updateMeEverySecond").html(new Date());
}, 1000);
// every 5 minutes interval
interval5minutes = setInterval(function() {
// display form and shut off the interval timers
$("#popupForm").css("display", "block");
clearInterval(intervalSecond);
clearInterval(interval5minutes);
}, 5 * 60 * 1000);
}
</script>
<div id="popupForm" style="display:none;">
<form>
<input type="text" />
</form>
</div>
<label id="updateMeEverySecond">Test</label>

Fadein at certain hour or time

I wonder if this is possible? For a website concept I want to make something pop out or fade in at a certain hour according to the user's computer time. I have tried looking with no avail because I don't know what kind of function would control when an effect takes place.
Any ideas? Thank you.
If you know at what time to fadeIn (ahem) in, then simply calculate the delta between that time (that's supposedly in the future) and our time. Example:
var dateNow = new Date();
setTimeout(function() {
doFadingInStuff();
}, dateWanted - dateNow);
If you get the current time and calculate the future time that you want the event to happen (thus you have an amount of elapsed time until your event should happen), you can use the setTimeout() function to schedule a function call at a precise time in the future. From that function, you would do your animation.
Check out this fiddle
Your JS
var now = new Date().toString();
$('#fadeMe').html(now).fadeIn(9000)
Assuming you only want something to be visible during a certain hour (ie. fade in when it becomes that hour, fade out when it's no longer that hour), you could do this:
// element is assumed to be a jQuery object
var VISIBLE_HOUR=14; // 2:00 PM
function check() {
var isHour=(new Date()).getUTCHours()==VISIBLE_HOUR;
var isVisible=element.is(":visible");
if(isHour!=isVisible) {
element.fadeToggle(1000);
}
}
// We probably don't want to check very frequently...
// You could make it more advanced by checking
// more frequently closer to the hour in which it would be visible.
setInterval(check, 30000);
var eventHour = 16, // 4:00pm
// get the current time as a Date
now = new Date(),
// turn your event time into a Date
eventDate = new Date(now.getFullYear(),
now.getMonth(),
now.getDate(),
eventHour),
// calculate how many MS until your event
eventTimeMS = eventDate - now;
dayInMS = 86400000,
// your event
myEvent = function() {
alert('The time is now!');
};
// adding 24 hours if already past event time today
eventTimeMS = eventTimeMS < 0 ? eventTimeMS + dayInMS : eventTimeMS;
// if currently the right hour, just invoke event
if (eventHour == now.getHours()) {
myEvent();
// otherwise start a timer to invoke your event at the appropriate time
} else {
setTimeout(myEvent, eventTimeMS);
}
I think you want to check the time of day for the client, then fade in or out. This would be done like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var sunriseHour = 1;
var sunsetHour = 19;
function checkForChange() {
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
if (sunPosition != 'up') {
sunPosition = 'up';
$('#theSun').fadeIn('slow');
}
} else {
if (sunPosition != 'down') {
sunPosition = 'down';
$('#theSun').fadeOut('slow');
}
}
}
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
$('#theSun').show();
sunPosition = 'up';
} else {
$('#theSun').hide();
sunPosition = 'down';
}
setTimeout(checkForChange, 1000);
});
</script>
</head>
<body>
<div id="theSun" style="background: yellow; width: 300px; height: 300px; display: none;">
This box is the sun
</div>
</body>
</html>

Categories

Resources