Suckerfish repositioning 2nd and 3rd level flyouts to stay above screen bottom

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

23-Sep-09 17:58
Hi

I have a flyout menu (not actually Suckerfish but very similar). It has a javascript to reposition a 2nd or 3rd level flyout so it can never go below the bottom of the screen, but it only works in FF. Stu Nicholls (the css menu guy) is of the opinion that the script I am using is over-complex and that a solution for all browsers would be possible. The script I am using works in FF for my own menu, Stu Nicholls, and Suckerfish:

http://www.internetevangelismday.com/testmenu.php
http://www.internetevangelismday.com/testmenustunicholls.html
http://www.internetevangelismday.com/testmenusuckerfish.html

I'm just wondering if anyone knows of such a script? I would have thought it would be something that many menu users would like to have available, when menus contain quite a few options.

Best wishes and many thanks

Tony
24-Sep-09 02:26
Hi Tony, and welcome to our forums. You're not far from my mum! (She lives in Buxton.)

That ADxMenu script looks scary...

Here's something I've cobbled together that works in FF, Safari, O9 and IE8 (I haven't dared test it in earlier IEs but it may work in IE7 at least!). It's based on the suckerfish vertical dropdown:

http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<title>Suckerfish Dropdowns - Vertical</title>
<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}

#nav li a:hover {
color : white;
background-color : black;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


function reposition( parentLI ) {
var childUL = parentLI.childNodes[2];
childUL.style.marginTop = "-1.35em";
var scrollPos = window.scrollY || document.body.parentNode.scrollTop;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
var bottomOfList = getCoord(childUL)['top']+childUL.offsetHeight - scrollPos;

if ( bottomOfList > viewportHeight ) {
childUL.style.marginTop = "-" + ( bottomOfList - viewportHeight + 50 ) + "px";
}
}

function getCoord(obj, offsetLeft, offsetTop){
var orig = obj;
var left = 0;
var top = 0;
if(offsetLeft) left = offsetLeft;
if(offsetTop) top = offsetTop;
if(obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
while (obj = obj.offsetParent) {
left += (obj.offsetLeft-obj.scrollLeft+obj.clientLeft);
top += (obj.offsetTop-obj.scrollTop+obj.clientTop);
}
}
return {left:left, top:top, width: orig.offsetWidth, height: orig.offsetHeight};
}


//--><!]]></script>

</head><body>

<h1>PERCIFORMES! (Vertical)</h1>
<p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>

</ul>
</li>

<li><a href="#" onmouseover="reposition(this.parentNode);">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>

</ul>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit
blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu,
pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue
tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper
sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut
mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In
malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra,
nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
Nulla accumsan turpis at erat.</p>
<p><a href="http://htmldog.com/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="http://htmldog.com/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net/">Dan Webb</a>.</p>
</div>

</body></html>


Note that I've only done the bottom menu ("Gobioidei") but it should be easy enough to copy to the other menus. You could probably move the onmouseover event declaration out of the markup to keep things cleaner.

The getCoord() function for determining the absolute vertical position of the top of an element comes from:

http://forums.asp.net/p/1127738/1779505.aspx

(there may well be an easier way to do it these days).

Does that help?

Cheers,
Matt

--
Matt Doyle, Elated
24-Sep-09 16:41
Hi Matt

You are absolutely brilliant! Thanks. That solution seems to work in everything I have tested it in so far, including IE6. Way to go.

Yes, we are not so far from Buxton, indeed I was brought up in New Mills and Chinley, so Buxton was almost home, so to say. We were up there a couple of months back and went to a few Festival things.

Thanks again, really appreciate this.

BTW, yes, the script for my menu is AdX, and is really complex. I'll probably try replacing it with suckerfish css in due course - that does seem to have become the most accepted menu (with lots of people offering their own improvements) while AdX is not getting further developed, as far as I can see.

Tony

[Edited by soonguy on 24-Sep-09 15:45]
25-Sep-09 02:34
Hi Tony,

Wow, it works in IE6 - amazing!

Glad it helped. Let us know if you need any help integrating it into your existing menu. Should be fairly straightforward though I think.

Yes the Suckerfish CSS approach is nice and clean - I like it.

Haven't made it as far as New Mills or Chinley but I have walked from Buxton to Whaley Bridge a couple of times. Glorious countryside around there.

Cheers,
Matt

--
Matt Doyle, Elated
25-Sep-09 22:55
Thanks again for this! I'm trying your exact Suckerfish code from above in IE7, and there is a tendency for second level flyouts (but not third level) to stick visible after they should have vanished.

Do you think there could be any way round this? It's perfect in everything else.

Buxton to Whaley Bridge is nice - I presume you went via Goyt reservoirs.

Getting to the top of Eccles Pike is easy, with a road most of the way up, and a good view. Chinley Churn even better, but more of a walk!

Thanks again


Tony
26-Sep-09 09:13
Hi Tony,

See: http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/

Basically, add this to your CSS:


#nav li:hover, #nav li.hover {
position: static;
}


...and you should be fine.

Ah yes, I remember the reservoir. That's where they sunk an entire village isn't it?

I'll mention those walks to my mum, in case she hasn't already done them!

Cheers,
Matt

--
Matt Doyle, Elated
26-Sep-09 15:25
Thanks so much, that's great. I find that now, the suckerfish menu works even in the earliest IE6 with your code:
www.internetevangelismday.com/testmenusuckerfish1.html

AND on multiple levels. I can also get it working in my own AdX menu, but having seen how much simpler the CSS for Suckerfish is, I will switch to that as soon as I can.

Just two questions:
- I presume you feel the link you referred to in previous post is the best source of the best incarnation of suckerfish?
- On a couple of pages I have two seperate menus within two separate divs. Is it possible to insert both div ids in the script line
var sfEls = document.getElementById("channel").getElementsByTagName("LI");
and presumably that won't upset the script if it can only find one id?

Since no one seems to have posted such a solution for repositioning, I'd like to put it on my site with of course full credit to you and Elated.com, if you would be happy for that?

BTW, it was the Ladybower dam that flooded a whole village. Goyt valley didn't touch, unless maybe a farm or two.

Mega thanks for all your help.

Tony
28-Sep-09 01:17
Hi Tony,

1. Not at all - I just found it by googling "suckerfish ie7"!

2. You'll need to modify the sfHover() function to process both lists. For example, if your list ids are 'nav' and 'nav2':


sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}

var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}


No problem with posting the solution if you like!

Cheers,
Matt

--
Matt Doyle, Elated
29-Sep-09 23:37
Thanks so much.

One more little question ... I have in my original menu a hover span info box. To achieve the expanding clamshell type info box, I have happily used two divs within the span within the link.

However, is IE, this disagrees with onMouseover="reposition(this.parentNode);" within the link, so you see a yellow javascript error on the status bar, and the repositioning does not happen:
http://www.internetevangelismday.com/testsuckerfishpopup.php

I've experimented with other alternatives, but the popup does need divs to work, at least with the css I have. Wonder if there is any way round this?

Mega thanks

Tony
30-Sep-09 02:15
hi Tony,

You can't put a div inside a span, since a div is a block-level element and a span is an inline element. So you'll need to rework your markup & CSS to use spans instead.

For example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>test menu repositioning</title>


<style type="text/css" media="screen">
.content1 {margin-left:300px;margin-right:10px;margin-top:4em;}
#channel {position:absolute;top:300px;}


#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}

#nav li:hover, #nav li.hover {
position: static;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}

#nav li a:hover {
color : white;
background-color : black;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}



#nav a span.balloonWrap {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;}
#nav a:hover span.balloonWrap {visibility:visible;z-index:9999;min-height:130px;} /* visibility works better than display here, esp for IE6 nojavascript*/

