trying to understand this better
is the this in question referring to the “div” inside the wrapper?
I was trying to reproduce this.
but even though i have a wrap element with a width:100%; the bouncing divs vanish to the right and even thogh the scroll bars slowly mosie on back left and up i no longer see the contained divs
Thx
D
ps & i have replaced the li elements w/div . which works when i run it in the fiddle
Here is how it’s called:
$('#wrapper li').bounce({
'speed': 7
});
The this keyword will be referring to the #wrapper li selector.
Thx Paul why it is not working for me.will try to do a codepen tomorrow w/what i am trying to do & post it there
thx
D
The jsfiddle seems to work for me. Is there something about it that’s not working for you? Or is it other changes that you are making to it that you are wanting assistance with. If so, what details can we get about those changes that you’re making?
The fiddle works fine. I found it on stack. I changed to use div rather than li. it works w/in the fiddle. but when i tried to add it to a header to bounce around some logos it acts way horribly.
Will try to reproduce it tomorrow it is on my other laptop.
thanks Paul.
All right this is what i am looking at.
http://codepen.io/pdxSherpa/pen/azjJJB
the blue round divs are not contained w/in the parent div and create issues w/the rest of the page.
thx
D
The problem that’s occuring is that the position is being set as an update to the $e CSS style, but the offset that’s read from it is a different value than expected, being higher than the value that was set.
We can see this difference by placing the following at the start of the move function:
console.log($e.css('left'), $e.offset().left);
On the jsfiddle code the values will be the same, whereas with your code the values are different.
How to deal with this issue though is another story. It will be most easily done by ensuring that the divs have a zero offset, which I think is most easily achieved via CSS.
thx Paul i don’t think i ever applied an offset trough css though.
how do you do that? I see in css3 there is an outline-offset. but that seems unrelated.
D
been going over this code, can i get onr more hint or two?
Usually offset refers to the top/right/bottom/left properties in CSS.
I don’t know enough Javascript to tell what it’s doing though but generally offsets are that.
Thanks Ryan. actually i did know about the offset & made a point of looking up other terms on the jquery ui. Also tried to change variables and made sure i read over the code several times to understand the math.
Still no dice.
So hopefully someone who is better at js than the both of us will look up this post. meanwhile i 'll go back to trying…
thx
D
It isn’t working like the demo because of the position:relative you added to the parent which messes up the positioning of the list element.
If you remove margin:auto and position:relative it will work like your original demo. The original demo does not work on a centred element either.
You would need to work out the position from the containing div rather than the edge of the viewport I think,
This seems to work but Paul (or someone who knows what they are doing) can tidy it up:)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html.body {
padding: 0;
margin: 0;
}
#wrapper {
width:1200px;
background:#ddd;
margin:0 auto;
}
#wrap {
width:1000px;
height: 300px;
border: 1px solid red;
margin:0 auto;
}
#wrap ul {
list-style-type:none;
width:1000px;
height: 300px;
}
#wrap ul li {
width:1000px;
position: absolute;
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color:orange;
line-height: 60px;
}
header {
width:100%;
height:300px;
}
.one {
width:70%;
pading:50px;
margin:20px auto;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<div id="wrapper">
<header>
<div id="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</header>
<div class="one"> Duo Reges: constructio interrete. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Non quam nostram quidem, inquit Pomponius iocans; Hic nihil fuit, quod quaereremus. Si autem id non concedatur, non continuo vita beata tollitur.
An hoc usque quaque, aliter in vita?
Primum in nostrane potestate est, quid meminerimus?
Quid ergo hoc loco intellegit honestum? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. </div>
<div class="one"> Duo Reges: constructio interrete. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Non quam nostram quidem, inquit Pomponius iocans; Hic nihil fuit, quod quaereremus. Si autem id non concedatur, non continuo vita beata tollitur.
An hoc usque quaque, aliter in vita?
Primum in nostrane potestate est, quid meminerimus?
Quid ergo hoc loco intellegit honestum? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. </div>
<div class="clear"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.bounce = function(options) {
var settings = $.extend({
speed: 5
}, options);
return $(this).each(function() {
var $this = $(this),
$parent = $this.parent(),
height = $parent.height(),
width = $parent.width(),
top = Math.floor(Math.random() * (height / 2)) + height / 4,
left = Math.floor(Math.random() * (width / 2)) + width / 4 ,
vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);
// place initialy in a random location
$this.css({
'top': top,
'left': left
}).data('vector', {
'x': vectorX,
'y': vectorY
});
var move = function($e) {
var offset = $e.offset() ,
width = $e.width(),
height = $e.height(),
vector = $e.data('vector'),
$parent = $e.parent();
if (offset.left <= $parent.offset().left && vector.x < 0) {
vector.x = -1 * vector.x;
}
if ((offset.left + width - $parent.offset().left) >= $parent.width()) {
vector.x = -1 * vector.x;
}
if (offset.top <= $parent.offset().top -15 && vector.y < 0) {
vector.y = -1 * vector.y;
}
if ((offset.top + height + 15 - $parent.offset().top ) >= $parent.height()) {
vector.y = -1 * vector.y;
}
$e.css({
'top': offset.top + vector.y + 'px',
'left': offset.left + vector.x + 'px'
}).data('vector', {
'x': vector.x,
'y': vector.y
});
setTimeout(function() {
move($e);
}, 50);
};
move($this);
});
};
$(function() {
$('#wrap ul li').bounce({
'speed': 5
});
});
</script>
</body>
</html>
Thank you will try it out. right now got it to almost work. & got a mouse enter mouse leave function to fix too. when I enter it freezes everything not just of the floating about divs.
thx
D
All right slight improvement. but Can’t figure out why the animation wont resume on mouseleave and would love to know how i can make it smoother.
Then i want to add collision so they can bounce off each other.
http://codepen.io/pdxSherpa/pen/azjJJB
You’re going to want quite a different structure when it comes to interaction and possible game development.
The following article takes you through how to implement circle to circle collisions/bouncing of each other.
Thank you, seems very involved. will have to take some time reading it
D
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.