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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Limit the CSS divs while loading?

    Hi all,

    A friend asked me to help with the banner.
    It is using BXSlider, and all banner slides are <ul>

    http://1.gwinnettehc.net/index.php

    If you refresh the website a few times, you will notice that on the first page, the banner loads all slides, pushing the website down by like 1500px, and than it loads it restricts it.

    I'm trying to get rid of that loading part where it pushes the website down, basically where it loads all banner slides at once.

    Can i do that with CSS? can I automatically limit the banner div?
    It looks bad when it does that

    Help!

  • #2
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,
    use javascript and jquerry to limit the size of div at the time of loading using onload function

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by santhoshj400 View Post
    Hi,
    use javascript and jquerry to limit the size of div at the time of loading using onload function
    Hi,

    Thank you for your reply. If that will work, it'd be perfect.

    Can I ask how to add that?

    I've tried searching for some jq onload examples, but i can find anything that can help me figure out to make the div a fixed height...

    could you help me with the code please?

    thank you

  • #4
    New Coder
    Join Date
    Jul 2009
    Location
    Evansville, Indiana
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nickbunyun View Post
    could you help me with the code please?

    thank you
    Place This In The <head></head>
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //#divID is your ad div's ID, 100 is the height of the div
            $("#divID").css("height", "100");
        });
    </script>
    Place (or edit current div) where your ad's div is, we just need the div to have an id that matches the one up there.
    Code:
    <div id="divID">This is your ad's div!</div>

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey chuffman, thank you for the reply.

    I have added that code, replaced the div id, i added a div around the whole banner called it
    "bannerlimit"

    it still loads all the ul slides, than it puts it in format.

    I have added your code above all other scripts, still nothing.

    does it need to have something along the lines of "on load" ?


    EDIT:
    I added a "overflow:hidden" and now it loads just fine.
    only works thru the JQ tho..
    Thanks so much guys, God bless!
    Last edited by nickbunyun; 10-30-2010 at 05:42 PM.

  • #6
    New Coder
    Join Date
    Jul 2009
    Location
    Evansville, Indiana
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nickbunyun View Post
    Hey chuffman, thank you for the reply.

    I have added that code, replaced the div id, i added a div around the whole banner called it
    "bannerlimit"

    it still loads all the ul slides, than it puts it in format.

    I have added your code above all other scripts, still nothing.

    does it need to have something along the lines of "on load" ?


    EDIT:
    I added a "overflow:hidden" and now it loads just fine.
    only works thru the JQ tho..
    Thanks so much guys, God bless!
    the $(document).ready() is jQuery's onLoad. If the user can't user jQuery than they can't use Javascript either so OnLoad won't matter.


  •  

    Posting Permissions

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