Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member Azmisov's Avatar
    Join Date
    Feb 2010
    Location
    Iceland
    Posts
    6
    Member #
    21257
    This is a problem I had that some of you guys may have encountered before. The solution is quite simple, so, I hope it helps someone.

    I have a two column layout inside of a div. There is a side panel that is floating left and a right 'information bar' that is floating right. At the bottom, I have a div with clear:both set. It renders correctly when first displayed.

    However, the side bar has ajax links that change information in the information bar. When new content is loaded that has a larger height than the previous, the browser doesn't re-refresh the css display for the floating boxes. Thus, the container div remains the initial height.

    Code Example:
    HTML Code:
    //Page container
    <div style="height:500px;">
    
    <div style="float:left;">
    <a href="javascript:request('display_stuff.php','info','get','')>ajax link</a>
    </div>
    
    <div style="float:right;" id='info'>
    Information bar
    </div>
    
    <div style="clear:both;"></div>
    </div>
    In order to get the css to refresh as well, we need to put the clear:both div after our generated content. So, in display_stuff.php, it would generate something like this:

    HTML Code:
    <div style="float:right;" id='info'>
    NEW CONTENT STUFF
    </div>
    <div style="clear:both;"></div>
    </div>
    ...and we would have to fix our ajax request to post the content into a containing div (not the one that is floating right). The problem with this solution, is any background image will flash up for a brief moment, before aligning to the proper place. If anyone has a better solution or a layout that doesn't respond with the annoying background flash, I would love to know.

  2.  


Remove Ads

Posting Permissions

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

Search tags for this page

refresh css after ajax

,
reload css after ajax
Click on a term to search for related topics.
All times are GMT -6. The time now is 05:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com