I need to program a html-based monitoring surface.
For the surface I need to code circles which move from x to y and only if number xy is greater than xy.
Hard to explain but actually similar like they have it on
https://www.solarweb.com
click "click to try the preview now" on the top, than click "view demo" and choose the first system "Fronius AT Sattledt Hybrid 2"
and see the animation above on the left side.
I´ve still been able to get a circle running from the beginning of a div to the end. but only 1 circle! is it possible to have more circles in a row doing the same?
Maybe anyone can help me :)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Bullet</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#energieFluss {
width: 900px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#bullet {
position: relative;
left: 50px;
top: 25px;
}
</style>
<body>
<div id="energieFluss" width="900px" height="500px" color="red">
<img id="bullet" src="ball-blau.png" height ="25" width= "25">
</div>
<script>
var Bullet = document.querySelector ("#bullet");
var currentPos = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function moveBullet () {
currentPos += 8;
Bullet.style.left = currentPos + "px";
if (Math.abs(currentPos) >= 900) {
currentPos = -50;
}
requestAnimationFrame(moveBullet);
}
moveBullet ();
</script>
</body>
I think what you'll want to do here is create your image elements on the fly and then animate them. You could also do other fancy things like render on a canvas or use a JavaScript rendering library to do it more efficiently.
To create the elements on the fly, do something like this:
var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)
Post thought:
You could just statically define your image elements and animate multiple elements. If you already know how to animate one element, then you can apply that same knowledge to multiple.
Related
I am testing a page on an IPad (IOS 14.3) in portrait mode . (see code below)
I am outputting the touched Y-value of the screen.
When I tap the screen near the top the output is near 0 (depending on the thickness of finger).
When I tap the screen near the bottom the output is near 1000.
However when I swipe vertically from the top to bottom the values start from 0 but when I reach the bottom with my finger it stops near 600.
The same issue in the other directory, when I start at the bottom is shows a value around 1000 and when it reaches the top is stops around 300.
It almost seems there are missing 300px in each (vertical) direction.
Note: the X-value (horizontal swipes) is accurate, hence I've excluded it in this example. Also on Android the output from the console.log seems fine.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, user-scalable=yes">
<style>
body,
html {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding 0;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div style='text-align:center;font-size:25px;width:100px;border:1px solid blue;margin:auto' id='feedback'>Hello</div>
</body>
</html>
<script>
var func = function (e) {
var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];
document.getElementById('feedback').textContent = 'top:'+touch.pageY;
};
document.body.addEventListener('touchstart', func);
document.body.addEventListener('touchmove', func);
document.body.addEventListener('touchend', func);
</script>
What is the reason the with swipping vertically I am getting different results than when I touch the screen?
It was solved by changing
document.getElementById('feedback').textContent = 'top:'+touch.pageY;
into
document.getElementById('feedback').textContent =
'top:'+touch.clientY;
Although I don't quite see why these would differ in this case.
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
}
.lightpage {
background-color: #fcfbd1;
}
.darkpage {
background-color: red;
}
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages() {
if(currentPage === 1) {
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
} else if(currentPage === 2) {
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
}
}
</script>
</body>
</html>
Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
I basically want the browser to trigger a function when a section touches the top of the viewport as the user scrolls and I'm not really sure how to do this with Vanilla JS.
I've found some jQuery alternatives, but I'm just trying to figure out how Javascript works at the moment, so I'm not exactly sure where to begin or what to google for that matter.
The following example creates a page with a single div inside.
The scroll event handler uses Element.getBoundingClientRect() in order to get the div's position relative to the viewport and logs a msg to the console when the div is at or above the top edge of the viewport.
var handlerFired;
window.addEventListener('scroll', function(e){
var containerTop = document.querySelector('.container').getBoundingClientRect().top;
if (containerTop <= 0) {
if (!handlerFired) {
handlerFired = 1;
console.log('container at top of viewport or above');
}
}
if (containerTop > 0) {
handlerFired = 0;
}
});
body{
height:2000px;
}
.container{
width:300px;
height:200px;
border:5px solid red;
position: absolute;
top: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class='container'> <p>scroll window ...</p> </div>
</body>
</html>
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.
could someone please explain why the following code, where I simply move a div to mouse click position, does work only if I remove the DOCTYPE tag ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prova</title>
<style>
.bbox{
width: 10px;
height:10px;
position:absolute;
background-color: orange;
}
</style>
</head>
<body onclick = "moves()">
<script>
function moves(){
var cordx;
var cordy;
var d;
var e = window.event;
d= document.getElementById('box');
cordx = e.clientX;
cordy = e.clientY;
d.style.left = cordx;
d.style.top = cordy;
}
</script>
<div class="bbox" id='box'></div>
</body>
</html>
CSS requires that lengths (other than 0) have units.
You are assigning integers to d.style.left and d.style.top.
If you forget the Doctype then the browser assumes the page was written in the 90s and emulates the bugs that browsers of that era had. Once such bug is treating an integer in CSS as a pixel value instead of an error.
Use + "px".