popup menu

looking for javascript,css code for left menu mouseover flyout popup like in http://www.yahoo.com
the popup should be always visible above the bottom of the window.
yingwhoAsked:
Who is Participating?
 
siddagrlCommented:
now the pop is always visible above the bottom of the window. (i believe this should be final one :-))
popup-menu-v3.html
0
 
nergikCommented:
Hello,

i think you can easily get the same effect using jquery-ui, the tabbed interface and the mouse over property, see an example here:

  http://jqueryui.com/demos/tabs/#mouseover

with some CSS little changes you can have the same tabs in vertical instead of horizontal
0
 
yingwhoAuthor Commented:
ner, the key pt is > the popup should be always visible above the bottom of the window.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
meCommented:
Dont know what your exact style is (try this), you can add the ability to have the sub-menus expand:

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
0
 
yingwhoAuthor Commented:
n0h

i already gave the example url in my question. ur answer is not even close to what i want.
0
 
nergikCommented:
yingwho, what i was showing you is the base tech, if you want to make it always visible in the same position you only need to add one CSS line to the div wrapper of the tab content, that line is: position:fixed
0
 
siddagrlCommented:
0
 
yingwhoAuthor Commented:
hi guys

here i show my code on what i am looking for. i am close, but it has few issues. pl correct it.
1. the popup needs to be always visible like www.yahoo.com left menu
2. it needs to be touching the left menu item highlighted.
3. at a time only one menu item needs to be highlighted depending on the cursor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function curon() {
        document.getElementById('box').style.display = 'block';
}
function curoff() {
        document.getElementById('box').style.display = 'none';
}
</script>
<style>
body {
text-align:center;
margin: auto 200px;

}

.tabview {
        float:left;
        width:150px;
}
.tabview ul
{
        margin: 5px 0 5px 5px;
        padding: 0;
        list-style-type: none;
        list-style-image: none;
        border:1px solid gray;
        width:100%;
}
.tabview ul li
{
        line-height: 14px;
        margin: 5px 0 5px 10px;
        padding: 0;
        font: 12px arial;
}
.tabOver 
{
        border:1px solid gray;
        color: blue;
        padding:5px;
}
.tabNone
{
        border:none;
        color: black;
}
.box {
        display:none;
        border:1px solid gray;
        float:left;
        margin:0 0 0 0;
        width:600px;
        background-color:#CCCC99;
        padding:10px;
}
</style>
</head>
<body>  
<div class="tabview">
        <ul>
                <li>fasdfasdf</li>
                <li onmouseover="curon();this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
						<div id="box" class="box" style="position:absolute; left:340px;">
							<div style="width:100%;height:500px;background:#FFFFCC;">
									<div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
							</div>
						</div>       
			  </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
				<li>fasdfasdf</li>
               <li onmouseover="curon();this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
						<div id="box" class="box" style="position:absolute; left:340px;">
							<div style="width:100%;height:500px;background:#FFFFCC;">
									<div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
							</div>
						</div>       
			  </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
				<li>fasdfasdf</li>
                <li onmouseover="curon();this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
						<div id="box" class="box" style="position:absolute; left:340px;">
							<div style="width:100%;height:500px;background:#FFFFCC;">
									<div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
							</div>
						</div>       
			  </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
				<li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li onmouseover="curon();this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
						<div id="box" class="box" style="position:absolute; left:340px;">
							<div style="width:100%;height:500px;background:#FFFFCC;">
									<div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
							</div>
						</div>       
			  </li>
			  <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
				<li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li onmouseover="curon();this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
						<div id="box" class="box" style="position:absolute; left:340px;">
							<div style="width:100%;height:500px;background:#FFFFCC;">
									<div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
							</div>
						</div>       
			  </li>
        </ul>
</div>
<div>

</div>
</body>
</html>

Open in new window

0
 
siddagrlCommented:
Attached is the updated code that should work as you mentioned.
[id(s) should be unique across the page]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var lastMenuItem;
var lastBoxIndex;

function curon(obj, index) {
        curoff();
        lastMenuItem = obj;
        lastBoxIndex = index;
        document.getElementById('box' + index).style.display = 'block';
}
function curoff() {
        if (lastBoxIndex)
        document.getElementById('box' + lastBoxIndex).style.display = 'none';
        if (lastMenuItem)
           lastMenuItem.className = 'tabNone';
}

