Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

Div reveal issue

If ever I needed Experts Exchange it's today :)  If you look at my code (See Attachment) a div appears when you mouseover the link named "Site Navigation". The problem is that it's appearing too far down. I want it to appear directly underneath the link itself. I can't figure out why there is so much space between the revealing div and the link that toggles it.

I obtained it from here: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

Please help me get the div to reveal right under the "Site Naviation" link. I also want it to be on top of whatever is underneath it.

Thank you
test4.zip
0
greddin
Asked:
greddin
  • 7
  • 4
1 Solution
 
greddinAuthor Commented:
Actually if I could specify the top left x & y coordinates for the div to appear that would be ok in this case as well since it's tied to the same spot.
0
 
Tom BeckCommented:
I've looked at this question twice now and I keep leaving it alone because of the zip file. Zip files can harbor viruses. Maybe other EE members are thinking the same thing.
0
 
greddinAuthor Commented:
I understand. Let me see if I can put everything into the code window.  

Thanks for letting me know why it hasn't been answered.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
greddinAuthor Commented:
Ok, here's my code consolidated into a single file for troubleshooting:

Why is the div appearing so far down beneath the "Site Navigation" link element?  I want it to appear right underneath the Site Navigation link.

More over, can how can I specify the top and left coordinates to position it exactly where I need? Maybe this would help eliminate the spacing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	background-color: #fff;
	color: #000;
}

a:link {
	color: #0066cc;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #0066cc;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none;
}

#kx-wrapper {
	/* border:1px solid red; */
}

#kx-header {
	background-color:#eeeeee;
	height:80px;
}

#kx-logo img {
	float:left;
	border:none;
}

#kx-navbar {
	background-color:#c0c0c0;
	height:30px;
	position:relative;
}

#kx-navbar-sitenav {
	float:left;
	margin:8px 20px 0 20px;
}

#kx-find-a-kj {
	float:right;
	padding:4px 20px 0 0;
}

#kx-content {
	float:left;
	display:block;
	width:100%;
}
#kx-content-container {
	padding:20px 20px 20px 20px;
}

</style>

<script type="text/javascript" src="dropdowncontent.js">
/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

</head>
<body>
<div id="kx-wrapper">
	<div id="kx-header">
		<div id="kx-logo"></div>
	</div>
	<div id="kx-navbar">
		<div id="kx-navbar-sitenav">
			<div><a href="javascript:void(0)" id="searchlink" rel="subcontent">Site Navigation</a></div>
			<DIV id="subcontent" style="position:absolute; visibility: hidden; top: 10px; left:10px; border: 4px solid orange; background-color: white; width: 300px; padding: 8px;">

				<p><b>Search Dynamic Drive:</b></p>
				<form method="get" action="http://search.freefind.com/find.html" id="topform">
				<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
				<input value="Search" class="topformbutton" type="submit" />
				</form>

				<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a> | <a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

			</DIV>
		</div>
	</div>
	<div id="kx-content">
		<div id="kx-content-container">
			<p>Content goes here</p>
		</div>
	</div>
</div>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")
dropdowncontent.init("sitenavlink", "left-top", 500, "mouseover")
</script>

</body>
</html>

Open in new window

0
 
Tom BeckCommented:
Your content div is tight up against the Site Navigation link container. No space between.

However, your div with id="kx-content-container" has 20px of padding all the way around so that pushes the content text away from the navigation link by 20px above and 20px on the left.

Inside that you have a <p> tag with font-size set to 9pt. <p> tags are for formatting paragraphs so they always add a margin top and bottom equivalent to the font size to add space between paragraphs. That in effect pushes the content text away from the navigation link for the space of 9pt text.
0
 
greddinAuthor Commented:
Forgot to add the supporting Javascript library.
dropdowncontent.js
0
 
greddinAuthor Commented:
I would like the div to float on top of all the other content.  Specifically the content container.
0
 
Tom BeckCommented:
Change your function call to:

dropdowncontent.init("searchlink", "left-top", 500, "mouseover");

And add margin: 40px 0 0 223px; to the inline css for div id="subcontent".
0
 
greddinAuthor Commented:
Thanks, that appears to be working.  How is the margin on that subcontent controlling the positioning of the div?  What's that margin relative to?  

Just trying to understand why this is fixing it. :)

Thanks
0
 
Tom BeckCommented:
The margin I suggested is not so much controlling the position of the div as it is counteracting the positioning imposed by the plugin. I noticed that the plugin was dynamically moving the div 223 pixels to the left, off the window edge so I added the same amount of margin to bring it back. I have no clue why the plugin is doing that. Maybe it assumes your trigger is somewhere in the middle of the page. I'd have to dig into the code and research.

I'm not a big fan of plugins. Never heard of this one but I will definitely not use it myself. Needs more options for positioning. Seems incomplete. Anyway, this kind of effect can be done more simply with css except for the side in part. It's no different than a css dropdown menu. The slide part can be easily accomplished with jquery.

Thanks for the points.
0
 
greddinAuthor Commented:
Thanks for the additional information. It was helpful.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now