Solved

Div reveal issue

Posted on 2014-02-25
11
254 Views
Last Modified: 2014-02-26
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
Comment
Question by:greddin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
11 Comments
 

Author Comment

by:greddin
ID: 39887281
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39887739
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
 

Author Comment

by:greddin
ID: 39887741
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:greddin
ID: 39887769
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39887793
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
 

Author Comment

by:greddin
ID: 39887799
Forgot to add the supporting Javascript library.
dropdowncontent.js
0
 

Author Comment

by:greddin
ID: 39887802
I would like the div to float on top of all the other content.  Specifically the content container.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39887830
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
 

Author Comment

by:greddin
ID: 39887849
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39888544
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
 

Author Comment

by:greddin
ID: 39888560
Thanks for the additional information. It was helpful.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress and Wufoo 1 38
Increase counter and attr inside a while loop 15 36
Slush on text 2 11
Web page design problem 3 14
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question