</script>
<style>
body {
text-align:center;
margin: auto 200px;

}

.tabview {
        float:left;
        width:150px;
}
.tabview ul
{
        margin: 5px 0 5px 5px;
        padding: 0;
        list-style-type: none;
        list-style-image: none;
        border:1px solid gray;
        width:100%;
}
.tabview ul li
{
        line-height: 14px;
        margin: 5px 0 5px 10px;
        padding: 0;
        font: 12px arial;
}
.tabOver 
{
        border:1px solid gray;
        color: blue;
        padding:5px;
}
.tabNone
{
        border:none;
        color: black;
}
.box {
        display:none;
        border:1px solid gray;
        float:left;
        margin:0 0 0 0;
        width:600px;
        background-color:#CCCC99;
        padding:10px;
}
</style>
</head>
<body>  
<div class="tabview">
        <ul>
                <li>fasdfasdf</li>
                <li onmouseover="curon(this, 1);this.className='tabOver';" style="position;relative;">Next  
                                                <div id="box1" class="box" style="position:absolute; left:356px;">
                                                        <div style="width:100%;height:500px;background:#FFFFCC;">
                                                                        <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
                                                                        <div>hello1</div>
                                                        </div>
                                                </div>       
                          </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                                <li>fasdfasdf</li>
               <li onmouseover="curon(this, 2);this.className='tabOver';" style="position;relative;">Next  
                                                <div id="box2" class="box" style="position:absolute; left:356px;">
                                                        <div style="width:100%;height:500px;background:#FFFFCC;">
                                                                        <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
                                                                        <div>hello2</div>
                                                        </div>
                                                </div>       
                          </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                                <li>fasdfasdf</li>
                <li onmouseover="curon(this, 3);this.className='tabOver';" style="position;relative;">Next  
                                                <div id="box3" class="box" style="position:absolute; left:356px;">
                                                        <div style="width:100%;height:500px;background:#FFFFCC;">
                                                                        <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
                                                                        <div>hello3</div>
                                                        </div>
                                                </div>       
                          </li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li onmouseover="curon(this, 4);this.className='tabOver';" style="position;relative;">Next  
                                                <div id="box4" class="box" style="position:absolute; left:356px;">
                                                        <div style="width:100%;height:500px;background:#FFFFCC;">
                                                                        <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
                                                                        <div>hello4</div>
                                                        </div>
                                                </div>       
                          </li>
                          <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li>fasdfasdf</li>
                <li onmouseover="curon(this, 5);this.className='tabOver';" style="position;relative;">Next  
                                                <div id="box5" class="box" style="position:absolute; left:356px;">
                                                        <div style="width:100%;height:500px;background:#FFFFCC;">
                                                                        <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
                                                                        <div>hello5</div>
                                                        </div>
                                                </div>       
                          </li>
        </ul>
</div>
<div>

</div>
</body>
</html>

Open in new window

0
 
yingwhoAuthor Commented:
hi sid

thanks.

u are close, pl look at the few issues.

1. when u are on the bottom most next link, the popup goes below the browser window, not showing all its contents.
   the whole window all the time should be visibile.
2. when u mouseout of the next link the popup should close.
0
 
siddagrlCommented:
hi yingwho,

for the first point you need to define top for the box.

for second point I intentionally removed the the functionality to close the popup on mouseout to implement the behaviour of yahoo.com (it also does not close the popup on mouseout), otherwise giving 'X' on the popup does not make sense
Anyway i have now updated the code to close the popup on mouseout also.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var lastMenuItem;
var lastBoxIndex;

function curon(obj, index) {
        curoff();
        lastMenuItem = obj;
        lastBoxIndex = index;
        //alert(obj.outerText);
        document.getElementById('box' + index).style.display = 'block';
}
function curoff() {
        if (lastBoxIndex)
        document.getElementById('box' + lastBoxIndex).style.display = 'none';
        if (lastMenuItem)
           lastMenuItem.className = 'tabNone';
}

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)     
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul style="text-align:left">';

    // Start iterations for all objects in obj
    for(property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);

          /*
          var val = ': null';

          if (property.search('HTML') > 0)
             val = ': <b>Present</b>';
          else if (obj[property]!=null)
             val = ': <b>' + eval('obj.' + property) + '</b>';

          str += '<li>(' + type + ') ' + property + val + '</li>';
          */

          str += '<li>(' + type + ') ' + property + 
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';


          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Is there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}

