Javascript onClick image change - javascript

This is my first post here, so please bear with the formatting.
What I basically wanted to do was switch from an event to another with an onClick event.
It worked, so I wanted to add a loading image in between the 2 images.
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
It just waits for a while before changing the image, but the loading.gif does not load at all. On clicking the button, there is a delay, while the original image stays, and then the gerrard.jpg opens.
WHY IS THE LOADING.GIF BEING IGNORED ??
HTML, not really required here,but still
<img src="gerrard.jpg" id="details" name="details">
<br/>
<form id="change">
<input type="button" id="change" onClick="gerrard(details)" value="Gerrard"/>
PS- I'm new to JavaScript.

JavaScript is async language so if you want to set a delay you should use setTimeOut function instead of loop (cause loop will execute parallel with the following code) use like this:
function gerrard(details) {
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
//here we waiting fo 5 secs, and then changing image
setTimeout(
function(){details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';}, 5000)
}
In your case:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
}
//while loop still going execute the code go next and changing image
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
So if you want to do it without settimeout, and with loop you need to add changing image inside loop:
function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
a=a+1;
if (a==999999999)
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}
}

Related

How to make the text color to change back and forth automatically using Javascript?

<div>
<h2 id="change"> Hello Family</h2>
</div>
<script type="text/javascript">
setTimeout("firstColor()", 3000)
function firstColor(){
document.getElementById('change').style.color="#ffffff";
secondColor();
}
function secondColor(){
document.getElementById('change').style.color="#33ccff";
}
</script>
This code only changes the color once. I want the two colors to change back and forth. When I call the secondColor function from the firstColor function, it does not execute. I know what I have so far is not a loop, but I am puzzled with the fact that the secondColor() will not execute. I need help understanding why the secondColor function is not executing and how to loop it.
By calling secondColor() in your first method, you are setting the second color before the screen gets a chance of rendering the first color. You have to leave a timeout between both.
So, I would recommend a general approach more like this:
var myToggle = false;
setTimeout(function() {
if (myToggle) {
document.getElementById('change').style.color="#ffffff"
}
else {
document.getElementById('change').style.color="#33ccff";
}
myToggle = !myToggle;
}, 3000)

Second JS button triggers first JS button

I know I have to be doing something wrong, but again I don't fully understand what I'm doing as it is.
I'm creating a form which will have multiple buttons linked to JavaScript functions to do stuff. I'm at the very basic point of having these two buttons on the same page, and when you onMouseOver, onMouseDown, onMouseUp, onMouseOut it changes the image of my button.
I know there are other ways to do this (better ways) but I'm trudging on in this direction to at least get a better understanding of how JavaScript works. I know I'll have somewhat more complicated things to do down the road that may require something like this and I want to be sure I understand it when I get there.
The problem I'm having is that the second button does not do anything when you try to use it. The first button works fine, but the second button doesn't And when you try to use the second button, it makes the first one go off. So if I onMouseOver button 2, button 1 will show the affect. I tried copying my image files into a new set so they aren't using the same images, but that just showed me what when I use button 2, the functions set up for button 2 are being applied to button 1.
Anyway, here's the HTML code....
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:addElement()" ><img id="button" onMouseOver="hover_over()"
onMouseOut="hover_off()" onMouseDown="click_add()" onMouseUp="release()"
src="images/add_default.png" name="add" width="43" height="21"></a></p>
<input type="hidden" value="0" id="theValue2" />
<p><a href="javascript:addProduct()" ><img id="button2"
onMouseOver="hover_over_second()" onMouseOut="hover_off_second()"
onMouseDown="click_add_second()" onMouseUp="release_second()"
src="images/add_default2.png" name="add2" width="43" height="21"></a></p>
And here is the JavaScript....
////
//----------------Button Animation 1-------------------
////
function hover_off() {
document.images.add.src='images/add_default.png';
}
function hover_over() {
document.images.add.src='images/add_hover.png';
}
function click_add() {
document.images.add.src='images/add_click.png';
}
function release() {
document.images.add.src='images/add_hover.png';
}
////
//---------------------------------------------------
////
////
//----------------Button Animation 2-------------------
////
function hover_off_second() {
document.images.add.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add.src='images/add_click2.png';
}
function release_second() {
document.images.add.src='images/add_hover2.png';
}
////
//---------------------------------------------------
////
What am I doing wrong here? How do I get these links to actually work separately from each other?
Please teach me wise ones. I know this has to be stupid simple.
You are targetting the same element in your second button handler, it should be add2 not add like the first one that's why the first element src attribute is changed instead of the other.
function hover_off_second() {
document.images.add2.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add2.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add2.src='images/add_click2.png';
}
function release_second() {
document.images.add2.src='images/add_hover2.png';
}

How do update a page element while inside a long running event?

