Results 1 to 2 of 2

Thread: strange js/css behaviour

  1. #1
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default strange js/css behaviour

    hey guys!

    i ran into a confusing problem, which i couldnt solve by myself.
    i have a jquery page transition effect, which looks like that:

    Code:
    $(window).load(function() {
    
        $("body").fadeIn(750);
     
        $(".menu a").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(750, redirectPage);      
        });
             
        function redirectPage() {
            window.location = linkLocation;
        }
    
    });
    then i add into my css:

    Code:
    body {
    display: none;
    }
    this thing is working well as it is, but then i noticed, after i activate this script, my shoutbox isnt working anymore.
    its also using jquery parts, but i couldnt find any problems in the development-tools/debugger of chrome.

    this is the part of the shutbox which wont display right: (it kinda shrinks to a pixel)

    Code:
    <div id="myshouts_shouts" class="theshouts" rel="1376130975" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 5px;">
    	<ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 5px; top: 0px;">
    			<li style="overflow: hidden; float: none; width: 0px;">
    				<div class="outershout">
    		<dl>			
    			<dt>Daniel</dt>
    			<!-- <dd class="icons"><a href="mailto:xxxxxx@xxxxxxxxxxxx" rel="nofollow"><img src="email.png" alt="email" /></a></dd> -->
    			<dd class="shout">
    			<div class="bottom">
    				blah blah blahhh :-)			</div>
    			</dd>
    			<dd class="date" style="">9 August 2013</dd>
    		</dl>
    		</div>
    	</li>
    		</ul>
    	</div>
    and the mysterious thing is, that if i remove the "display: none;" from the body style in the css, this part above gets displayed right.
    (but i need that for the jquery fade-effect to work)

    so anybody might have a clue why this happens?


    please share some thoughts, thanks! :-)
    Last edited by kobo1d; 08-10-2013 at 11:03 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Many scripts, jQuery or other libraries, or just plain javascript, will not initialize properly if the page elements they are creating and/or using are display none or within an element with display none. That's because elements like that have no dimensions or offsets. So they cannot be measured, sized or positioned accurately.

    So instead of:

    Code:
    body {
    display: none;
    }
    Use:

    Code:
    body {
    visibility: hidden;
    }
    But then you will have to hide it and make it visible right before fading it in here:

    Code:
    $(window).load(function() {
    
        $("body").fadeIn(750);
     
        $(".menu a").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(750, redirectPage);      
        });
             
        function redirectPage() {
            window.location = linkLocation;
        }
    
    });
    Which should become (the red part should now be):

    Code:
        $("body").hide().css({visibility: 'visible'}).fadeIn(750);
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    There could also be other problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 0
    Last Post: 07-25-2011, 10:31 AM
  2. Strange IE/OPERA behaviour
    By kobo1d in forum JavaScript
    Replies: 2
    Last Post: 05-16-2010, 03:27 PM
  3. ddlevelsmenu + FF 3.5 = strange behaviour
    By festafotra in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-26-2009, 12:45 PM
  4. Resolved MooScrollbar strange float objects behaviour in IE
    By interrupter in forum JavaScript
    Replies: 1
    Last Post: 02-06-2009, 03:22 PM
  5. Strange Behaviour with Popup information Box
    By Trevzilla in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-10-2008, 02:25 PM

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
  •