JavaScript - If... Then... Else problem.

Forums

My Profile

Inbox

Address Book

My Subscription

My Forums

JavaScript - If... Then... Else problem.

Logged in as: Guest

arrSession:exec spGetSession 2,7,60347

	Active Users: There are 0 members and 0 guests.
	Users viewing this topic: none

Printable Version

All Forums >> [General Forum] >> Other Programming/Scripting Languages >> JavaScript - If... Then... Else problem.
Do you like VisualBasicScript.com? Link to us and help spread the word about our forum. Thanks!

Page: [1]

Message

<< Older Topic Newer Topic >>

JavaScript - If... Then... Else problem. - 5/18/2008 9:56:20 AM

TKS

Posts: 154
Score: 0
Joined: 5/16/2008
Status: offline

Hi, the following code is pretty simple and self explanitory, but I haven't quite yet figured out why the delay1() function isn't working... what do you think is the problem?

- TKS

Post #: 1

RE: JavaScript - If... Then... Else problem. - 5/18/2008 12:46:57 PM

TNO

Posts: 1067
Score: 10
Joined: 12/18/2004
From: thenewobjective.com
Status: offline

Whats not working exactly? I click the word and a loading image appears, then it changes to content. I click again and the display is toggled back and forth.

P.S. Would you like me to clean up your code? I'm a bit of a JS evangelist.

_____________________________

To iterate is human, to recurse divine. -- L. Peter Deutsch

(in reply to TKS)

Post #: 2

RE: JavaScript - If... Then... Else problem. - 5/18/2008 1:15:50 PM

TKS

Posts: 154
Score: 0
Joined: 5/16/2008
Status: offline

quote:

ORIGINAL: TNO

Whats not working exactly? I click the word and a loading image appears, then it changes to content. I click again and the display is toggled back and forth.

P.S. Would you like me to clean up your code? I'm a bit of a JS evangelist.

Hi TNO,

If you toggle the word really fast the loading image that changes to content will eventually start swapping it's order with the showing of the content... "the order changes". So instead of the loading image showing first... the content shows then the loading image. And that looks really stupid!

So, I put in a SetTimeOut function to prevent that from happening, but I don't think it's working... perhaps I haven't done the if... then... else properly...

But if you can clean that up, that would be greatly appreciated.

-TKS

(in reply to TNO)

Post #: 3

RE: JavaScript - If... Then... Else problem. - 5/18/2008 3:45:13 PM

TNO

Posts: 1067
Score: 10
Joined: 12/18/2004
From: thenewobjective.com
Status: offline

<!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>
		<title>LANF_V0.1</title>

<hta:application
		 id="objTest" 
		 applicationname="hta test"
		 scroll="yes"
		 singleinstance="yes" />

</head>
	<body>

<div id="target" style="cursor:pointer">
			Click Me!
		</div>

<img id="loading" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" />

<div id="content" style="display:none;">
			CONTENT
		</div>

</body>
</html>

< Message edited by TNO -- 5/18/2008 3:48:52 PM >

_____________________________

To iterate is human, to recurse divine. -- L. Peter Deutsch

(in reply to TKS)

Post #: 4

RE: JavaScript - If... Then... Else problem. - 5/18/2008 4:02:11 PM

TKS

Posts: 154
Score: 0
Joined: 5/16/2008
Status: offline

quote:

ORIGINAL: TNO

<!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> <title>LANF_V0.1</title> <hta:application id="objTest" applicationname="hta test" scroll="yes" singleinstance="yes" /> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <script type="text/javascript"> //shorthand function o(o){return document.getElementById(o)} document.onclick = function(e){ //crossbrowser event capturing e = e || window.event; //what element was clicked on? (crossbrowser) var tg = (e.target) ? e.target : e.srcElement; //remember these two elements for future use (faster lookup): var loading = o("loading"); var content = o("content"); //toggle the display function toggle(el){ (el.style.display === "none") ? el.style.display = "" : el.style.display = "none"; } //if the object I clicked on has an id of "target" if(tg.id === "target"){ //if the loading bar and the content are both hidden: if(loading.style.display === "none" && content.style.display === "none"){ //then show the loading bar toggle(loading); /* * wait 3 seconds, then hide the loading, and show the content: * no need to assign this to a variable since we will never cancel it * also no point in creating another simple function since we can just pass * it into timeout directly */ setTimeout(function(){ toggle(loading); toggle(content); },3000); } //If the content is displayed (assume the loading image isn't) else if(content.style.display === ""){ //hide the content toggle(content); } //otherwise don't do anything and let the content "load" } } </script> </head> <body>  <div id="target" style="cursor:pointer"> Click Me! </div>  <img id="loading" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" /> <div id="content" style="display:none;"> CONTENT </div> </body> </html>

Hi TNO,

Holy s**t, you cleaned my code up good!

Thanks.

-TKS

(in reply to TNO)

Post #: 5

RE: JavaScript - If... Then... Else problem. - 5/18/2008 10:59:53 PM

TKS

Posts: 154
Score: 0
Joined: 5/16/2008
Status: offline

quote:

ORIGINAL: TNO

