Javascript Popup DIV

Trying to use onMouseover to make a div popup

Page 1 of 1

5 Replies - 4032 Views - Last Post: 30 July 2009 - 10:27 AM

#1 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Javascript Popup DIV

Post icon  Posted 29 July 2009 - 11:50 AM

Hey there guys, I've been trying for the past day to make a popup div box using the onmouseover and no ones explanations or tuts work =/
What I'm trying to do is have it to where I can make a div and when someone puts their mouse over a link or selected object a small box appears and gives the description of the links contents. I can deal with teh design aspect of making it look pretty but I don't know enough Javascript to do this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}

else {document[whichMenu].visibility = whatState;}

}
function details(what){
myInfo={"google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"}
detailsBox.innerHTML=myInfo[what]
}
</script>
</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">
  <div class="summaryContent">

  </div>
</div>
			
		</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
		<ul>
			<li>
				<h2>Services</h2>
				<ul>
					<li><a onmouseover="details('google')" href="http://www.google.com" target="_blank" class="menulink">Google</a></li>
					<li><a href="#">Computer Repair</a></li>
					<li><a href="#">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
<div id="footer">
	<p>&copy;Intensity-Technologies &nbsp;&bull;&nbsp; Design by Cl0udnyn3 And Greeneyez.</p>

</div>
<!-- Zee Div for links -->
<div id="detailsBox"></div>
<!-- End of div links -->
</body>
</html>


[b]Thats the HTML and as you can see the javascript is up there too in the head section but that method just isn't working =/

If you need it
/*
Design by Cl0udnyn3 and Greeneyez(R.I.P)
*/


#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}

body {
	margin: 0;
	padding: 0;
	background: #000000 url(images/img01.jpg) repeat-x top center;
	font-size: 13px;
	color: #8C8C8C;
}

body, th, td, input, textarea, select, option {
	font-family: "Arial", "Arial", Arial, Arial, Arial;
}

h1, h2, h3 {
	font-weight: normal;
	color: #F8FBEC;
}

h1 {
	letter-spacing: -2px;
	font-size: 3em;
}

h2 {
	letter-spacing: -1px;
	font-size: 2em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	line-height: 200%;
}

blockquote {
	padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
	line-height: normal;
	font-style: italic;
}

a {
	color: #9BDB18;
}

a:hover {
	text-decoration: none;
	color: #E6B715;
}

#wrapper {
}
/* Header */

#header {
	width: 760px;
	height: 288px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat right top;
}

#header h1, #header p {
	margin: 0;
	color: #9CBC1E;
}

#header h1 {
	padding: 100px 0 0 70px;
}

#header p {
	padding-left: 73px;
	margin-top: -10px;
}
#header a {
	color: #E6B715;
}

/* Page */

#page {
	width: 760px;
	margin: 0 auto;
}

/* Content */

#content {
	float: right;
	width: 460px;
	margin: 0;
	padding-right:20px;
}

	.summaryBox {
	margin: 0 0 0.25em 0;
	padding: 0;
	border: 0px solid #999;
}

	.summaryContent {
	height: 580px;
	padding: 3px;
	background-color: #000000;
	overflow: auto;
	color: #91d016;
}


.post {
	padding: 0 0 20px 0;
}

.title {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: 2px solid #B7D24D;
}

.byline {
	margin: 0;
	color: #a9cd19;
}

.meta {
	text-align: left;
	color: #646464;
	padding: 10px 10px;
	height: 48px;
	background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
	padding-left: 20px;
}

.meta .comments {
	padding-left: 20px;
}

.meta a {
	color: #003300;
}

/* Sidebar Search */

#search {
	float: left;
	width: 249px;
}

#search ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#search li {
}

#search li ul {
	padding: 15px 15px;
}

#search li li {
	border-bottom: 1px dotted #000000;
	padding-left: 15px;
}

#search h2 {
	margin: 0;
	padding: 10px 0 0 40px;
	height: 40px;
	background: url(images/img04.gif) no-repeat left 60%;
}

#search a {
	text-decoration: none;
}

#search a: class { 
width: 30px 
height: 40px
}

#search a:hover {
}

/* Footer */

#footer {
	clear: both;
	width: 760px;
	height: 40px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(images/img05.gif) no-repeat left top;
	text-align: center;
	font-size: smaller;
	color: #52640A;
}

#footer a {
	color: #003300;
}



If anyone can help i'd really appreciate it thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Popup DIV

#2 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Re: Javascript Popup DIV

Posted 29 July 2009 - 12:08 PM

Sorry I thought I was in javascript section >_<
Was This Post Helpful? 0
  • +
  • -

#3 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Javascript Popup DIV

Posted 29 July 2009 - 08:56 PM

