[RESOLVED] How do I change a span’s style – display property?

@vparqueOct 07.2006

Hi, everyone. Sorry about this noobish question…

I am trying to create a text-based menu that when a user click on it, it will change to a none-link and different color.

The way I’m doing it is to make an additional text inside <span> and put it right next to the menu link. And when a user click it, the link will be hidden, and the <span> text will show.

Currently, my code doesn’t work. IE is giving me an error message showing that ” ‘style’ is null or not an object ” ?

my code looks like this:

[code] … <script language=”JavaScript” type=”text/JavaScript”> function changefocus(offlink, onlink) { offlink.style.display=’none’; onlink.style.display=’inline’; } </script> … <a href=”javascript:changefocus(this,document.lmeducation-focus);” style=”Display:inline;” id=”lmeducation”>Education</a><span class=”hilite” style=”Display:none;” id=”lmeducation-focus”>Education</span>

[/code]

Anyone knows what I did wrong? or is there a better way to do it?

I am trying to stay away from picture-base navigation…..

Thanks!

to post a comment

JavaScript

7 Comments(s) _↴

@gooncorpOct 07.2006 — #It seems to be the trigger in the link where you have javascript:changefocus(this,document.lmeducation-focus... It is the "this" and "document.lmeducation-focus" which is mucking things up. If you change these to getElementById it works.

[code=html]<a href="javascript:changefocus(document.getElementById('lmeducation'),document.getElementById('lmeducation-focus'));" style="display:inline;" id="lmeducation">Education</a>
 [/code]

@vparqueauthorOct 07.2006 — #Thanks! It took care of the bug, but now there is another bug. Sigh. ?

Right now, I have it written as:

(To simplify the debug process, I reduced it to one parameter for the function.)

<i>
 </i>&lt;a href="javascript:changefocus(document.getElementById("lmeducation"));" style="display:inline;" id="lmeducation"&gt;Education&lt;/a&gt;

and for the javascript part, I have it as:

<i>
 </i>function changefocus(objx) {
 objx.style.display = "none";
 }

Now I get a syntax error from IE. It says line 1, character 37.....

?

.... I don't even know what character is the 37th character. >.<

@vparqueauthorOct 08.2006 — #Okay. I'm trying to find a work-around. I am using z-index instead of display to do what I want to do.

In essence, I want to make a javascript function that when called, it will swap the z-index of the two elements that are passed in.

The problem is, IE keeps giving me syntax error at where the value assignment happens.... Can anyone help me with this?

My code looks like this:

<i>
 </i>&lt;%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type="text/css"&gt;
 &lt;!--
 #layera {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color: #99FF33;
 position: absolute;
 top: 0px;
 }
 
 #layerb {
 
 <i>	</i>font-family: Verdana, Arial, Helvetica, sans-serif;
 <i>	</i>background-color: #2299EE;
 <i>	</i>position: absolute;
 <i>	</i>top: 0px; 
 }
 --&gt;
 &lt;/style&gt;
 
 &lt;script language="JavaScript" type="text/JavaScript"&gt;
 function changez(objx, objy) {
 var tempnumber
 tempnumber = objx.style.z-index;
 objx.style.z-index = objy.style.z-index;
 objy.style.z-index = tempnumber;
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;center&gt;
 &lt;table width="600"&gt;
 &lt;tr&gt;&lt;td&gt;
 &lt;div id="layera" style="z-index: 1;"&gt;&lt;a href="javascript:changez(document.getElementById('layera'),document.getElementById('layerb'))"&gt;Layer A&lt;/a&gt;&lt;/div&gt;
 &lt;div id="layerb" style="z-index: 2;"&gt;&lt;a href="javascript:changez(document.getElementById('layerb'),document.getElementById('layera'))"&gt;Layer B&lt;/a&gt;&lt;/div&gt;
 &lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;/center&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

[B]objx.style.z-index = objy.style.z-index;[/B] is where I get the syntax error. More specifically, the "=" sign.

Thanks in advanced.

@vparqueauthorOct 08.2006 — #Um....

I tried to do:

<i>
 </i>objx.SetAttribute("style","z-index:2")

instead of

<i>
 </i>objx.style.z-index="2"

IE doesn't give me any error message any longer, but it doesn't look like this function is doing anything either. >.<

Oh, God. How can I change the z-index of an element to show/hide DiVs by putting them at the same location?

Has anyone attempt anything like this before? How can it be done?

@samanyoluOct 08.2006 — #

[code=php] 

 <script type="text/javascript">
 
 function renk(z) {
 var div = document.getElementById("div");
 
 div.style.cssText=z
 
 }
 
 </script>
 
 <style type="text/css">
 .div { position:absolute; width:100px; height:100px; left:50px; top:50px; background-color:yellow; color:blue;z-index:0}
 .div2 { position:absolute; width:100px; height:100px; left:100px; top:100px; background-color:lime; color:red; z-index:1;}
 </style>
 
 <body>
 
 <div id="div" class="div" onclick="renk('z-index:2')" >Click me</div>
 <div id="div2" class="div2" onclick="renk('z-index:1')" >Click me</div>
 [/code]

@KravvitzOct 08.2006 — #Remove the dash and capitalize the character that follows it.

objx.style.zIndex="2";

@vparqueauthorOct 08.2006 — #OMG! It works beautifully now!! It was the "-" and the letter cases... >.<

Thank you! Thank you!!! It is such a relief.

Also in #JavaScript _↴

search files in a directory Simple example needed How to control swf player in an iframe?

Success!

Help @vparque spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] How do I change a span’s style – display property?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] How do I change a span’s style – display property?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