<!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> <title>LANF_V0.1</title> <hta:application id="objTest" applicationname="hta test" scroll="yes" singleinstance="yes" /> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <script type="text/javascript"> //shorthand function o(o){return document.getElementById(o)} document.onclick = function(e){ //crossbrowser event capturing e = e || window.event; //what element was clicked on? (crossbrowser) var tg = (e.target) ? e.target : e.srcElement; //remember these two elements for future use (faster lookup): var loading = o("loading"); var content = o("content"); //toggle the display function toggle(el){ (el.style.display === "none") ? el.style.display = "" : el.style.display = "none"; } //if the object I clicked on has an id of "target" if(tg.id === "target"){ //if the loading bar and the content are both hidden: if(loading.style.display === "none" && content.style.display === "none"){ //then show the loading bar toggle(loading); /* * wait 3 seconds, then hide the loading, and show the content: * no need to assign this to a variable since we will never cancel it * also no point in creating another simple function since we can just pass * it into timeout directly */ setTimeout(function(){ toggle(loading); toggle(content); },3000); } //If the content is displayed (assume the loading image isn't) else if(content.style.display === ""){ //hide the content toggle(content); } //otherwise don't do anything and let the content "load" } } </script> </head> <body>  <div id="target" style="cursor:pointer"> Click Me! </div>  <img id="loading" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" /> <div id="content" style="display:none;"> CONTENT </div> </body> </html>

Hi TNO,

Ok, I've probed your code some bit, and I notice that when I replace the text (with id=target) it doesn't work.

Here's an example of what I've been doing:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<html>
  <head>
      <title>LANF_V0.1</title>

<hta:application
       id="objTest" 
       applicationname="hta test"
       scroll="yes"
       singleinstance="yes" />

</head>
  <body>
  
      <div id="target" style="width:500px;
                              border-width:0px;
                              padding-bottom:10px;
                              cursor:pointer;">
          <table border="0" cellpadding="0" cellspacing="0" width="500px">
              <tr>
                  <td style="height:1px;
                              width:500px;
                              background-color:rgb(177,189,214);">
                  </td>
              </tr>
              <tr>
                  <td style="background-color:rgb(247,247,247);">
                      <span style="bottom-padding:5px;
                                  font-weight:bold;
                                  font-size:8pt;
                                  color:rgb(59,89,152);
                                  padding-left:8px;
                                  font-family:Verdana,sans-serif;">
                              <img id="rbullet" src="RightPointingTriangle.bmp" />
                              <img id="dbullet" src='DownPointingTriangle.bmp' style="display:none;">
                                  Reset ChatBox 
                      <span style="color:rgb(247,247,247);">
                              --------------------------------------------------------------
                      </span>
                      </span>
                  </td>
              </tr>
          </table>
      </div>

<div id="content" style="display:none;">
          CONTENT
      </div>
      
      
      <div id="target2" style="cursor:pointer">
          <img id="rbullet2" src="RightPointingTriangle.bmp" /><img id="dbullet2" src="DownPointingTriangle.bmp" style="display:none" />Click Me!
      </div>

<div id="content2" style="display:none;">
          CONTENT
      </div>

</body>
</html>

-TKS

< Message edited by TKS -- 5/18/2008 11:01:16 PM >

(in reply to TNO)

Post #: 6

RE: JavaScript - If... Then... Else problem. - 5/19/2008 5:50:14 AM

TKS

Posts: 154
Score: 0
Joined: 5/16/2008
Status: offline

quote:

ORIGINAL: TKS

quote:

ORIGINAL: TNO

<!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> <title>LANF_V0.1</title> <hta:application id="objTest" applicationname="hta test" scroll="yes" singleinstance="yes" /> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <script type="text/javascript"> //shorthand function o(o){return document.getElementById(o)} document.onclick = function(e){ //crossbrowser event capturing e = e || window.event; //what element was clicked on? (crossbrowser) var tg = (e.target) ? e.target : e.srcElement; //remember these two elements for future use (faster lookup): var loading = o("loading"); var content = o("content"); //toggle the display function toggle(el){ (el.style.display === "none") ? el.style.display = "" : el.style.display = "none"; } //if the object I clicked on has an id of "target" if(tg.id === "target"){ //if the loading bar and the content are both hidden: if(loading.style.display === "none" && content.style.display === "none"){ //then show the loading bar toggle(loading); /* * wait 3 seconds, then hide the loading, and show the content: * no need to assign this to a variable since we will never cancel it * also no point in creating another simple function since we can just pass * it into timeout directly */ setTimeout(function(){ toggle(loading); toggle(content); },3000); } //If the content is displayed (assume the loading image isn't) else if(content.style.display === ""){ //hide the content toggle(content); } //otherwise don't do anything and let the content "load" } } </script> </head> <body>  <div id="target" style="cursor:pointer"> Click Me! </div>  <img id="loading" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" /> <div id="content" style="display:none;"> CONTENT </div> </body> </html>


Hi TNO,

Ok, I've probed your code some bit, and I notice that when I replace the text (with id=target) it doesn't work.

