Yay. This will be simple in principle, and for non-IE browsers, it’s
as simple as this: In Freeway, create a style with the Tag attribute
set to ‘.product:hover’, and in the Character pull-down, assign the
background-color of your liking. Remember to tab into the Name field,
delete whatever Freeway has entered there, and tab back out to confirm
that you really don’t want to have any Name attribute. This tag-only
style will be published into the page without further effort on your
part – you don’t have to apply it to anything in order to get it in
the page.
Next, you have a serious problem with this layout, although it’s
easily fixed. In Freeway+WebYep, when you create an element and define
it as a template element, you need to make sure that the template does
not publish its own ID. What you have now is an invalid page, with
lots of things convinced that they all have the ID item4. Remember –
only one item per page can have the same ID. I am not sure if you can
fix this in the WebYep Action, but I did write the Classify Action
last year for just this purpose. Apply it to your template element,
and set it to remove the ID, and to add the ‘product’ class to your
template element.
You must do this before proceeding further, and you have to pay
attention to this issue in any page that uses any templating mechanism
– not just WebYep – if you want the resulting dynamic page to be
valid. (You want to start with valid code whenever you try to do
anything even remotely tricky, as we are about to do, because
otherwise it’s quite nearly impossible to figure out why something
doesn’t work. It’s like making a good foundation for a 12-story
building.
Preview, and you should see your rollover effect happen.
Now I mentioned that IE would have a problem with this, and it will.
It will simply ignore the :hover attribute on anything except a link.
There’s no good way around this without JavaScript, but you’ve added
MooTools to your page (for your accordion effect) so I can’t be sure
that this code will work perfectly. First thing, try this: open up
your tag-only style, and edit the Tag field so it reads thusly:
.product:hover, .product_hover
Next, open up your Page / HTML Markup dialog, move to the Before /BODY
section, and paste in the following:
If I’ve read the Moo documentation correctly, this should work. I’ve
never even tried Moo, but it did fork off of Prototype about a million
years ago, so it can’t be all that bad.
What this does is first (since it’s inside of conditional comments)
only come into play if the browser is IE and less than 9 (IE FINALLY
“does” CSS, or at least does more of it than it used to…). When the
page loads, JavaScript looks through the page for any element marked
with the ‘product’ classname. Then it “hooks” those elements to
observe their “mouseover” event. Each time any of them fires that
event, this function removes the ‘product_hover’ class from all of
them, then applies it only to the element that fired the event. This
simulates the :hover effect for IE. We don’t bother with any other
browsers, because (modulo really old versions) all other browsers
understand the :hover pseudoclass can be applied to anything on the
page.
Walter
On Apr 11, 2011, at 11:40 AM, neil.west1 wrote:
D’oh! I only created it as tables to try the ‘cell BG colour
rollover’ action (didn’t work). I’ve now done it again as ‘box
model’ but I’m afraid I don’t know what you mean by classes. Do your
instructions still apply to the revised layout?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options