positioning and looping an objects in random order [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have created 3 balls and I want to run a loop that animates them by doing the following:
randomly positions them
give them a starting point
give them a duration
Here is the fiddle link:
http://jsfiddle.net/X3SVp/1/
Javascript
function flipper(){
$('#ball_1').animate({
"left": '-90',
}, function(){
$('#ball_1').animate({
"left": '200',
}, flipper());
});
}
flipper();
HTML
<div id="ball_1">
</div>
<div id="ball_2">
</div>
<div id="ball_3">
</div>
CSS
#ball_1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
left: 200px;
position: absolute;
}
#ball_2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
}
#ball_3{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
}

What about something like this:
JavaScript
function flipper() {
$('.ball').each(function () {
var rndm = Math.floor(Math.random() * 201);
$(this).animate({
"left": '-' + rndm
}, function () {
$('.ball').animate({
"left": rndm
}, flipper());
});
});
}
flipper();
HTML
<div id="ball_1" class="ball"></div>
<div id="ball_2" class="ball"></div>
<div id="ball_3" class="ball"></div>
CSS
#ball_1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
left: 200px;
position: relative;
}
#ball_2 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
position: relative;
}
#ball_3 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
position: relative;
}
Fiddle here

As a point of guidance and without doing all the work for you.
Make a function which you call before flipper that sets each of the balls in a random x-y start position on the page. I recommend giving each ball the same class of ball so you can do something like this
`$.('.ball').each(function(index, ball){
//do something with ball
});`
For that you will need
http://api.jquery.com/each/
http://api.jquery.com/css/
and javascript math.random() http://www.w3schools.com/jsref/jsref_random.asp (perhaps not letting random be more than the dimensions of the visible page which you can get with $(document).height() and $(document).width())
Also not forgetting that they will perhaps need absolute CSS positioning depending on the use-case.
Then look at another function which you can loop in this case flipper which will loop through each() of the balls and animate a random direction for a random distance and perhaps back again depending on what you want.

Related