Here's an example of what I've been doing:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html> <html> <head>     <title>LANF_V0.1</title>     <hta:application     id="objTest"     applicationname="hta test"     scroll="yes"     singleinstance="yes" />     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />         <link rel="stylesheet" href="Style.css" type="text/css">         <script language="vbscript" src="scripts/list_avatars.vbs"></script>     <script language="vbscript" src="scripts/savetofile.vbs"></script>     <script language="vbscript" src="scripts/iferror.vbs"></script>     <script language="vbscript" src="scripts/PTandEA.vbs"></script>     <script language="vbscript" src="scripts/erasepost.vbs"></script>     <script language="vbscript" src="scripts/CCCondition.vbs"></script>     <script language="vbscript" src="scripts/ClearContents.vbs"></script>     <script language="vbscript" src="scripts/ClearContents.vbs"></script>     <script language="vbscript">         sub nametextareablur             obj1 = username.value             if obj1="" then             msgbox ("dick!... fill the ****ing feild!")             else             msgbox ("u made an entry nigger!")             end if         end sub     </script>         <script language="JavaScript">     function insertAtCursor( myValue) {         myField = document.getElementById("testID");         //IE support         if (document.selection) {         myField.focus();         sel = document.selection.createRange();         sel.text = myValue;         }         //MOZILLA/NETSCAPE support         else if (myField.selectionStart || myField.selectionStart == '0') {         var startPos = myField.selectionStart;         var endPos = myField.selectionEnd;         myField.value = myField.value.substring(0, startPos)         + myValue         + myField.value.substring(endPos, myField.value.length);         } else {         myField.value += myValue;         }     }     </script>         <script type="text/javascript">         //shorthand         function o(o){return document.getElementById(o)}         document.onclick = function(e){             //crossbrowser event capturing             e = e || window.event;             //what element was clicked on? (crossbrowser)             var tg = (e.target) ? e.target : e.srcElement;             var ug = (e.target2) ? e.target2 : e.srcElement;             //remember these two elements for future use (faster lookup):             var loading = o("loading");             var content = o("content");             var rbullet = o("rbullet");             var dbullet = o("dbullet");                         var loading2 = o("loading2");             var content2 = o("content2");             var rbullet2 = o("rbullet2");             var dbullet2 = o("dbullet2");             //toggle the display             function toggle(el){                 (el.style.display === "none") ? el.style.display = "" : el.style.display = "none";             }             //if the object I clicked on has an id of "target"             if(tg.id === "target"){                 //if the loading bar and the content are both hidden:                 if(loading.style.display === "none" && content.style.display === "none"){                     //then show the loading bar                     toggle(loading);                     toggle(rbullet);                     toggle(dbullet);                     /*                     * wait 3 seconds, then hide the loading, and show the content:                     * no need to assign this to a variable since we will never cancel it                     * also no point in creating another simple function since we can just pass                     * it into timeout directly                     */                     setTimeout(function(){                         toggle(loading);                         toggle(content);                     },1000);                 }                 //If the content is displayed (assume the loading image isn't)                 else if(content.style.display === ""){                     //hide the content                     toggle(content);                     toggle(rbullet);                     toggle(dbullet);                 }                 //otherwise don't do anything and let the content "load"             }             if(ug.id === "target2"){                 if(loading2.style.display === "none" && content2.style.display === "none"){                     toggle(loading2);                     toggle(rbullet2);                     toggle(dbullet2);                     setTimeout(function(){                         toggle(loading2);                         toggle(content2);                     },1000);                 }                 else if(content2.style.display === ""){                     toggle(content2);                     toggle(rbullet2);                     toggle(dbullet2);                 }             }         }             </script> </head> <body>     <div id="target" style="width:500px;                             border-width:0px;                             padding-bottom:10px;                             cursor:pointer;">         <table border="0" cellpadding="0" cellspacing="0" width="500px">             <tr>                 <td style="height:1px;                             width:500px;                             background-color:rgb(177,189,214);">                 </td>             </tr>             <tr>                 <td style="background-color:rgb(247,247,247);">                     <span style="bottom-padding:5px;                                 font-weight:bold;                                 font-size:8pt;                                 color:rgb(59,89,152);                                 padding-left:8px;                                 font-family:Verdana,sans-serif;">                             <img id="rbullet" src="RightPointingTriangle.bmp" />                             <img id="dbullet" src='DownPointingTriangle.bmp' style="display:none;">                                 Reset ChatBox                     <span style="color:rgb(247,247,247);">                             --------------------------------------------------------------                     </span>                     </span>                 </td>             </tr>         </table>     </div>     <img id="loading" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" />     <div id="content" style="display:none;">         CONTENT     </div>             <div id="target2" style="cursor:pointer">         <img id="rbullet2" src="RightPointingTriangle.bmp" /><img id="dbullet2" src="DownPointingTriangle.bmp" style="display:none" />Click Me!     </div>     <img id="loading2" style="display:none;" src="http://i287.photobucket.com/albums/ll137/tengokukagesensei/Loading2.gif" />     <div id="content2" style="display:none;">         CONTENT     </div> </body> </html>


-TKS