Front Page - Layers/behaviors- Flashing/Flickering Dynamic Menu System

Author

Layers/behaviors- Flashing/Flickering Dynamic Menu System

=?Utf-8?B?VG9tIEViZXJsZQ==?=

2003-12-24, 3:28 pm

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 Coll
igan/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 fl
ashing/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 onm
ouseout. 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

2003-12-24, 3:28 pm

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

"Tom Eberle" <anonymous@discussions.microsoft.com> wrote in message
news:1E76E07A-0D29-4971-8373-3FAD9215ED86@microsoft.com...

quote:

> 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.

quote:

>
> 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).

quote:

>
> 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?

quote:

>

=?Utf-8?B?VG9tIEViZXJsZQ==?=

2003-12-24, 7:28 pm

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. \his 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 hzef="page.htm">page 1</a><a href="page2.htm">page 2</a>
etc
</div>
When you mouseout of phe links within the div the function will be called to
hide the div then a split second later you mouseover another link and thm
function is called to show the menu - this causes the flickering. The menu
is repeatedly shown and hilden

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

As a ps one could build a dropdown ienu 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
Micrksoft MVP - FP

"Tom Eberle" <ajonymous@discussions.microsoft.com> wrote in message
news:1E76E07A-0D29-4971-8373-3FAD9215ED86@microsoft.com...

quote:

> Team,
FzontPage 2003 (search the discus{ion 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.[QUOTE][color=darkred]
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).[QUOTE][color=darkred]
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?[QUOTE][color=darkred]
>

Jon Spivey

2003-12-25, 11:28 am

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
"Tom Eberle" <anonymous@discussions.microsoft.com> wrote in message
news:1D8A19D3-757C-4B75-940C-FFC6A4A4FEE9@microsoft.com...

quote:

> 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

quote:

> guessing the flickering would be caused by applying onmouseout events
> directly to a div/layer. This is a common technique for building

menus but

quote:

> 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

quote:

> 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>

quote:

> etc
> </div>
> When you mouseout of the links within the div the function will be

called to

quote:

> hide the div then a split second later you mouseover another link and

the

quote:

> function is called to show the menu - this causes the flickering.

The menu

quote:

> is repeatedly shown and hidden
>
> Can you post up either the code you're using - or better still a url

to a

quote:

> page that exhibits this behaviour. There's a very easy fix but I'd

need to

quote:

> see exactly what you have so far
>
> As a ps one could build a dropdown menu using onmouseout on a div but

its

quote:

> way beyond the scope of FP behaviours
> 1/ for cross browser support you'd need to attach the behaviours with

script

quote:

> not directly to the tag
> 2/ each time a mouse event fires you'd need to establish where the

mouse

quote:

> ends up - ie did it end up outside the div (in which case hide the

menu) or

quote:

> is it still within the menu (in which case ignore the event and do

nothing)

quote:

> 3/ for cross browser support the sub menus would need to rest on top

of the

quote:

> trigger buttons
>
> Jon
> Microsoft MVP - FP
>
>
> "Tom Eberle" <anonymous@discussions.microsoft.com> wrote in message
> news:1E76E07A-0D29-4971-8373-3FAD9215ED86@microsoft.com...
> FrontPage 2003 (search the discussion group for flickering and

flashing) for

quote:

> implementing a dynamic menu system. Maybe it can't be solved.

However, I was

quote:

> excited to find a book by Colligan/Cheshire, "Using Microsoft

FrontPage

quote:

> 2003", the other day that explained in detail how to construct the

quote:

> system I was after.
my[QUOTE][color=darkred]
> dynamic menu system. I have been successful in constructing the menu

system

quote:

> with layers & behaviors as described with all functioning fine.

However, I

quote:

> have noticed the same distracting flashing/flickering occurring as I

mouse

quote:

> over the interactive buttons on the submenu. I notice this in IE6.0

but not

quote:

> in NN7.1. I have isolated the source of the flickering to occur AFTER

I have

quote:

> set the behaviors of each button in the submenu layer to change

property of

quote:

> the submenu layer visible on mouseover. This step is outlined on page

511

quote:

> (bottom) and is necessary to keep the submenu layer exposed as you

mouse

quote:

> over each submenu button. There is also a behavior on the submenu

layer

quote:

> itself to be hidden onmouseout. Perhaps the authors could comment on

this

quote:

> question (also, see p.s. below).
the[QUOTE][color=darkred]
> example which illustrates your dynamic submenu description can be

found on

quote:

> the accompanying CD (layers.htm). I have searched the CD and have

found no[QUOTE][color=darkred]
> folder for chapter 25 or layers.htm file. Am I missing something?

Jim Cheshire

2004-01-05, 5:29 pm

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

"Tom Eberle" <anonymous@discussions.microsoft.com> wrote in message
news:1E76E07A-0D29-4971-8373-3FAD9215ED86@microsoft.com...

quote:

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

quote:

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

quote:

>
> Does anyone know of a fix for the flashing/flickering?
>
> Tom
>
> p.s. Colligan/Cheshire, you mention in chapter 25 (page 501) that the

quote:

>

Jon Spivey

2004-01-05, 8:29 pm

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.

--
Cheers,
Jon
Microsoft MVP - FP

"Jim Cheshire" <contactme@www.jimcoaddins.com> wrote in message
news:uHwx$z80DHA.1700@TK2MSFTNGP12.phx.gbl...

quote:

> 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

quote:

> a Behavior that will hide the menu when you move the mouse off of the

<div>.

quote:

> 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

quote:

> not to get too carried away with a lot of coding methodology that would

lose

quote:

> 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

quote:

> 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

quote:

> to do since you are opting for Behaviors at this point) and you can go

