Anyway to close this window? - javascript

Is there anyway to get the "loadedafter15seconds.com"
to close after 20 seconds?
code at http://pastebin.com/480TtqJ9
Basically i want a button that goes to a page. That page loads a list of urls after a certain amount of time and then closes them after a certain amount of time.

DEMO on Jsfiddle
function closeWindow() {
setTimeout(function() {
window.close();
}, 15000);
}
EDIT
Use it like this
function NewWindow3()
{
win = window.open('http://www.loadedafter15seconds.com')
setTimeout(function() { win.close(); }, 20000);
}

Related

Load a jsp page every 20 secs after 1st page load

I am trying to autosubmit a form upon 1st load and then refresh every 20 secs. I have tried below but it keeps loading the page all the time. is that correct implementation or how I can achieve that.
window.onload=function(){
var auto = setTimeout(function(){ submitform(); }, 100);
function submitform(){
document.forms["frm1"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ autoRefresh(); }, 20000);
}
}
You must use setInterval() instead :
setInterval(function(){
//Refresh code here
//location.reload();
}, 20000);
So the code inside will be triggered every 20 second.

Adding a delay to to a form scroller

I am using http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/ to build a form - I want a delay before the page scrolls down after the click event.
I've been trying to achieve this using setTimeout but have been struggling.
For example I thought this would work:
// show next field
setTimeout(function() {
this.ctrlContinue.addEventListener( 'click', function() {
self._nextField();
} );
}, 1000);
You can see the full code at https://github.com/codrops/FullscreenForm/blob/master/js/fullscreenForm.js
Thanks
This should work, you should set timeout after click event not before.
this.ctrlContinue.addEventListener( 'click', function() {
setTimeout(function() {
self._nextField();
}, 1000);
});

Mobile Splash Page

I have a mobile site already, and what I want to do is add an image that shows up when you hit the page for 5 seconds. Once 5 seconds has passed it just disappears and you're at the homepage.
Is this possible for an android device? Is there a way to make the image display on the entire screen?
Thanks!
It's easier with jQuery. You can style a div to be your splash page and set a function to run when the page is loaded. After the 5 second duration, you can hide the div.
It could possibly look something like this:
$('div.introDiv').animate( {
opacity: 'toggle' // if div is hidden, it will fade in
},
{
duration: 5000, // in ms
complete: function () {
$('div.introDiv').animate(
{
opacity: 'toggle' // div will fade out
},
{
duration: 5000, // 5 seconds
complete:function () {
// hide div and show main content
}
})
}
}
);
This isn't the only way to do this, but it works.
Try something like...
<body onload="redirectMobile()">
var redirectMobile = function() {
setTimeout(function(){
window.location = 'http://www.google.com/';
},5000);
};
or skip the function and do...
<body onload="setTimeout(function(){window.location = 'http://www.google.com/'},5000)">
Like the previous answer said, jquery or another way might be easier, but this should work with pure javascript.

show div after 5 seconds and then refresh the div every 1 min

I have created a div into my page which i wanted to get load after 5 seconds the page get load. Then I wanted to refresh the div without refreshing the page after every 1 min. How can I achieve this functionality with the use of J query. My code look like this
$(document).ready(
function () {
setInterval(function() {
$('#newsletter').show();
}, 100000);
});
This upper block of code is only refreshing the div after 1 min. But on page load , i want the div to be shown to the user after 5 seconds and then this block of code should executed.
$(document).ready(function()
{
setTimeout(function()
{
// Perform actions you need to
setInterval(function()
{
// Perform them again every minute
}, 60000);
}, 5000);
});
I think what you were looking for is setTimeout
Try it:
$(function(){
setTimeout(function(){
$('#newsletter').show(); // to show div after 5 sec of page load
// To reshow on every one minute
setInterval(function() {
$('#newsletter').show();
}, 60000);
}, 5000);
});
You've already got the base functionality there, so all you'll need to do is add a message to appear after 5 seconds. Something like this should work.
$(document).ready(function()
{
setTimeout(function() {
// show message
},5000);
setInterval(function() {
$('#newsletter').show();
}, 60000);
});
Here is a jQuery solution:
$(document).ready(function () {
var $newsletter = $('#newsletter')
.delay(5000)
.show(function() {
setInterval(function() {
// update the newsletter, e.g. set new text
$newsletter.text(new Date());
}, 60000);
});
});

JQuery Fancybox open delay

I have a fancybox for displaying photos and descriptions of them.
Now it opens fancybox on mouseenter event. It works perfectly with this code:
$('.fancy_link').live('mouseenter', mouseEnter);
function mouseEnter()
{
jQuery(this).fancybox().trigger('click');
return false;
}
But i need to set delay for opening fancybox. How it should work: User moves cursor over a link, after 1 second fancybox should open and display content. If user moves mouse away before waiting 1 second, fancybox should not open.
I have tried JQuery delay() and setTimeout() but both of them are not working properly.
One sec. delay just ignored by both methods.
use setTimeout/clearTimeout...
//binding code...
$('.fancy_link').on('mouseenter',mouseEnter);
$('.fancy_link').on('mouseleave', mouseLeave);
//run when the mouse hovers over the item
function mouseEnter() {
//clear any previous timer
clearTimeout($(this).data('h_hover'));
//get a reference to the current item, for the setTimeout callback
var that = this;
//set a timer, and save the reference to g_hover
var h_hover = setTimeout(function(){
//timer timed out - click the item being hovered
$(that).click();
}, 1000);
//save the reference - attached to the item - for clearing
// data is a generic "store", it isn't saved to the tag in the dom.
// note: if you have a data-* attribute it is readable via data()
$(this).data('h_hover',h_hover)
}
//handler for when the mouse leaves the item
function mouseLeave() {
//clear the previously set timeout
clearTimeout($(this).data('h_hover'));
}
this could help you
function openFancybox() {
setTimeout( function() {$('#fancy_link').trigger('click'); },1000);
}
I imagine you will need to use setTimeout and clearTimeout
Something along these lines:
var timer;
$('.fancy_link').mouseenter(function(){
var $this = $(this);
timer = setTimeout(function(){
$this.fancybox().trigger('click');
}, 1000);
}).mouseleave(function(){
clearTimeout(timer);
});
Try this solution:
var timer = null;
$('.fancy_link').on('mouseenter', function() {
timer = setTimeout(mouseEnter, 1000);
});
// clear timer when mouse leaves
$('.fancy_link').on('mouseleave', function() {
clearTimeout(timer);
});

Categories