asked on

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

greddin

ASKER

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.

Tom Beck

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.

greddin

ASKER

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.

greddin

ASKER

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

Tom Beck

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.

greddin

ASKER

Forgot to add the supporting Javascript library.
dropdowncontent.js

greddin

ASKER

I would like the div to float on top of all the other content. Specifically the content container.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

greddin

ASKER

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

Tom Beck

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.

greddin

ASKER

Thanks for the additional information. It was helpful.