I currently have a JavaScript file that will change the testimonial shown every five seconds. Everything works perfectly, except for the first five seconds, nothing appears. If I put a value where the JavaScript function is being called, it does show up initially, then is replaced by whatever the first testimonial is.
Here is the HTML code where the JavaScript is being called.
<html>
<head>
<SCRIPT language="JavaScript" SRC="textCycle.js"></SCRIPT>
</head>
<body>
<table border = 0><tr><td style="width:300px;"> <!-- Change the height in order to determine width of quotes -->
<div id="change"></div></td></tr></table>
</body>
</html>
Here is the Javascript:
var quotes=new Array(5);
var i = 0;
var authors=new Array(5);
//Load Quotes into array
quotes[0]="\"Website is awesome!\"";
quotes[1]="\"Love it!\"";
quotes[2]="\"Awesome site!\"";
quotes[3]="\"This site was very informative and helped with my problem.\"";
quotes[4]="\"Best site for helping with this issue.\"";
//Load authors that correspond with the quote array
authors[0]="Anonymous";
authors[1]="Anonymous";
authors[2]="Anonymous";
authors[3]="Anonymous";
authors[4]="Anonymous";
//Call the changeText() function every 5000 miliseconds
setInterval(changeText, 5000);
//Function that determine what quote and author to put in html.
function changeText(){
document.getElementById("change").innerHTML=(quotes[i] + '<p style="text-align: right"><i>' + authors[i] + '</i></p>');
if(i == 4)
i = 0;
else
i++;
}
Is this just a matter of changing the javascript file so that quotes[0] is outside of the loop?
Note: The values in the arrays were changed to keep it anonymous. These aren't real testimonials.
Just add changeText() (call your function) anywhere in your code before setInterval(). Well, it is not mandatory.
Fiddle
If you add the call to changeText() as mentioned, it likely still will not work. This is because the DOM has not been parsed yet. You should call it after the DOM is ready. One way to do this would be to put it in the onload event. This is the easiest way without a third-party library, but also waits until all images have been loaded. Here is an example:
<body onload="changeText()">
setInterval waits the interval duration (5 seconds) before executing the first time.
You could just call it once before setting the interval, and you'll be good to go. Eg:
//Call the changeText() function every 5000 miliseconds
changeText();
setInterval(changeText, 5000);
Related
This works but only half way. It'll change the element I want changed but it changes immediately instead of after 9 seconds. Sorry if this is a dumb question I'm new and not sure if this is even how to change text the correct way.
<script type="text/javascript">
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe';
}
changeText();
</script>
The setTimeout is not the only place that you are calling the function, you're also calling it at the end. Remove the last call and it will work.
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe';
};
If you want to show the text only after 9 seconds, please remove the last line of function calling. That is triggering when page loads.
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe'; }
Remove changeText(); at the bottom. It is an extra call and not-needed since setTimeout will invoke your callback
I've been having trouble finding any delays right after a function is executed. The problem is that the href loads a little slow and the function takes in effect before the _target page is loaded. You can see the change coming into effect immediately. I'd like to have a little timer to wait a few seconds before the function takes affect.
I've tried setInterval inside a var, but it doesn't seem to be working. setInterval by itself keeps running once the page is clicked and I don't want that. I want the timer to be started once the image is clicked and the link loaded.
<script type='text/javascript'>
function change() {
var image = document.getElementById('doge');
image.src = 'img/doge.png';
document.getElementById("text").innerHTML="<b>such wow</b> much amaze <b><i>very effort</b></i>"
}
</script>
<img src='Logo_256.png' alt='doge' id='doge' onclick='change();'>
<small id='text'>This page was last modified on Wednesday, November 20, 2013 8:43:13 PM</small>
I assure you everything works, so don't mind if the .jpg or .png match up (just edited right now).
Add a timeout to the things that the function does, so the delay occurs when the function runs what you want to happen in your change() function after a setTimeout():
var change = function(){
setTimeout(function() {
var image = document.getElementById('doge');
image.src = 'img/doge.png';
document.getElementById("text").innerHTML="<b>such wow</b> much amaze <b><i>very effort</b></i>"
}, 5000);
};
So i've been looking around for a while for a possible solution to make a javascript, jquery which searches in the iFrame for a certain class or id element. Then takes out the html inside of it. (example. <a id="link">Here's a link</a> ). then makes it a string out of it and also replay this function every 5 second or so. Is there anyone who know a good solution to this or a tutorial?
I've tried the function var inf = $('#iframeid').contents().find('#theid').html();but it didn't gave any success.
Try this:
function GetFrameData() {
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var inf = frameBody.find('#theid').html();
});
}
// Call the function every 5 seconds
setInterval(GetFrameData, 5000);
I'm trying to write a simple javascript snippet which delays the image loading by a certain number of millisecs below.
<html>
<head>
<script type="text/javascript">
function SetTimer()
{
var Timer = setInterval("showImage()",3000);
}
function showImage()
{
document.getElementById('showImage').style.visibility = 'visible';
}
</script>
</head>
<body onLoad="SetTimer()" style="visibility:hidden">
<div id=showImage>
<img src="gwyneth_paltrow_2.jpg">
</div>
</body>
</html>
Am I approaching this incorrectly?
thanks in advance
This is basically an OK approach.
There are some bugs, namely:
document.getElementByID('showImage')style.visibility = 'hidden';
getElementByID should be getElementById
needs a dot after ('showImage')
You are setting the visibility to 'hidden' in order to show it. Instead, you should start out as hidden, and then make it appear instead of disappear.
document.getElementById('showImage').style.visibility = 'hidden';
Well, the code is backwards given the stated goal of delaying the appearance of the image. If I just use your code as a basis, then I would have the visibility of the image as hidden, using CSS, and then trigger the display to visible on the timer.
However, having said that... This doesn't delay the loading of the image, it merely delays the display of it. The other way to handle it is to use the timer to load an Image object in Javascript and then insert it into the DOM. This, then, will actually delay the loading of the image for 3 seconds. Something like this:
function showImage()
{
var myImage = new Image();
myImage.src = "gwyneth_paltrow_2.jpg";
document.getElementById("showImage").appendChild(myImage);
}
I'm doing that from memory, so syntax may not be entirely correct.
I know there are a million examples and tutrials on how to reload a DIV in jquery every X amount of seconds, here is the example code I am using right now
<script>
var auto_refresh = setInterval(
function(){
$('#notificationcontainer').load('http://localhost/member/beta_new/notifications.inc.php').
fadeIn("slow");
}, 10000);
</script>
The above code loads the DIV notificationcontainer
My problem is I need to load DIV notificationcontainer on page load and then refresh every X amount of seconds, this code currently makes the page wait X amount of time on initial page load and I need to show the div right away on page load but then also update it every X amount of time, please help
Create a function which loads the DIV, call it once in document.ready and pass it to setInterval function so that will be called periodically.
<script>
var refreshNotification =
function()
{
$('#notificationcontainer').load('http://localhost/member/beta_new/notifications.inc.php');
fadeIn("slow");
};
$(document).ready(
function()
{
refreshNotification();
var autoRefresh = setInterval(refreshNotification, 10000);
}
);
</script>
Run the function before calling setInterval
Just move the function() out, give it a name, then onload call that function along with a setInterval that calls the same function.