</script>
<style>
body {
text-align:center;
margin: auto 200px;

}

.tabview {
        float:left;
        width:150px;
}
.tabview ul
{
        margin: 5px 0 5px 5px;
        padding: 0;
        list-style-type: none;
        list-style-image: none;
        border:1px solid gray;
        width:100%;
}
.tabview ul li
{
        line-height: 14px;
        margin: 5px 0 5px 10px;
        padding: 0;
        font: 12px arial;
}
.tabOver 
{
        border:1px solid gray;
        color: blue;
        padding:5px;
}
.tabNone
{
        border:none;
        color: black;
}
.box {
        display:none;
        border:1px solid gray;
        float:left;
        margin:0 0 0 0;
        width:600px;
        background-color:#CCCC99;
        padding:10px;
        position:absolute;
        top:50px;
        left:356px;
}
</style>
</head>
<body>  
<div class="tabview">
   <ul>
      <li>fasdfasdf</li>
      <li onmouseover="curon(this, 1);this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
         <div id="box1" class="box">
            <div style="width:100%;height:500px;background:#FFFFCC;">
               <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
               <div>hello1</div>
            </div>
         </div>       
      </li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li onmouseover="curon(this, 2);this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
         <div id="box2" class="box">
            <div style="width:100%;height:500px;background:#FFFFCC;">
               <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
               <div>hello2</div>
            </div>
         </div>       
      </li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li onmouseover="curon(this, 3);this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
         <div id="box3" class="box">
            <div style="width:100%;height:500px;background:#FFFFCC;">
               <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
               <div>hello3</div>
            </div>
         </div>       
      </li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li onmouseover="curon(this, 4);this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
         <div id="box4" class="box">
            <div style="width:100%;height:500px;background:#FFFFCC;">
               <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
               <div>hello4</div>
            </div>
         </div>       
      </li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li>fasdfasdf</li>
      <li onmouseover="curon(this, 5);this.className='tabOver';" onmouseout="curoff()" style="position;relative;">Next  
         <div id="box5" class="box">
            <div style="width:100%;height:500px;background:#FFFFCC;">
               <div style="float:right;width:20px" onclick="curoff();this.parentNode.parentNode.parentNode.className='tabNone';">X</div>
               <div>hello5</div>
            </div>
         </div>       
      </li>
   </ul>
</div>

<div> </div>
</body>
</html>

Open in new window

0
 
yingwhoAuthor Commented:
sid

still having problems. the left menu item and the popup need to touch each other, also i am not able to keep my mouse on the popup, it closes all the time.
0
 
siddagrlCommented:
ok, i have updated the code to calculate height of popup dynamically based on cursor's location.
Attached is the file.
(it still has minor problems though, e.g. when mouse hovering on X button, sometimes popup get closed, still trying :-))

i tried this on Chrome & Firefox and it is working fine. (to keep mouse on the popup, slide the mouse horizontally towards the popup without crossing the boundary of 'next' menu)

On IE6 though (i do not have greater versions) it is giving the same problem (as soon as i try to put the mouse on the popup, it closes, but this could be implemented through setTimeOut instead of closing instantly).
I am working on this to resolve this.

Let me know which browser and what version you are using...
popup-menu.html
0
 
yingwhoAuthor Commented:
nice. will wait.
0
 
siddagrlCommented:
Let me know which browser and what version you are using...

attached is the updated code which implements setTimeOut() to hide the popup. it still have minor problems of pop positioning.
(i am working on it...)

it now behaves as follows:
1. mouseover on menu will display the popup
2. mouseout on menu will start a timer to close the popup in .5 seconds.
3. if within .5 seconds, you takes the cursor on the popup, this timer gets cancelled, otherwise popup gets closed.
4. now mouseout on popup again will start a timer to close the popup in .5 seconds.

note that i have moved all the div(s) (used for popup) outside LI tag.
popup-menu-v2.html
0
 
yingwhoAuthor Commented:
sid, looks great, except for the last item the popup and left menu donot connect, but its ok. thanks
0
 
siddagrlCommented:
Hi yingwho,

I think you are referring the problem in attached image

I have updated the code to fixed the issue.

let me know in case of any issue.
popup-menu-v3-problem.JPG
popup-menu-v4.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.