querySelectorAll not working for classes, but normal querySelector is just fine [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I have been making an advent calendar and want all doors to open on click.
I have the animation down and it works, but only if I use querySelector; querySelectorAll doesn't seem to work.
I've made three doors to test on and have yet to get them to all animate, as well as for the background to show for all of them (but that is a different topic).
I feel like the problem is somewhere in the way I've written the HTML, since the JS has worked previously.
I am fairly new at this and am hoping to do a calendar without utilizing grid or referencing others code.
Code Below
HTML
<div class="door-back">
<button class="door d25">25</button>
<button class="door d24">24</button>
<button class="door d23">23</button>
</div>
CSS (including the random positions I've made for the door locations)
.door-back {
position: relative;
height: 50px;
width: 50px;
border-radius: 50px;
background: hotpink;
margin: 50px;
}
.door {
position: absolute;
height: 50px;
width: 50px;
color: white;
border: 2px solid teal;
border-radius: 50px;
background: indianred;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.d25 {
top: 100px;
bottom: 100px;
left: 590px;
right: 5px;
}
.d24 {
top: 300px;
bottom: 500px;
left: 390px;
right: 50px;
}
.d23 {
top: 500px;
bottom: 100px;
left: 800px;
right: 600px;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
}
JavaScript
const door = document.querySelectorAll('.door')
door.addEventListener('click', toggleDoor)
function toggleDoor() {
door.classList.toggle('doorOpen')
}
Like I said above, querySelector('.door') works, but only for d25 as it's the first element of its kind. Door I need to make it an array? Perhaps I should be doing querySelectorAll("button")?
Any help and/or advice would be greatly appreciated! Thank you and hope you're staying safe out there!
querySelectorAll returns a NodeList, not an element. So you can't add event listener to it directly.
function toggleDoor(event) {
event.target.classList.toggle('doorOpen')
}
let doors = document.querySelectorAll('.door');
[...doors].forEach(door => {
door.addEventListener('click', toggleDoor)
})
querySelector works because it returns the first matched element.

MouseEvent.clientX and MouseEvent.clientY Unexpected Results With CSS Scale Transform

$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
I was just wondering why the scaled div returns x and y MouseEvent coordinates in the range from 0 to 150 instead of from 0 to 200? The scale property is set to 2, so I thought it would be the second range instead of the first. Could someone explain? Here's a link to the js fiddle page.
I noticed a lot of similar questions on Stackoverflow, so this might be a duplicate. However, I couldn't find anything that specifically asked this question about pixels, coordinates, and the scale transformation in CSS. I may have missed something, though...
Thanks!
because transform-origin is center by default so half the div is outside the screen from the top/left.
Either update the transform-origin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
transform-origin:0 0;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
Or add some margin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
margin:50px;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
The div is scaled relative to its center, so part of it ends up being off screen. (One way to notice this: add a border to the div and see that it doesn't go all the way around.)
Try using transform-origin: top left; on the div - I think that will do what you expect.

How to detect a page and modify a class based on it

I am creating a bar with 4 pieces to it. Each piece will lead to and be a different page. What I am wanting to do is if the user is on page A for example, I want the background for that service-specificBar-tab to be a certain color. For example sake, red. Then if the user is on B for the background of that service-specificBar-tab to be another different color, ie: purple.
So basically, how would I go about detecting which page the user is on and making the service-specificBar-tab be a certain color? OR is there a different way to do this without detecting a page?
#gray {
background: #f9f9f9;
width: 100%;
height: 700px;
position: relative;
}
#service-specificBar-container {
position: relative;
top: 300px;
width: 100%;
padding: 25px 0;
}
#service-specificBar {
width: 100%;
height: 100px;
border: 1px solid black;
}
.service-specificBar-tab {
width: 25%;
height: 100%;
display: inline-block;
margin: 0;
padding: 0px;
}
.service-specificBar-tab:nth-child(2) {
background: blue;
}
.service-specificBar-tab:nth-child(4) {
background: green;
}
<div id="gray">
<div id="service-specificBar-container">
<div id="service-specificBar"><div class="service-specificBar-tab">A
</div><div class="service-specificBar-tab">B
</div><div class="service-specificBar-tab">C
</div><div class="service-specificBar-tab">D
</div>
</div>
</div>
</div>
You can find the actual url with window.location.href, so then you just make a switch to change the color of a certain div. I would also recommend, although it's not necessary, to add an id to each service-specificBar-tab.
Example:
switch( window.location.href ){
case "http://example.com/myFirstPage":
$("#firstItemId").addClass("active");
break;
case "http://example.com/mySecondPage":
$("#secondItemId").addClass("active");
break;
}
And if you want it to be a different color for each active tab define it in your css
#firstItemId.active {
background-color: red;
/* active css */
}
If there is the possibility of arriving there with a hash on the url, you can remove it like this:
var url = window.location.href.split("#")[0];

Maximize Div without moving in DOM [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to maximize a div to whole windows width and height (or another parent div) without moving the element in the DOM. Is this even possible only with CSS?
<div id="parent1" class="fullwidth">
<div id="parent2" class="notfullwidth">
<div style="position:absolute">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
</div>
</div>
Yes, it could be achieved by positioning the #parent1 relatively and expanding the absolutely positioned grand child by setting its top, right, bottom and left properties to 0.
#parent1 {
position: relative;
background-color: gold;
}
#parent2 {
width: 70%;
margin: 0 auto;
min-height: 100px;
border: 1px solid gray;
}
.grand-child {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(255, 30, 0, .5);
}
<div id="parent1" class="fullwidth">
<div id="parent2" class="notfullwidth">
<div class="grand-child">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
</div>
</div>
If the parent doesn't have a relative position, then the child can be expand to full width/height relative to window.
#mycontent {
background-color: green;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}
if the parent1 has a relative position, the the child would expand to the parent max width & max height.
#parent1 {
position: relative;
width: 300px;
height: 300px;
}
#mycontent {
background-color: green;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}

jQuery Help - Appear underneath rather than on top

I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?
Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.
Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.

Categories