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.
Related
I'm trying to build a random JS word list generator but the code I have here just generates a single word. Actually I want it to generate a list of 30 words from a previously given list, it may be a 60 word list or 700 but the result should always be 30 with no duplicated words, but I don't know how to achieve this.
Also, I would like the visitors to introduce their own list of words and then click on "generate a new list of words" and then the page will randomize and give them a list of 30 words with different order every time they click the button.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
form {
float:left;
padding:20px 20px 10px;
border:1px solid #999;
}
label {
float:left;
width:100px;
line-height:22px;
margin-bottom:10px;
font-size:12px;
}
input {
margin-bottom:10px;
}
</style>
<script type="text/javascript">
function init(){
words0=['art','car','bus','earth','camera','phone','sun','light','number',];
df=document.forms[0];
df.reset();
df[1].onclick=function() {
rnd0=Math.floor(Math.random()*words0.length);
df[0].value=words0[rnd0];
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<form action="#">
<div>
<label>word one:</label><input type="text" readonly="readonly"><br>
<input type="button" value="Click here to get random words">
<input type="reset" value="Clear">
</div>
</form>
</body>
</html>
If you want to grab N items randomly from an array, a classical way of doing it is to :
randomly shuffle your array,
pick up the N first items of the suffled array
Example code :
function samples(items, number){
items.sort(function() {return 0.5 - Math.random()});
return items.slice(0, number);
}
Notice that the shuffle algorithm is probably not the best one, it is provided as an example, as mentioned by #Phylogenesis.
If you prefer to avoid reinvent wheels, you can also use undercore.js for example, that provides a sample method
the add class is not working even if it is in document ready. I tried both with document ready and without it. it is not working but alert is working.
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
other code
var $jbanner = jQuery.noConflict(true);
$jbanner(document).ready(function () {
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
})
With document ready function even the alert box is not working. is it conflicting with other jquerys in the page.
#wad is an image
<img id="wad" src="images/banner.jpg"/>
thanks
ok this should be pretty easy, but not working for me. I just pasted what i am trying to do in a separate html file. but still not working, any help is appreciated.
<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
else {
alert("greater than 1200");
$jbanner("#wad").addClass("show");
}
</script>
<style type="text/css">
.hide{display:none;}
.show{display:block;}
</style>
</head>
<body><div>
<div id="wallpaperad">
<a href="http://www.yaho.com" target="_blank" rel="nofollow">
<img src="http://www.placehold.it/160x160" alt="banners" id="wad" /> </a>
</div>
</div>
</body>
</html>
I am just trying to create a floating banner ad. that hides for smaller screen sizes.
Try to without jbanner.
$("#wad").addClass("hide");
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 */
}
So what I want to do is to replace the main database loaded into a Google Earth GEPlugin instance in a web browser. If I go to the Code Playground: Here http://code.google.com/apis/ajax/playground/#mars/alternate_server_connectivity
Then I get an example of loading a new database. However, if I try to make the CreateInstance calls multiple times, I keep getting the same database (I am guessing this is due to the GEPlugin.exe running in the background still using the first database. If I remove that instance by killing the geplugin.exe process then the load works)
On that code page for an example edit the HTML and I used the following html/script combo
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback,
{ database: 'http://khmdb.google.com/?db=mars' });
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function loadmoon()
{
delete ge;
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
//http://khmdb.google.com/?db=moon
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
LOAD THE MOON
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
This works in that it reloads the instance, BUT it does NOT change the database.
I should say that I am aware of the option of adding a side database, but if I try to load a side database the Terrain is still mapped to the terrain of the first database. For me this is not acceptable.
Set the innerHTML of 'map3d' to an empty string before creating the instance again.
function loadmoon(){
document.getElementById('map3d').innerHTML = '';
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
}
Take a look at this example, should be exactly what you need. http://earth-api-samples.googlecode.com/svn/trunk/examples/alternate-spheres.html
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>