How do I make other browsers work with filter?

[1DMF]

Hi,

I've added a filter effect to a sponsor section to transition the images.

Only it doesn't work in FireFox/Opera

Warning: Error in parsing value for 'filter'. Declaration dropped.

Is there any way to use CSS and javascript to do the same in browsers other than IE?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[feherke]

Hi

If you are talking about the filter I think to, then it is a Microsoft invention supported only in Explorer.

No idea what kind of effect are you trying to produce, but take a look at CSS3, please!. Maybe they know the CSS3 equivalent of what you want.

Feherke.

http://free.rootshell.be/~feherke/

 

[1DMF]

I did look at CSS3 and it seems CSS3 supports filter, or that's what I was reading said.

Which is why I was surprised firefox didn't work as W3SChools shows filter in action?

Bit confused over this, but I'll check the link to see if I can find something cross browser compatible.

If not FF users will just have to miss out on the cool transition effect. Most of our users use IE, it's only a couple out of hundereds that don't.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[Vragabond]

I suggest you only fully trust information you find on the official W3 website (please note that W3Schools is not part of the W3 consortium). With that said, you would learn that filter is a proprietary Microsoft hack to inject some sort of scripting language into CSS. It is only supported by IE. Many effects that can be achieved via filter, now also exist within CSS3 specification (using different syntax), which a lot of modern browsers already partially support.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[1DMF]

Really Vragabond, I never realised W3Schools wasn't part of W3, that's a bit miss-leading!

I'll have to dig a bit deeper in CSS3 and see if I can find a cross browser compatible way of using CSS to perform img transistions.

The way W3Schools read was it seemed filter was being adopted by CSS3, or did I read that wrong?

I can't make head nor tail of that CSS3 Please site, what's it meant to be showing me?

Vragabond, where would you recommend I checkout to learn more about CSS3 cross browser compatible image transitions?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[ChrisHunt]

As stated, filter is a Microsoft thing.

You could probably get the same effect (whatever it is) using Javascript, with more chance of it working cross-browser.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

I am using javascript?

function dissolve_IMG(id){

	    img_index[id]++;
        if(img_index[id] == sponsorImages.length){
            img_index[id] = 0;
        }                
		if(document.getElementById('sponsorIMG'+id).filters){
		    document.getElementById('sponsorIMG'+id).filters[0].stop();        
	        document.getElementById('sponsorIMG'+id).filters[0].apply();
        }
        	        
	    document.getElementById('sponsorIMG'+id).src = sponsorImages[img]index[id[/img]].src;	        	        
	    if(document.getElementById('sponsorIMG'+id).filters){
		    document.getElementById('sponsorIMG'+id).filters[0].play();
        }		    
		img_tout[id] = setTimeout("dissolve_IMG(" + id + ")",swapSpeed);			                    
    
}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[ca8msm]

I'm confused, I thought you meant an IE filter within css rather than javascript e.g.

style="filter:alpha(opacity=40)"

If you want to do this purely in javascript, using JQuery would make this very easy for you (and maybe it would be better to start a thread in that forum explaining exactly what transitioning you want and whether you want any additional effects).


Mark,

Darlington Web Design[tab]|[tab]Experts, Information, Ideas & Knowledge[tab]|[tab]ASP.NET Tips & Tricks

 

[1DMF]

You use both to create the effect....

.imgTrans{ 
    filter:revealTrans(duration=2,transition=3); 
    }

though I'm using a different transition now as 12 is dissolve!

I'll head over to the JS forum and see if they can unravel all this for me.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[ChrisHunt]

You still haven't said what effect you're trying to achieve, but I'm going to guess that you want to display a series of images, with each one fading into the next.

In which case, I suggest you try this script instead:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

There is something seriously wrong with that script, just look at the scroll bar next to the script code frame?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[ChrisHunt]

I'm looking at it. It looks like a scroll bar to me. What do you think is wrong with it?

I've go it working on one of my sites, at

http://www.leicesteryha.org.uk

- it's pretty nifty.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

Hmm, odd, in my browser (IE8) it's jumping all over the place.

For the time being i'm happy with CSS3:Filter , I've been put on something else now. (always being yanked from one project o another) and as 99% of our members use IE, it's not a big issue.

When I get the chance to re-develop the spash screen into a proper application rather than a nasty bodge job, i'll check out your site again and see if i can get it to work.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts