keeping flyout visible

Question

niche1 0 Junior Poster in Training

13 Years Ago

How can I keep the flyout visible, that's triggered with the "By Neighborhood"
hover?

My script:

<!--Sunday 100815-->
<!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 name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<script type="text/javascript">
//<![CDATA[

function showmenu(elmnt)
{
outerdiv=document.getElementById(elmnt);
outerdiv.style.visibility="visible";

//now target ALL divs within it using function
innerdivchange(outerdiv,"visible");
}

function hidemenu(elmnt)
{
outerdiv=document.getElementById(elmnt);
outerdiv.style.visibility="hidden";

//now target ALL divs within it using function
innerdivchange(outerdiv,"hidden")
}


function innerdivchange(outerdiv,vis_state)
{
//now target ALL divs within it
innerdivs=outerdiv.getElementsByTagName("div");

for(i=0;i<innerdivs.length;i++)
{
innerdivs[i].style.visibility=vis_state;
}
}
//]]>
</script>
<style type="text/css">
body{font-family:arial;}
a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}
a.three:visited {color:blue;}
a.three:hover {color:red;}
span:hover {color:red;}

div.one {
color:blue;
font-size:175%;
min-width:275px;
float:left;
overflow:visible;
}
div.one4 {
color:blue;
font-size:175%;
min-width:375px;
float:left;
overflow:visible;
}
.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}
.links2 {margin: 40px 0 0 -10px;}
div.one2 {
visibility:hidden;
min-width:200px;
}
div.one3 {
visibility:hidden;
min-width:200px;
position:absolute;left:317px;top:32px;
}
</style>
</head>
<body>
<div style="clear:both;margin-bottom:20px;"></div>
<div onmouseover="showmenu('all')" onmouseout="hidemenu('all')">
<div style="margin-left:60px;">
<div class="one"><span>View All Bops</span></div>
<div class="one2" id="all">
<div class="one links"><a class="three" href="newest1st.php">Newest First</a></div>
<div class="one links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>
<div class="one links colr"><a class="three" href="newest1st.php">Most Money Off</a></div>
</div>
</div>
</div>
<div style="clear:both;margin-bottom:5px;"></div>
<div onmouseover="showmenu('location')" onmouseout="hidemenu('location')">
<div style="margin-left:60px;">
<div class="one4"><span>By Neighborhood</span></div>

</div>
</div>
<div style="clear:both;margin-bottom:20px;"></div>
<div onmouseover="showmenu('cat')" onmouseout="hidemenu('cat')">
<div style="margin-left:60px;">
<div class="one"><span>By Category</span></div>
<div class="one2" id="cat">
<div class="one links"><a class="three" href="newest1st.php">Newest First</a></div>
<div class="one links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>
<div class="one links colr"><a class="three" href="newest1st.php">Most Money Off</a></div>
</div>
</div>
</div>
<div class="one3" id="location">
<div class="one links2">
<a class="three" href="pl14.php">14th &amp; Pine Lake -- (1 hit)</a><br/>
<a class="three" href="r27.php">27th &amp; Randolph -- (1 hit)</a><br/>
<a class="three" href="a33.php">33rd &amp; A -- (1 hit)</a><br/>
<a class="three" href="a40.php">40th &amp; A -- (1 hit)</a><br/>
<a class="three" href="oc40.php">40th &amp; Old Cheney -- (1 hit)</a><br/>
<a class="three" href="oc50.php">56th &amp; Old Cheney -- (1 hit)</a><br/>
<a class="three" href="b_h.php">Bishop Heights -- (2 hits)</a><br/>
<a class="three" href="bh.php">Briarhurst -- (1 hit)</a><br/>
<a class="three" href="c_t.php">Clock Tower -- (1 hit)</a><br/>
<a class="three" href="c_v.php">College View -- (2 hits)</a><br/>
<a class="three" href="dt.php">Downtown -- (1 hit)</a><br/>
<a class="three" href="ew.php">Edgewood -- (1 hit)</a><br/>
<a class="three" href="hl.php">Havelock -- (1 hit)</a><br/>
<a class="three" href="i_v.php">Indian Village -- (1 hit)</a><br/>
<a class="three" href="pm.php">Piedmont -- (3 hits)</a>
</div>
<div class="one links2">
<a class="three" href="rb_v.php">Rathbone Village -- (1 hit)</a><br/>
<a class="three" href="sp.php">Southpointe -- (1 hit)</a><br/>
<a class="three" href="s_p_m.php">Sutter Place Mall -- (1 hit)</a><br/>
<a class="three" href="v_d_p.php">Van Dorn Plaza -- (1 hit)</a><br/>
<a class="three" href="wf.php">Westfield -- (1 hit)</a><br/>
<a class="three" href="wb.php">Williamsburg -- (1 hit)</a>
</div>
</div>
</body>
</html>

javascript

1 Contributor
1 Reply
89 Views
7 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by niche1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

niche1 0 Junior Poster in Training · Answer 1 · 2010-08-16T06:27:50+00:00

