My goal is to have circles sliding across the screen, both vertically and horizontally. I want the horizontal tubes to be positioned 'randomly' without the need for scrolling, but at times they exceed the area causing the page to increase in size, requiring scrolling downwards.
Check out my Meteor/Jquery/HTML/CSS code below:
if (Meteor.isClient) {
Session.setDefault('counter', 0);
Template.hello.helpers({});
Template.hello.events({})
function getColor(){return "rgb("+Math.floor(Math.random() * 256)+","+ Math.floor(Math.random() * 256)+","+ Math.floor(Math.random() * 256)+")"; }
var allVars = -1;
function doIT()
{
setInterval(function() {
allVars++;
var holdName = "Circle"+ allVars;
var i =holdName;
$div = $("<p>", {id:i, name:"circle"});
if(allVars%2!=0){
var number = Math.floor(Math.random() * ($( "#HOLD" ).width()));
$div.css({top: -100, position:'absolute',"background-color":getColor(),width:(10+ Math.floor(Math.random() * 100)});
$div.animate({'marginLeft':number});
$("#HOLD").append($div);
var a = $( window ).height()+100;
$("#"+i).animate({height: a},5000);
}
else{
$div.css({left: -150, position:'absolute',"background-color":getColor(),height:(10+ Math.floor(Math.random() * 100)});
var n = $("#HOLD").css('width').indexOf("p");
var it = $("#HOLD").css('width').substring(0,n);
var number = Math.floor(Math.random() * (parseInt(it)));
$("#HOLD").append($div);
$("p").text(number);
$div.animate({'top':number});
var a = $( "#HOLD" ).width()+200;
$("#"+i).animate({width: a},6000);
}
}, 4000);
}
Meteor.startup(function () {
$("#HOLD").css({width:'100vw', height:'100vh'});
alert($("#HOLD").css('width'));
doIT();});
}
if (Meteor.isServer) {
}
[name="circle"] {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: red;
text-align: center;
}
body
{
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Circles</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<div id="HOLD">
<p> _ </p>
<iframe width="0" height="315" src="https://www.youtube.com/embed/B4qdpiad_Q0?&autoplay=1&loop=1&playlist=B4qdpiad_Q0" frameborder="0" allowfullscreen></iframe>
</div>
</template>