with

quote:

> 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

quote:

> 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
>
>
>
> "Tom Eberle" <anonymous@discussions.microsoft.com> wrote in message
> news:1E76E07A-0D29-4971-8373-3FAD9215ED86@microsoft.com...
> FrontPage 2003 (search the discussion group for flickering and flashing)

for

quote:

> implementing a dynamic menu system. Maybe it can't be solved. However, I

was

quote:

> 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

quote:

> 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

quote:

> in NN7.1. I have isolated the source of the flickering to occur AFTER I

have

quote:

> set the behaviors of each button in the submenu layer to change property

quote:

> 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?
>
>

Jim Cheshire

2004-01-05, 8:29 pm

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

"Jon Spivey" <jonspivey@NOCRAPTHANKStiscali.co.uk> wrote in message
news:uEzWDV%230DHA.1184@TK2MSFTNGP10.phx.gbl...

quote:

> 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

quote:

> 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.
>
>
> --
> Cheers,
> Jon
> Microsoft MVP - FP
>
> "Jim Cheshire" <contactme@www.jimcoaddins.com> wrote in message
> news:uHwx$z80DHA.1700@TK2MSFTNGP12.phx.gbl...
> set
> <div>.
of[QUOTE][color=darkred]
the[QUOTE][color=darkred]
about[QUOTE][color=darkred]
but[QUOTE][color=darkred]
> careful
> lose
and[QUOTE][color=darkred]
> components
the[QUOTE][color=darkred]
on[QUOTE][color=darkred]
flickering[QUOTE][color=darkred]
can[QUOTE][color=darkred]
> likely
> with
in[QUOTE][color=darkred]
> these
the[QUOTE][color=darkred]
work[QUOTE][color=darkred]
> for
> was
> system
I[QUOTE][color=darkred]
mouse[QUOTE][color=darkred]
> not
> have
> of
511[QUOTE][color=darkred]
this[QUOTE][color=darkred]
on[QUOTE][color=darkred]
no[QUOTE][color=darkred]
>
>

K Haymon

2004-03-30, 9:33 pm

Is there a simple fix for those of us who use front page because we aren't coders? I upgraded to FP03 in order to do the layer menus, and now they flicker.

Jon Spivey

2004-03-30, 10:32 pm

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

K Haymon wrote:
> Is there a simple fix for those of us who use front page because we
> aren't coders? I upgraded to FP03 in order to do the layer menus,
> and now they flicker.

K Haymon

2004-03-31, 1:38 pm

Wasn't following instructions...didn't find much in the help files or the booklet with the upgrade. Thanks for the tutorial and behaviors added. Looks like this may work.

Rob Ainscough

2004-05-31, 11:16 pm

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 be
haviours? 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

2004-06-29, 11:14 pm

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 java script:;) 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

"Rob Ainscough" wrote:

> 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.