Animating div with background image off screen jquery

Hi all,

I am programatically adding a div with a background image to the bottom of the document (i.e. just  before the </body>. )

I am then animating the div up and off the screen where it is deleted.

However when I append the div to the bottom of the document it is extending the body of the document to fit the add div into it.

body{ 
    background: url('../images/bg-clouds.png') rgba(192,222,237,1) no-repeat;
    font-family: Arial;	
    font-size: 14pt; 
    margin: 0 auto;
    padding: 20px 0 0 0;
    animation: animateClouds 40s linear infinite;
}

.balloon1 {
    background:url(../images/balloon-blue.png);
    background-repeat:no-repeat;
    background-position:top left;
    width:100px;
    height:250px;
    position:absolute;
    z-index:-2;
}

Open in new window


Any ideas?
flynnyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

aboo_sCommented:
try adding overflow:hidden; to the body css
0
GaryCommented:
From the CSS you have there there is no CSS for a div at the bottom of the page.
We will need to see the HTML and probably more CSS.
0
aboo_sCommented:
I assume ballon1 is the div in question ?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
Assumption is the mother of all ... (especially on EE)
0
Julian HansenCommented:
You need to make body overflow: hidden

See this article for a description on how to do this

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_13057-Simple-animation-using-JQuery.html
0
flynnyAuthor Commented:
Hi Julian,

Thanks for replying.

The issue is based on the article you wrote from my previous question :)

Basically I do exactly what you have done in the article and it is working nicely.

I need to overcome adding overflow:hidden to the body as this will just cut off any of the site which extends beyond the bottom of the page.

I have changed height to be that of the document  in the balloon.js as follows;

startheight = $(document).height() + 250  ;

Open in new window


I suppose the question is how do I use the overflow:hidden but somehow retain the extensibility of the body??
0
GaryCommented:
Without seeing the code.
Add position:relative to your BODY css
To the absolute positioned element add bottom:0

This will not affect the normal body height
0
Julian HansenCommented:
Well then you can add a container to your body that is the height of the screen and put the overflow: hidden on that.

The problem is that to make the balloons appear from the bottom you need to start them below the bottom of the container. So try this
<body>
<div id="ballonContainer"><div>

Open in new window


Now style the balloon container to be the height and width of the screen and overflow hidden and then set z-index to 1 to put it the back of your page.
#bodyContainer {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

Open in new window

Now instead of adding the balloon div to the body - add it to the balloon container.
So your JQuery would be
$('#bodyContainer').append

Open in new window

instead of
$('#body').append

Open in new window

If you don't succeed - post back and I will see if I can knock something together.
0
flynnyAuthor Commented:
Hi Julian,

Thanks for this.

I had already tried ammending the container div, but it seems to be enlarging it (even with overflow:hidden?)

basically i have the following;

/*BALLOON CSS*/

#balloon-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.balloon {
    width:100px;
    height:250px;
    position:absolute;
    overflow:hidden;
    z-index:-2;
}

.balloon2 {
    background:url(../images/balloon-green.png);
    background-repeat:no-repeat;
    background-position:top left;
}

.balloon3 {
    background:url(../images/balloon-orange.png);
    background-repeat:no-repeat;
    background-position:top left;
}

.balloon4 {
    background:url(../images/balloon-purple.png);
    background-repeat:no-repeat;
    background-position:top left;
}

.balloon5 {
    background:url(../images/balloon-red.png);
    background-repeat:no-repeat;
    background-position:top left;
}

.balloon6 {
    background:url(../images/balloon-yellow.png);
    background-repeat:no-repeat;
    background-position:top left;
}

Open in new window


var startheight = 0;
var startwidth = 0;
$(function () {
    startheight = $(document).height() + 340 ;
    startwidth = $(window).width() - 100;
    setTimeout('balloon()', 700);
});

function randomMinMax(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function balloon() {
    var timeout = randomMinMax(250, 750);
    var animationspeed = randomMinMax(5000, 20000);
    var leftspace = randomMinMax(100, startwidth);
    var pos = '0px -' + (randomMinMax(0, 4) * 100) + 'px';
    var style = "balloon balloon" + randomMinMax(1,6).toString();
  
    $('#balloon-container')
      .append(
        $('<div/>')
          .addClass(style)
          .css({ top: startheight + 'px', left: leftspace + 'px', backgroundPosition: 'top left' })
          .animate(
            { top: '-400px' },
            animationspeed,
            function () {
                $(this).remove();
            }
          )
      );

    setTimeout('balloon()', timeout);
}

Open in new window


<body>
    <div id="balloon-container"></div>

     <all th epage content>

</body>

Open in new window

0
Julian HansenCommented:
Try adding this to your #balloon-container
#balloon-container {
   width: 100%;
   height: 100%;
   overflow: hidden; 
   position: absolute; /* ADD THIS */
   top: 0;                    /* ADD THIS */
   left: 0;                    /* ADD THIS */
   z-index: 1;             /* ADD THIS */
}

Open in new window

Also consider using a sprite for the balloons - makes the solution more extensible and reduces the number of GET's on the images.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
flynnyAuthor Commented:
Perfect.

Just to add though the

height:100%;

Open in new window


will only give to the current browser size and not the document size to correct I added the following to the balloon.js;

$('#balloon-container').css("height", $(document).height());

Open in new window

0
flynnyAuthor Commented:
Fantastic again thank you.
0
Julian HansenCommented:
You are welcome - thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.