Solved

Animating div with background image off screen jquery

Posted on 2014-03-06
13
587 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 58

Expert Comment

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

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 57

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 57

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 57

Expert Comment

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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make a span connected to the price so when qty changes so does pricing 11 43
boostsrap 6 39
How to size popup in jquery mobile 4 61
Natural height and jquery 6 40
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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