Javascript offsetLeft doesn't work - javascript

Here's code where I want to use it:
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
It's actually a moving ball which moves to certain coords after pressing space.I need to map it's coordinates when it's moving.When I use this:
var elem=document.getElementById("ball");
alert(elem.offsetLeft);
It does nothing and additionally it makes whole code in if() block not working.My browser is Chrome.
Here's a whole code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#rocket
{
width:50px;
height:50px;
position:absolute;
top:0;left:0;
transition:top 0.4s, bottom 0.4s;
}
#ball
{
width:15px;
height:15px;
position:absolute;
transition:left 0.5s;
}
</style>
<script>
var down=0;
var up=0;
document.onkeydown=function(e){
e=e||window.event;
if(e.keyCode==40)
{
down=down+30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==38)
{
down=down-30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
document.onclick=function(e){
var y=e.pageY;
document.getElementById("rocket").style.top=y+"px";
down=y;
};
</script>
<img src="http://0.static.wix.com/media/a8b510_fc007f8eedd9f304c54ac6d374e3ee0b.gif_1024" id="rocket">
</body>
</html>

The left property only affects elements that have position set to relative, absolute or fixed.

For css left Property you have to mention that position
CSS :
#ball
{
position:absolute;
}

Assign your element with style position: relative or position: absolute before you want to get it's left or top property.
Try this with jQuery in the easy way:
alert($('#ball').offset().left);
or
var elem=document.getElementById("ball");
alert(elem.style.left);

Related

CSS transition doesn't work when javascript added properties continuous

Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
Instead of relying on transitions, it would be better to use #keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the #keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
#keyframes movement {
from {top: 100px;}
to {top: 0px;}
}
<div id="box" onclick="move()"></div>

Fade in/Fade out navigation bar

I'm trying to set my navigation bar to remain fixed and fade to 0.8 opacity when i scroll down and return to his normal position and opacity when i scroll back up.
my jquery code is :
jQuery(document).ready(function(){
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500,0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500,1);
}
});
});
and my css code is :
.fixed {
position:fixed;
top:0;
}
It fades out when i scroll down but doesnt return to his original opacity when i scroll back up.I'm new to jQuery.
I think the problem is that you're setting the fadeTo function on every firing of the scroll event. Thus, when you scroll down, you're adding many "fade out" calls to the animation effects queue. When you scroll back up, all of the "fade out" effects (each of which takes 1.5 seconds) have to finish before the first "fade in" call takes place.
You can fix this by adding a call to jQuery's .stop(true) so that each scroll event clears the animation queue:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
jQuery("nav").stop(true);
if (scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500, 0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500, 1.0);
}
});
});
body {
height: 4096px;
padding-top: 32px;
}
nav {
height: 128px;
width: 100%;
border: 1px solid black;
background-color: #00aa00;
}
.fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>so</title>
<meta charset="UTF-8">
</head>
<body>
<nav></nav>
</body>
</html>
Note that this means the fadeTo animation won't take place until the user stops scrolling.
It's there another solution to do that? Because when i scroll back up the time that it takes for the "fadeTo" action is verry delayed(~4 secconds) i dont think that's normal.

change height of div by clicking it

I want to change the height of the div by clicking it.
Why it doesn't work at the first clicking but the second?
I don't know why, but the height of the div is "" (in the second clicking is 20px because of the else condition)
If I define the height of the div in the html element (style="height: 20px"), it works.
<html>
<head>
<script>
function divOpen() {
var divHeight= document.getElementById("divBottom").style.height;
if (divHeight=="20px") {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
</script>
<style>
div{
border:solid 1px gray;
width:200px;
height:20px;
}
.divBottom {
position: fixed;
bottom: 0;
right: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="divBottom" id="divBottom" onclick="divOpen()"></div>
</body>
</html>
so I know how to fix it, but I don't know why the height is empty in the first clicking.
Please let me know..
any help appreciated!
In the initial click the height style property of your div is '' because you haven't set it.
There is a difference between setting height through the style property and by using a class. Try to refactor your code and make it use offsetHeight instead of style.height.
JavaScript
function divOpen() {
var divHeight= document.getElementById("divBottom").offsetHeight;
console.log(divHeight);
//22 because of the border
if (divHeight == 22) {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
DEMO

Move a canvas up and down - html5 / css3

I have created a canvas element by taking user inputs for the size and the colour.
I want to make the canvas move up and down the page continuously. How can I achieve this?
Below is the html file:
<!DOCTYPE html>
<html>
<body>
<script src="pol.js" >
</script>
</body>
</html>
The following is the javascript file "pol.js" :
var h=prompt("Provide length of square");
var col=prompt("Provide the color");
document.write('<div id="float" ><canvas id="myCanvas" width="'+h+'" height="'+h+'" style="border:1px solid #c3c3c3;"> </canvas> </div>');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle=col;
ctx.fillRect(0,0,h,h);
The following CSS should smoothly move the canvas element between the top of the page and 500px down from it:
<style type="text/css">
#keyframes moveabout {
from { top: 0px; }
to { top: 500px; }
}
#float {
position: absolute;
animation: moveabout 5s ease-in-out infinite alternate;
}
</style>
For more information:
http://www.w3schools.com/css/css3_animations.asp
If you want to move the element from the top to the bottom of the page you could use document.windowHeight to get the window's viewport height.

how to prevent javascript div popup from jumping back to the top of the page?

I have the following neat code that opens a small popup box when the link is clicked ...the problem is that I use it on a very long page with lots of content, and whenever someone opens the popup, the actual content page jumps back to the very top, which is annoying if someone just spent a while scrolling down. How can I force the page to stay there even though the popup window is opened/closed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br>[Close]
</div>
Show
</body>
</html>
change this code:
from [Close]
to
[Close]
and also:
Show
to:
Show
Try that.
Try changing this
[Close]
to
<a onclick="closePopUp('dialog');">[Close]</a>
and this
Show
to
<a onclick="showPopUp('dialog');">Show</a>
When you click on the link to open the popup, you are actually navigating to "#" which causes the scrollbar to go back to the top of the page. You really shouldn't use the onclick attribute anymore, it's better to attach an event listener to an element with Javascript.
As mentioned by user Sammy above, using href="javascript:void(0)" should prevent this behavior. Personally I like to just leave the href attribute off of the <a> tag if I'm not actually using it as a standard link. The only downside is that you need to re-style the link to look like a normal link as it will be styled differently if it's missing the href attribute.
I've made a JSFiddle with a solution. As you can see, I removed the href attribute and re-styled the links, using Javascript to add event handlers for the links. You can scroll down a bit and click the link; the popup will open and the scrollbar will remain in the same position.
The code:
HTML:
<div class="container">
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a class="close-button" data-popup="dialog">[Close]</a>
</div>
<a class="show-button" data-popup="dialog">Show</a>
</div>
JS
var showButton = document.getElementsByClassName('show-button');
var closeButton = document.getElementsByClassName('close-button');
showButton[0].addEventListener('click', showPopUp);
closeButton[0].addEventListener('click', closePopUp);
function showPopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var scrollPos = window.scrollY;
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "block"
dlg.style.display = "block"
window.scroll(0, scrollPos);
}
function closePopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "none"
dlg.style.display = "none"
}
CSS
.container {
height: 5000px;
}
.show-button,
.close-button {
position: fixed;
color: blue;
text-decoration: underline;
}
.show-button:hover,
.close-button:hover {
cursor: pointer;
}
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display: none;
position: fixed;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
try using position:fixed instead of position:absolute.
For more read: http://www.w3schools.com/Css/css_positioning.asp

Categories