Solved

Animating div with background image off screen jquery

Posted on 2014-03-06
13
592 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

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

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 58

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 58

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 58

Expert Comment

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

630 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