I have the below code in a HTML page on my site. The url parameter is loading fine on a pixel fire right above it but for some reason the redirect doesn't want to fire. Anyone have any ideas? It might be an IE issue but not sure.
<script type="text/javascript">
$(document).ready(function() {
setInterval("window.location = '{{$url}}'", 4000);
});
</script>
<script type="text/javascript">
var url = '...';
$(document).ready(function() {
setInterval(function() {
window.location.href = url;
}, 4000);
});
</script>
Related
I want to make a Clickable button, which waits 10 seconds to load the linked page.
I was wondering if it also needs Href for it ?
If anyone know's how please help me out.
As you have tagged Javascript and not jQuery....
Something like
JavaScript:
function loadUrl(){
window.location.href = "http://www.google.com";
}
Link:
Click My Link
OR
JavaScript:
function delayUrlLoad(url, mils)
{
setTimeout(function() {
window.location.href = url;
}, mils)
}
Link:
Click Here
How about?
HTML:
<button id="yourbutton" href="https://www.google.com">
Click Me
</button>
jQuery/JS:
$( "#yourbutton" ).on( "click", function(event) {
var url = $(this).attr('href');
setTimeout("loadPage(url)", 10000);
event.preventDefault();
});
function loadPage(url){
window.location.href = url;
}
FIDDLE (it wont load the new page in JSFiddle as it is sandboxed, but if you check console, it is indeed attempting to load the page after the timeout).
You'll need to include jQuery to run this code, but this is the idea
Click Me
$("a").on("click", function (event) {
event.preventDefault();
var timeout = setTimeout(function () {
var url = $(this).attr("href");
location.replace(url);
}, 10000);
});
This way:
HTML
<span id="link" data-href="http://www.google.it">click here</span>
JS
$('#link').on('click', function() {
setTimeout(function() {
location.href = $('#link').attr('data-href');
}, 10000);
});
I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.
This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.
I got this code from a website which I have modified to my needs:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<div id="links">
</div>
<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php #links',function () {
$(this).unwrap();
timeout = setTimeout(reloadChat, 5000);
});
}
</script>
In test.php:
<?php echo 'test'; ?>
So I want test.php to be called every 5 seconds in links div. How can I do this right?
Try this out.
function loadlink(){
$('#links').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Hope this helps.
Try using setInterval and include jquery library and just try removing unwrap()
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php');
}
</script>
UPDATE
you are using a jquery old version so include the latest jquery version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Try to not use setInterval.
You can resend request to server after successful response with timeout.
jQuery:
sendRequest(); //call function
function sendRequest(){
$.ajax({
url: "test.php",
success:
function(result){
$('#links').text(result); //insert text of test.php into your div
setTimeout(function(){
sendRequest(); //this will send request again and again;
}, 5000);
}
});
}
you can use this one.
<div id="test"></div>
you java script code should be like that.
setInterval(function(){
$('#test').load('test.php');
},5000);
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
I am having some problems getting my JS/JQ to fire in HTML5 page.
Basically I would like to check if the following ID exists and the following class:
ID: page_blog
CLASS: page current
<section class="page current" id="page_blog" style="z-index: 99; left: -50px;">
...
...
...
If they exist then redirect after 2-3 seconds changing the H1 to say
Loading...
<h1><button data-target="home" data-target-activation="click" class="back backwards"></button>Loading...</h1>
This is what i have so far:
<script type="text/JavaScript">
$(document).ready(function () {
$('li#blogLink.tile').click(function (e) {
e.preventDefault(); //will stop the link href to call the blog page
setTimeout(function () {
alert("this has worked");
//window.location.href = "http://www.site.co.uk/blog/"; //will redirect to your blog page (an ex: blog.html)
}, 2000); //will call the function after 2 secs.
});
});
</script>
I have the following in my page now:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
</script>
<script type="text/JavaScript">
$(document).ready(function () {
if ($(".page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function () {
window.location.href = "http://www.website.co.uk/blog/";
}, 2000);
});
</script>
But the check to see if the class/id exists isnt firing?
Try this:
$('li#blogLink.tile').click(function (e) {
e.preventDefault();
if ($("#page_blog.page.current").length) { // section exists
$("h1").text("Loading...");
setTimeout(function() {
window.location.href = "http://www.site.co.uk/blog/";
}, 2000);
}
});
Example fiddle
Also it's worth mentioning that your selectors are overkill. There should only ever be 1 unique element with the id #page_blog and #blogLink, so including the tag and classes on the selectors for them is redundant code.
Under Chrome, Safari and Firefox the below function works fine, but under IE I believe its caching the page and doesn't actually refresh
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php').fadeIn("slow");
}, 15000);
</script>
<div id="checkuser" style="width:1px;height:1px;margin:0px;padding:0px;overflow:hidden;"></div>
Now I want to append a string to the url so IE doesnt cache the page
<script type="text/javascript">
var auto_refresh = setInterval(
fetch_unix_timestamp = function() { return parseInt(new Date().getTime().toString().substring(0, 10)) }
var timestamp = fetch_unix_timestamp();
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
}, 15000);
</script>
But I think I'm doing something wrong with appending the timestamp variable to the url. I need the fix.
TIA
WORKING CODE BELOW:
In IE I had to wrap everything in $(document).ready(function() and add $.ajaxSetup({ cache: false });.
Seems to be the only way to prevent IE from caching the page. The meta tags dont work with IE9 to prevent caching. Anyway, here's the working code below:
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#checkuser').load('chat_check.php');
}, 15000);
});
</script>
Why not just use this:
var timestamp = Date.now().toString();
http://jsfiddle.net/jfriend00/Betuf/
The only way to prevent IE from caching the JQuery request is with AJAX it seems
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#checkuser').load('chat_check.php');
}, 15000);
});
</script>
Converting the timestamp into integer is not required, try the belwo code.
<script type="text/javascript">
var auto_refresh = setInterval(
fetch_unix_timestamp = function() { return (new Date().getTime().toString().substring(0, 10)); }
var timestamp = fetch_unix_timestamp();
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
}, 15000);
</script>
Try:
<script type="text/javascript">
$(function(){
var auto_refresh = setInterval(
function(){
var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
},
15000
);
});
</script>
Use a semicolon ; after the return statement.