/    Sign up×
Community /Pin to ProfileBookmark

How to add a fade effect to this script?

Copy linkTweet thisAlerts:
Feb 06.2010

Hi,

My first post on this forum! I’m still a beginner on javascript, so please keep it simple ?

I am trying to turn my ‘pageheader’ into a slide show. After literary working my through dozens of scripts, I still did not find the solution…

The problem is that I made my site with RapidWeaver. It’s template based, so it is complex to add anything (script, unordered list, etc) to the div I want to show the slide show in. There’s also text inside that div that should not be lost.

The only script I could find that works in this situation is [URL=”http://www.willmaster.com/library/features/background-image-slide-show.php”]this one[/URL]. I uploaded a working example [URL=”http://www.ella-zakynthos.nl/EN/temp/”]here[/URL] that also shows the script.

It’s a rather primitive solution to say the least. Can anyone tell me (a) if how to add a fade in/out effect to this script and (b) prevent the ugly ‘gaps’ when the next image is loading?

Any help will be highly appreciated.

El

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@justinbarneskinFeb 07.2010 — You can start by declaring your text, that you don't want lost, as a var.

Better yet, you can have multiple texts declared as Array elements.
Copy linkTweet thisAlerts:
@El_MourabbiauthorFeb 07.2010 — You can start by declaring your text, that you don't want lost, as a var.

Better yet, you can have multiple texts declared as Array elements.[/QUOTE]

Hi Justin,

Thanks for your reply! Unfortunately, I am just a beginner with JS, so it will take a while before I can turn this into working code ?

Any ideas about the fading? Please try to explain like you would to your 12 year old nice - that's exactly how I feel when it comes to JavaScript.

El
Copy linkTweet thisAlerts:
@justinbarneskinFeb 07.2010 — You could be happy only to get your fade working with IE and Firefox. You'd need to have other other browsers installed to check them.

IE has a lot of code that is proprietary. My guess is that they think every project is local or intranet. Ignoring Internet, stuck in the not distant ancient past where hope & prayer will keep paper printers up and running.

Firefox is closer to adhering to standards agreed upon by a committee, which is better than floundering around without agreeing to anything. Still, that browser has suffered lately when they abandoned their theme of [B]K[/B]eep [B]I[/B]t [B]S[/B]imple, and have caved to popular demand to bloat it up with every imaginable gadget, add ons and plugins.

IE has a scriptable filter.

Firefox uses CSS opacity

Here I give a function example to set an image to 100% opacity

[code=html]function opaMax(){navigator.appName!='Microsoft Internet Explorer' ? document.images[1].style.opacity=1 : document.images[1].filters.item(0).opacity=100}
[/code]
×

Success!

Help @El_Mourabbi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...