Skies of Arcadia World Forum Index
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Anyone good at HTML + javascript, and can help me out here?

 
Post new topic   Reply to topic    Skies of Arcadia World Forum Index -> General Discussion
View previous topic View next topic
Author Message
ftr



Joined: 30 Mar 2005
Posts: 597

PostPosted: Tue Apr 26, 2005 9:59 pm    Post subject: Anyone good at HTML + javascript, and can help me out here? Reply with quote

I'm trying to write an html file that changes the image every so often, and has a set of buttons for adding filters and refreshing manually etc.

HOWEVER, the following is what you actually see:

(the buttons etc are in the right place, although only the left-most three should be visible. the "more" button should reveal and hide the others, and because the image doesn't show I can't actually test if they work properly)



and here is the html/javascript behind it:

Code:
<html>
<head>
   <!--<meta http-equiv="REFRESH" content="5;">-->

   <style type="text/css">
      body      {color:#FFFFFF; background-color:#000000}
      p      {text-align:center}
      img      {height:80%; width:78.125%; border:ridge; filter:
            invert(enabled=0)
            flipH(enabled=0)
            flipV(enabled=0)
            blur(add=0, direction=225, strength=10, enabled=0)
            xray(enabled=0)
            blendTrans(Duration=1.5)
            revealTrans(Duration=1.5, Transition=23)
            alpha(opacity=100, finishopacity=0, style=2, enabled=0)
            chroma(color=white, enabled=0)
            wave(add=0, freq=6, lightstrength=20, phase=220, strength=22, enabled=0)
            light}
   </style>

   <script type="text/Javacript">

      var picarray = new Array(
            "BlueBubble1280rush.bmp",
            "GreenBubble1280editedyes2.bmp",
            "RedBubble1280kc.bmp",
            "YellowBubble1280Wishboneashbmp.bmp",
            "machinae-dxm-wp02b1024-768.jpg",
            "machinae-dxm-wp02w1024-768.jpg",
            "SLR-2.jpg"
            );

   function randInt(lower, upper)
   {
      return(Math.floor(Math.random()*(upper-lower+1)))+lower;
   }//end randInt
   
   function doBlend(thisObj)
   {
      thisObj.src = picArray[randint(0, (picArray.length-1))];
      thisObj.filters.blendtrans.Apply();
      thisObj.filters.blendtrans.Play();
   }
   
   function doReveal(thisObj)
   {
      thisObj.src = picArray[randint(0, (picArray.length-1))];
      thisObj.filters.revealTrans.transition = randInt(0,22);
      thisObj.filters.revealTrans.Apply();
      thisObj.filters.revealTrans.Play();
   }

   function moreOrLess()
   {
      if(more.innerHTML == "More")
      {
         more.innerHTML = "Less";
      }
      else
      {
         more.innerHTML = "More";
      }
      toggleVis(B_invert);
      toggleVis(B_flipH);
      toggleVis(B_flipV);
      toggleVis(B_blur);
      toggleVis(B_xray);
      toggleVis(B_blend);
      toggleVis(B_reveal);

      toggleVis(B_alpha);
      toggleVis(B_chroma);
      toggleVis(B_wave);
      toggleVis(B_red_L);
      toggleVis(B_green_L);
      toggleVis(B_blue_L);
      toggleVis(B_white_L);
   }
   
   fucntion toggleVis(obj)
   {
      if(obj.style.visibility == "visible")
      {
         obj.style.visisbility = "hidden";
      }
      else
      {
         obj.style.visibility == "visible";
      }
   }
   
   function initPage()
   {
      setInterval("doBlend(image)", 900000);
   }

   //leftmargin="0" topmargin="0"

   </script>
</head>

<body onLoad="initPage()">
   <button style="position: absolute; left: 87%; top: 87%; width: 6%"
   onclick="window.open('http://www.google.com','_new')">Google</button>
   <button style="position: absolute; left: 81%; top: 87%; width: 6%"
   onclick="document.location.reload()">Refresh</button>
   <button style="position: absolute; left: 81%; top: 91%; width: 6%" id="more"
   onclick="moreOrLess">More</button>

   <button style="position: absolute; left: 69%; top: 87%; width: 6%; visibilty:hidden" id="B_invert"
   onclick="image.filters[0].enabled = !image.filters[0].enabled">Invert</button>
   <button style="position: absolute; left: 63%; top: 87%; width: 6%; visibilty:hidden" id="B_flipH"
   onclick="image.filters[1].enabled = !image.filters[1].enabled">Flip H</button>
   <button style="position: absolute; left: 57%; top: 87%; width: 6%; visibilty:hidden" id="B_flipV"
   onclick="image.filters[2].enabled = !image.filters[2].enabled">Flip V</button>
   <button style="position: absolute; left: 51%; top: 87%; width: 6%; visibilty:hidden" id="B_blur"
   onclick="image.filters[3].enabled = !image.filters[3].enabled">Blur</button>
   <button style="position: absolute; left: 45%; top: 87%; width: 6%; visibilty:hidden" id="B_xray"
   onclick="image.filters[4].enabled = !image.filters[4].enabled">X-ray</button>
   <button style="position: absolute; left: 39%; top: 87%; width: 6%; visibilty:hidden" id="B_blend"
   onclick="doBlend(image)">Blend</button>
   <button style="position: absolute; left: 33%; top: 87%; width: 6%; visibilty:hidden" id="B_reveal"
   onclick="doReveal(image)">Reveal</button>

   <button style="position: absolute; left: 69%; top: 91%; width: 6%; visibilty:hidden" id="B_alpha"
   onclick="image.filters[7].enabled = !image.filters[7].enabled">Alpha</button>
   <button style="position: absolute; left: 63%; top: 91%; width: 6%; visibilty:hidden" id="B_chroma"
   onclick="image.filters[8].enabled = !image.filters[8].enabled">Chroma</button>
   <button style="position: absolute; left: 57%; top: 91%; width: 6%; visibilty:hidden" id="B_wave"
   onclick="image.filters[9].enabled = !image.filters[9].enabled">Wave</button>
   <button style="position: absolute; left: 51%; top: 91%; width: 6%; visibilty:hidden" id="B_red_L"
   onclick="image.filters.light.changeColor(0,255,0,0,true)">Red</button>
   <button style="position: absolute; left: 45%; top: 91%; width: 6%; visibilty:hidden" id="B_green_L"
   onclick="image.filters.light.changeColor(0,0,255,0,true)">Green</button>
   <button style="position: absolute; left: 39%; top: 91%; width: 6%; visibilty:hidden" id="B_blue_L"
   onclick="image.filters.light.changeColor(0,0,0,255,true)">Blue</button>
   <button style="position: absolute; left: 33%; top: 91%; width: 6%; visibilty:hidden" id="B_white_L"
   onclick="image.filters.light.changeColor(0,255,255,255,true)">White</button>

      <script language="Javascript">
      <!--
         var imgString = picArray[randInt(0, (picArray.length-1))];
         document.write('<p><img id="image" src="'+imgString+'"/></p>');
         image.filters.light.addAmbient(0xFF,0xFF,0xFF,100);
      //-->
      </script>
   </body>
</html>


anyone able to shed some light on where I went wrong?
Back to top
View user's profile Send private message
Blade Dancer



Joined: 02 Apr 2005
Posts: 88

PostPosted: Wed Apr 27, 2005 1:13 am    Post subject: Reply with quote

Uh...i think you may have picked the wrong type of forum for something like that. (the thread you picked is right. I'm just not sure that SoA will draw in the programmers.)
_________________
Whoever said nothings impossible has never tried slamming a revolving door. *cough*Vyse*cough*
Back to top
View user's profile Send private message
ADnova



Joined: 31 Mar 2005
Posts: 92

PostPosted: Wed Apr 27, 2005 1:26 am    Post subject: Reply with quote

A couple of things I noticed from this function:
Code:
fucntion toggleVis(obj)
   {
      if(obj.style.visibility == "visible")
      {
         obj.style.visisbility = "hidden";
      }
      else
      {
         obj.style.visibility == "visible";
      }
   }


You spelled function as fucntion

Shouldn't
obj.style.visibility == "visible";
be
obj.style.visibility = "visible";
Back to top
View user's profile Send private message
ftr



Joined: 30 Mar 2005
Posts: 597

PostPosted: Wed Apr 27, 2005 1:57 am    Post subject: Reply with quote

Can't believe I missed that...

No, the "==" is right, it's testing a condition. If it was just "=", it would confuse it, and set to the following value as it checked.

and no, unfortunatly that spelling mistake didn't fix it, but thanks anyway, it would have caused problems later

Blade Dancer, there are quite a few college students here, as well as others, you'd be suprised who knows what here.
Back to top
View user's profile Send private message
ADnova



Joined: 31 Mar 2005
Posts: 92

PostPosted: Wed Apr 27, 2005 2:01 am    Post subject: Reply with quote

ftr wrote:

No, the "==" is right, it's testing a condition. If it was just "=", it would confuse it, and set to the following value as it checked.


I was referring to the one inside the "else" block. You probably wanted to set it to visible in there, not test it.

Try this:

Code:
<html>
<head>
   <!--<meta http-equiv="REFRESH" content="5;">-->

   <style type="text/css">
      body      {color:#FFFFFF; background-color:#000000}
      p      {text-align:center}
      img      {height:80%; width:78.125%; border:ridge; filter:
            invert(enabled=0)
            flipH(enabled=0)
            flipV(enabled=0)
            blur(add=0, direction=225, strength=10, enabled=0)
            xray(enabled=0)
            blendTrans(Duration=1.5)
            revealTrans(Duration=1.5, Transition=23)
            alpha(opacity=100, finishopacity=0, style=2, enabled=0)
            chroma(color=white, enabled=0)
            wave(add=0, freq=6, lightstrength=20, phase=220, strength=22, enabled=0)
            light}
   </style>

   <script language="Javascript">
   <!--

      var picArray = new Array(
            "BlueBubble1280rush.bmp",
         "GreenBubble1280editedyes2.bmp",
         "RedBubble1280kc.bmp",
         "YellowBubble1280Wishboneashbmp.bmp",
         "machinae-dxm-wp02b1024-768.jpg",
         "machinae-dxm-wp02w1024-768.jpg",
            "SLR-2.jpg"
            );

   function randInt(lower, upper)
   {
      return(Math.floor(Math.random()*(upper-lower+1)))+lower;
   }

   function doBlend(thisObj)
   {
      thisObj.src = picArray[randInt(0, (picArray.length-1))];
      thisObj.filters.blendtrans.Apply();
      thisObj.filters.blendtrans.Play();
   }

   function doReveal(thisObj)
   {
      thisObj.src = picArray[randInt(0, (picArray.length-1))];
      thisObj.filters.revealTrans.transition = randInt(0,22);
      thisObj.filters.revealTrans.Apply();
      thisObj.filters.revealTrans.Play();
   }

   function moreOrLess()
   {
      if(more.innerHTML == "More")
      {
         more.innerHTML = "Less";
      }
      else
      {
         more.innerHTML = "More";
      }
      toggleVis(B_invert);
      toggleVis(B_flipH);
      toggleVis(B_flipV);
      toggleVis(B_blur);
      toggleVis(B_xray);
      toggleVis(B_blend);
      toggleVis(B_reveal);
      toggleVis(B_alpha);
      toggleVis(B_chroma);
      toggleVis(B_wave);
      toggleVis(B_red_L);
      toggleVis(B_green_L);
      toggleVis(B_blue_L);
      toggleVis(B_white_L);
   }

   function toggleVis(obj)
   {
      if(obj.style.visibility == "visible")
      {
         obj.style.visibility = "hidden";
      }
      else
      {
         obj.style.visibility = "visible";
      }
   }

   function initPage()
   {
        moreOrLess();
      setInterval("doBlend(image)", 900000);
   }

   //-->
   </script>
</head>

<body onLoad="initPage();">
   <button style="position: absolute; left: 87%; top: 87%; width: 6%"
   onclick="window.open('http://www.google.com','_new')">Google</button>
   <button style="position: absolute; left: 81%; top: 87%; width: 6%"
   onclick="document.location.reload()">Refresh</button>
   <button style="position: absolute; left: 81%; top: 91%; width: 6%" id="more"
   onclick="moreOrLess();">More</button>

   <button style="position: absolute; left: 69%; top: 87%; width: 6%; visibilty:hidden" id="B_invert"
   onclick="image.filters[0].enabled = !image.filters[0].enabled">Invert</button>
   <button style="position: absolute; left: 63%; top: 87%; width: 6%; visibilty:hidden" id="B_flipH"
   onclick="image.filters[1].enabled = !image.filters[1].enabled">Flip H</button>
   <button style="position: absolute; left: 57%; top: 87%; width: 6%; visibilty:hidden" id="B_flipV"
   onclick="image.filters[2].enabled = !image.filters[2].enabled">Flip V</button>
   <button style="position: absolute; left: 51%; top: 87%; width: 6%; visibilty:hidden" id="B_blur"
   onclick="image.filters[3].enabled = !image.filters[3].enabled">Blur</button>
   <button style="position: absolute; left: 45%; top: 87%; width: 6%; visibilty:hidden" id="B_xray"
   onclick="image.filters[4].enabled = !image.filters[4].enabled">X-ray</button>
   <button style="position: absolute; left: 39%; top: 87%; width: 6%; visibilty:hidden" id="B_blend"
   onclick="doBlend(image);">Blend</button>
   <button style="position: absolute; left: 33%; top: 87%; width: 6%; visibilty:hidden" id="B_reveal"
   onclick="doReveal(image);">Reveal</button>

   <button style="position: absolute; left: 69%; top: 91%; width: 6%; visibilty:hidden" id="B_alpha"
   onclick="image.filters[7].enabled = !image.filters[7].enabled">Alpha</button>
   <button style="position: absolute; left: 63%; top: 91%; width: 6%; visibilty:hidden" id="B_chroma"
   onclick="image.filters[8].enabled = !image.filters[8].enabled">Chroma</button>
   <button style="position: absolute; left: 57%; top: 91%; width: 6%; visibilty:hidden" id="B_wave"
   onclick="image.filters[9].enabled = !image.filters[9].enabled">Wave</button>
   <button style="position: absolute; left: 51%; top: 91%; width: 6%; visibilty:hidden" id="B_red_L"
   onclick="image.filters.light.changeColor(0,255,0,0,true)">Red</button>
   <button style="position: absolute; left: 45%; top: 91%; width: 6%; visibilty:hidden" id="B_green_L"
   onclick="image.filters.light.changeColor(0,0,255,0,true)">Green</button>
   <button style="position: absolute; left: 39%; top: 91%; width: 6%; visibilty:hidden" id="B_blue_L"
   onclick="image.filters.light.changeColor(0,0,0,255,true)">Blue</button>
   <button style="position: absolute; left: 33%; top: 91%; width: 6%; visibilty:hidden" id="B_white_L"
   onclick="image.filters.light.changeColor(0,255,255,255,true)">White</button>

      <script language="Javascript">
      <!--
         var imgString = picArray[randInt(0, (picArray.length-1))];
         document.write('<p><img id="image" src="'+imgString+'"/></p>');
         image.filters.light.addAmbient(0xFF,0xFF,0xFF,100);
      //-->
      </script>
   </body>
</html>
Back to top
View user's profile Send private message
ftr



Joined: 30 Mar 2005
Posts: 597

PostPosted: Wed Apr 27, 2005 2:11 am    Post subject: Reply with quote

Excellent, it's pretty much working, except one thing: the buttons re-appear when the image refreshes. Other than that, everything works great Smile thanks
Back to top
View user's profile Send private message
ftr



Joined: 30 Mar 2005
Posts: 597

PostPosted: Wed Apr 27, 2005 2:16 am    Post subject: Reply with quote

or, to be more precie, they re-appear when the page loads for the first time, or you use either refresh button. The page refreshing itself does nothing to the buttons
Back to top
View user's profile Send private message
Spazz
S T E E L


Joined: 24 Mar 2005
Posts: 1265
Location: Chucktown, SC

PostPosted: Wed Apr 27, 2005 2:42 am    Post subject: Reply with quote

Blade Dancer wrote:
Uh...i think you may have picked the wrong type of forum for something like that.
Hello, newbie. Welcome to General Discussion.
_________________
Back to top
View user's profile Send private message
Bogo Sort
QUOTE, BUY, PRINT!


Joined: 26 Mar 2005
Posts: 430
Location: six blocks east of mars

PostPosted: Wed Apr 27, 2005 4:07 am    Post subject: Reply with quote

Blade Dancer wrote:
Uh...i think you may have picked the wrong type of forum for something like that. (the thread you picked is right. I'm just not sure that SoA will draw in the programmers.)


In IRC, we spend more time talking about coding than we do about SoA.

Well, I spend more time talking about coding than anyone spends talking about SoA.
Back to top
View user's profile Send private message
Treppenwitz



Joined: 24 Mar 2005
Posts: 499

PostPosted: Wed Apr 27, 2005 4:16 am    Post subject: Reply with quote

Bogo Sort wrote:
In IRC, we spend more time talking about coding than we do about SoA.


We rarely ever talk about SoA anymore. There is nothing left to talk about.
Back to top
View user's profile Send private message AIM Address
Display posts from previous:   
Post new topic   Reply to topic    Skies of Arcadia World Forum Index -> General Discussion All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group