[RESOLVED] another javascript problem

**HowTo** · Jun 17th, 2010, 11:21 PM

Code:

<&#37;@ 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

**gep13** · Jun 18th, 2010, 01:24 AM

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

**gep13** · Jun 18th, 2010, 01:24 AM

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

**HowTo** · Jun 18th, 2010, 11:37 AM

ok i get the problem:

Name: Untitled.jpg
Views: 152
Size: 3.6 KB

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?

**HowTo** · Jun 18th, 2010, 11:51 AM

from now onwards i might use the html input button ......

sorry for using the button control for so long........

**gep13** · Jun 18th, 2010, 11:56 AM

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

**HowTo** · Jun 18th, 2010, 12:22 PM

how to solve the problem then?

**gep13** · Jun 18th, 2010, 12:26 PM

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

**HowTo** · Jun 18th, 2010, 12:37 PM

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?

**gep13** · Jun 18th, 2010, 01:02 PM

That is one way to go, yes.

Use something unique in the file name as the thing you want to match on.

Gary

**HowTo** · Jun 18th, 2010, 01:15 PM

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?

**gep13** · Jun 18th, 2010, 02:22 PM

Rather than use something like:

Code:

Autumn Leaves.jpg

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

**HowTo** · Jun 18th, 2010, 10:35 PM

ok i did this in my code and it works great:

Code:

<&#37;@ 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

**HowTo** · Jun 19th, 2010, 10:43 PM

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?

**gep13** · Jun 20th, 2010, 04:56 AM

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

**HowTo** · Jun 20th, 2010, 11:20 AM

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

**gep13** · Jun 21st, 2010, 01:58 AM

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

**HowTo** · Jun 21st, 2010, 02:53 AM

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?

**gep13** · Jun 21st, 2010, 02:57 AM

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

Thread: [RESOLVED] another javascript problem

Thread Tools

Display

[RESOLVED] another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: another javascript problem

Re: [RESOLVED] another javascript problem

Re: [RESOLVED] another javascript problem

Re: [RESOLVED] another javascript problem

Re: [RESOLVED] another javascript problem

Re: [RESOLVED] another javascript problem

Posting Permissions