Div reveal issue

greddin
greddin used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

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.
Top Expert 2015

Commented:
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.

Author

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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Top Expert 2015

Commented:
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.

Author

Commented:
Forgot to add the supporting Javascript library.
dropdowncontent.js

Author

Commented:
I would like the div to float on top of all the other content.  Specifically the content container.
Top Expert 2015
Commented:
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".

Author

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
Top Expert 2015

Commented:
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.

Author

Commented:
Thanks for the additional information. It was helpful.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial