FreewayTalk

28 replies to this thread. Most Recent

stuart

22 May 2011, 12:51 pm

[Pro] Mouse Evnt /roll over

Sorry I think I may of placed in wrong section before apologies

Hi all, this is driving me mad .. so really i need some advise as maybe …most likely being to logical.

I have a button (which is a graphic) basic a rollover the same way as such as the below Have a look at http://conwayanderson.com/#

I.e the mouse over is as such a mouseevent or fade instead of a straight forward mouse over using Transition FX… but no joy So Transition FX on its own… can get it fade and appear i.e applying which item with an fx BUT the issue is that its not right when the mouse leaves

The mootools url is http://mootools.net/demos/?demo=MouseEnter

PLEASE NOTE conwayanderson.com has created it as one graphic as a mouse over so I can learn and understand

Please Please can someone help… its driving me NUTS thanks

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

DeltaDave

22 May 2011, 3:08 pm

Can you post a link to your own example?

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

stuart

22 May 2011, 3:11 pm

Sure David it will be rough example ok

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

DeltaDave

22 May 2011, 5:38 pm

The site you link to uses the ‘Sprites’ method.

Walter has an example here http://scripty.walterdavisstudio.com/sprite/index.html and there is this thread on the topic http://freewaytalk.net/thread/view/77569#m_77621

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

Todd

22 May 2011, 5:46 pm

Here’s another example with a file you can pick apart http://www.xiiro.com/demo/css_graphic_menu/index.html. It refers to building a menu but the Sprite concept is the same.

Todd

On May 22, 2011, at 12:37 PM, DeltaDave wrote:

The site you link to uses the ‘Sprites’ method.

stuart

22 May 2011, 6:00 pm

IM not after building a menu its the issue on the mouse over effect and creating the effect

as like http://conwayanderson.com/#

the idea layout is http://www.web.nonfacture.co.uk/

its being able to create the effect of smooth mouse overs

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

stuart

22 May 2011, 6:02 pm

http://scripty.walterdavisstudio.com/sprite/index.html

Really interesting thank you

But is there a way of applying the effect as a mouse over effect instead

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

Todd

22 May 2011, 6:06 pm

I thought there was some question as to how to use the Sprite technique. Never mind, it was just a suggestion.

Todd

On May 22, 2011, at 1:00 PM, stuart wrote:

IM not after building a menu its the issue on the mouse over effect and creating the effect

stuart

22 May 2011, 6:14 pm

Todd Thanks for the sprite technique ..if you think thats the best way ..great .. I was wondering if a moo FX too could do the same .. too

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

waltd

22 May 2011, 7:07 pm

Sprites are not useful for this sort of fading technique, because they only have two states, and they are mutually-exclusive. You might experiment with using the same sprite image as the background for two different HTML boxes, with different background-position offsets — you would still get the benefits of faster loading inherent in the technique, but you would still have to fade two separate elements in and out.

I had a quick look at Transition FX, and discovered that while it has a mouseover event, it doesn’t have the equivalent mouseout event, so you can’t stack these up and get the look you want. The Observer Action (part of Protaculous) allows you to do this, but at the price of writing code to make it work.

Try the following in a blank page, just to get the idea.

  1. Draw a graphics box on the page for your normal button. Give it a color. In the Inspector, call it ‘normal’ using the Title field (don’t include the quotes, naturally).

  2. Apply the Observer Action to it. Set the Library picker to scriptaculous-packed.

  3. Set the top Event field to mouseover and click the Function Body button to the right of that field.

  4. Enter this line of code: $('over').appear({duration:0.3});

  5. Duplicate the first box, name it ‘over’ and give the duplicate a different color. In the Actions palette, change the event name to mouseout, and change the code in the Function Body so it reads: $ ('over').fade({duration:0.3});

  6. Apply the Protaculous Action to the page, set the Library picker to scriptaculous-packed, and click the top Function Body button. Enter this code: $('over').hide();

Finally, position these two identical graphics so that the “over” image is directly above the “normal” image. Preview, and you should see the images fading in and out when you mouse over and out.

