scrollLeft attribute gives a value less than expected - javascript

I have the following html element:
<div id="main_track" onscroll="update_current_position(this)" height=50
style="width:901px;margin: auto;overflow-x: scroll;overflow-y: hidden;position: relative; " >
<canvas height=50 style="width:901px;" id='timeLine'></canvas>
</div>
<br><p style="margin-top: 0;">current position: <a id="current_pos"></a> ms</p>
and the following javascript function:
function update_current_position(track){
var time = track.scrollLeft;
time=time*10;
document.getElementById("current_pos").innerHTML=time.toString();
}
The canavas element width is editable by another input element.
I set the width of the canavas to something wider than the div, then I scroll the div and I find the function not giving the right out put. for example: if the scollLeft is 10 , the function returns 9.600001564.
I tried to change the scroll from the browser console and it gives the same result.
When I scroll by mouse I get many floats in current_pos element, but scrollLeft is supposed to be an integer.
I need an accurate detection of scroll, where every pixel represents 10 ms, how can I fix that?
EDIT: I tried that on firefox and it worked fine, seems to be a problem with chrome.

I just tried your code and find its working fine as you can check below code of mine,
I just increase canvas width by 1 px and after scrolling, we got 10 ms as expected
<!DOCTYPE html>
<html>
<head>
<title> testing </title>
</head>
<body style="width:100%">
<h1>Hello there</h1>
<div id="main_track" onscroll="update_current_position(this)" height=50
style="width:901px;margin: auto;overflow-x: scroll;overflow-y: hidden; border:1px solid black;position: relative; " >
<canvas height=50 style="width:902px;" id='timeLine'></canvas>
</div>
<br><p style="margin-top: 0;">current position: <a id="current_pos"></a> ms</p>
<script type="text/javascript">
function update_current_position(track){
var time = track.scrollLeft;
time=time*10;
document.getElementById("current_pos").innerHTML=time.toString();
}
</script>
</body>
</html>
check below screenshot also

Related

I have a Div Element acting as a button but it will only work once

I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.

Bouncing img in div game

I have a problem with my code in javascript. I want to edit code to make my mini game.
This is the original code I'm trying to edit. It's about bouncing balls. When you press the button the balls starts bouncing. The balls are in random position and every ball is moving randomly. When they are about to escape the border they are returning. Everything in this code works perfect.
Original code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true;start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('B');
var run=false;
var i;
for(i=0;i<b.length;i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0;i<b.length;i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want to replace the balls with images. I think I did it but it doesn't work at all. Images are always in the same position. When I press the button to move them, images are moving in the same direction. Images are escaping from border (they should bounce on the walls and return).
My edit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
img {display:block; height:10px; width:10px; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true; start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('IMG');
var run=false;
var i;
for(i=0; i<b.length; i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0; i<b.length; i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want my images to behavior like the balls in original code.
You're my only hope.
Instead of using <img>, use
b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}
The reason the code is not working with img tags is outlined in the documentation:
HTMLImageElement.x Read only Returns a long representing the
horizontal offset from the nearest layer. This property mimics an old
Netscape 4 behavior.
HTMLImageElement.y Read only Returns a long
representing the vertical offset from the nearest layer. This property
mimics an old Netscape 4 behavior.
As a work around you can use background-image on b tags or change the coordinates property names to i.e. currentX and currentY

What is the reason for the discrepancy between the height and width values I set and the ones returned?

I'm new to HTML and JavaScript. I'm trying to learn JavaScript width() and height() method. I have set the height and width of div1 to 100px and 300px respectively.
However, when I run the code, the height and width returned by the JavaScript is 299.666666 and 99.666665 respectively. What is the reason for the discrepancy between the values I set and the ones returned?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
You can use parseInt method to get absolute value.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var txt = "";
txt += "Width of div: " + parseInt($("#div1").width())+ "</br>";
txt += "Height of div: " + parseInt($("#div1").height());
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
Although true, my initial answer was irrelevant to the question asked. As clarifications were asked in comments, while trying to address them, I discovered my initial error and, attempting to provide a proper answer I have found this answer to a similar question, to be quite relevant for the one above.
Another quite common reason for pixel scaling, mentioned by adeneo in comments below is browser scaling/zooming (Ctrl/Cmd++, Ctrl/Cmd+-, Ctrl/Cmd+0 to reset).
Despite its chosen name, browser px have nothing to do with physical, device pixels and they are not the "default" screen unit. So it needs to be calculated. It is a non-linear angular measurement:
As defined in CSS Lengths,
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
A more detailed explanation here.
The reason about that discrepancy is that browsers differ on zooming functions. So as tyler durden said here:
"The reason why some browsers don't zoom properly has nothing to do with sub-pixel support, it is because they are not remembering the exact position and rounding correctly. In other words, they are prematurely rounding the position and that causes the image to be mis-aligned."
In fact, for the example you are referring too, on my browsers, safari as always zooms only text!
IE, Chrome, Opera and Firefox are resizing by calculating not only the text, but also, all the elements you are using on your page (border, width,padding etc). In addition, Border AFFECTS the outside edge of your element so lets see if its rounded properly:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).ready(function () {
$("button").click(function () {
var txt = "";
txt += "Width of div1: " + $(window).width() + "</br>";
txt += "Width of div1: " + $("#div1").width() + "</br>";
txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>";
txt += "Height of div1: " + $("#div1").height();
$("#div1").html(txt);
fixSubpixelLayout($('#all-cats'), $('#all-cats .cat'));
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
well border width is changed while zooming on my chrome and firefox, but it is not on my IE!! So the reason for that "malfunction" $("#div1").width() is inside the calculation method that each browser uses while zooming.
If u want a solution for your problem you can use outline instead of border, in order to have a border unbounded from its within element.
In general, rounding in binary can cause this.
Can't be sure about this specific case but, rounding a number in baseX isn't the same as the same number rounded after conversion to baseY. Computers do their maths with ones and zeroes, not all languages iron out the discrepancy.

JavaScript If Else Statement on css height

Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.7.2.min.js"></script>
<style>
div{
border:2px solid black;
width:200px;
min-height:300px;
}
</style>
</head>
<body>
<div>
<p id="demo">This will change</p>
<input type="button" value="OK" onclick="myFunction()"/>
</div>
<script>
$(document).ready(function()
{
$("input").click(function()
{
if($("div").height("300px") === true){
document.getElementById("demo").innerHTML="HELLO WORLD!";
}
});
});
</script>
</body>
</html>
I want to do is like this, If div height is equal to 300px the "This will change" paragraph will change to Hello World on the click of a button. Sorry this is my first time on javascript
$("div").height("300px") sets the height of the div, it does not return true if the height equals 300px.
You want $('div').height() === 300
http://api.jquery.com/height/
I'm noticing a couple things right off the bat. First, the .height function returns the numeric value without "px". Second, you are placing a value inside the .height function,meaning you are setting its value to "300px". Lastly, you are using the === operator which only returns true if the type and value are the same. Instead, try this:
if($("div").height() == 300)
On another note, you'll eventually want to give your input and div ids and access them through those ids, just in case your markup has more than one of each later on.

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources