[RESOLVED] another javascript problem
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function toggle()
{
if(document.getElementById('img1').src=="img/Autumn Leaves.jpg")
{
document.getElementById('img1').src="img/Creek.jpg";
setTimeout ( "setAnotherImage()", 2000 );
}
}
function setAnotherImage()
{
if(document.getElementById('img1').src=="img/Creek.jpg")
{
document.getElementById('img1').src="img/Autumn Leaves.jpg";
setTimeout ( "toggle()", 2000 );
}
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
<img id="img1" src="img/Autumn Leaves.jpg" alt="Image cannot be displayed" height="400" width="400"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="toggle()" />
</div>
</form>
</body>
</html>
the images are not toggling on the button click:(
please help
Re: another javascript problem
HowTo,
Why are you insisting on using an ASP.Net Button control, when you don't seem to be doing anything on the server side. Unless of course you are, and you are just not telling us about it.
In all of your recent threads, the advice has included using a standard html input element.
Again the question would be....
Are there any JavaScript errors on the page, if so, what are they?
Ultimately, you should be able to try a couple things, which should get you on your way, these are some of the things that I was trying, before I found out what your issue is:
Code:
<script type="text/javascript" language="javascript">
function toggle() {
alert("toggle");
alert(document.getElementById('img1').src);
if(document.getElementById('img1').src=="img/Blue hills.jpg") {
alert("toggling");
//document.getElementById('img1').src="img/Creek.jpg";
setTimeout ( "setAnotherImage()", 2000 );
}
return false;
}
function setAnotherImage() {
alert("setAnotherImage");
if (document.getElementById('img1').src == "img/Winter.jpg") {
document.getElementById('img1').src = "img/Blue Hills.jpg";
setTimeout("toggle()", 2000);
}
else {
if (document.getElementById('img1').src == "img/Blue Hills.jpg") {
document.getElementById('img1').src = "img/Winter.jpg";
setTimeout("toggle()", 2000);
}
}
}
</script>
Notice I added some alerts, so that you can see where in your methods the code is getting to. Notice also that I alerted what your if statement is checking against.
Do you see the problem?
Gary
Re: another javascript problem
On a side note....
I have never liked the use of setTimeout, I have found that in the long run, it brings nothing but pain.
Gary
1 Attachment(s)
Re: another javascript problem
ok i get the problem:
Attachment 78707
the image path and the image name is changed.............hence the if statement condition is not matched........
why is it so?Can you please help me out in getting the work done by modifying the javascript code?
Re: another javascript problem
from now onwards i might use the html input button ...... :)
sorry for using the button control for so long........
Re: another javascript problem
You are setting a relative path on the server, which when sent to the client becomes an absolute path, you are then reading the absolute path from the client, hence what you are seeing.
Gary
Re: another javascript problem
how to solve the problem then?
Re: another javascript problem
You will either need to split the string, so you can search on the last part, or find another approach.
Such as searching the string from something unique.
Gary
Re: another javascript problem
should i go for it using the index of function of the javascript?if it returns -1 then it means it does not match else it match?
am i thinking the right way?
Re: another javascript problem
That is one way to go, yes.
Use something unique in the file name as the thing you want to match on.
Gary
Re: another javascript problem
Quote:
Originally Posted by
gep13
Use something unique in the file name as the thing you want to match on.
Gary
can you please explain it a bit in details so that i can have a think on it?
Re: another javascript problem
Rather than use something like:
Which I am assuming you are using for testing purposes, give your image a name that is guaranteed to be unique, and that you can match on, something like unique number, perhaps a GUID.
Gary
Re: another javascript problem
ok i did this in my code and it works great:
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function toggle()
{
if(document.getElementById('img1').src.indexOf("utumn"))
{
document.getElementById('img1').src="img/Creek.jpg";
setTimeout ( "setAnotherImage()", 1000 );
}
}
function setAnotherImage()
{
if(document.getElementById('img1').src.indexOf("reek"))
{
document.getElementById('img1').src="img/Autumn Leaves.jpg";
setTimeout ( "toggle()", 1000 );
}
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
<img id="img1" src="img/Autumn Leaves.jpg" alt="Image cannot be displayed" height="400" width="400"/>
<input id="Button1" type="button" value="button" onclick="toggle()" />
</div>
</form>
</body>
</html>
i will be thinking of giving unique names to the images and then do this code by that name later today......:)
thanks for the help gep :thumb:
Re: another javascript problem
Quote:
Originally Posted by
gep13
On a side note....
I have never liked the use of setTimeout, I have found that in the long run, it brings nothing but pain.
Gary
how would you have done this toggling of images then?
Re: [RESOLVED] another javascript problem
In the ASP.Net World, which is what this forum is specifically about, I would have probably chosen to use something like the AdRotator:
http://msdn.microsoft.com/en-us/libr...adrotator.aspx
Under the hood, it may well use setTimeout, the difference being it is fully tested.
Gary
Re: [RESOLVED] another javascript problem
I gave a try at the ad rotator and it worked :
Code:
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>img/Autumn Leaves.jpg</ImageUrl>
<AlternateText>This are the autumn leaves</AlternateText>
</Ad>
<Ad>
<ImageUrl>img/Creek.jpg</ImageUrl>
<AlternateText>Creek photo</AlternateText>
</Ad>
<Ad>
<ImageUrl>img/Desert Landscape.jpg</ImageUrl>
<AlternateText>Desert landscape</AlternateText>
</Ad>
<Ad>
<ImageUrl>img/Dock.jpg</ImageUrl>
<AlternateText>Dock image</AlternateText>
</Ad>
</Advertisements>
From the msdn i read this:
Code:
@MSDN
Use the AdRotator control to display a randomly selected advertisement
banner on the Web page. The displayed advertisement changes whenever
the page refreshes
now the image will change after the page refresh but i want to change it after certain time interval(which i did using the javascript above)......
how can i do it using the adrotator?
please help
thank you :thumb:
Re: [RESOLVED] another javascript problem
One suggestion...
Put the AdRotator into an AJAX UpdatePanel, and Trigger a Partial PostBack with a Timer. You can find an example here:
http://www.codedigest.com/CodeDigest...-Interval.aspx
Gary
Re: [RESOLVED] another javascript problem
ajax.......hmm
i will take a look at your suggestion a week later........i am trying to learn javascript hard so that i can move over to ajax and right now i cant leave studying javascript incomplete and move over to ajax...... :)
so gep do you use javascript for any purpose in your website.....or you only use the ajax?
Re: [RESOLVED] another javascript problem
I use a combination, depending on the situation.
If I already have AJAX enabled on the site, then I would tend to use AJAX controls, but if AJAX isn't already on the site, then I would use a combination of JavaScript/jQuery.
Gary
