Solved

Animating div with background image off screen jquery

Posted on 2014-03-06
13
583 Views
Last Modified: 2014-03-07
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?
0
Comment
Question by:flynny
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 39909253
try adding overflow:hidden; to the body css
0
 
LVL 58

Expert Comment

by:Gary
ID: 39909404
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 39909504
I assume ballon1 is the div in question ?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 58

Expert Comment

by:Gary
ID: 39909511
Assumption is the mother of all ... (especially on EE)
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39909540
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
 

Author Comment

by:flynny
ID: 39909834
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910046
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39910126
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
 

Author Comment

by:flynny
ID: 39912344
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
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39912395
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
 

Author Comment

by:flynny
ID: 39912483
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
 

Author Closing Comment

by:flynny
ID: 39912496
Fantastic again thank you.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39912743
You are welcome - thanks for the points.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question