SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - fade in and fade out

    Hi I need help with a jquery fade in and fadeout script. The following works only on safari and it does not work on Firefox, IE or opera.

    Code JavaScript:
    function info(action)
    {
     
    	if (action == "view")
    	{
     
     
    		$(document).ready(function() { $('div.infoBox').fadeIn('slow'); });
     
    	}
    	else if (action == "hide")
    	{
     
    		$(document).ready(function() { $('div.infoBox').fadeOut('hide'); });
     
    	}
     
    }

    Any help?

  2. #2
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the above to the following, but now it works on safari, firefox, and opera. However in IE 7 the page goes blank when executed info('view') function.

    Code JavaScript:
    function info(action)
    {
     
    	if (action == "view")
    	{
     
     
    		$('div.infoBox').fadeIn('slow');
     
    	}
    	else if (action == "hide")
    	{
     
    		$('div.infoBox').fadeOut('hide');
     
    	}
     
    }
    Last edited by cssExp; Aug 20, 2008 at 00:05.

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Run this code in IE
    Code:
    <HTML>
     <HEAD>
      <TITLE>Test</TITLE>
    <script src="path_to_jquery"></script> 
     </HEAD>
     <script>
    function info(action){if(action == "view"){$('div.infoBox').fadeIn('slow');}  else if (action == "hide"){$('div.infoBox').fadeOut('hide');}}
     </script>
     <BODY>
    <div class="infoBox">Bollysite</div>
    <input type=button name=a value=show onclick="JavaScript:info('view')">
    <input type=button name=b value=hide onclick="JavaScript:info('hide')">
     </BODY>
    </HTML>

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the function is exactly same as mine, umms how come it makes a difference?

    It works fine on all browsers, odd. Perhaps the problem is because I'm using it within a thickbox iframe window? then, how does it only affect IE?

    EDIT

    I directly tested the page within the iframe on IE and it works. but it has to be inside the thickbox iframe, its a login page ummm

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone know what could be wrong?

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're passing "hide" as a parameter into the fadeOut function... What is that??

    AFAIK you can only pass in 'normal','slow','fast' or an integer.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure, I saw many others using "hide" for fade out. However, this is not related to my problem. My problem occurs when i use $('div.infoBox').fadeIn('slow'); in internet explorer within a thickbox iframe however that page in the iframe, when directly viewed on IE, the problem does not occur. It fades in and fades out as expected.

    What i'm thinking is that thickbox iframe is some what interfereing with fadein on IE 7.


Bookmarks

Posting Permissions

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