Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts

    Javascript Not Working In FF

    Hey guys I have the following JS file:

    Code:
    function fade_In(path, id)
    {
    	var target = document.getElementById(id);
    	if (target.filters){
    	target.style.filter="blendTrans(duration=0.25)";
        target.filters.blendTrans(duration=0.25).Apply();
        target.filters.blendTrans.Play();
    	target.style.backgroundImage = "url("+path+")";}
    }
    
    function fade_Out(path, id)
    {
    	var target = document.getElementById(id);
    	if (target.filters){
    	target.style.filter="blendTrans(duration=0.25)";
        target.filters.blendTrans(duration=0.25).Apply();
        target.filters.blendTrans.Play();
    	target.style.backgroundImage = "url("+path+")";}
    }
    Which is drawn in to an HTML document via the link in the head. The actualy javascript creates an awesome rollover effect when applied to links. The code for a certain link would look like:

    Code:
    <a id="freelisting" onMouseOver="fade_In('resources/images/free_listing_button_over.jpg', this.id)" 
    onMouseOut="fade_Out('resources/images/free_listing_button.jpg', this.id)" href="sign_up.php"></a>
    Now this works really well in IE, but for some reason Firefox simply displays it as a normal rollover. Am I missing something or is there some way I can get it to work in FF as well. Maybe a different method for creating fading rollovers? Bear in mind that I'm not great at JS!

    One more question... is there a way I can make it so that when you roll off the button it doesn't skip to the end of the 'onLoad' before fading back out again?

    Any help would be greatly appreciated!

    for an example head to http://pdt.ufindus.com/privateairmanagement and test in both browsers!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When doing fade ins/outs you have to use two different methods for the several browsers. Basically, blendTrans only works for IE, and FF recognizes the CSS3 opacity property. All you would need to do is simply add one line of code wherever you use blendTrans. This page has everything you need to know about this.

    http://www.brainerror.net/scripts_js_blendtrans.php
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Ah cool, thank you very much. I'll give it a go and see what I can come up with! Seems like a simple enough solution, although will need a bit of tweaking in the old code
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Right, I implemented some additions to the code in an attempt to allow firefox to view the rollovers. However, I'm having difficulty because the code on the site you directed me to allows for great opacity effects, but is not very compatible with image swaps, which is what I really need it to do. Plus if you look at the site you gave me, his version of the image swap did not look right in Firefox either because the image flashes before it fades in... any fixes for this would be greatly appreciated!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •