I'm learning JavaScript and created a countdown timer HTML page in which javascript code seems to be returning a wrong clientHeight of the body. I want to show my countdown HTML <div> in middle (vertically) of the body even when browser is re-sized. Please tell me where I am wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CountDown Timer</title>
<script type="text/javascript" >
function countdown(){
if(isNaN(document.getElementById("time").value))
{
document.getElementById("time").value = "Enter Valid Number";
return;
}
else
{
var i = document.getElementById("time").value;
var j=setInterval(function (){document.getElementById("new").innerHTML = i; i--;
if(i == -2){
document.getElementById("new").innerHTML = "Welcome";
clearInterval(j);}},1000);
}
}
function heightadjust(){
document.getElementById("main1").style.top = ((document.body.clientHeight/2)+54).toString() + "px";
}
</script>
</head>
<body onresize="heightadjust();" onload="heightadjust();">
<div style="margin:0 auto;" id="main1">
<center>
<div id="new" style="display:inline-block; padding:3px; font-size:60px; text-align:center; border:3px solid #000000; background-color:#CC3300; color:#FFFFFF; border-radius:6px;">Enter Time Below</div>
<br />
<input type="text" id="time" onfocus="this.value = ''; this.style.color = '#000000';" value="Enter Time here" style="color:#999999;" />
<button onclick="countdown();" >Start</button>
</center>
</div>
</body>
</html>
Please, give me some tips how to keep <div> vertically centred even if browsers are re-sized.
You don't need JS for that.
#in_the_middle {
position:fixed;
left:50%;
top:100%;
width:200px;
margin-left:-100px; /* MUST be equal to width * -0.5 */
height:50px;
margin-top:-25px; /* SHOULD equal height * -0.5, but can vary for different fx */
line-height:50px; /* Remove if there may be more than one line inside */
}
Related
The following drag and drop JavaScript works in Firefox, but not in IE:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>t</title>
<style type="text/css">
.mover {
width:60px; height:4em; line-height:4em; margin:10px; padding:5px;
float:left; background:#ffff99; border:1px dotted #333333; text-align:center;
}
</style>
<script type="text/javascript">
function dragWord(dragEvent) {
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent + "|" + dragEvent.target.parentNode.id);
}
function dropWord(dropEvent) {
var dropData = dropEvent.dataTransfer.getData("text/html"); var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0]; dropEvent.preventDefault();
}
</script>
</head>
<body>
<div><em>Move the words around to make a sentence.</em></div>
<form>
<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<a href="#" class="mover" draggable="true" ondragstart="dragWord(event)" >page</a>
</div>
</form>
</html>
Does anyone have any clues as to why this does not work in IE? The problem is in the drag and drop function. I tried to replace the div with a href=# but that does not work.
I have a very simple progress bar im making and everything works except for one thing...the percent sign. My code is below and my question is how would add a percent sign to this without messing up the script. - JsFiddle
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="Assets/IMG/Roz.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apache Testing Server</title>
<style type="text/css">
#ProgressWrap {
height:30px;
width:300px;
border:1px solid #222;
text-align:center;
position:relative;
}
#ProgressStat {
height:30px;
width:0%;
background-color:#9CF;
position:absolute;
top:0px;
left:0px;
}
#ProgressPer {
width:100%;
height:30px;
line-height:30px;
position:absolute;
top:0px;
left:0px;
z-index:1000;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('ProgressPer').innerHTML = 0;
var Change = setInterval(function() {
var Per = document.getElementById('ProgressPer').innerHTML;
++Per
if(Per == 101)
{
clearInterval(Change);
}
else
{
document.getElementById('ProgressPer').innerHTML = Per;
var Bar = document.getElementById('ProgressStat');
Bar.style.width = Per + '%';
}
}, 50);
}
</script>
</head>
<body>
<div id="ProgressWrap">
<div id="ProgressPer"></div>
<div id="ProgressStat"></div>
</div>
</body>
</html>
You need to change these two lines:
var Per = document.getElementById('ProgressPer').innerHTML.replace('%','');
and
document.getElementById('ProgressPer').innerHTML = Per.toString() + '%';
See the fiddle.
There's nothing wrong with your code but it doesn't really follow javascript style guidelines. Also, it's not necessary to take the innerHTML value in your calculations. Here's another version to consider going forward.
var pct = 0,
change = setInterval(function () {
++pct;
if (pct == 101) {
clearInterval(change);
} else {
document.getElementById('ProgressPer').innerHTML = pct.toString() + '%';
var bar = document.getElementById('ProgressStat');
bar.style.width = pct + '%';
}
}, 50);
I wrote this countdown timer, and it works in everything but IE. I get the restricted website from running scripts. But when I click that it is ok , the script doesn't run.
Is there a proper way to set up a javascript script to run after the pause for user ok?
Or is there a way to write it so it works for IE also.
I am not sending anything via innerHTML as code just numbers so I don't see that as the problem, and I rewrote it using the jQuery .html() function with the same results...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Countdowwn Timer</title>
<style type="text/css">
span#days { font-size:20px;
color:#900;
font-weight:900;
}
span#hours { font-size:20px;
color:#903;
font-weight:900;
}
span#min { font-size:20px;
color:#906;
font-weight:900;
}
span#sec { font-size:20px;
color:#909;
font-weight:900;
}
span#date {font-size:22px;
font-weight:900;
color:#900;
}
span#mar {font-size:22px;
font-weight:900;
color:#03F;}
</style>
<script type="text/javascript">
function theTimer(){
var putday=document.getElementById("days");
var puthour=document.getElementById("hours");
var putmin =document.getElementById("min");
var putsec=document.getElementById("sec");
var marathon=new Date(2012,3,22,10,0,0,0);
var marathonCount=marathon.getTime();
var nowish=Date.now();
var dif=marathonCount-nowish;
var days=Math.floor(dif/(24*60*60*1000));
dif=dif-days*(24*60*60*1000);
var hours=Math.floor(dif/(60*60*1000));
dif=dif-hours*(60*60*1000);
var minutes=Math.floor(dif/(60*1000));
dif=dif-minutes*(60*1000);
var seconds=Math.floor(dif/1000);
putday.innerHTML="this stuffF";
putday.innerHTML=days;
puthour.innerHTML=hours;
putmin.innerHTML=minutes;
putsec.innerHTML=seconds;
var counter = setTimeout("theTimer()", 1000) };
</script>
</head>
<body onload="theTimer()">
<a href ="" style="text-decoration:none">
<center>
<p id="marathon">There are <span id="days"></span> days, <span id="hours"></span> hours, <span id="min"></span> minutes, and <span id="sec"></span> seconds left </p>
</center>
<center>
<p id="marathon">till the beginning of the Next <span id="mar">Marathon</span> on <span id="date">April 22, 2012.</span></p>
</center>
</a>
</body>
</html>
Thank you Naren for your comment about IE9 working.
I tracked it down to using Date.now()
That doesn't work in IE8 (which is one of the trial computer browsers I used) and probably earlier.
If I just do
new Date().getTime();
IE8 handles that.
I want to update the timestamp on useronline database only when people aren't idle (keyboard mouse active for some time-I am using a jquery plugin for that) The problem for me is that I can't clear the interval for the function so in my test script below, when it starts counting it never stops and even when active again it starts another counter so that its like its counting twice as fast. How am I supposed to stop that timer? Its like the counter has never been started when its idle- so it can't find it to stop it.
In the real script the counter will be $.get()-ing the php that updates the mysql table. For that reason i'm using intervals, or it would get on every mouse move right? and that would be loading the server.
http://jsbin.com/uleza5 to test just don't move mouse for 6 seconds then see the idle text, then move the mouse and it will start counting; after 6 seconds it will go idle again when inactive.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script>
<script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">
$(document).ready(function(){
$('.status').html('active');
});
x = 0;
function count() {
x+=1;
$('.usercount').html(x);
}
(function() {
var timeout = 6000;
var it;
$(document).bind("idle.idleTimer", function() {
clearInterval(it);
$('.status').html('idle');
});
$(document).bind("active.idleTimer", function() {
var it = setInterval(count, 1000);
$('.status').html('active');
});
$.idleTimer(timeout);
})(jQuery);
</script>
</head>
<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script>
<script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">
var it;
$(document).ready(function(){
$('.status').html('active');
});
x = 0;
function count() {
x+=1;
$('.usercount').html(x);
}
(function() {
var timeout = 6000;
$(document).bind("idle.idleTimer", function() {
clearInterval(it);
$('.status').html('idle');
});
$(document).bind("active.idleTimer", function() {
it = setInterval(count, 1000);
$('.status').html('active');
});
$.idleTimer(timeout);
})(jQuery);
</script>
</head>
<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>
I thought I'd write a simple script to animate my webpage a little.
The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.
I'm including a complete example, could you help me fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="Estonian" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
</head>
<body>
<script type="text/javascript">
var i;
var increasing = new Boolean("true");
var height;
function testFunction() {
height = parseInt(document.getElementById("testDiv").offsetHeight);
if( increasing == true ) {
i = height + 4;
document.getElementById("testDiv").style.height = i + "px";
if( height >= 304 ) {
increasing = false;
}
else {
pause(30);
}
}
else {
i = height - 4;
document.getElementById("testDiv").style.height = i + "px";
if( height <= 104 ) {
increasing = true;
}
else {
pause(30);
}
}
}
function pause(ms) {
setTimeout("testFunction()", ms);
}
</script>
<button id="button" type="button" onclick="testFunction();">Do it!</button.
<div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
Hello!
</div>
</body>
</html>
Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.
With jQuery, you can do things like this:
$("#div-id").animate({"height": 300}, 1000);
That'll change the div height to 300 px in 1000 ms = 1 second.