This script works:

<!--Sunday 100815-->



<!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 name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>savebop </title>
<script type="text/javascript">
//<![CDATA[

function showmenu(elmnt)
{
outerdiv=document.getElementById(elmnt);
outerdiv.style.visibility="visible";

//now target ALL divs within it using function
innerdivchange(outerdiv,"visible");
}

function hidemenu(elmnt)
{
outerdiv=document.getElementById(elmnt);
outerdiv.style.visibility="hidden";

//now target ALL divs within it using function
innerdivchange(outerdiv,"hidden")
}


function innerdivchange(outerdiv,vis_state)
{
//now target ALL divs within it
innerdivs=outerdiv.getElementsByTagName("div");

for(i=0;i<innerdivs.length;i++)
{
innerdivs[i].style.visibility=vis_state;
}
}
//]]>
</script>
<style type="text/css">
body{font-family:arial;}
a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}
a.three:visited {color:blue;}
a.three:hover {color:red;}
span:hover {color:red;}

div.one {
  color:blue;
  font-size:175%;
  min-width:275px;
  float:left;
  overflow:visible;
}
div.one4 {
  color:blue;
  font-size:175%;
  min-width:375px;
  float:left;
  overflow:visible;
}
.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}
.links2 {margin: 18px 0 0 -12px;}
div.one2 {
  visibility:hidden;
  min-width:200px;
}  
div.one3 {
 visibility:hidden;
  min-width:200px;
  position:absolute;left:317px;top:32px;
}  
</style>
</head>
<body>
<div style="clear:both;margin-bottom:20px;"></div>
<div onmouseover="showmenu('all')" onmouseout="hidemenu('all')">
  <div style="margin-left:60px;">
  <div class="one"><span>View All Bops</span></div>
  <div class="one2" id="all"> 
      <div class="one links"><a class="three" href="newest1st.php">Newest First</a></div>
      <div class="one links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>
      <div class="one links colr"><a class="three" href="newest1st.php">Most Money Off</a></div>
   </div> 
  </div>
</div>
<div style="clear:both;margin-bottom:5px;"></div>
<div onmouseover="showmenu('location')" onmouseout="hidemenu('location')" style="margin-left:60px;">
    <div class="one"><span>By Neighborhood</span></div>

<div style="margin-left:60px;position:relative;">    
    <div class="one2" id="location" style="position: absolute; left: 220px; top:-7px;">
        <div class="one links2">
        <a class="three" href="pl14.php">14th &amp; Pine Lake -- (1 hit)</a><br/>
        <a class="three" href="r27.php">27th &amp; Randolph -- (1 hit)</a><br/>
        <a class="three" href="a33.php">33rd &amp; A -- (1 hit)</a><br/>
        <a class="three" href="a40.php">40th &amp; A -- (1 hit)</a><br/>
        <a class="three" href="oc40.php">40th &amp; Old Cheney -- (1 hit)</a><br/>
        <a class="three" href="oc50.php">56th &amp; Old Cheney -- (1 hit)</a><br/>
        <a class="three" href="b_h.php">Bishop Heights -- (2 hits)</a><br/>
        <a class="three" href="bh.php">Briarhurst -- (1 hit)</a><br/>
        <a class="three" href="c_t.php">Clock Tower -- (1 hit)</a><br/>
        <a class="three" href="c_v.php">College View -- (2 hits)</a><br/>
        <a class="three" href="dt.php">Downtown -- (1 hit)</a><br/>
        <a class="three" href="ew.php">Edgewood -- (1 hit)</a><br/>
        <a class="three" href="hl.php">Havelock -- (1 hit)</a><br/>
        <a class="three" href="i_v.php">Indian Village -- (1 hit)</a><br/>
        <a class="three" href="pm.php">Piedmont -- (3 hits)</a>
        </div>
        <div class="one links2">
        <a class="three" href="rb_v.php">Rathbone Village -- (1 hit)</a><br/>
        <a class="three" href="sp.php">Southpointe -- (1 hit)</a><br/>
        <a class="three" href="s_p_m.php">Sutter Place Mall -- (1 hit)</a><br/>
        <a class="three" href="v_d_p.php">Van Dorn Plaza -- (1 hit)</a><br/>
        <a class="three" href="wf.php">Westfield -- (1 hit)</a><br/>
        <a class="three" href="wb.php">Williamsburg -- (1 hit)</a>
        </div>
    </div>
</div>
</div>
<div style="clear:both;margin-bottom:20px;"></div>
<div onmouseover="showmenu('cat')" onmouseout="hidemenu('cat')">
  <div style="margin-left:60px;">
  <div class="one"><span>By Category</span></div>
  <div class="one2" id="cat"> 
      <div class="one links"><a class="three" href="newest1st.php">Newest First</a></div>
      <div class="one links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>
      <div class="one links colr"><a class="three" href="newest1st.php">Most Money Off</a></div>      
   </div> 
  </div>
</div>

</body>
</html>