JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Javascript + HTML DOM problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2006
Posts: 263
Reputation: Mushy-pea is an unknown quantity at this point 
Solved Threads: 1
Mushy-pea's Avatar
Mushy-pea Mushy-pea is offline Offline
Posting Whiz in Training

Javascript + HTML DOM problem

 
0
  #1
Oct 2nd, 2006
Hello everyone. I am trying to write a drop down menu Javascript and have run into a little problem. I need to change the (opacity=0) value inside this custom style:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <style id="menu_style" type="text/css"><!--.menu {z-index: 3; filter: alpha(opacity=0); position: absolute; left: 200px; top: 100px; width: 180px; height: 210px; background-color: #0000FF}

The obvious approach would seem to be:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. document.getElementById("menu_style").menu="....
  2.  

and fill out the contents of the .menu attribute with the changed opacity value. However, when I try this nothing gets changed and my menu remains invisible :mad: . I have read some tutorials on w3schools about this but they don't go into the specifics of changing custom styles with DOM. Any help with this little snag would be appriciated.

Steven.
The one question you should not ask when teaching a new language structure is "Do you understand?". Do you understand?
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Javascript + HTML DOM problem

 
0
  #2
Oct 3rd, 2006
I believe "CSS" filters are an IE-only, non-standard, non-compliant "thing".

Regardless, you cannot change the CSS declaration itself. CSS Stylesheets are not part of the DOM. You can, however, use JavaScript to change the style of an individual HTML element. Since styles cascade, the element will use the original class/id declaration except when specifically overriden by an inline style.

So, rather than trying to get the "CSS element", get a handle to the actual styled HTML element, and interact with it.
Last edited by tgreer; Oct 3rd, 2006 at 10:25 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 107
Reputation: madmital is an unknown quantity at this point 
Solved Threads: 3
madmital madmital is offline Offline
Junior Poster

Re: Javascript + HTML DOM problem

 
0
  #3
Oct 3rd, 2006
CSS "filters" are IE-only.

Use the "visibility" att.

Something along the lines of this should work:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <style>
  2. #dropdownmenu { position: absolute; top: 20px; left: 20px; visibility : hidden; }
  3. </style>
  4. <javascript>
  5.    function showDropDown()
  6.   {
  7.     document.getElementById("dropdownmenu").style.visibility = "visible";
  8.   }
  9. </javascript>
  10.  
  11. <a onMouseOver="showDropDown()">show me now</a>
  12.  
  13. <div id="dropdownmenu">
  14. item
  15. item
  16. item
  17. </div>
Web Developer
When something seems too good to be true...it usually is
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 263
Reputation: Mushy-pea is an unknown quantity at this point 
Solved Threads: 1
Mushy-pea's Avatar
Mushy-pea Mushy-pea is offline Offline
Posting Whiz in Training

Re: Javascript + HTML DOM problem

 
0
  #4
Oct 4th, 2006
Thanks for the help. Now it works! It's a good job somone mentioned that "filter: alpha" is IE only or I'd have left a somewhat large glitch on my site.

Steven.
The one question you should not ask when teaching a new language structure is "Do you understand?". Do you understand?
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl listbox math media microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player post problem progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC