Layers/behaviors- Flashing/Flickering Dynamic Menu System

[Tom Eberle]

Team,

I and others have been battling a problem with layers/behaviors in FrontPage 2003 (search the discussion group for flickering and flashing) for implementing a dynamic menu system. Maybe it can’t be solved… However, I was excited to find a book by Colligan/Cheshire, “Using Microsoft FrontPage 2003â€, the other day that explained in detail how to construct the menu system I was after.

I followed the example in Chapter 25, Using Layers, to construct my dynamic menu system. I have been successful in constructing the menu system with layers & behaviors as described with all functioning fine. However, I have noticed the same distracting flashing/flickering occurring as I mouse over the interactive buttons on the submenu. I notice this in IE6.0 but not in NN7.1. I have isolated the source of the flickering to occur AFTER I have set the behaviors of each button in the submenu layer to change property of the submenu layer visible on mouseover. This step is outlined on page 511 (bottom) and is necessary to keep the submenu layer exposed as you mouse over each submenu button. There is also a behavior on the submenu layer itself to be hidden onmouseout. Perhaps the authors could comment on this question (also, see p.s. below).

Does anyone know of a fix for the flashing/flickering?

Tom

p.s. Colligan/Cheshire, you mention in chapter 25 (page 501) that the example which illustrates your dynamic submenu description can be found on the accompanying CD (layers.htm). I have searched the CD and have found no folder for chapter 25 or layers.htm file. Am I missing something?

 

[Jon Spivey]

Hi Tom,
I don't have the book so don't know the code you're reffering to - but I'm
guessing the flickering would be caused by applying onmouseout events
directly to a div/layer. This is a common technique for building menus but
it's bad practice for 2 reasons
1/ doesn't work in NN4
2/ when you apply onmouseout to a div it fires when you mouseout of anything
within the div, so for example if you had something like
<div onmouseout="someFunctionToHideThisMenu();"
onmouseover="someFunctionToShowThisMenu();">
<a href="page.htm">page 1</a>
<a href="page2.htm">page 2</a>
etc
</div>
When you mouseout of the links within the div the function will be called to
hide the div then a split second later you mouseover another link and the
function is called to show the menu - this causes the flickering. The menu
is repeatedly shown and hidden

Can you post up either the code you're using - or better still a url to a
page that exhibits this behaviour. There's a very easy fix but I'd need to
see exactly what you have so far

As a ps one could build a dropdown menu using onmouseout on a div but its
way beyond the scope of FP behaviours
1/ for cross browser support you'd need to attach the behaviours with script
not directly to the tag
2/ each time a mouse event fires you'd need to establish where the mouse
ends up - ie did it end up outside the div (in which case hide the menu) or
is it still within the menu (in which case ignore the event and do nothing)
3/ for cross browser support the sub menus would need to rest on top of the
trigger buttons

Jon
Microsoft MVP - FP

Team,

I and others have been battling a problem with layers/behaviors in

FrontPage 2003 (search the discussion group for flickering and flashing) for
implementing a dynamic menu system. Maybe it can't be solved. However, I was
excited to find a book by Colligan/Cheshire, "Using Microsoft FrontPage
2003", the other day that explained in detail how to construct the menu
system I was after.

I followed the example in Chapter 25, Using Layers, to construct my

dynamic menu system. I have been successful in constructing the menu system
with layers & behaviors as described with all functioning fine. However, I
have noticed the same distracting flashing/flickering occurring as I mouse
over the interactive buttons on the submenu. I notice this in IE6.0 but not
in NN7.1. I have isolated the source of the flickering to occur AFTER I have
set the behaviors of each button in the submenu layer to change property of
the submenu layer visible on mouseover. This step is outlined on page 511
(bottom) and is necessary to keep the submenu layer exposed as you mouse
over each submenu button. There is also a behavior on the submenu layer
itself to be hidden onmouseout. Perhaps the authors could comment on this
question (also, see p.s. below).

Does anyone know of a fix for the flashing/flickering?

Tom

p.s. Colligan/Cheshire, you mention in chapter 25 (page 501) that the

example which illustrates your dynamic submenu description can be found on
the accompanying CD (layers.htm). I have searched the CD and have found no
folder for chapter 25 or layers.htm file. Am I missing something?

 

[Tom Eberle]

Hi Jon,

Thanks for taking the time to look at this problem.

I have posted the site at http://www.lighthouseda.com/lhda_website/

Regards,

Tom

----- Jon Spivey wrote: -----

Hi Tom,
I don't have the book so don't know the code you're reffering to - but I'm
guessing the flickering would be caused by applying onmouseout events
directly to a div/layer. This is a common technique for building menus but
it's bad practice for 2 reasons
1/ doesn't work in NN4
2/ when you apply onmouseout to a div it fires when you mouseout of anything
within the div, so for example if you had something like
<div onmouseout="someFunctionToHideThisMenu();"
onmouseover="someFunctionToShowThisMenu();"><a href="page.htm">page 1</a><a href="page2.htm">page 2</a>
etc
</div>
When you mouseout of the links within the div the function will be called to
hide the div then a split second later you mouseover another link and the
function is called to show the menu - this causes the flickering. The menu
is repeatedly shown and hidden

Can you post up either the code you're using - or better still a url to a
page that exhibits this behaviour. There's a very easy fix but I'd need to
see exactly what you have so far

As a ps one could build a dropdown menu using onmouseout on a div but its
way beyond the scope of FP behaviours
1/ for cross browser support you'd need to attach the behaviours with script
not directly to the tag
2/ each time a mouse event fires you'd need to establish where the mouse
ends up - ie did it end up outside the div (in which case hide the menu) or
is it still within the menu (in which case ignore the event and do nothing)
3/ for cross browser support the sub menus would need to rest on top of the
trigger buttons

Jon
Microsoft MVP - FP

Team,

FrontPage 2003 (search the discussion group for flickering and flashing) for
implementing a dynamic menu system. Maybe it can't be solved. However, I was
excited to find a book by Colligan/Cheshire, "Using Microsoft FrontPage
2003", the other day that explained in detail how to construct the menu
system I was after.dynamic menu system. I have been successful in constructing the menu system
with layers & behaviors as described with all functioning fine. However, I
have noticed the same distracting flashing/flickering occurring as I mouse
over the interactive buttons on the submenu. I notice this in IE6.0 but not
in NN7.1. I have isolated the source of the flickering to occur AFTER I have
set the behaviors of each button in the submenu layer to change property of
the submenu layer visible on mouseover. This step is outlined on page 511
(bottom) and is necessary to keep the submenu layer exposed as you mouse
over each submenu button. There is also a behavior on the submenu layer
itself to be hidden onmouseout. Perhaps the authors could comment on this
question (also, see p.s. below).example which illustrates your dynamic submenu description can be found on
the accompanying CD (layers.htm). I have searched the CD and have found no
folder for chapter 25 or layers.htm file. Am I missing something?

 

[Jon Spivey]

Hi Tom,
yes as I guessed the fliskering is causes by for example this mouseout event
to hide a submenu
id="mainMenu"
onmouseout="FP_changeProp(/*id*/'businessSubMenu',0,'style.visibility','hidd
en');
this will make the menu hide whenever you mouseout of links within the
div - not just the div itself. Then the mouseover events on the links show
the menu - hence flickering.
This is really bad - if you got this technique from a book I'd ask for my
money back

I've done a quick remake here
http://myweb.tiscali.co.uk/jonspivey/Home.htm
obviously i don't have all your images but as you can see there's no
flickering and it also works in NN4 - there's a few other things you should
do
1/ remove the heights from all your layers - giving a height to a layer is
unneccesary and can cause problems in some browsers
2/ apply all your behaviours to <a tags not directly to images - NN4 only
accepts events applied to a tags.

Cheers,
Jon

 

[Jim Cheshire]

Hi Tom,

That flashing and flickering is a by-product of the implementation and
there's no way around it without getting into the code by hand.

In order to make the menu display correctly using Behaviors, you have to set
a Behavior that will hide the menu when you move the mouse off of the <div>.
The current implementation of Behaviors requires this, and a by-product of
it is that the menus will flicker slightly as you pass the mouse over the
different menu items.

I originally had a great deal of content in that chapter that spoke about
how to implement a menu with full browser support and more robustness, but
it quickly got out of hand in the context of the book. We had to be careful
not to get too carried away with a lot of coding methodology that would lose
non-coding readers quickly. Instead, I decided to write the Behaviors and
layers chapters from the viewpoint of using ONLY the UI to insert components
with no hand-coding whatever. I decided on that route because that's the
way most FrontPage users work.

As to the file, that is entirely my fault. I neglected to provide the
sample file when the book went to press. I have to confess human error on
that one, but I will tell you that the sample file had the same flickering
effect.

Re a fix for the flickering and flashing, you have a few options. You can
hand-code the JavaScript yourself (which I think you probably aren't likely
to do since you are opting for Behaviors at this point) and you can go with
a third-party menu system. Personally, I like DHTML Menu Builder. It
creates very robust menus that don't suffer from the drawbacks inherent in
the DHTML menus that FrontPage 2003 Behaviors are capable of creating.

With all of that said, keep in mind that Microsoft very often beefs up these
kinds of features substantially in future versions. FrontPage 2003 is the
first iteration of Behaviors. Don't write them off for this kind of work
just yet!

--
Jim Cheshire
Jimco Add-ins
http://www.jimcoaddins.com
===================================
Co-author of Special Edition
Using Microsoft FrontPage 2003
Order it today!
http://sefp2003.frontpagelink.com

Team,

I and others have been battling a problem with layers/behaviors in

FrontPage 2003 (search the discussion group for flickering and flashing) for
implementing a dynamic menu system. Maybe it can't be solved. However, I was
excited to find a book by Colligan/Cheshire, "Using Microsoft FrontPage
2003", the other day that explained in detail how to construct the menu
system I was after.

I followed the example in Chapter 25, Using Layers, to construct my

dynamic menu system. I have been successful in constructing the menu system
with layers & behaviors as described with all functioning fine. However, I
have noticed the same distracting flashing/flickering occurring as I mouse
over the interactive buttons on the submenu. I notice this in IE6.0 but not
in NN7.1. I have isolated the source of the flickering to occur AFTER I have
set the behaviors of each button in the submenu layer to change property of
the submenu layer visible on mouseover. This step is outlined on page 511
(bottom) and is necessary to keep the submenu layer exposed as you mouse
over each submenu button. There is also a behavior on the submenu layer
itself to be hidden onmouseout. Perhaps the authors could comment on this
question (also, see p.s. below).

Does anyone know of a fix for the flashing/flickering?

Tom

p.s. Colligan/Cheshire, you mention in chapter 25 (page 501) that the

example which illustrates your dynamic submenu description can be found on
the accompanying CD (layers.htm). I have searched the CD and have found no
folder for chapter 25 or layers.htm file. Am I missing something?

 

[Jon Spivey]

Jim
an enterprising developer could probably develop an add-in/new behaviour
that attached behaviours to a sub menu div via script then tracked the
toElement/target/currentTarget of the mouseout and ignored the event if the
mouse is still within the sub menu div

I know enough about script to write that but don't know enough (anything)
about add-ins to know if it's feasible - just a thought

As things stand the only way I know to build a robust cross browser (and
flicker free!!) menu purely point and click with behaviours is to place a
transparent gif behind the sub menus to catch the mouseout.

 

[Jim Cheshire]

Oh, it's doable. It would be a somewhat daunting task for my timeline.
I've been incredibly busy. I think I'll have to leave that one to another
developer.

--
Jim Cheshire
Jimco Add-ins
http://www.jimcoaddins.com
===================================
Co-author of Special Edition
Using Microsoft FrontPage 2003
Order it today!
http://sefp2003.frontpagelink.com

 

[z@forget_about_it]

Hi,
What are you doing to cause flickers - are you following instructions from
somewhere? That shouldn't happen. You can try my behaviors if you like
http://myweb.tiscali.co.uk/jonspivey/menus/
Guaranteed flicker free

Jon
Microsoft MVP - FP

FWIW, today I noticed flickers on a newbie (cough) project when I chose a cell in a table (containing a menu item) as the behavior
subject. I got rid of mine by eventually setting the cell's text as the behavior subject.

Anyways I'll be checking out the other ideas I see here.

 

[Rob Ainscough]

Oye, well this does answer the question/problem I was running into.

But to be honest, adding layers/behaviours with some seriously limited implementation does seem kinda odd. Why have events (behaviours) associated to <div> if they are triggered from any interactive buttons within that layer that have their own set of behaviours? But I come for a VB.NET and VB6 background so I'm all too familiar with the "undocumented" event hell MS have produced in the past

Sure seems like this is a common problem, now that I search the newsgroup/forum. Didn't the big red flags go off at Redmond during beta testing for this? Can't believe they were ignored for 2003 release.

 

[Jackie Stein]

Jon -

I downloaded your behaviors (thanks!) but am having trouble with flickering still. I've read through all the commentary so far, but the bit that I do understand doesn't seem to be working. I don't have any graphic design software so I can't create my own button gifs and I've been trying to use just text hyperlinks (to javascript: and attaching the "open menu" behavior to them, but there is not only massive flickering of my submeu, I'm also having trouble making the submenu stay visible as I attempt to slide the mouse onto it!

I'm not a coder and not even highly competent with FP - HELP! Please!

Thanks,

Jackie