i have this code and would like to have an animated gif to disappear after 3 seconds. i learned that i need to add window.onload=loadingGif(); to ensure the 'loadingGif' function is fired when the page loads. i stll have the problem that this code is not working how it should do. i would like to know what is going wrong with that? thanks.
i´m sorry i posted the wrong code. it must be:
<body>
<script type="text/javascript">
var counter = 3;
function downcount() {
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 ) {
document.getElementById('loading').style.display = 'none';
document.getElementById('msg').style.display = 'block';
} else {
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
</script>
<div id="loading">
<img src="loading/loading40.gif"/>
</div>
<div id="msg" style="display:none">
<?PHP echo $_SESSION['msg'];?>
</div>
Close the img tag.
Also, where's digit? If that doesn't exist then you'll be getting JS errors.
You're doing three 1s setTimeout to wait for 3 seconds? Here is a simpler solution, right out of my head...
window.onload = setTimeout(removeImg, 3000)
var removeImg = function() {
document.getElementById('loading').style.display = 'none'
document.getElementById('msg').style.display = 'block'
}
Related
I'm trying to make a simple slideshow with JavaScript.
Here is my index.html
<body>
<h1>Slideshow example</h1>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"></script>
</body>
And here is slide.js
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
timer: function() {
this.sliderImages.forEach(function(img) {
var container = document.getElementById('container');
var image = document.createElement('img');
container.appendChild(image);
image.src= img;
})
}
}
If I click the "next slide" button, I see both of the images. It loops through the whole array. How could I make it loop through the array just once, when clicking the button?
I tried adding container.innerHTML = ''; so that the previous image would be removed when adding the next image, but that resulted it showing immidietly the image in sliderImages[1]. Am I approaching this whole thing wrong?
I updated your code. It is not the best way to write it but I just modified your example to show you the problem. The problem is your timer function which is just going through all the elements in the array at once. Instead what you may want to do is add some delay.
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
currentImgIndex: 0,
timer: function() {
if (this.currentImgIndex < this.sliderImages.length ) {
var image = document.getElementById('img');
image.src= this.sliderImages[this.currentImgIndex];
this.currentImgIndex++;
setTimeout(function (){ slideshow.timer()}, 2000)
} else {
alert("no more images");
}
}
}
<body>
<h1>Slideshow example</h1>
<img id="img"/>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"> </script>
</body>
If you are going to change the images only when the button is clicked, you don't need the forEach loop. If you are going to change images without user interaction then you need the loop but you need setInterval also.
I have been stuck on this problem for a while now and I need some help trying to figure out how to "refresh" a gif image every time I hit a button. I have tried a ton of the online ideas for this but none of them seem to be working. It only will play the gif once I clear my browser history so I think it may be some caching problem. Can someone spot where I am going wrong or have any tips on how to fix this?
My html:
<div class="logo">
<button class="chains" id="chains" onclick="chains();"></button>
<div id="png">
<img src="images/logo.png" alt=""/>
</div>
<div id="gif">
<img src="images/chains.gif" alt="" />
</div>
</div>
My Javascript function:
<script language="JavaScript">
$( document ).ready(function() {
var myDiv = document.getElementById('gif');
myDiv.style.visibility = "hidden";
});
function chains() {
d = new Date();
$("#gif").attr("src", "images/chains.gif?"+d.getTime());
var logo = document.getElementById("png");
var gif = document.getElementById("gif");
var hide = function(){
logo.style.visibility = "hidden";
gif.style.visibility = "visible";
setTimeout(show, 2300); // 5 seconds
}
var show = function(){
gif.style.visibility = "hidden";
logo.style.visibility = "visible";
}
hide();
};
</script>
I hope I found the answer here!
Let me quote:
in a nut shell load the image into a javascript variable then change out the src on click
$(function(){
var image = new Image();
image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg5NjAwPg/462b8072';
$('#img').click(function(){
$(this).attr('src',image.src);
});
});
EDITED: https://jsfiddle.net/op3t82ea/2/
Made some changes and enhancements and added comments in the code! Hope this helps :)
I have a code where onclick a word on left side of the page, it shows some text on right hand side of page. Here's the jsfiddle of working code.
Now, my problem is I want to display spinning circle on page on every onclick and then show text on the right hand side of the page. My code for spinning circle is:
HTML:
<div id="loading">
<img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>
JavaScript:
function hideLoading() {
document.getElementById("loading").style.display = 'block';
}
function showLoading() {
document.getElementById("loading").style.visibility = 'visible';
}
CSS:
#loading {
display: none;
}
Now, I don't know how to place them in my working code to get the desired result. Anybody knows the correct way of doing it?
Desired result: onclick "abc" on left hand side, spinning circle should be displayed for 1 sec and then "I should be printed on left side" should be displayed. Again on clicking "mno", first spinning circle should be shown for 1 sec and then text "I should be printed on left side" will be displayed. The fiddle has working version of onclick.
You should use a single handler function on each element that will both hide and show the loading gif. Also, it's a good idea not to use getElementById on every call, so save it in a variable:
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
Here I am trying to split the webpage into two columns and display text.</div>
<div id="one">
<div id="loading">
<img src="http://support.snapfish.com/euf/assets/images/answer_images/SpinningWheel.gif" />
</div>
<div id="message"></div>
</div>
<div id="two"> <b>This is test one<br /></b>
<b>This is test two<br /></b>
</div>
Javascript:
var elements = {};
function loadSpanContent() {
elements.loading.style.display = 'block'; // Show loading gif
spanContent = this.innerHTML
setTimeout(function () {
elements.message.innerHTML = "I should be printed on left side - " + spanContent;
elements.loading.style.display = 'none'; // Hide loading gif
alert("onclick Event detected! " + spanContent);
}, 1000);
}
window.onload = function mydisplayArray() {
var array = ['abc', 'xyz', 'mno'];
elements.loading = document.getElementById("loading");
elements.one = document.getElementById("one");
elements.message = document.getElementById("message");
for (i = 0; i < array.length; i++) {
var span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = loadSpanContent;
one.appendChild(span);
}
};
Here is a fiddle: http://jsfiddle.net/nBaCJ/1/
I'm still confused by what you actually want here, but if you want to have the loading message disappear after one second, you should use setTimeout. Something like this:
function showAlert() {
showLoading();
setTimeout(hideLoading,1000);
//Hide loading circle
var myString = "I should be printed on left side";
document.getElementById("two").innerHTML = myString;
}
But you also need to fix your "showLoading" and "hideLoading". Something like this:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}
http://jsfiddle.net/7uxHC/9/
BTW: if you want your loading gif to appear over your content, then set its position:absolute in css, but note that you gif has a white, rather than transparent background so it will obscure your content.
Your request isn't clear.
But first, you should fix these 2 functions:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}
I'm trying to make a countdown timer using JS, obviously.
I think my code is correct, but it does not work.
Objective of the code:
The code suppose to show a timer decreasing until it show the content which is DONE in the alst line of the code.
Problem: I've tried making an HTML page on my local machine and tested it but it didn't work, also I've uploaded it on my website and it does not work too.
Code:
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
var timerID = setInterval("CountdownTimer()",1000);
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number); //Mark1
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
</script>
</body>
If the solution of the problem is easy/stupid and you thought of down voting it, please don't do, because I'm very new to SOF and JS :)
Thanks in Advance guys.
You're missing
function ReplaceContentInContainer(id, content)
{
document.getElementById(id).innerHTML = content;
}
Redo your setInterval call to specify the function itself, rather than a string containing a call.
See http://jsfiddle.net/2zwbV/2/ for a working example.
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number);
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
var timerID = setInterval(CountdownTimer(),1000);
</script>
</body>
First, the timerID should be after CountdownTimer function because if not you are going to call a non existing function, second is that the function CountdownTimer should't be in quotes.
I am using javascript to slideshow images.Images are loaded only when the user clicks the next button i.e there is no preloading before the slideshow begins. With every image there is a supporting description which is loaded by the same javascript from an array which is stored in the javascript file. The effect of this is such that the description on next image is shown even before the image is displayed. Please suggest me some method so that i can delay displaying the desprition until the image is loaded. Also a loading symbol could be of great help. Please let me know how to do that. Thanks.
You will have to show some code and be more specific if you want more specific answers but in the meanwhile, I think this tutorial could help you out:
JavaScript Timers with setTimeout and setInterval
You need to add an event listener for the image onload event and display your text in that event handler. Unfortunately, as with everything else, not every browser works the same way in this respect. If you google image onload you will find some good suggestions.
Show that image in a dynamically added iframe and add an onload listener to that iframe to show the description only when it loads.
Here's an example:
<script>
var i;
var ifm;
var spinner;
function popupIframeWithImageInit(id, parent, initImageNumber) {
ifm = document.getElementById(id);
i = initImageNumber;
if(ifm === null) {
ifm = document.createElement('iframe');
}
if(!spinner) {
spinner = document.getElementById('spinner');
}
ifm.setAttribute('src', google_logos[i]);
ifm.setAttribute('id', id);
ifm.setAttribute('name', id);
ifm.setAttribute('height', document.body.clientHeight - 50);
ifm.setAttribute('width', '840');//width is fixed because the image is assumed to be fixed size 800
ifm.setAttribute('scrolling', 'yes');
ifm.setAttribute('frameborder', '0');
ifm.style.display= 'none';
ifm.onload = function() {
document.getElementById("description").innerHTML = pic_description[i];
ifm.style.display= '';
spinner.style.display = 'none';
};
document.getElementById(parent).appendChild(ifm);
spinner.style.display = '';
}
function next() {
ifm.src = google_logos[++i];
spinner.style.display = '';
ifm.style.display= 'none';
}
function prev() {
ifm.src = google_logos[--i];
spinner.style.display = '';
ifm.style.display= 'none';
}
function dismissPopupIframeWithImage(parentId, ifmId) {
document.getElementById(parentId).removeChild(document.getElementById(ifmId));
spinner.style.display = 'none';
ifm.style.display= 'none';
return false;
}
//use large images to see the spinner
google_logos = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg',
'http://hermalditaness.files.wordpress.com/2010/01/2.jpg',
'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg',
'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif'];
pic_description = ['http://sharevm.files.wordpress.com/2010/03/googlevsmicrosoft300dpi.jpg',
'http://hermalditaness.files.wordpress.com/2010/01/2.jpg',
'http://tuescape.files.wordpress.com/2008/10/tous20les20logos20google20par20aysoon.jpg',
'http://isopixel.net/wp-content/uploads/2007/02/logos-superbowl.gif'];
</script>
<img id="spinner" src="http://publish.gawker.com/assets/ged/img/spinner_16.gif" style="position:absolute; left:100px; top:150px; display:none;"/>
<div style="" id="panel"></div>
<div style="" id="description"></div>
<div >
<button onclick="popupIframeWithImageInit('imagePopup', 'panel', 1);">Open</button>
<button onclick="prev();"><-- Prev</button>
<button onclick="next();">Next --></button>
<button onclick="dismissPopupIframeWithImage('panel', 'imagePopup');">Close</button>
</div