[Pro] webyep and rollover

http://www.caswells-strings.co.uk/shop/7-cellos

I’ve set up a webyep page similar to the above that gives the client the ability to create as many ‘thumbnails’ as they want, but I’m unable to figure how to apply a rollover so the background of each unit changes colour when moused over - any ideas?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If the elements are getting a link applied to them, you could
construct a CSS rollover effect very simply. Can you post an example
page with your actual layout somewhere? I’d need to see precisely how
the page is being rendered by WebYep to advise you further.

Walter

On Apr 11, 2011, at 10:50 AM, neil.west1 wrote:

http://www.caswells-strings.co.uk/shop/7-cellos

I’ve set up a webyep page similar to the above that gives the client
the ability to create as many ‘thumbnails’ as they want, but I’m
unable to figure how to apply a rollover so the background of each
unit changes colour when moused over - any ideas?


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

Thanks Walt

The temp page is here: http://www.stowasis.com/copper-features/copperb.php

As you will see the only elements that are changed via CMS are the pic and title.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hmmmm. Wow. That’s going to be tough to attack. Everything is in a
table, and Freeway doesn’t “do” IDs or classes on tables or their parts.

Do you have any way to apply a classname to the image or the link from
within WebYep or your template element? If you can create a new class
in Freeway, say call it product or something, and apply it to the
image or some other HTML element nearby, this could be done quite
easily.

Walter

On Apr 11, 2011, at 11:10 AM, neil.west1 wrote:

Thanks Walt

The temp page is here: http://www.stowasis.com/copper-features/copperb.php

As you will see the only elements that are changed via CMS are the
pic and title.


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

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

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

Wow, I don’t even want to hazard a guess at how long you spent putting that advice together - a big thanks!
I’ll look at putting it together tomorrow but a couple of questions first:

The webyep elements should (I haven’t checked yet) have the ‘anonymous’ action applied which apparently removes IDs - is this the same as your classify action?

And secondly, I posted another question earlier about accordion working with carousel, not realising that you had another version of accordion; so, can I simply replace the moo accordion action with your action and have it work in the same way (navigation menus) AND have it compatible with carousel?

Again, thanks for your invaluable input thus far.

Neil


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Apr 11, 2011, at 12:56 PM, neil.west1 wrote:

Wow, I don’t even want to hazard a guess at how long you spent
putting that advice together - a big thanks!

I can type very quickly.

I’ll look at putting it together tomorrow but a couple of questions
first:

The webyep elements should (I haven’t checked yet) have the
‘anonymous’ action applied which apparently removes IDs - is this
the same as your classify action?

No, although Classify does do the remove ID trick. Anonymous has some
additional tricks up its sleeve, in that it can descend through the
hierarchy of the element it’s applied to and remove IDs from child
elements as well. I don’t remember if Classify can do this, but I
somehow think not.

If you have applied Anonymous, it doesn’t seem to be working. View
source on your page and press Apple-F and look for item4. You should
see plenty of them!

And secondly, I posted another question earlier about accordion
working with carousel, not realising that you had another version of
accordion; so, can I simply replace the moo accordion action with
your action and have it work in the same way (navigation menus) AND
have it compatible with carousel?

The ScriptyAccordion does work in the same page as Carousel. They are
based on the same code and are specifically tested to work with each
other, as well as with any of the Softpress Actions and a few others
that are in the “Scripty Club”.

Again, thanks for your invaluable input thus far.

Neil

You’re welcome.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options