Things to realize: a) This uses Scriptaculous and Prototype, so (unlike jQuery or MooTools) it is completely compatible with Freeway’s built-in effects. b) The names of the boxes are super-important. If you duplicate this stacked pair of images, you will need to check the Title field for each one, change it to something meaningful (products and productsOver, for example) and then change the Observer functions to match.

In your Protaculous Action code, you could use a shortcut like this: $ $('#homeOver, #productsOver, #aboutOver, #contactOver').invoke('hide'); to hide all of the “over” images at once (using CSS notation for a collection of IDs) or you could just put a separate line for each, like $('homeOver').hide(); if that makes more sense to you. All that this code does is force the over images to hide before the page finishes loading. As above, the names (and the case of the letters of the names) is critically important.

Walter

On May 22, 2011, at 2:02 PM, stuart wrote:

http://scripty.walterdavisstudio.com/sprite/index.html

Really interesting thank you

But is there a way of applying the effect as a mouse over effect instead

Freeway user since 1997

http://www.walterdavisstudio.com

stuart

22 May 2011, 9:51 pm

Walter Thanks very much I will give it a go.. still new to it all and all that so many thanks Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

stuart

23 May 2011, 10:30 am

Walter ….

Your a legend …. Thank you that works perfect really nice function which looks better than a mouse over function smoother and clearner and has multiple applications menus etc just figuring about the text and linking which I guess if a link all the items before the action is applied it will work the same

But works a treat

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

stuart

23 May 2011, 11:01 am

The only problem now is sorting out vertical scrolls up and down which are smooth …as MOO wont work … which its an issue just have to find a different route

any thoughts ??

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

waltd

23 May 2011, 12:26 pm

Try the SmoothScroll Action, which wraps this up neatly for Freeway. No code fiddling needed.

Walter

On May 23, 2011, at 7:01 AM, stuart wrote:

The only problem now is sorting out vertical scrolls up and down which are smooth …as MOO wont work … which its an issue just have to find a different route

any thoughts ??

Stu

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

23 May 2011, 12:33 pm

Sure. Apply your link to the “over” image only, because when your mouse is over the image, that’s the one that will be at the top of the stack, and will intercept any clicks. To get the button to have a pointer-finger cursor when you initially mouse over it (for that fraction of a second before the second image appears) you would modify the Protaculous code to include this line:

$('normal').setStyle('cursor:pointer');

or, if you’re doing the big group,

