Smooth Navigation Drop Downs

Hi all,

I´m always fascinated by smooth elements used in websites like:

http://www.themeflash.com/50-best-photoshop-web-design-tutorials/

or

http://www.slicemachine.com/ (my favourite one).

Now - a lot of them are made in flash, but more and more they are made with jQuery or even JavaScript (is this correct?). Frankly open spoken - without any knowledge - it seems like an unopened can to me.

Would you see such things as possible to build in freeway?

Are there any tips and tricks you would recommend to get closer to the theme?

Are there any Freewayer, that tried to rebuilt something like that (or even wrote a tutorial) where we could have a look on?

… or is even something to be expected from Softpress to make jQuery-life simpler?

Or are my thoughts just too complicated and it´s to do much easier and I missed?

Thanks for any thoughts in advance.

Best regards

Thomas


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

Hi Thomas,

Some thing like the first link, themeflash.com can be accomplished pretty easily with the Moo Accordion action.
Check out Dan’s screen cast tutorial, I was about to say it was well worth the $5…but this one is free…even better.
http://www.danjasker.com/store/watch/free-sc-mootools-accordion/

Not sure how to go about the second link, I remember a couple of threads on this forum where folks were wondering about the same thing, an upward expanding menu. You might want to search this form.


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

Hi Rich,

thanks for your reply. I already saw Dan`s screencast and used it successfully. The problem with moo is, that the most of my sites are built with webyep elements - and both elements will not work on the same page. But I must admit, that I never thought about that idea.

The second one is definitely jQuery (http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js) with hover and steps.

Dan made as well a very good Screencast using JQuery that I purchased, but explained for another effect (carousel) and in there he made some operations I´d never expect to do in freeway. Maybe he could point me further in that case.

Greetz

Thomas


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

First, some terms:

JavaScript is a programming language, unrelated to Java (just to be
confusing), that is often used in Web browsers as a means of
controlling the behavior or presentation of the page. All modern
browsers include a JavaScript interpreter, and most allow the end-user
to switch it off for whatever reason, too.

jQuery is a framework, written in JavaScript, that aims to do several
things: first, it smoothes over the ugly gaps between various browsers
(cough, IE, cough); second, it provides a uniform programming
interface for developers to use when creating browser-based effects.
jQuery distinguishes itself by being extraordinarily “plug-able”.
There are countless packaged effects available for it, and they often
allow you to create some amazing effects with little or no technical
knowledge. The only issue that I have found with it is that once you
want to do something even a little bit different than what your chosen
plug-in does, you are often stuck finding a different plug-in, rather
than being able to change a few parameters here and there to get what
you’re looking for.

Prototype is another framework in JavaScript, geared more toward a
developer who is building a Web application – who needs something
less “off the shelf”. Scriptaculous is an animation framework that
uses Prototype to talk to the browser, and which allows you to create
any sort of wizzy visual effect you can imagine. Think of
Scriptaculous plus Prototype as a toolkit for building Flash effects
without Flash. But realize that Prototype gives you the tools to write
your own browser to play those effects in, too, should you need that
level of control. Prototype and Scriptaculous were both extracted from
the wildly popular Ruby on Rails development environment, and are
found in the “plumbing” of many major Web 2.0 sites.

Then, in practice:

Freeway ships with a set of visual effects built on Prototype +
Scriptaculous. Select an item on the page, then look in the main menu
under Item / Actions / for Attention FX, Transition FX, and Sound FX.
Each of these can be chained together in combination, and you can also
invoke Scriptaculous effects in the Rollover and Target Actions, too.

I have written an Action called Protaculous that allows you to create
anything you can dream up in JavaScript (it’s very much a geek-
friendly tool) using those libraries. All it does is attach the
libraries to the page in a manner that won’t conflict with Freeway’s
built-in Actions, and provide you a set of fields for typing in your
own code.

I have also written a set of more packaged effects: Carousel (actually
ships as part of Protaculous), ScriptyAccordion, and ScriptyLightbox.
All of these are available at ActionsForge.

Max Fancourt wrote an Action called Script Action Set that contains
similar tools to Protaculous, but less framework-centric. You could
use it to add jQuery to your page, along with any of the
aforementioned plug-ins.

Walter

On Apr 28, 2010, at 2:52 AM, Thomas Kimmich wrote:

Hi all,

I´m always fascinated by smooth elements used in websites like:

http://www.themeflash.com/50-best-photoshop-web-design-tutorials/

or

http://www.slicemachine.com/ (my favourite one).

Now - a lot of them are made in flash, but more and more they are
made with jQuery or even JavaScript (is this correct?). Frankly open
spoken - without any knowledge - it seems like an unopened can to me.

Would you see such things as possible to build in freeway?

Are there any tips and tricks you would recommend to get closer to
the theme?

Are there any Freewayer, that tried to rebuilt something like that
(or even wrote a tutorial) where we could have a look on?

… or is even something to be expected from Softpress to make
jQuery-life simpler?

Or are my thoughts just too complicated and it´s to do much easier
and I missed?

Thanks for any thoughts in advance.

Best regards

Thomas


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

OK Walter, thanks for clarifying this … for the future I try to speak more detailed (… or take hands off things I don`t know exactly)

Therefore I followed practice part 1 Freeway asking you to have a quick look on:

http://www.kimmich-dm.de/beta/extras/fxtest.html

A very rough sample and a screenshot. Now without knowledge of german language you could realize, that parts of the dropdown are double, the last point (sliding up/nach oben gleiten) is not reachable and functional.

The second thing has possibly to do with combining actions but I can`t figure out how.

Mouse over will show the event but to stop I have to “mouse over” again, not typically a classic rollover?

And the third thing is the duration of the effect. By default 1 is a bit too slow a smaller number is not possible to set.
Is there any chance to solve this?

Thanks for your help in advance

Thomas


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

I see the problem. The issue is that there doesn’t seem to be any way
to combine a group of elements (using the stock Freeway FX Actions) to
make a menu bar like this. You want the roll over one to “un-do”
whatever status change happened to all the other elements in the same
group.

The classic Rollover Action can do this “restore the others” behavior
quite easily, but it can’t do the effects.

One question I can answer is that to set something less than 1 in any
of these FX actions, all you need do is use a decimal. 0.3 works
nicely for a crisp effect that still is less harsh than a straight
show/hide.

Walter

On Apr 29, 2010, at 10:13 AM, Thomas Kimmich wrote:

OK Walter, thanks for clarifying this … for the future I try to
speak more detailed (… or take hands off things I don`t know
exactly)

Therefore I followed practice part 1 Freeway asking you to have a
quick look on:

http://www.kimmich-dm.de/beta/extras/fxtest.html

A very rough sample and a screenshot. Now without knowledge of
german language you could realize, that parts of the dropdown are
double, the last point (sliding up/nach oben gleiten) is not
reachable and functional.

The second thing has possibly to do with combining actions but I
can`t figure out how.

Mouse over will show the event but to stop I have to “mouse over”
again, not typically a classic rollover?

And the third thing is the duration of the effect. By default 1 is a
bit too slow a smaller number is not possible to set.
Is there any chance to solve this?

Thanks for your help in advance

Thomas


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 Walter, now what way would you then recommend to make it running?

And what about the doubled events in the action? Shall I direct get in touch with Softpress?

By adding decimal (what I did several times) the function gets inactive means:

“Suddenly nothing happens” :slight_smile:

or shit happens.

Greetz

Thomas


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

Hmm. I would definitely get in touch with Softpress if suddenly
nothing happens!

As far as what you can do to make the effect you want, I’m afraid
there’s no way I’ve found to build that using only the FX Actions.
(I might be wrong, Joe built a lot of smartz into them.)

You could do this using hand-written JavaScript and the Protaculous
Action to link up the Prototype and Scriptaculous Actions. I have made
a couple of tries at something like this, I’ll have to see if I can
dig one up.

Walter

On Apr 29, 2010, at 2:06 PM, Thomas Kimmich wrote:

Thanks Walter, now what way would you then recommend to make it
running?

And what about the doubled events in the action? Shall I direct get
in touch with Softpress?

By adding decimal (what I did several times) the function gets
inactive means:

“Suddenly nothing happens” :slight_smile:

or shit happens.

Greetz

Thomas


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

You aren’t by any chance using the German decimal, which I believe is
a comma elsewhere in the world? That will definitely kill any
JavaScript trying to interpret that input. Make sure you are using a
full stop, little round dot, no tail.

Walter

On Apr 29, 2010, at 2:13 PM, Walter Lee Davis wrote:

By adding decimal (what I did several times) the function gets
inactive means:


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

Hi Walter,

not want to add another Trans-Atlantic-Konflict, but by typing in stupid german:

0 dot (small round point) anything

the action turns it automatically in that not acceptable komma itself.

Now I can german-like curse or ask this as another quest. to softpress.

Believe me - we germans are maybe primitive but not stupid.

Greetz

Thomas


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

Sorry, I didn’t mean anything personal by that. This is a known bug in
Freeway, you should talk to Softpress – I believe there’s a work-
around for it. And I’m not trying to say anything about you, only
about the differences between numbering systems.

Walter

On Apr 29, 2010, at 4:02 PM, Thomas Kimmich wrote:

Hi Walter,

not want to add another Trans-Atlantic-Konflict, but by typing in
stupid german:

0 dot (small round point) anything

the action turns it automatically in that not acceptable komma itself.

Now I can german-like curse or ask this as another quest. to
softpress.

Believe me - we germans are maybe primitive but not stupid.

Greetz

Thomas


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

… no doubt in that - just forget it!

Im that happy having your helping hands, and Im talking in name of all joining this list.

Although I sometimes really have problems in following your technical instructions - like the mouse sitting in front of snake.

Yor`re lightyears away in knowledge of a lot of us - so please let pardon us some unforced errors - or some naive kind of thinking - as a kid, curious but sometimes clumsy.

Thomas


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

Hi Walter,

just to keep you informed, the answer of Softpress:

The problem with the comma (,) willbe solved some time soon (without giving a timing of when exactly this will be).

So I can switch my Freeway-Copy in the english version or just leave it.

Some “mouse-over” and “mouse-out” addition to the action is not in plan because this is not a common wish.

Well I can accept these answers cause both is really not of global interest. But I nice feature it would be anyway (and one of the reason, not to “overactionize” my pages.

Instead of this I thought about JQuery although I`m sure that this will keep me years to understand how to integrate in freeway :slight_smile:

Maybe one of our next discussion?

Stay rockin`

Thomas


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

… just to close the thread with one possible solution - according to Joe Billings thread http://www.freewaytalk.net/thread/view/27374#m_27376.

Thanks to Joe.

The result:

http://www.kimmich-dm.de/beta/index.php

Please softpress, have a look on the “german comma issue”.

Thomas


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

Do we have a solution now for Smooth Navigation Drop Downs?


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