Results 1 to 3 of 3

Thread: Does not display correctly when put on page with other content

  1. #1
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down Does not display correctly when put on page with other content

    1) Script Title: I'm not sure, I can't seem to find it. The folder was simply called 'dropdown-menu', and the demo page was called 'Javascript Dropdown Menu Demo'

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lideinmenu.htmUnknown, see above

    3) Describe problem: My (customised) menu works fine on the demo page, but when it is put on my page (with context), the graphical effects break and the font and box sizes change.

    Demo page:
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JavaScript Dropdown Menu Demo</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <ul class="menu" id="menu">
    	<li><a href="#" class="menulink">Home</a>
    	</li>
    	<li><a href="#" class="menulink">Introduction</a>
    		<ul>
    			<li><a href="#">Commitee Members</a></li>
    			<li><a href="#">Club Representatives</a></li>
    			<li><a href="#">Join DYS</a></li>
    			<li><a href="#">FAQ</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Events</a>
    		<ul>
    			<li>
    				<a href="#">Events Officer</a>
    			</li>
    			<li>
    				<a href="#">Pre-event Registration</a>
    			</li>
    			<li>
    			<a href="#">Series Events</a>
    			</li>
    			<li>
    				<a href="#">Calender</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Results</a>
    		<ul>
    			<li><a href="#">2009 Results</a></li>
    			<li><a href="#">2008 Results</a></li>
    			<li><a href="#">2007 Results</a></li>
    			<li><a href="#">2006 Results</a></li>
    			<li><a href="#">2005 Results</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Training</a>
    		<ul>
    			<li>
    				<a href="#">Training Officer</a>
    			</li>
    			<li>
    				<a href="#">Event Registration</a>
    			</li>
    			<li>
    				<a href="#">2009 Training Events</a>
    			</li>
    			<li>
    				<a href="#">Training Information</a>
    			</li>
    			<li>
    				<a href="#">Training Resources</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">News</a>
    		<ul>
    			<li>
    				<a href="#">News Officer</a>
    			</li>
    			<li>
    				<a href="#">Latest News</a>
    			</li>
    			<li>
    				<a href="#">News Archive</a>
    			</li>
    		</ul>
    	</li>
    		<li>
    		<a href="#" class="menulink">Links</a>
    		<ul>
    			<li>
    				<a href="#" class="sub">Club Websites
    				<ul>
    					<li>
    						<a href="#">Burton</a>
    					</li>
    					<li>
    						<a href="#">Carsington</a>
    					</li>
    					<li>
    						<a href="#">Combs</a>
    					</li>
    					<li>
    						<a href="#">Errwood</a>
    					</li>
    					<li>
    						<a href="#">Glossop</a>
    					</li>
    					<li>
    						<a href="#">Ogston</a>
    					</li>
    					<li>
    						<a href="#">Staunton Harold</a>
    					</li>
    					<li>
    						<a href="#">Swarkestone</a>
    					</li>
    					<li>
    						<a href="#">Toddbrook</a>
    					</li>
    					<li>
    						<a href="#">Trent Valley</a>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="fingclub.html">Find Clubs</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Gallery</a>
    		<ul>
    			<li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Forums</a>
    	</li>
    
    </ul>
    <div id="text" style="float:left; clear:left; width:650px; margin-top:10px">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin. Fusce varius pellentesque ligula. Proin condimentum purus a nunc tempor pellentesque. Proin ac pede in leo tincidunt varius. Ut sed nibh. Praesent adipiscing, sapien sit amet sagittis convallis, dolor neque venenatis diam, at feugiat lacus quam vel pede. Mauris vel enim. Nunc nunc nibh, bibendum ornare, mattis ac, elementum at, mi. Mauris orci massa, vehicula ut, elementum nec, bibendum pretium, elit. 
    </div>
    <script type="text/javascript">
    	var menu=new menu.dd("menu");
    	menu.init("menu","menuhover");
    </script>
    </body>
    </html>
    JS file (unchanged):
    Code:
    var menu=function(){
    	var t=15,z=50,s=6,a;
    	function dd(n){this.n=n; this.h=[]; this.c=[]}
    	dd.prototype.init=function(p,c){
    		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
    		for(i;i<l;i++){
    			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
    			h.onmouseover=new Function(this.n+'.st('+i+',true)');
    			h.onmouseout=new Function(this.n+'.st('+i+')');
    		}
    	}
    	dd.prototype.st=function(x,f){
    		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
    		clearInterval(c.t); c.style.overflow='hidden';
    		if(f){
    			p.className+=' '+a;
    			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
    			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
    			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
    		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    	}
    	function sl(c,f){
    		var h=c.offsetHeight;
    		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
    			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
    			clearInterval(c.t); return
    		}
    		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
    		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
    		c.style.height=h+(d*f)+'px'
    	}
    	return{dd:dd}
    }();
    CSS file (unchanged):
    Code:
    body {margin:25px; font:11px Verdana,Arial; background:#eee}
    ul.menu {list-style:none; margin:0; padding:0}
    ul.menu * {margin:0; padding:0}
    ul.menu a {display:block; color:#000; text-decoration:none}
    ul.menu li {position:relative; float:left; margin-right:2px}
    ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
    ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:104px; margin:0}
    ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
    ul.menu ul li a:hover {background-color:#c5c5c5}
    ul.menu ul ul {left:90px; top:-1px}
    ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:90px}
    ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
    ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 92px 8px no-repeat}
    ul.menu .topline {border-top:1px solid #aaa}
    Rest in next post.

  2. #2
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In context (Images and text removed from page):

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>DERBYSHIRE YOUTH SAILING 2009</title>
    <meta name="Microsoft Border" content="none">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
    </head>
    
    <body bgcolor="#C0C0C0">
      <div align="center">
      
      <p align="center">
      
    	<table border="0" cellpadding="0" cellspacing="0" height="700" width="0">
    
    		<!-- MSTableType="layout" -->
    		<tr>
    			<td bgcolor="#FFFFFF" height="181">
    			<p align="center">
                Placeholder</td>
    			<td bgcolor="#000080" width="653" height="181">&nbsp;
                  <p align="center">Placeholder</p>
                  <p align="center">
    			&nbsp;</td>
    
    		</tr>
    		<tr>
    			<td height="50" colspan="2">
    			<div align="center">
    <ul class="menu" id="menu">
    	<li><a href="#" class="menulink">Home</a>
    	</li>
    	<li><a href="#" class="menulink">Introduction</a>
    		<ul>
    			<li><a href="#">Commitee Members</a></li>
    			<li><a href="#">Club Representatives</a></li>
    			<li><a href="#">Join DYS</a></li>
    			<li><a href="#">FAQ</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Events</a>
    		<ul>
    			<li>
    				<a href="#">Events Officer</a>
    			</li>
    			<li>
    				<a href="#">Pre-event Registration</a>
    			</li>
    			<li>
    			<a href="#">Series Events</a>
    			</li>
    			<li>
    				<a href="#">Calender</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Results</a>
    		<ul>
    			<li><a href="#">2009 Results</a></li>
    			<li><a href="#">2008 Results</a></li>
    			<li><a href="#">2007 Results</a></li>
    			<li><a href="#">2006 Results</a></li>
    			<li><a href="#">2005 Results</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Training</a>
    		<ul>
    			<li>
    				<a href="#">Training Officer</a>
    			</li>
    			<li>
    				<a href="#">Event Registration</a>
    			</li>
    			<li>
    				<a href="#">2009 Training Events</a>
    			</li>
    			<li>
    				<a href="#">Training Information</a>
    			</li>
    			<li>
    				<a href="#">Training Resources</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">News</a>
    		<ul>
    			<li>
    				<a href="#">News Officer</a>
    			</li>
    			<li>
    				<a href="#">Latest News</a>
    			</li>
    			<li>
    				<a href="#">News Archive</a>
    			</li>
    		</ul>
    	</li>
    		<li>
    		<a href="#" class="menulink">Links</a>
    		<ul>
    			<li>
    				<a href="#" class="sub">Club Websites
    				<ul>
    					<li>
    						<a href="#">Burton</a>
    					</li>
    					<li>
    						<a href="#">Carsington</a>
    					</li>
    					<li>
    						<a href="#">Combs</a>
    					</li>
    					<li>
    						<a href="#">Errwood</a>
    					</li>
    					<li>
    						<a href="#">Glossop</a>
    					</li>
    					<li>
    						<a href="#">Ogston</a>
    					</li>
    					<li>
    						<a href="#">Staunton Harold</a>
    					</li>
    					<li>
    						<a href="#">Swarkestone</a>
    					</li>
    					<li>
    						<a href="#">Toddbrook</a>
    					</li>
    					<li>
    						<a href="#">Trent Valley</a>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="findclubs.html">Find Clubs</a>
    			</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink">Gallery</a>
    		<ul>
    			<li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="menulink"><Forums</a>
    	</li>
    </ul></font>
    <script type="text/javascript">
    	var menu=new menu.dd("menu");
    	menu.init("menu","menuhover");
    </script>
    			</div>
    			</td>
    		</tr>
    
    		<tr>
    			<td width="278" align="center" valign="top">&nbsp;<p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                Placeholder</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
                  <p>
                &nbsp;</p>
    			<blockquote>
    					<p style="margin-top: 0; margin-bottom: 0">
    					<font color="#FFFFFF" face="Arial">------------------------<br>
                        &nbsp;</font></p>
    				</blockquote>
    
    			<p>&nbsp;</td>
    			<td bgcolor="#1A0C65" width="653" align="center" valign="top" rowspan="2">
    			<div class="Section1">
    				<p style="margin-top: 0; margin-bottom: 0">
    				&nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
    				&nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
                    <p style="margin-top: 0; margin-bottom: 0">Placeholder</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
                    &nbsp;</p>
    				<p style="margin-top: 0; margin-bottom: 0">
    
                    -------------------------------------------------------------------------------------------</p>
    				</div>
    			</td>
    		</tr>
    		<tr>
    			<td bgcolor="#FFFFFF" width="278" align="justify" height="10">
                &nbsp;</td>
    		</tr>
    	</table>
      </div>
    
    </body>
    
    </html>
    Can anyone help? Why does it not display correctly?

  3. #3
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone?

Bookmarks

Posting Permissions

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