$$('#homeNormal,
#productsNormal, ...').invoke('setStyle','cursor:pointer');

When I looked at the Web view of this thread, I noticed that my earlier explanation for creating the group-invocation of the hide effect had what appeared to be a typo — there was a space between the two $ signs of the “double-dollar” function. Be sure if you follow that example that you don’t do that. The line above is accurate.

Walter

On May 23, 2011, at 6:30 AM, stuart wrote:

Walter ….

Your a legend …. Thank you that works perfect really nice function which looks better than a mouse over function smoother and clearner and has multiple applications menus etc just figuring about the text and linking which I guess if a link all the items before the action is applied it will work the same

But works a treat

Stu

Freeway user since 1997

http://www.walterdavisstudio.com

stuart

23 May 2011, 3:12 pm

thanks. so the Over graphic reads

$(‘normal’).setStyle(‘cursor:pointer’);$(‘over’).fade({duration:0.3});

Sorry this is were I get confused abit as I begin to get very confused over code… Were would you apply the code for the link

Sorry to ask questions i tend to get confused

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

waltd

23 May 2011, 3:26 pm

The setStyle part goes into Protaculous, not Observer (where your code was coming from). You would put it on the next line after $ (‘over’).hide();.

If you name all your elements rigorously (always adding Over directly to the end of the “over” element, then you can do all sorts of shortcuts in Prototype when setting up the page. You could do this, for example, to set up the hide and cursor at the same time:

$w('home products support about').each(function(link){
    $(link).setStyle('cursor:pointer');
    $(link + 'Over').hide();
});

You would change that space-separated list (home products support about) to match the names of your “normal” images, and the rest of the code wouldn’t need to change ever. As long as you always named your files home and homeOver or whatever and whateverOver, you would get the benefit of this technique. You could even stop using Observer altogether, and bring everything into a single setup function in Protaculous. This would cut down on the number of different Actions you have to fiddle with. Let me know if you want to see an example of that.

Walter

On May 23, 2011, at 11:11 AM, stuart wrote:

thanks. so the Over graphic reads

$(‘normal’).setStyle(‘cursor:pointer’);$(‘over’).fade({duration:0.3});

Sorry this is were I get confused abit as I begin to get very confused over code… Were would you apply the code for the link

Sorry to ask questions i tend to get confused

Stu

Freeway user since 1997

http://www.walterdavisstudio.com

stuart

23 May 2011, 3:29 pm

Thanks for all your help

let me have a play and see if I can figure it out first and if I need an example i will post a thread … but prefer to try 1st

if thats ok

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

stuart

23 May 2011, 11:37 pm

Walter Hi thanks …its beginning …

the only issue i have is when it loads http://www.web.nonfacture.co.uk/index.html the images dont load correctly …is that me

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

DeltaDave

23 May 2011, 11:58 pm

You have this code in there

document.observe('dom:loaded', function(evt){
$('over').hide();

But none of your elements are named ‘over’ they are ‘aover’ and ‘outover’ etc so you have to specifically name them.

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

waltd

24 May 2011, 12:10 am

Yup, it’s you. You’ve got to get these images organized in such a way that you can call them by name and not have any confusion.

Start by getting rid of everything else on the page except the three normal buttons and the three over buttons. Make sure that all of them are layered objects, with the Layer checkbox checked in the Inspector. Then click on the word Site at the top of the left pane, so it switches over to Page. You should see the page name, with six image names underneath that. Drag them up and down in the list so that you see this:

index.html
    about
    aboutOver
    market
    marketOver
    outdoor
    outdoorOver

Rename the images by option-clicking on each name in the list and typing in the desired name.

Now, while nothing on the page is selected (click somewhere blank on the page) open the Actions palette, and click on the Protaculous tab and the top Function Body button. There, you’ll see $(‘over’).hide();

Ask yourself, “what on this page is named ‘over’?” And extra points if you say, “Nothing!”

At this point, you can do one of two things (but not both):

$w('aboutOver marketOver outdoorOver').each(function(name){
    $(name).hide();
});

or

$('aboutOver').hide();
$('marketOver').hide();
$('outdoorOver').hide();

Now your over images will hide properly when the page loads.

Next, you need to go through all of the Observer Actions (applied to the about, market, and outdoor images) and make sure that the name of the “Over” version is corrected so they read

$('aboutOver').appear();

or the like, as appropriate for their specific “partner” image, and also that the “over” images all have the correct names as well:

$('aboutOver').fade();

But if you’ve come this far (and gotten this close) you might want to know how to make this work in one function applied in Protaculous, rather than Protaculous AND two instances of Observer for each animation.

So you’ve gone through and renamed your images as described above. Now click on each one in the list in the left pane, and in the Actions palette, click the little (x) in the tab where it reads Observer. The little cog icon should disappear from each of the six image names.

Now click on the page somewhere blank, and open up the Function Body editor in Protaculous. Paste in this:

$w('about market outdoor').each(function(name){
    var name = name;
    $(name + 'Over').hide().
        observe('mouseout',function(evt){
            this.fade();
        });
    $(name).observe('mouseover',function(evt){
        $(name + 'Over').appear();
    });
});

Preview, and see how it works.

What it’s done, line by line, is this:

  1. Set up an array of three words, and pass that to an iterator[1] named each
  2. Inside the each method, let the variable name stand for the current word
  3. Use the Prototype shortcut for document.findElementById() ($) to find an element on the page with the ID [whateverNameIsCurrentlyEqualTo] + ‘Over’, and hide it.
  4. Using that same handle again, start an observer on the mouseout event.
  5. When a mouseout occurs, fade the element that triggered that event.
  6. Close the observer
  7. Find an element on the page with the ID [whateverNameIsCurrentlyEqualTo] and set an observer on the mouseout event.
  8. When that event happens, cause the [whateverNameIsCurrentlyEqualTo] + ‘Over’ element to re-appear.
  9. Close listener.
  10. Close iterator.

So the trade-off is that you have to name everything correctly. But wait, that’s not such a trade-off because you have to do that anyway.

Walter

  1. An iterator is a kind of function that will loop over a collection of elements, yielding the current element to itself for further processing. If you’ve done any traditional JavaScript programming, you might recognize this construct:

    for(i=0; i < something.length; i++){ alert(something[i]); }An iterator is that, but with rocket boosters and inline skates, andmaybe ninjas.On May 23, 2011, at 7:36 PM, stuart wrote:> Walter Hi thanks …its beginning … > >

    the only issue i have is when it loads http://www.web.nonfacture.co.uk/index.html the images dont load correctly …is that me

    Stu

Freeway user since 1997

http://www.walterdavisstudio.com

stuart

19 Jun 2011, 8:58 pm

Walter

Sorry to bother you again One thing I was wondering is that java

$(‘outdoorOver’).hide();

$(‘aboutOver’).appear(); You helped me with very kindly the only i see is the loading i have the main nav working but it never seems to load after that

i.e on the PORTFOLIO page (i have only done the x2 (top row 2nd in and last right top row) again but I seem to have the issue of loading any thought why

http://www.web.nonfacture.co.uk/

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

waltd

20 Jun 2011, 3:12 am

I’m not sure what your question is here. I can roll over those two elements in the portfolio section of the page, and the load and unload when I mouse out. They don’t do anything when clicked, but I’m not sure you’ve set them to do anything yet. The page appears complete here, no missing images, or missing rollovers from what I can see.

What are you expecting to happen, and what isn’t happening? Perhaps you have a cache issue there, you might try navigating to a different page, clearing your cache (Safari / Clear Cache) and the go back to that page so it’s forced to load again.

Walter

On Jun 19, 2011, at 4:58 PM, stuart wrote:

Walter

Sorry to bother you again One thing I was wondering is that java

$(‘outdoorOver’).hide();

$(‘aboutOver’).appear(); You helped me with very kindly the only i see is the loading i have the main nav working but it never seems to load after that

i.e on the PORTFOLIO page (i have only done the x2 (top row 2nd in and last right top row) again but I seem to have the issue of loading any thought why

http://www.web.nonfacture.co.uk/

Freeway user since 1997

http://www.walterdavisstudio.com

DeltaDave

20 Jun 2011, 8:07 am

What I am seeing is the 2 (Godiva and City Tourism) being in the Over state on Page Load.

If you look at the following

document.observe('dom:loaded',function(){
$('Normal14').observe('mouseover', function(evt){
$('awaOver').appear({duration:0.3});
});
});
document.observe('dom:loaded',function(){
$('cdo').observe('mouseover', function(evt){
$('cdoOver').appear({duration:0.3});
});
});
document.observe('dom:loaded',function(){
$('awaOver').observe('mouseout', function(evt){
$('awaOver').fade({duration:0.3});
});
});
document.observe('dom:loaded',function(){
$('cdoOver').observe('mouseout', function(evt){
$('cdoOver').fade({duration:0.3});
});
});

You will see that different elements are defined in the the first 2 ie Normal14 & awaOver and cdo and cdoOver

Whereas in the second 2 the elements are the same ie awaOver & awaOver and cdoOver and cdoOver

So apart from the fact that you have some duplication of observers, you also have element duplication.

So go and check your IDs/image names

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

stuart

26 Jun 2011, 3:07 pm

David Thanks Sorted all that out Still have the issue of the carousel

Stu

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk

DeltaDave

26 Jun 2011, 9:31 pm

Still have the issue of the carousel

You will have to remind us about that

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

DeltaDave

26 Jun 2011, 9:44 pm

OK - I see your other thread on that one.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

stuart

26 Jun 2011, 10:09 pm

Thanks dealing with it Both of you have been stars thanks carousel working but just sorting out dup of code

builder,builder,builder very odd

but that carousel … The light just come on loads and how to use that as a hide and show graphical item …. Show and Hide… idea

Its great function

Its slow process learning but all good

Non Facture Ltd

Creative. Design. Artwork. Events. Fabric Tension Graphics. Festival Branding.

Leamington Spa and West Midlands Design Studio

e: [email protected]

w: www.nonfacture.co.uk