Trying to move my div randomly around page. Currently new randomly generated div appears on new location on page as opposed to transitioning to new position (I want div to track across page instead of deleting itself and reappearing).
function randomdiv1 () {
var divnum = $('.random').length;
var random = $('.random');
var startleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
var starttop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
return [startleft, starttop];
}
function randomdiv2 () {
var divnum = $('.random').length;
var random = $('.random');
var endleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
var endtop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
return [endleft, endtop];
}
function randomdiv3 () {
var startdiv = randomdiv1 ();
var enddiv = randomdiv2 ();
$('.random').animate({
top: enddiv[1],
left: enddiv[0],
}, 2000, 'swing', randomdiv3);
}
randomdiv3 ();
.random {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="random"></div>
</body>
</html>
This can be achieved in a simple way by adding the following css property to .random:
transition: left 2s, top 2s;
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Example below:
https://jsfiddle.net/4r9xch2v/
Related
I have a few URLs that each show the status of some industrial equipment. I'm trying to create an HTML/Javascript solution that, on load, cycles through each of the websites at a set interval, with two buttons to stop the cycle (to take a closer look at something) and restart the cycle (either from the beginning or where it left off, I'm not picky). I'm REALLY rusty, but I got what I think is a good start. Unfortunately, it doesn't work. Here are the CSS and HTML:
html,
body {
height: 100vh;
width: 100vw;
}
#btStart {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 50px;
}
#btStop {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 120px;
}
#infoFrame {
width: 100%;
height: 100%;
}
.holder {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)";>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Before I added the buttons it would load, then 5 seconds later it would cycle correctly, and so on. Now it only shows the buttons. Looking at the requests, I believe what's happening in my CSS and structure is trash, and it's loading the appropriate URL, but not displaying. I should add, prior to the buttons I only had the iframe with the script in it as a proof of concept. I div'd it, added the stylesheet, and added the buttons, and now here we are.
This may be a rookie mistake, or something more complicated. I haven't done development in a long time, and I'm just trying to solve a little problem at work. If you could spare a minute, I'd be happy to know how to fix this, and also any feedback on what I could be doing better. I'd love to get back into doing more of this, so I'm interested to learn anything the community can share. I've searched the site and the internet, and I've found a couple of related solutions but nothing for this in particular.
Thanks!
EDIT:
In case it helps, below is the HTML before the buttons and stylesheet, which worked (it rotated between webpages every 7 seconds):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Info Cycle</title>
</head>
<body>
<iframe id="frame" src=""
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
"></iframe>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('frame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 7000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</body>
</html>
The iframe style was something I found in an old file I'd written (probably copied and pasted from Stack Overflow to just get a thing to work).
The problem here is having the script inside the iframe. If you move your script out of the iframe and put it under body or head then it will work.
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1) ? -1 : count;
return url;
}
function cycleTimer() {
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
u.innerHTML = '';
i.src = nextUrl();
i.onload = function () {
u.innerHTML = i.src;
}
}
</script>
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)" ;>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
I was trying to change the color of body section with the click of a button with id="btn". but when I launch the index.html the background color is not changing. if any one has the solution please i want the concept behind the solution.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="butn">
<button type="button" id="btn">Click to change baackground</button>
</div>
<style src="main.js"></style>
</body>
</html>
CSS :
body {
margin: 0;
height: 100%;
text-align: center;
background-color: white;
}
.butn {
margin-top: 15%;
display: inline-block;
}
button {
height: 5rem;
width: 15rem;
border: none;
border-radius: 0.5rem;
}
JS code:
var color = [
"AntiqueWhite",
"CadetBlue",
"BurlyWood",
"Crimson",
"DarkSlateBlue",
"LightGoldenRodYellow",
"LightCyan",
];
var randomNumber = Math.round(Math.random() * 6);
document.getElementById("btn").addEventListener("click", function () {
changeBackground();
});
function changeBackground() {
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}
Firstly, your js file should be in script tag and not in style tag.
Secondly, random number is getting generated only once when your js file loads, instead
move random number inside the changeBackground function, so that it can get a new number every time the button is clicked
As the randomNumber variable is outside the function, it only gets initialized once.
So you have to move the randomNumber to the function to generate random color every time you click on the button.
js
function changeBackground() {
var randomNumber = Math.round(Math.random() * 6);
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}
And while including js file, you should write in this manner
<script src="main.js"></script>
You must put var randomNumber = Math.round(Math.random() * 6); inside the function changeBackground, otherwise it will only get this number once. This way, it gets a new number each time this function is called.
function changeBackground() {
var randomNumber = Math.round(Math.random() * 6);
console.log(color[randomNumber]);
document.body.style.backgroundColor = color[randomNumber];
}
I tried searching for "file name changes to 0 in browser" both in Google and here, but got nowhere. This is a simple file which suddenly stopped opening. I can't even get at the inspector to troubleshoot it. Undo/redo history is lost, so that will not help. I'm guessing it's a simple mistake, but I have NEVER seen this before.
<!doctype html>
<html lang="en">
<head>
<title>JS Animated Navigation Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
<!--
var location = 0;
var bar = document.getElementById("bar1");
function myMove()
{
// if (id != 0) clearInterval(id);
location = -144;
// if (location != -144) return; // don't execute onmouseover while previous onmouseover is still running.
id = setInterval(move, 1);
}
function move()
{
location++;
bar.style.left = location + 'px';
if (location == 300)
{
clearInterval(id);
id = setInterval(moveback, 1);
}
}
function moveback()
{
location--;
bar.style.left = location + 'px';
if (location == -144)
{
clearInterval(id);
// id = setInterval(move, 1);
}
}
-->
</script>
<style>
#container
{
width: 600px;
height: 100px;
position: relative;
background: white;
}
#bar1
{
width: 150px;
height: 30px;
position: absolute;
left: -144px;
background-color: white;
}
</style>
</head>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate"><img src="imageGalleryBar.png" alt="Image Gallery" width="150" height="30" id="bar1" onmouseover="myMove()" /></div>
</div>
</body>
</html>
Thank you
You can't use the variable name location as it is a reserved word; what you're actually doing is setting the window.location variable to 0.
Rename it, or put it in a namespace or object.
I started designing my own site and followed a YouTube video tutorial on how to code Motion Parallax scrolling on Dreamweaver using JavaScript and CSS so I followed the video and did everything it told me to but my code is still not working?
https://www.youtube.com/watch?v=cF3oyFXjRWk
I feel like my JavaScript code is not linked or something because some of the syntax or variables that are highlighted in a specific color on the video are not highlighted for me. What could my problem be?
I put the JavaScript within the head tag as well... this is the .js code
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
This is all my code with the css as well....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image{
position: relative;
z-index: -1
}
#content{
height: 750px;
width: 100%;
margin-top: -10px;
background-color:#4dbbac;
position: relative;
z-index: 1;
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</head>
<body>
<img id = "background" src = "sky1.jpg" width = "100%" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
<div class = "main">
<div id = "container">
<div class = "header">
<div id = "content">
</div>
</div>
</div>
</div>
</body>
</html>
This is not looking quite charming:
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
Check if all resources are loaded. Right click and check element or inspect element in your browser. Make sure all resources are found and loaded.
First off, please don't yell at me for asking this question. I know there is already a million topics on this, and sadly I have read through them all and I STILL can't figure out what I am doing wrong.
I created just a simple site to try understand how this works so that I can implement it on a more complex site.
I am just using one of the many scripts I have found and tried. All of them didn't have any effect.
The HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> </title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(document).ready(function() {
var colordivs = $('#fade div');
$(document).scroll(function(e) {
var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;
if (scrollPercent > 0) {
if (scrollPercent < 33) {
var opacity = 1 - (scrollPercent / 33);
$(colordivs[0]).css('opacity', opacity);
}
else if (scrollPercent > 66) {
var opacity = 1 - (scrollPercent / 100);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', 0);
$(colordivs[2]).css('opacity', opacity);
}
else if (scrollPercent > 33) {
var opacity = 1 - (scrollPercent / 66);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', opacity);
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="fade">
</div>
</div>
</body>
</html>
The CSS file:
body {
background-color: #ffcc00;
}
.container {
height: 6000px;
width: 100%;
margin: 0 auto;
}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}
So I guess my first question is do I have everything? Am I missing a jquery script or something. and second does it matter where the css file is as along as its linked correctly in the html file? Like I said, I don't completely understand how the changing opacity works if it has anything to do with the css file.
I understand HTML and CSS completely and I understand what is going on in the script just fine, I just can't figure out why they aren't talking with each other and causing a change.
Thanks in advance for any guidance!
Change
var colordivs = $('#fade div');
to
var colordivs = $('#fade');