I've got a long running method -- and I want to indicate to the user that an operation is underway. This is NOT and ajax call, so I can't use the common pattern I've used in the past to display, say a spinner, before the ajax event, then hiding it on success for example.
In my case -- I'm not making an ajax call, I'm instead doing some very heavy DOM manipulation.
I had a test example on jsFiddle.net -- would love to learn how to capture the event. At the moment, my "wait-message" div updates at the same exact time when my operation completes which is much too late :(
Complete sample code is here: http://jsfiddle.net/rsturim/97hrs/6/
Javascript (jQuery)
$(document).ready(function() {
$("#link-action").click(function(e) {
$("#wait-message").text("starting ...");
var count = longRunningMethod(1000000000);
$("#result").text(count);
$("#wait-message").text("completed.");
});
var longRunningMethod = function(countUpTo) {
var i = 0;
while (i <= countUpTo) {
i++;
}
return i;
};
});
HTML:
<div id="wait-message">
push button please
</div>
<hr />
<button id="link-action">Run Operation</button>
<hr />
<h1>Results:</h1>
<div id="result"> </div>
Here is a solution. I'm not sure if it works in all browsers, you may want to test it out in several, but I think it does:
$(document).ready(function() {
$("#link-action").click(function(e) {
$("#wait-message").text("starting ...");
// Stuff to do after a render
setTimeout(function(){
var count = longRunningMethod(1000000000);
$("#result").text(count);
$("#wait-message").text("completed.");
}, 0);
});
var longRunningMethod = function(countUpTo) {
var i = 0;
while (i <= countUpTo) {
i++;
}
return i;
};
});
Basically, the browser won't render any changes until a script finishes executing. That allows you to do things like:
Hide all divs with a certain class
Show one of those divs
In a row and the browser will never render the div that is being shown as hidden, so you won't get weird flickers or things moving around on the page.
Using setTimeout like I did, the anonymous click handler will finish executing, the browser will re-render, the the anonymous function in the setTimeout will run (immediately after the render since there is no actual delay).
Use setTimeout or setInterval instead of your while loop; a sub-second delay like 15ms should be enough to prevent your window freezing / UI locking.

Cannot set visibility:hidden via JavaScript

I'm having a bit of trouble getting my head around this thing so I thought it might help to post it here. So here it goes.
What I have: 5 different images in 5 different table cells + a script that I will post below.
What I want: to use the javascript's...
document.GetElementById("image ID").style.visibility='visible/hidden'
...after a preset time, but, instead of image ID there is a string that gets the ID of the image, and before anyone says anything, I am not using "" for the string that is inside of (). Something like...
var n=1;
function picID() {
pictureID="pic"+n;
n=n+1;
}
...and this way, every time that function is called we get the element ID of "pic1", "pic2", "pic3", etc.
What my problem is: the darn thing won't work. The image styling remains the same as I defined it in the img tag. (style="visibility:hidden")
All image ID's are within the img tag, as it should.
Here's the whole code:
<script>
var m=1;
function Show() {
if (m==6) {m=1;}
feat="feat"+m;
**document.getElementById(feat).style.visibility="visible";**
m=m+1;
setTimeout('Show()', 3000);
}
window.onload = Show;
</script>
<script>
var k=1;
function Hide() {
if (k==6) {k=1;}
feate="feat"+k;
**document.getElementById(feate).style.visibility="hidden";**
k=k+1;
setTimeout('Hide()', 3000);
}
window.onload = Hide;
</script>
I've separated the code so it'd easier to spot.
From what I've seen the only issue is the bold line within the code. I've tested everything else by replacing the document.getElementById with document.write, so I can see that the custom ID string thingy is working fine. It is. An everything else as well.
Any suggestions? Thanks.
Try setting k = 0; instead of k = 1;
It looks like when you load the page you have both the show() and the hide() functions running on the same element. Doing the above will make hide() run on the element BEFORE the element the show() runs on.
This code will keep on running in a loop.
because the setTimeOut() is called every time.
There should be a case when its not called
e.g if m<6 call it else don't

Javascript/Ajax help required

I want to create a photo gallery element which has a play button and the next/previous navigation...
I can do the next and previous by using ajax load...and i do not want to preload the data for play functionality..the only way i can think of is using ajax call in a timer for play functionality...but again..calls will happen in an infinite manner till the person navigates away...is there any better way that i can do >>>??? can i jus make one ajax call to get the html of each and put in array and iterate..if so how do i go about it >>??? or is there a better solution for this??
get all image urls from 1 ajax call and store it in a array and dynamically set image src using javascript over a time. But without using preloading the flicker may occur
Here is a simple approach.
//Global variable
var imgList;
var imgPntr = 0;
//AJAX function
function getImagesUrl()
{
//Some code here
//On success
return arrayOfUrl;
}
// call this to prepare the images
function prepareImages()
{
var temp = getImagesUrl();
for(var i = 0; i 0) {
imgPntr--;
//Load this image in your gallery
loadImage(imgList[imgPntr]);
} else {
//Either rotate to end or alert the user end or disable prev button
}
}
// Call on press play
function play()
{
// Use setTime out and call showNext() until end
}

Categories

Resources