This might be what you're looking for.
function popDivOver(text, offsetX, offsetY) {
	var myX, myY;
	var popDiv = document.getElementById('moveOverPopUp');

	myX = mouseX + offsetX;
	myY = mouseY + offsetY;

	popDiv.innerHTML = text;
	popDiv.style.top = myY + "px";
	popDiv.style.left = myX + "px";
	popDiv.style.visibility = "visible";
}

function popDivOut() {
	document.getElementById('moveOverPopUp').style.visibility = "hidden";
}



It would be used something like this.
<span style="cursor: pointer;" onmouseover="popDivOver('Text goes here', -260, 5); return false;" onmouseout="popDivOut(); return false;">Text</span>



I hope this helps!

~Camo
Was This Post Helpful? 0
  • +
  • -

#4 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Re: Javascript Popup DIV

Posted 29 July 2009 - 10:16 PM

View PostCamoDeveloper, on 29 Jul, 2009 - 07:56 PM, said:

This might be what you're looking for.
function popDivOver(text, offsetX, offsetY) {
	var myX, myY;
	var popDiv = document.getElementById('moveOverPopUp');

	myX = mouseX + offsetX;
	myY = mouseY + offsetY;

	popDiv.innerHTML = text;
	popDiv.style.top = myY + "px";
	popDiv.style.left = myX + "px";
	popDiv.style.visibility = "visible";
}

function popDivOut() {
	document.getElementById('moveOverPopUp').style.visibility = "hidden";
}



It would be used something like this.
<span style="cursor: pointer;" onmouseover="popDivOver('Text goes here', -260, 5); return false;" onmouseout="popDivOut(); return false;">Text</span>



I hope this helps!

~Camo


Ok
This is exactly what I'm trying to do
http://www.technorea...rshowtext.html#

A sleeker way with a nicer looking box but I can fix that myself, right now, I have the exact! same code he does setup identically and its not working if you want to take a look at the site http://www.intensity...ologies.com/vb/

Maybe I'm just doing something wrong, but his works and it won't on my website =/

It sounds stupid but do I have to define the DIV properties inside of my style sheet since i'm calling on it? Or will it automatically call on the HTML defined div properties?
Thanks for the help, sorry I'm an uber noob when it comes to scripting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
	if (document.layers) document.layers[''+id+''].visibility = "show"
	else if (document.all) document.all[''+id+''].style.visibility = "visible"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"					}
else
 if (flagit=="0"){
	if (document.layers) document.layers[''+id+''].visibility = "hide"
	else if (document.all) document.all[''+id+''].style.visibility = "hidden"
	else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"							}
}
//-->

<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}</style>

</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">
  <div class="summaryContent">

  </div>
</div>
			
		</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
		<ul>
			<li>
				<h2>Services</h2>
				<ul>
					<li>Google</a></li>
					<li><a href="#" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">Link 1!</a></li>
					<li><a href="#">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
<div id="footer">
	<p>&copy;Intensity-Technologies &nbsp;&bull;&nbsp; Design by Cl0udnyn3 And Greeneyez.</p>

</div>
<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Padding is 4px. Modify this to suit yourself.</div>
</body>
</html>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#5 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Javascript Popup DIV

Posted 30 July 2009 - 06:00 AM

You commented out the Javascript. You need to put in the <script> tags.

<!--
<script language="javascript" type="text/javascript">
	function toggleDiv(id, flagit) {
		if (flagit == "1") {
			if (document.layers) document.layers[''+id+''].visibility = "show"
				else if (document.all) document.all[''+id+''].style.visibility = "visible"
				else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
		}
		else
		if (flagit == "0") {
				if (document.layers) document.layers[''+id+''].visibility = "hide"
				else if (document.all) document.all[''+id+''].style.visibility = "hidden"
				else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
		}
	}
</script>
//-->



~Camo

This post has been edited by CamoDeveloper: 30 July 2009 - 06:02 AM

Was This Post Helpful? 0
  • +
  • -

#6 cloudnyn3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Re: Javascript Popup DIV

Posted 30 July 2009 - 10:27 AM

View PostCamoDeveloper, on 30 Jul, 2009 - 05:00 AM, said:

You commented out the Javascript. You need to put in the <script> tags.

<!--
<script language="javascript" type="text/javascript">
	function toggleDiv(id, flagit) {
		if (flagit == "1") {
			if (document.layers) document.layers[''+id+''].visibility = "show"
				else if (document.all) document.all[''+id+''].style.visibility = "visible"
				else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
		}
		else
		if (flagit == "0") {
				if (document.layers) document.layers[''+id+''].visibility = "hide"
				else if (document.all) document.all[''+id+''].style.visibility = "hidden"
				else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
		}
	}
</script>
//-->



~Camo


Ok thanks for the help but I figured out the problem and its really stupid but,
Since Divs are sections of HTML like separators with individual manipulative properties you need to include ALL of the div information inside of that one div. Since it was already being declared inside of a div the browser was only looking inside of #search and no where else >_<

SOOOO DUMB

anyway, thanks for the help I love the forum.
I will probably be back -_-'
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1