Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
ADOBE DREAMWEAVER:HomeDreamweaver ForumDreamweaver TutorialsFAQAdobe FlashWeb Design

JS Combine Effects

COW Forums : Adobe Dreamweaver

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Share on Facebook
Vincent RosatiJS Combine Effects
by on May 23, 2010 at 1:57:17 pm

So, about 4 weeks back I posted general site architecture question about having an MP3 player run continuously throughout the site.
Fernando rightly suggested that what I was trying to do was more like a Flash site.
I don't have the flash knowledge, so I plugged along and here's where it stands...

This is more of a JavaScript question than it is a Dreamweaver question.

Basically, I'm using Hide/Show DIVs (instead of html pages) so the MP3 player will play throughout the entire site.

What It Is
They want the 'pages' to fade in out, then in, as each link is selected.
I'm using 'linkToFade.js' to do this.
However as you can see, the 'page' opens as visible, than fades out and in.

What It Should Be
Click main nav link...
Fade out current 'page'...
Fade in target 'page'.

Any thoughts on how I might be able to get this to work properly?

I'm very unknowing in the ways of scripts, I just start throwing stuff together until something works.


*Please remember to Rate our replies or check Solution if solved. If you get a good idea from the post, consider clicking the Kudos option.

Return to posts index
Reply   Like  

Fernando MolRe: JS Combine Effects
by on Jun 1, 2010 at 4:31:03 am

Hi, Vincent.

Even if you find that fix for one browser there's a big chance you'll have problems in others.

I still think you should be doing this kind of site in Flash. It will be simpler than adding mixed effects with javascript. Debugging that can be hell, as you already know.

By the way, you shouldn't let your client tell you "how" to do the site. It's a good practice to define a communication objective from the very beginning, then focus on the content. When they start asking for sparky banners and clever navigation icons remember them why you are doing the site.

Sorry if it's a bold comment, but it's sincere. You can very easy end working endless extra hours because of this kind of ongoing demands.

*Always share a link to your site and rate the posts. This is a free service for you and for us.

Return to posts index
Reply   Like  

Vincent RosatiRe: JS Combine Effects
by on Jun 4, 2010 at 12:33:34 am

Yeah. I scrapped the idea. There were too many things going on that I barely had control over, regarding scripts.
Looks like jQuery could have helped, but I didn't have time to mess with it.

I've definitely suffered from the 'working endless extra hours' phenomenon... something I'm getting better at avoiding.
I guess I was hoping there was a 'play mp3 on all pages and fade between linked pages' button somewhere in DW that I missed. :)

tx brother


*Please remember to Rate our replies or check Solution if solved. If you get a good idea from the post, consider clicking the Kudos option.

Return to posts index
Reply   Like  

demetri tashieRe: JS Combine Effects
by on Jun 4, 2010 at 4:11:19 am

hey- why are you giving up so easily?

this can of course be done just using Dreamweaver and javascript. the subject of doing an 'out' and then an 'in' animation from the old page to the new page is always a subject that seems to baffle people. it is a popular - though frustrating - topic in the Flash forums. i've written a few turorials on how to accomplish it in Actionscript - either using Timeline tweens, or through importing external SWFs as the 'pages'

i've been working on it all day ( well, almost all day) to try to do this just in javascript. here is a real ugly example of it. i threw in a super ugly header, which has a mp3 QT file, so you can have something playing over each of the pages loading. with each click of a button, the current page fades out, then the new page fades in.

i figured i could either do it by having layered DIVs which i would manipulate their opacities, or i could laod external html pages into a single DI. i decided to have a new external html file load in to the same DIV rather than have layered DIVs and just manipulate their opacity. that would have been easier, but less of a challenge!
actually i wanted to have external pages cause that is what i would more likely use in the real world.

if this was actionscript i wouldn't be so proud of it , becasue so much is written out in 'long-hand'. but with javascript, that is the phase i am at so i am satisfied that i can do it and understand it. i'll strive to get it more concise and 'modular'. should i be thinking OOP in javascript ? oh brother...

anyway, this is the link:
i'll assume you can view the source code and examine all the code. there are a few external javascript files/classes used also .
i'll be glad to explain it as best as i can. hope this gives you good ideas.

BTW- i am NOT thinking about iPhone/iPad compatability at this point. that will come later. these are just experiments to first come to grips with the whole Ajax/DHTML/web 2 thing first.( i was much happier with Flash ........)

Return to posts index
Reply   Like  

Richard WilliamsRe: JS Combine Effects
by on Jun 4, 2010 at 8:05:26 pm

Your link does not work... can you re-post a working example please? there are many ways of doing this for different browsers, but ive never found a solution for all. Indeed using transparencies already creates a problem in older versions of IE let alone crossing over to firfox and safari. I would be really interested to see what you came up with :o)

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Return to posts index
Reply   Like  

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
Share on Facebook


Creative COW LinkedIn GroupCreative COW Facebook PageCreative COW on Twitter
© 2016 All rights are reserved. - Privacy Policy