dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Roll over HELP!

  1. #1
    Join Date
    Mar 2007
    Posts
    104

    resolved [RESOLVED] Roll over HELP!

    Hi all,

    I have this little javascript that it kind of like a traditional "Menu Tree" application.

    Basically i want to alter the code to expand upon rollover and then close back up upon rollout. Any ideas people? Javascript itsnt really my thing if i'm honest. I know a bit though.

    Thanks all

    Code:
    	<script language="javascript" type="text/javascript">
    		function Toggle(item) {
    		   obj=document.getElementById(item);
    		   visible=(obj.style.display!="none")
    		   key=document.getElementById("x" + item);
    		   if (visible) {
    			 obj.style.display="none";
    			 key.innerHTML="[+]";
    		   } else {
    			  obj.style.display="block";
    			  key.innerHTML="[-]";
    		   }
    		}
    	</script>
    	
        <B><A id=x1 href="javascript:Toggle('1')">[+]</A>&nbsp;<A href="javascript:Toggle('1')">I. Hotel “Metropol” Ohrid</A></B>
    		<BR>
    		  <DIV id=1 style="DISPLAY: none; MARGIN-LEFT: 2em">
    				<div id="Font">
    						The hotel has its own parking space for its guests for 100 cars.
    					</h1>
    				</div>
    			</DIV>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>rollover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="application/javascript">
    function showHide(parent) {
    var aDD=parent.getElementsByTagName('dd');
    for(var dd=0; dd<aDD.length; dd++) {
        aDD[dd].style.display=(aDD[dd].style.display=='none')? 'block' : 'none';
        }
    }
    
    window.onload=function() {
    var aDT=document.getElementsByTagName('dt');
    for(var i=0; i<aDT.length; i++) {
        aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
        showHide(aDT[i].parentNode);
        }
    };
    </script>
    
    <style type="text/css">
     
    </style>
    
    </head>
    <body>
    <dl>
    <dt>I. Hotel "Metropol" Ohrid</dt>
    <dd>The hotel has its own parking space for its guests for 100 cars.</dd>
    </dl>
    <dl>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2007
    Posts
    104
    I ****ing lvoe you.......

    Thanks buddy, Appreciated!

  4. #4
    Join Date
    Mar 2007
    Posts
    104

    Exclamation

    Hi again,

    Thanks for the help fang.

    Although this did fix my problem, which is cool. I now want to ask something else.

    Is it possible to have the rollove text appear on the same line as the static text?

    Basically what i am trying to do is have a table with 2 collums, i want the static text in the left colum and the rollover text to appear in the right collum.

    I tried just putting the tags in to the relevant colums but the script then didnt work.

    Thanks

    Dan

  5. #5
    Join Date
    Mar 2007
    Posts
    104
    bump

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <style type="text/css">
    dl {overflow:hidden;}
    dt {font-weight:bold;}
    dt, dd {float:left;} 
    </style>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Mar 2007
    Posts
    104
    Thanks again Fang,

    One last thing, well i hope its one last thing lol

    Any ideas why this works fine in Firefox but doesnt work in IE?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>rollover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="application/javascript">
    function showHide(parent) {
    var aDD=parent.getElementsByTagName('dd');
    for(var dd=0; dd<aDD.length; dd++) {
        aDD[dd].style.display=(aDD[dd].style.display=='none')? 'block' : 'none';
        }
    }
    
    window.onload=function() {
    var aDT=document.getElementsByTagName('dt');
    for(var i=0; i<aDT.length; i++) {
        aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
        showHide(aDT[i].parentNode);
        }
    };
    </script>
    
    <style type="text/css">
    dl 
    	{
    		overflow:hidden;
    		margin-left:0px;
    	}
    dt
    	{
    		font-weight:bold;
    		margin-left:0px;
    	}
    	
    dt, dd
    	{
    		float:left;
    		margin-left:0px;
    	} 
    </style>
    
    </head>
    <body>
    <dl>
    <dt><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#00FF99">Toshiba Test Rollover</td></tr></table></dt>
    <dd><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#CC0000">This is a test</td></tr></table></dd>
    </dl>
    <br>
    <br>
    <dl>
    <dt><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#00FF99">Toshiba Test Rollover</td></tr></table></dt>
    <dd><table height="50" align="left" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#CC0000">This is a test</td></tr></table></dd>
    </dl>
    </body>
    </html>

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use:
    Code:
    <script type="text/javascript">
    Although application is correct, IE does not recognize it.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Mar 2007
    Posts
    104
    Thanks buddy,

    Any suggestions to my other thread?

Thread Information

Users Browsing this Thread

There are currently 14 users browsing this thread. (0 members and 14 guests)

Posting Permissions

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



Recent Articles