span.balloon {display: block; width:196px;min-height:80px;text-indent:15px;padding:10px 18px 40px 12px;margin:0px;color:#324572;font-weight:bold;font-size:90%;background:url(http://www.internetevangelismday.com/images/balloonbottom.png) no-repeat transparent bottom left;border:none;z-index:9999;}
span.whitebaln {display: block; min-height:70px;width:165px;padding:0px;background:url(http://www.soon.org.uk/arrowright.gif) no-repeat white 0px 0.2em;}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


function reposition( parentLI ) {
var childUL = parentLI.childNodes[2];
childUL.style.marginTop = "-1.35em";
var scrollPos = window.scrollY || document.body.parentNode.scrollTop;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
var bottomOfList = getCoord(childUL)['top']+childUL.offsetHeight - scrollPos;

if ( bottomOfList > viewportHeight ) {
childUL.style.marginTop = "-" + ( bottomOfList - viewportHeight + 50 ) + "px";
}
}

function getCoord(obj, offsetLeft, offsetTop){
var orig = obj;
var left = 0;
var top = 0;
if(offsetLeft) left = offsetLeft;
if(offsetTop) top = offsetTop;
if(obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
while (obj = obj.offsetParent) {
left += (obj.offsetLeft-obj.scrollLeft+obj.clientLeft);
top += (obj.offsetTop-obj.scrollTop+obj.clientTop);
}
}
return {left:left, top:top, width: orig.offsetWidth, height: orig.offsetHeight};
}


//--><!]]></script>

</head>
<body>
<div class="content1">

<div id="channel">
<ul id="nav">
<li><a onMouseover="reposition(this.parentNode);" href="#">2nd level here<span class="balloonWrap"><span class="balloon"><span class="whitebaln">More information about these pages</span></span></span></a>

<ul>
<li><a href="#">page1<span class="balloonWrap"><span class="balloon"><span class="whitebaln">More information about page 1</span></span></span></a></li>
<li><a href="#">page2<span class="balloonWrap"><span class="balloon"><span class="whitebaln">More information about page 2</span></span></span></a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>

<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a class="description" href="#">another page<span id="bal1" class="balloonWrap"><span class="balloon"><span class="whitebaln">More information about page this page</span></span></span></a></li><li>
</ul>

</li>

<li><a class="linkmenu" onMouseover="reposition(this.parentNode);" href="#">2nd level more pages</a>
<ul id="secondsubmenu" class="submenu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>

<li><a href="#">link</a></li>
<li><a href="#">link</a></li>

<li><a onMouseover="reposition(this.parentNode);" href="#">Details of page</a>

<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>

<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>

<li><a href="#">Terapon</a></li>
</ul>

</li>
</ul>
</div>
</div>
<img style="position:absolute;left:-400px;" src="http://www.internetevangelismday.com/images/balloontop.png"><img style="position:absolute;left:-400px;" src="http://www.internetevangelismday.com/images/balloonbottom.png"><img src="http://www.soon.org.uk/arrowright.gif" style="position:absolute;left:-400px;">
<img src="http://www.soon.org.uk/arrowlargeyellow.gif" style="position:absolute;left:-400px;">

</body>
</html>


Cheers,
Matt

--
Matt Doyle, Elated
30-Sep-09 13:36
Great, thanks! I can't however nest a span within a span because the
#nav a:hover span CSS to make the info popups visible then duplicate the popups because it sees two spans. However, I find I can nest a blockquote within the span and add the extra style I need, so that's great.

My final hopefully query on suckerfish is:

In my previous complex CSS flyout menu, using
#nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;
to position the info popup (and #nav a:hover span {visibility:visible; to make it visible, this gave the positioning I wanted for the info balloon: the foot of the popup being aligned with the menu item.

However, in Suckerfish (in everything except IE6, bless its heart), the popup positions itself in relation to the containing ul, and so remains in the same position, near the top of the menu, as you can see here:
http://www.internetevangelismday.com/testsuckerfishpopup1.php

If I change the CSS using WebDeveloperToolbar to position:relative; the popup DOES position correctly, but then each second-level menu link loses the background image balloontop.png, and the menu link height increases a huge amoung, because the image is I presume being forced invisibly into the menu link area (it certainly shows up under 'outline relative elements' on the toolbar.

Anyone have ideas on making 'position: relative' work in this situation?

Grateful thanks

Tony
30-Sep-09 21:44
PS found the solution - just add position:relative to the actual links themselves. Works fine

Best wishes

Tony
01-Oct-09 03:33
Hi Tony,

blockquote is also a block-level element so can't technically be placed inside a span. That code I posted works with spans and uses a balloonWrap CSS class to get round the issue you describe.

Anyway, glad you got everything working. Let us know if you need any more help.

All the best,
Matt

--
Matt Doyle, Elated
01-Oct-09 23:17
Thanks Matt

Sorry I didn't register that you actually had a different solution in the code there! I'll work on that one.

Mega thanks


Tony
02-Oct-09 01:29
No problem Tony - hope it all works OK!

Matt

--
Matt Doyle, Elated
02-Oct-09 13:06
Matt

Thanks so much, an excellent solution. Sorry that I had overlooked what you said when I had hurried to post what I thought was an answer, just to save anyone needing to comment - I think I mistook your posted solution for my earlier posting or something. The three spans work excellently.

I've also found that adding position:relative to the actual links makes the info balloon position itself nicely to the related link.

Your 'second mile' input is wonderful. Thanks so much. I now have a working suckerfish menu doing everything I want it to, with vastly less code than my old version

Tony
03-Oct-09 00:22
Glad the spans work Tony, and yes, position:relative on the links is the way to go. You need to enclose absolutely-positioned elements within relatively-positioned elements if you want the former to sit relative to the latter.

As always, feel free to ask if you need any more help!

Cheers,
Matt

--
Matt Doyle, Elated
08-Oct-09 16:39
Matt

Thanks again for your wonderful help on this. I just love the friendly spirit that permeates Elated.com and will be encouraging people to visit

I have what I hope is an almost final test version of that suckerfish menu, complete with the javascript repositioning of second and third levels:
http://www.internetevangelismday.com/testfinal.php

One tiny thing is that I put a shadow below each menu, which is a background image in its own li, but if you happen to hover it, it moves over to the left and causes any bit of flyout to flicker on and off. I guess I need an additional bit of CSS for li.endshadow hover or something, but not sure how to do this.

Thanks for your wisdom!

Tony
08-Oct-09 23:00
Another tiny niggle. In the latest Chrome, there is a strange persistence of the balloontop.png from the info popup. Go from 'second level here' and hover 'page 1' and the top outline of the balloon graphic intermittently stays on the screen after!


#nav a span.balloonWrap {
visibility: hidden;
position: absolute;top: -120px;left: 155px;
padding: 0px;
background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;



Don't know if here is any sort of css that might help that clear that?

Best wishes and thanks

Tony
09-Oct-09 01:04
Hi Tony, welcome back!

Your new 'li' elements are interacting with that IE7 Suckerfish fix:


#nav li:hover, #nav li.hover {
position: static;
}


To work round this, add the following at the end of your CSS:


#nav li.endshadow:hover {
position: relative;
}


The Chrome thing sounds like a Chrome rendering bug to me. If you hit Ctrl-A afterwards (Select All), or resize the browser window, then the image disappears.

Here's how to report a Chrome bug: http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95760

Cheers,
Matt

--
Matt Doyle, Elated
10-Oct-09 12:34
Thanks so much Matt. I have just about everything working now as I would like.

Happily, you may be interested to know that your javascript for repositioning also means that an htc file is no longer needed to make IE6 flyouts working - it fulfills both the repositioning and the flyout.

I am totally grateful!

Tony
12-Oct-09 00:41
Ah the horrors of .htc files - I'd almost forgotten about those!

Glad it all works OK. Good luck with the site!

Cheers,
Matt

--
Matt Doyle, Elated
11-Nov-09 15:35
Hi Matt

Sorry, just one small problem still. I've noted that Safari is doing the sort of behaviour I reported on 9 October - the span info popup which is embedded within the link text is sometimes remaining 'stuck' and visible when the flyout menu itself has closed.

I put in the css you suggested on 9 October, and the css is here:
http://www.internetevangelismday.com/scripts/menustyle.css

It covers both #menu and #channel as there are two separate menus the css covers.

Do you think there is anything else I can add to stop the info balloon created by #menu a span.balloonWrap and #channel a span.balloonWrap to always vanish?

mega thanks

Tony
14-Nov-09 00:21
Hi Tony,

Chrome and Safari are both based on the same rendering engine (WebKit) so I'm not surprised that both browsers exhibit the same problem.

Here's a workaround that seems fairly cross-browser: Rather than using 'visibility' to show/hide the balloons, use 'margin-left':


#channel a span.balloonWrap, #menu a span.balloonWrap {
margin-left: -1000px;
position: absolute; top: -120px; left: 165px;
padding: 0;
background: url(balloontop.png) no-repeat transparent top left;
width: 196px; min-height: 90px; line-height: 1.1em;
text-align: left;
z-index:9;
}

#channel a:hover span.balloonWrap, #menu a:hover span.balloonWrap
{
margin-left: 0;
z-index: 9; min-height: 130px;
}


Does that work for you?

Cheers,
Matt

--
Matt Doyle, Elated
14-Nov-09 02:39
BTW in IE8 your "Communication Channel" menu option is floating just above your "Internet Evangelism Day" page title, instead of at the bottom of the menu. No idea why! It's fine in other browsers (including IE6/7)...

Matt

--
Matt Doyle, Elated
14-Nov-09 11:04
Thanks Matt! I'll check the IE8 prob.

I tried your alternative css but it didn't make any difference

On watching again what is happening, I realise that the problem only occurs if you go from, say, flyout menu link A to submenu link1, then move mouse down the submenu, and exit from the submenu with the cursor direct onto the page text, or back onto the flyout parent menu on some link other then menu link A. If you go from menu link A to submenu link1, and then return to Menu link A, no problem. If you go from menu link A to submenu link 1, move down to submenu link 2, but then quickly move back to Menu link A diagonally, or via submenu link 1, no problem.

In other words, if you go out the same door you came in on, no problem. Exit a different way, and span balloon persists and doesn't know it should go visibility:invisible again. It's not javascript related, some problem when disabled.

I did a quick partial fix by making the invisible width of span.balloonWrap so wide that even if you move back to the original menu, the resultant new balloon is big enough to cover over, or cause to close, any persistent balloon. This does not fix the problem where you exit with the cursor onto the page itself, of course.

Since the menu looks a bit like this


<li><a class="x" href="linkA">text<span class="balloonWrap">description for balloon"></span></a>
<ul id="a" class="submenu">
<li><a href="link">submenulink1<span class="balloon Wrap">description of submenu link"></span></a></li>
<li><a href="link">submenulink2<span class="balloon Wrap">description of submenu link"></span></a></li>
</ul>
</li>
<li><a class="y" href="linkB>... etc
<ul id="b" class="submenu">
<li.... etc

I don't know if there is a css solution that would make a span.balloonWrap go invisible when you exit the submenu to the page, saying something like 'hover class x makes span balloonwrap invisible, and anyway that doesnt fix the exiting onto the page problem.

I'm guessing the better way forward would be javascript in each ul, which said effectively
<ul id="a" onmouseout makes all this ul id span balloonwraps invisible>

Do you think that would be a possible fix?

Mega thanks

Tony

Do you think that would be the better way forward
14-Nov-09 15:02
Hi Tony,

The CSS I posted above works perfectly for me in all browsers. Are you sure you cleared your browser cache?

Cheers,
Matt

--
Matt Doyle, Elated
14-Nov-09 15:21
Matt, my apologies. Maybe I wasn't forcing it to reload the css, though it does seem to have a habit of holding onto old css.

Worked perfectly in Safari windows and Chrome.

Thanks for being a second-miler. Again.

Tony
14-Nov-09 15:58
Great stuff. Yes some browsers hold onto cached files quite tenaciously!

Glad it all works. Let me know if you have any more questions.

Cheers,
Matt

--
Matt Doyle, Elated

 
New posts
Old posts

Follow Elated