SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery - Effect Issue

    Hi,

    I have one issue in jquery.

    My requirement is show or hide the div when i click the link. That div is show to slowly.

    when i define the properties of position:relative in the cbox class name. afterthat i check in IE6 that slow animation is not working.

    I have given the html code is below, Please check FF and IE6

    In FF is working good. IE6 is not working

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javaScript" src="jquery-1.3.2.js"></script>
    <script language="JavaScript">
    <!--
    function showDiv(divid){
    	$("#"+divid).show("slow");
    }
    function hideDiv(divid){
    	$("#"+divid).hide('slow');
    }
    //-->
    </script>
    <style type="text/css">
    .cbox{position:relative;width:779px;background:#000;padding:10px;color:#fff;border:1px solid #FFCA3A;}
    .cbox a{color:#fff;}
    </style>
    </head>
     
    <body>
    <a href="javascript:showDiv('screen')">show</a>
    	<div id="screen" style="display:none">
    		<div class="cbox">
    			<p style="text-align:right"><a href="javascript:hideDiv('screen')">Close</a></p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ipsum magna. Cras non justo eget neque tincidunt fermentum a ut dui. Nulla at est ligula, quis elementum enim. Aliquam in volutpat est. Duis porttitor imperdiet arcu, quis tristique dui commodo vitae. In consequat euismod lorem, nec mattis est vulputate non. Suspendisse vel quam quis augue pellentesque porta sed non leo. Suspendisse potenti. Duis sed nunc est. Nam mauris nulla, pulvinar vel suscipit imperdiet, consectetur quis elit. Fusce eleifend scelerisque diam, a interdum lorem volutpat et. Donec aliquet, urna vitae facilisis rhoncus, tortor diam ornare mi, mattis convallis sem metus non arcu. Integer ac nisl libero. Nunc id euismod arcu. Etiam tempor posuere sapien, eget feugiat massa interdum tincidunt. </p>
     
    			 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet ipsum magna. Cras non justo eget neque tincidunt fermentum a ut dui. Nulla at est ligula, quis elementum enim. Aliquam in volutpat est. Duis porttitor imperdiet arcu, quis tristique dui commodo vitae. In consequat euismod lorem, nec mattis est vulputate non. Suspendisse vel quam quis augue pellentesque porta sed non leo. Suspendisse potenti. Duis sed nunc est. Nam mauris nulla, pulvinar vel suscipit imperdiet, consectetur quis elit. Fusce eleifend scelerisque diam, a interdum lorem volutpat et. Donec aliquet, urna vitae facilisis rhoncus, tortor diam ornare mi, mattis convallis sem metus non arcu. Integer ac nisl libero. Nunc id euismod arcu. Etiam tempor posuere sapien, eget feugiat massa interdum tincidunt. </p>
    		</div>
    	</div>
    </body>
    </html>
    Cheers,
    Dinesh

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to be related, as you say, to the application of position:relative to the inner div with class cbox. In IE6 and 7, there is no smooth animation with either the show() or hide(); it is abrupt. But it is smooth with IE8 and Firefox3.

    It might just be a hasLayout-related issue, affecting only IE6 & IE7. I found if position:relative is instead applied to the outer #screen div, the animation is smooth in all these browsers. Or if for some reason you didn't want to do that with the #screen div, perhaps insert another div in between and apply position:relative to that one.


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
  •