show / hide multiple layers with JS???

Results 1 to 8 of 8

Thread: show / hide multiple layers with JS???

  1. #1
    Join Date
    Dec 1969
    Posts
    201

    Default show / hide multiple layers with JS???

    Hi All <BR><BR>The code snippet below is being created by a PHP script. What I am stuck on is creating a JS function to show and hide layers in the page. The number of layers is dynamic and I don&#039;t really want to have to write the function x times to show and hide each layer. The layers are shown by using a mouseover/mouseout event. Is there a way to write the function only once and then pass the layer name to the function to make only the one layer show/hide at a time? I tried to pass the layer number when calling the function but the function coding to show/hide the layers is giving me trouble.<BR><BR>Thanks<BR><BR>Bastien <BR><BR><BR><BR><BR>echo "&#060;tr&#062;&#060;td&#062;&#060;font color=\"blue\"&#062;&#060;a target=\"main\"; OnMouseOver=\"javascript:showlayer($i); return false;\" onMouseOut=\"javascript:hidelayer($i);\"&#062;<BR> $POptName&#060;/font&#062;&#060;/a&#062;&#060;/td&#062;&#060;td align = center&#062;$$POptPrice&#060;/td&#062;<BR> &#060;td align = center&#062;&#060;input type = checkbox name = $POptNum&#062;<BR> &#060;input type=\"hidden\" value=\"$POpDesc\"&#062;&#060;/td&#062;&#060;/tr&#062;<BR> &#060;div name = layer$i id=layer$i style=\"position:absolute; left:300; top:200; width:160; height:200; background-color:yellow; visibility:hidden\"&#062;<BR> $POptDesc&#060;/div&#062;";<BR> $i++;<BR> }<BR><BR> echo "&#060;/table&#062;";<BR><BR> echo "&#060;tr&#062;&#060;td&#062;Quantity&#060;/td&#062;&#060;td&#062;<BR> &#060;p align =left&#062;&#060;input name = \"quant\" value = \"$quant\" type = \"text\" size = 3 maxsize = 3&#062;<BR> &#060;/td&#062;&#060;/tr&#062;&#060;tr&#062;&#060;td&#062;<BR> &#060;input type = submit value = \"Add Item to Cart\" onClick=\"javascript:validate();\"&#062;<BR> &#060;input type = reset value =\"Clear\"&#062;&#060;/form&#062;&#060;/td&#062;&#060;/tr&#062;&#060;/table&#062;";<BR><BR>echo "&#060;/td&#062;&#060;/tr&#062;&#060;/table&#062;<BR>&#060;/body&#062;<BR>&#060;script language=\"javascript\"&#062;<BR>&#060;!--<BR><BR>function validate()<BR>{<BR>if (document.forms[0].quant.value &#062; 0) {<BR>alert(\"Please specify quantity of $PName to purchase\");<BR>return false;<BR>}<BR>if (document.forms[0].bodyColor.value == \"\") {<BR>alert(\"Please choose a Body Color for the $PName\");<BR>return false;<BR>}<BR>if (document.forms[0].baseColor.value == \"\") {<BR>alert(\"Please choose a Base Color for the $PName\");<BR>return false;<BR>}<BR>}<BR>function showlayer(layerNo){<BR> if (document.layers)<BR> document.layers[\"layer+layerNo\"].visibility=&#039;show&#039;;<BR> else<BR> document.all[\"layer+layerNo\"].style.visibility=&#039;visible&#039;;<BR> }<BR><BR>function hidelayer(LayerNo){<BR> if (document.layers)<BR> document.layers[\"layer+layerNo\"].visibility=&#039;hide&#039;;<BR> else<BR> document.all[\"layer+layerNo\"].style.visibility=&#039;hidden&#039;;<BR> }<BR><BR>//--&#062;<BR>&#060;/script&#062;<BR><BR><BR><BR>&#060;/html&#062;";

  2. #2
    Join Date
    Dec 1969
    Posts
    96,118

    Default Looks like bogus code to me.

    Bring up a page generated with that in your browser.<BR><BR>Then click on the VIEW menu.<BR><BR>Then click on the SOURCE menu item.<BR><BR>Copy/paste the HTML that you see here, instead of the PHP code.<BR><BR>I&#039;ll bet the HTML is bogus, to begin with. But we&#039;ll see.<BR><BR>

  3. #3
    Join Date
    Dec 1969
    Posts
    201

    Default Looks like bogus code to me...nah...but here it is

    &#060;td width="25%"&#062;&#060;center&#062;&#060;b&#062;Ta ke It&#060;/b&#062;&#060;/td&#062;&#060;/tr&#062;&#060;tr&#062;&#060;td&#062;&#060;font color="blue"&#062;&#060;a target="main"; OnMouseOver="javascript:showlayer(1); return false;" onMouseOut="javascript:hidelayer(1);"&#062;<BR> Sterilizer&#060;/font&#062;&#060;/a&#062;&#060;/td&#062;&#060;td align = center&#062;$75.00&#060;/td&#062;<BR> &#060;td align = center&#062;&#060;input type = checkbox name = 2&#062;<BR> &#060;input type="hidden" value=""&#062;&#060;/td&#062;&#060;/tr&#062;<BR> &#060;div name = layer1 id=layer1 style="position:absolute; left:300; top:200; width:160; height:200; background-color:yellow; visibility:hidden"&#062;<BR> Pipe cleaner&#060;/div&#062;&#060;/table&#062;&#060;tr&#062;&#060;td&#062;Quantity&#0 60;/td&#062;&#060;td&#062;<BR> &#060;p align =left&#062;&#060;input name = "quant" value = "" type = "text" size = 3 maxsize = 3&#062;<BR> &#060;/td&#062;&#060;/tr&#062;&#060;tr&#062;&#060;td&#062;<BR> &#060;input type = submit value = "Add Item to Cart" onClick="javascript:validate();"&#062;<BR> &#060;input type = reset value ="Clear"&#062;&#060;/form&#062;&#060;/td&#062;&#060;/tr&#062;&#060;/table&#062;&#060;/td&#062;&#060;/tr&#062;&#060;/table&#062;<BR>&#060;/body&#062;<BR>&#060;script language="javascript"&#062;<BR>&#060;!--<BR>var aWindow;<BR>function validate()<BR>{<BR>if (document.forms[0].quant.value &#062; 0) {<BR>alert("Please specify quantity of Estuary to purchase");<BR>return false;<BR>}<BR>if (document.forms[0].bodyColor.value == "") {<BR>alert("Please choose a Body Color for the Estuary");<BR>return false;<BR>}<BR>if (document.forms[0].baseColor.value == "") {<BR>alert("Please choose a Base Color for the Estuary");<BR>return false;<BR>}<BR>}<BR>function showlayer(layerNo){<BR>if (document.layers)<BR>document.layers["layer+layerNo"].visibility=&#039;show&#039;;<BR>else<BR>document. all["layer+layerNo"].style.visibility=&#039;visible&#039;;<BR>}<BR><BR >function hidelayer(LayerNo){<BR>if (document.layers)<BR>document.layers["layer+layerNo"].visibility=&#039;hide&#039;;<BR>else<BR>document. all["layer+layerNo"].style.visibility=&#039;hidden&#039;;<BR>}<BR>

  4. #4
    Join Date
    Dec 1969
    Posts
    96,118

    Default Yes, it is VERY bogus...

    function hidelayer(LayerNo){ <BR>if (document.layers) <BR>document.layers["layer+layerNo"].visibility=&#039;hide&#039;; <BR>else <BR>document.all["layer+layerNo"].style.visibility=&#039;hidden&#039;; <BR>} <BR><BR><BR>Look at that!<BR><BR>You are trying to set the visibility for a field named "layer+layerNo". <BR><BR>No, you are *NOT* trying to do that for a field named "layer1".<BR><BR>I really meant what I wrote. That code is looking for:<BR><BR>&#060;DIV Name="layer+layerNo"&#062;<BR>or<BR>&#060;LAYER Name="layer+layerNo"&#062;<BR><BR>Exactly as I wrote it.<BR><BR>You need to change that to this:<BR><BR>function hidelayer(LayerNo){ <BR>&nbsp; &nbsp; if (document.layers) <BR>&nbsp; &nbsp; &nbsp; &nbsp; document.layers["layer"+layerNo].visibility=&#039;hide&#039;; <BR>&nbsp; &nbsp; else <BR>&nbsp; &nbsp; &nbsp; &nbsp; document.all["layer"+layerNo].style.visibility=&#039;hidden&#039;; <BR>} <BR><BR>But even *THAT* won&#039;t work!<BR><BR>JavaScript is CASE SENSITIVE! And the function parameter is<BR>&nbsp; &nbsp; LayerNo<BR>but the code inside the function uses<BR>&nbsp; &nbsp; layerNo<BR><BR>You *must* make the case match exactly!<BR><BR>function hidelayer(LayerNo){ <BR>&nbsp; &nbsp; if (document.layers) <BR>&nbsp; &nbsp; &nbsp; &nbsp; document.layers["layer"+LayerNo].visibility=&#039;hide&#039;; <BR>&nbsp; &nbsp; else <BR>&nbsp; &nbsp; &nbsp; &nbsp; document.all["layer"+LayerNo].style.visibility=&#039;hidden&#039;; <BR>} <BR><BR>I don&#039;t know if those are the only problems on the page, but with that much wrong I would start looking very carefully at all my other JavaScript usages.<BR><BR>


  5. #5
    Join Date
    Dec 1969
    Posts
    96,118

    Default While we are at it...

    Instead of just checking for blank/non-blank values for quant, shouldn&#039;t you check for a valid number?<BR><BR>And you don&#039;t have any &#060;FORM&#062; or &#060;/FORM&#062; tag so:<BR>(1) The page won&#039;t even display in Netscape browsers.<BR>(2) The data can&#039;t be submitted from MSIE browsers.<BR><BR>And I don&#039;t see any fields named bodyColor or baseColor in there. <BR><BR>And you have this field:<BR>&#060;input type="hidden" value=""&#062;<BR><BR>With no name, what possible use is it???<BR><BR>And you seem to have an extra &#060;/table&#062; tag in there, but I&#039;ll assume you are only showing me part of the HTML, so maybe it&#039;s okay. Still, it does seem to be in a strange location (after the &#060;/div&#062;).<BR><BR>Enough...<BR><BR>Have fun with this one!<BR><BR>May I *please* make a suggestion? <BR><BR>Get the page up and working in ordinary HTML--no ASP involved--and *then* go add the ASP coding! It&#039;s tons easier to develop this way than to try to debug both ends at the same time.<BR><BR><BR>

  6. #6
    Join Date
    Dec 1969
    Posts
    96,118

    Default Sorry...

    Get the page up and working in ordinary HTML--no *PHP* involved--and *then* ....<BR><BR>But ASP or PHP, the principal is the same.<BR><BR>[And how come you are posting PHP in a JScript forum. Oh, never mind, I know. Because we violate our own rules about this being a JScript forum and discuss client-side JavaScript all the time, so why shouldn&#039;t you.]<BR><BR>

  7. #7
    Join Date
    Dec 1969
    Posts
    201

    Default Thanks

    Actually the entire page excepting the jscript which was added last works just fine...I was just showing the snippets of code where the function was called and the function itself. What I usually do is create the page in html through some ide and then add the PHP/ASP or whatever...code the html as a function and then use the scripts to call that function...just a little rusty with the jscript....<BR><BR>again thanks<BR><BR>Bastien

  8. #8
    Join Date
    Dec 1969
    Posts
    96,118

    Default Ahhh!! Apologies...

    I admit I underestimated you. Mea culpa.<BR><BR>Well, I hope you get it working then! What I saw looked interesting.<BR><BR>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •