|
JavaScript - Js Hover Box, Need It To Close On Second Rollover
I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box.
I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box. I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears. Any ideas? Here's my JS code: Code: <script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>
Here's my CSS code: Code: #box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}
#socialmedia-action-items-container {position: relative; float: right;}
#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}
#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}
a.box-item1 { /*flickr*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/flickr.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item1:hover {
color: #000;
background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
a.box-item1 span {font-size: 0.7em;}
a.box-item2 { /*facebook*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/facebook.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item2:hover {
color: #000;
background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
a.box-item2 span {font-size: 0.7em;}
a.box-item3 { /*twitter*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/twitter.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item3:hover {
color: #000;
background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
a.box-item3 span {font-size: 0.7em;}
Here's my HTML code: Code: <div id="socialmedia-action-items-container">
<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
<span class="twitter-first">Follow Us on</span><br />
<span class="twitter-last">Twitter</span>
</a>
<div id="box1">
<div id="box-wrapper">
<div id="box-main">
<a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
<a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
<a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a> </div>
</div>
</div>
</div>
Much appreciated! Similar TutorialsHello. I am using using some javascript code (I am just getting familiar with javascript). I have a page at http://sample.cnjwebsolutions.com/garb.php I am hoping that there is a way to have my divs slide up on "HOVER", rather than having to actually "click" on the rollover. Can it be done, or would I use a different approach? I would greatly appreciate any help. Sincerely, Buffmin. I have attached my code (Created in Dreamweaver as you will see). Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>garb</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/featuredcontentglider.css" />
<script type="text/javascript" src="Scripts/featuredcontentglider.js">
/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
<!--
#man_big_but_wrap{width:940px;overflow:auto; padding-left:20px; margin:auto;}
.manifold_lb{width:230px; height:180px; text-align:center; float:left; color:#D5272C;}
-->
</style></head>
<body onload="MM_preloadImages('images/manifolds/button_hdsv_dn2.png')">
<!--------------- Glide Navigation ------>
<!--<div id="wrappp"> -->
<div id="p-select" class="glidecontenttoggler">
<div id="man_big_but_wrap">
<div class="manifold_lb">
<h2>Div1 </h2>
<div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image3" width="220" height="110" border="0" id="Image3" /></a></div>
</div>
<div class="manifold_lb">
<h2>Div 2</h2>
<div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image4" width="220" height="110" border="0" id="Image4" /></a></div>
</div>
<div class="manifold_lb">
<h2>Div 3</h2>
<div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image5" width="220" height="110" border="0" id="Image5" /></a></div>
</div>
<div class="manifold_lb">
<h2>Last Div</h2>
<div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image6" width="220" height="110" border="0" id="Image6" /></a></div>
</div>
<!-- end of man_big_but_wrap -->
</div><!------------------ End of Glide Navigation ------->
<!------ Beginning of Glide Divs -------------->
<div id="canadaprovinces" class="glidecontentwrapper">
<!-------------------------------------------------------------------------->
<!---------------- Glide div 1-------------------->
<div class="glidecontent" align="justify"> <img src="images/wood/wood_stove_frame.jpg" style="float: right; padding: 35px"/>
<p></p>
<h4><em>Div 1</em><br/>
</h4>
<p></p>
<p style="line-height:1.7em;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
**** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!------------------Next Glide div ------------------>
<div class="glidecontent" align="justify"> <img src="images/wood/wood_insert.jpg" style="float: right; padding: 35px"/>
<p></p>
<h4><em>Div 2</em><br/>
</h4>
<p></p>
<p style="line-height:1.7em;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
**** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!------------------Next Glide div ------------------>
<div class="glidecontent" align="justify"> <img src="images/wood/wood_fire.jpg" style="float: right; padding: 35px"/>
<p></p>
<h4><em>Div 3</em><br/>
</h4>
<p></p>
<p style="line-height:1.7em;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
**** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!------------------Next Glide div ------------------>
<div class="glidecontent" align="justify"> <img src="images/wood/why_wood.jpg" style="float: right; padding: 35px"/>
<p></p>
<h4><em>Last Div</em><br/>
</h4>
<p></p>
<p style="line-height:1.7em;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
**** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div><!-- End of canadaprovinces div ------------>
<!------------------------------------------------------------------>
</body>
</html>
Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! Hi! I'm new to this, so please bare with me. My terminology may not be up to par. Here's the deal: - I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0: Code: on (release) {
getURL("example1.html", "_blank");
}
- Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver: Code: onClick="MM_goToURL('parent','example2.html')"
- On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using: Code: onClick="window.close()" - The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers: Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes." Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes. Opera = Button actually works for each page. Firefox & Chrome = Does not close the window at all. I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work. I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this. Any advice would be greatly appreciated. Thank you. - PW ok, so i got some help on here to modify some java that resides in a server-side program that is limited in scope of modification, but i was able to find the code that i need to modify to perform the behavior i need. the code below works great at making sure the user entry data is formatted correctly, but fails on 2 critical points: 1) it allows a blank entry (needs to give similar error message as when formatted incorrectly - see code) 2) it allows any formatting if a combination of alpha and numeric characters are used (needs to give error message if ANY alpha characters are used). THANKS so much in advance. Code: if( ! Form1.elements['EIF2'].disabled )
var n=Form1.elements['EIF2'].value.match(/\d/g).join('');
Form1.elements['EIF2'].value=
[n.substring(0,4),n.substring(4,9),n.substring(9)].join('-');
{
var re = /^\d{4}\-?\d{5}\-?\d{6}$/
if ( ! re.test( Form1.elements['EIF2'].value ) )
{
alert( 'Lawson # must be 15 digits\r(Example: 1234-12345-123456)' );
return false;
}
}
how to close a tab in html or javascript
I am having a heck of a time closing this popup window when i logoff the site. i open it by Code:
shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0 width=300,height=310");
when i click logoff the site i want the popup to close also here is the logoff php Code:
session_start();
//only for testing will remove this
if(!shoutwindow.closed)
{
echo "window open";
self.close();
//shoutwindow.close (); // also tried both these didnt work
// window.close();
}
else
{
echo "Window already closed";
}
mysql_close($link);
unset($_SESSION['Sess_UserId']);
// Unset all of the session variables.
session_unset();
// Finally, destroy the session.
session_destroy();
echo "<script> location.href='$MY_LINK_ROOT'</script>";
exit;
?>
what am i missing here lol ? thanks UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before) Code: the reason i use self.close is because i heard that it always closes the child not the parent. <a href="logoff.php" onClick="self.close()" return:true;>Log Off</a> the return true will make it execute the href as well right? this is quite embarrasing as i've done it before, but oh well... trying to close a window that is opened with a built-in dreamweaver function called MM_openBrWindow(). trying to use this code: PHP Code: if ($OutsideVisitors == "false") { echo '<center><strong><em><font size="4">THERE HAVE BEEN NO VISITORS TO THE WEBSITE TODAY... </font></em></strong><br><br><input name="closeme" type="button" id="closeme" value="Close Window" onclick="Window.Close()"; /></center>'; } i have also tried: PHP Code: onclick=javascript:Window.Close() it's just not behaving for me. any hints anyone? thanks a bunch! (the BrWindow() function in DW does open a popup window, so I think the js close() should work. if i remember right, a popup window is a prereq for that function to even work...) Have been trying to make a button to close a web page but every time i try to get it validated "strict" it fails. I have used the following code. Code: <form action=""> <input type="button" value="Close Window" onclick="window.close()"> </form> Would really appreciate any help. Thanks Within my Flex application I write stuff to the browser via a javascript document write. Is there a command to send to indicate I want to close that stream? When I send the command the rotating indicator keeps running indicating the browser is still expecting some stuff. If I click the stop button on the browser it stops spinning and the stuff I sent (an xml stream) becomes available. As this is an automated process, there is no person to hit the stop button. I have this script to close a div when I click outside of it. It works in Firefox but in IE7 i get an error: 'divid' is undefined. mydiv is the div I want to close and clickclick is the link that makes the div appear. Code: <script type="text/javascript">
function monitorClick(e){
var evt = (e)?e:event;
var theElem = (evt.srcElement)?evt.srcElement:evt.target;
while(theElem!=null){
if(theElem.id == "mydiv" || theElem.id == "clickclick" && document.getElementById(divid).style.display == 'none') {
document.getElementById('mydiv').style.display = 'block';
return true;
}
theElem = theElem.offsetParent;
}
document.getElementById('mydiv').style.display = 'none';
return true;
}
document.onclick = monitorClick;
</script>
What should I change to make it work in IE7? I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails. http://myspringslandscaping.com/portfolio.html Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time. Any help would be appreciated. Thanks! Marita Hi! I have a problem with the function close(); The window does open but then it immediately closes by itself. I didn't even get to see the content and of course I didn't even click on the button "close the window!" I want to be able to see the content of the page and when I click on the button, it will close the window. Thank you in advance for your help! Code: var window;
function newWindow(){
window=window.open("", "Results", "width=400, height=250");
window.document.write("<body><table>");
window.document.write("<h1 style='border-bottom-style: dotted; border-bottom-width: 1px;font: italic 16pt Times New Roman, sans-serif; color: navy;'>Survey's Results</h1>");
for(var i=0; i<tabVotes.length; i++){
window.document.writeln("<tr>");
window.document.writeln("<td style='text-align: center'>" + tabPeople[i] + "</td>");
window.document.writeln("<td style='text-align: center'>" + tabVotes[i] + " votes </td>");
window.document.writeln("</tr>");
}
window.document.writeln("</table>");
window.document.writeln("<input name='Close' type='button' value='Close the window' />");
window.document.getElementById('Close').onclick = window.close();
window.document.writeln("<br /><br />Thank you!");
window.document.writeln("</body>");
}
I am trying to execute a simple window.close function to be used in IE8 and IE9, and window.close() doesn't seem to be working. Are there any known fixes?
Hello all, i need a help that i have a submit form a iframe. Normally the code process is : Code: <a href="submit_news7c98.html?iframe=true&width=420&height=560" name="submit_news" class='ie6fix' id='submit_news' rel="prettyPhoto">Submit Query</a> Now iframe load and form process to form_process.php and then when i click submit the form process to form_process2.php now i will able to close the iframe after submit. I have tried simple javascript solution like body onload function timer function but they only work with if the open the submit_news7c98.html page direct it is not working when i am opening it as iframe from my site. so anybody can help me on this ? Been trying for three days to find a way to self close a FF window. The window is opened from a link on a board, and its only purpose is to run an onLoad script that launches a popup window, after which I need it to close itself. There are any number of ways to do this in IE, but nothing works in FF - the parent window remains open. Seems ridiculous that something so simple can't be done. Any help would be appreciated. Thx. Unable to close the popup. Have done the best I can Can someone please help me here. Would also like to be able to display without scrolling bars Here is the link http://www.videowebmastery.com/video...ters/index.htm Cheers I want to know how I can make a alert box appear (I know this) but with a countdown before the ok or x buttons can be clicked. Is this possible? If so, how. Thanks I've been trying to write a script that activates a confirm box when a browser window is closed. I want this to occur only when they try to close the window, not if they click on links on the page to navigate elsewhere. The confirm box then gives the option to continue closing as they intended or, if they click on ok (or cancel if it's easier), navigate to another page I specify. The script below works but it displays a confirm box when you close the window and click on links. Code: <script type="text/javascript">
function show_confirm()
{
var r=confirm("Wait! Would you like check out yahoo?");
if (r==true)
{
window.open("http://www.yahoo.com");
}
else
{
window.close();
}
}
window.onbeforeunload = show_confirm;
</script>
I understand you may be able to create a variable that you then attach to any links on the page you don't want to activate the confirm box. I don't know how to do this. Thank you. Trying to get this link to close window onclick, can I even do it? I'm just not seeing how, but I'm probably missing the obvious... Code: <img usemap="#map3" id="shapeimage_5" src="Notice2_files/shapeimage_5.png" style="border: none; height: 49px; left: -67px; position: absolute; top: -3px; width: 261px; z-index: 1; " alt="December 2011 notice" title="" /><map name="map3" id="map3"><area href="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" title="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" alt="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" coords="67, 3, 258, 46" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" /></map> |
|||||||