Solved

Animating div with background image off screen jquery

Posted on 2014-03-06
13
576 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
 
LVL 58

Expert Comment

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

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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 51

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 51

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 51

Expert Comment

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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, dropdown 4 38
Mobile version of website does not react 6 56
Creating a slider 12 35
Urgent Help with HTML CSS Positioning 9 22
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to dynamically set the form action using jQuery.

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now