PDA

View Full Version : Submenu drops at wrong location on Scrolling



srinicoder
04-07-2010, 09:20 PM
1) Script Title: AnyLinkCSS drops at wrong location

2) Script URL (on DD):

3) Describe problem:

The submenu drops at the wrong location if there is a scrollbar with overflow:auto setting. If the html within the <div> does not cause an overflow, then it works file. But if it causes an overflow, it does not work correctly, and the submenu drops at the point where the anchor originally was, not where the anchor is after scrolling.




<html>
<head>
<title>AnyLink Css example</title>
<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />

<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
</head>
<body>

<div id="mydiv">
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
</div>
</body>
</html>Code:




// for the mydiv style
#mydiv {
height: 300px;
overflow: auto;
}



Rest of the code used is the anylinksmenu.css and anylinksmenu.js

ddadmin
04-08-2010, 12:34 AM
In what browsers does the issue occur in? Just copying/pasting your code above (with the included CSS) and using IE8 and FF3.6, I don't get any issue. One thing you might want to first try is to move the markup for each drop down menu themselves so they are outside the DIV with ID="mydiv":


<div id="mydiv">
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>

"

"

</div>

<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

srinicoder
04-12-2010, 10:39 PM
I am using IE8. I get the same error in Firefox too. You have to scroll down and then try to access the menu for on of the lower anchors which has been brought into view due to scrolling. I get the same error, even when the markup is outside the div.

Am posting all of my code here, so that you can reproduce it.




// for test.html
<html>
<head>
<title>AnyLink Css example</title>
<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />

<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
</head>
<body>

<div id="mydiv">
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>

</div>

<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
</body>
</html>

// for anylinkcssmenu.css
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: yellow;
}

#mydiv {
height: 300px;
overflow: auto;
}

/* ######### Default class for drop down menus ######### */

.anylinkcss{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightyellow;
width: 200px; /* default width for menu */
}

.anylinkcss ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkcss ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background: black;
color: white;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkcsscols{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #DEFFCA;
}

.anylinkcsscols .column{
width: 130px;
float: left;
}

.anylinkcsscols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkcsscols li{
padding-bottom: 3px;
}

/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}


// for anylinkcssmenu.js - use the default anylinkcssmenu.js

ddadmin
04-13-2010, 06:35 AM
I still don't get the issue you're experiencing with the code above, though I think I know why. The CSS you posted includes:


#mydiv {
height: 300px;
overflow: auto;
}


The overflow property should be set to "scroll" in order for one to see the issue- when I do that, I see what you're talking about.

Try the below attached modified .js file, which also takes into account a menu being inside a scrollable element and makes the necessary adjustments.

srinicoder
04-19-2010, 03:58 PM
Thanks for the solution. While this works slightly better, it still does not work properly. Yes, the menu drops at the correct location, but if you try it for the anchors above or below it, at times I just see a grey rectangle with no submenu options at all, even tho it is in the correct location.

ddadmin
04-20-2010, 12:07 AM
What happens if you disable the shadows inside the .js file?

srinicoder
05-10-2010, 06:15 AM
Another issue with this, whether the shadow is set to false or not, is even tho the menu shows up, the moment you try to access the menu it is gone, so one never can actually access the menu items for the anchor. If you know of the reason or a solution, please do provide it. Thanks.