|
JavaScript - Time Limit On Js Loading Box
Hello,
Is there any way that I can add a limit for the amount of time that a javascript loader bar stays on screen? The specific loading screen I am using is http://www.fliesen-info-spanien.net/loadbox.php. This loading box actually activates once the page is loaded apparently, but in my instance, it is loading then disappearing in the matter of a second, but I wouldnt mind leaving it up for a couple of seconds, say 3-5. Is there any line of code I can add to do this? Andy Similar Tutorialshi, i am now playing with the time. can you please tell me how to make the time move in downwards, i mean a countdown like format, e.g the time will start countdown and end in 2 days? here's my initial noob code for creating time Code: <script type="text/javascript">
var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
function showDate(){
if(document.getElementById('but').value = "locked"){
h = checktime(h);
m = checktime(m);
s = checktime(s);
}
document.getElementById('t').innerHTML = h +":"+m+":"+s;
}
function checktime(i){
if(i < 10){
i = "0" + i;
}
return i;
}
function ocl(){
var x = true;
if(x){
document.getElementById('but').value = "locked";
showDate();
}
}
function mo(){
document.getElementById('but').value = "lock me ?";
x = false;
}
</script>
<h3>
<a id="t"></a>
</h3>
<input type="button" id="but" value="unlocked" onmouseover="mo();" onclick="ocl();" />
This is my first javascript game and it's pretty much built of code I've gathered over time and cleaned up. Here's a manipulated screenshot of what I'm trying to accomplish. You're an ant and you want those goodies on the map as quickly as possible! click this link to view a bigger manipulated screenshot click this link to view the goodies (items) The ant is the playable character you control by using the arrow keys. Every time you load the page, or click "restart game", three new items will spawn randomly on the level and the time will be reset to 0 seconds. An arrow key must be pressed to start the time counter and the game itself. There are only 5 items so far, cheese, apple, banana, candy and donut. The items are supposed to be collected as quickly as possible, when the last item has been collected (by simply running over it) the game will end, save the time and display a hi-score list. Time limit is 30 seconds, the game will display a classic "GAMER OVER" if the limit is overrided. Problems I'm trying to solve: 1: Fullscreen mode (and make the ant actually STAY on the screen) I want the game level to adapt itself to the computer screen. The game dimensions are 1000x600px at the moment but the ant does not respect the level dimensions. Screenshot: http://i41.tinypic.com/kc1j81.jpg. I have a feeling about that somekind of percental code has to be implented but I've never done this before. (Please note that the size of the ant and the items will remain as they are) 2: Spawning three items randomly on the level I drew 5 items and saved them as 100x100 PNG. Three of these items have to spawn at a random location on the fullscreen level. The LAST item collected must trigger the time counter to stop. The time will later be used on the hi-score list where he/she can type her nickname. This information will be uploaded to a database. 3: 30 second time limit Letting the time counter reach 30 seconds will trigger a "GAME OVER". The only way to try again is page refresh or "restart game". Code: <html>
<head>
<style type="text/css">
div#game {
width:1000px;
height:600px;
position:absolute;
background:#c3c3c3;
}
</style>
<script type='text/javascript'>
// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed =1;
var maxSpeed = 5;
// boundary
var minx = 0;
var miny = 0;
var maxx = 1000; // characters movement field, width
var maxy =600; // characters movement field, height
// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;
function slowDownX()
{
if (xspeed > 0)
xspeed = xspeed - 1;
if (xspeed < 0)
xspeed = xspeed + 1;
}
function slowDownY()
{
if (yspeed > 0)
yspeed = yspeed - 1;
if (yspeed < 0)
yspeed = yspeed + 1;
}
function gameLoop()
{
// change position based on speed
xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);
// or, without boundaries:
// xpos = xpos + xspeed;
// ypos = ypos + yspeed;
// change actual position
document.getElementById('character').style.left = xpos + "px";
document.getElementById('character').style.top = ypos + "px";
// change speed based on keyboard events
if (upPressed == 1)
yspeed = Math.max(yspeed - 1,-1*maxSpeed);
if (downPressed == 1)
yspeed = Math.min(yspeed + 1,1*maxSpeed)
if (rightPressed == 1)
xspeed = Math.min(xspeed + 1,1*maxSpeed);
if (leftPressed == 1)
xspeed = Math.max(xspeed - 1,-1*maxSpeed);
// deceleration
if (upPressed == 0 && downPressed == 0)
slowDownY();
if (leftPressed == 0 && rightPressed == 0)
slowDownX();
// loop
setTimeout("gameLoop()",10);
}
function keyDown(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 1;
if (code == 40)
downPressed = 1;
if (code == 37)
leftPressed = 1;
if (code == 39)
rightPressed = 1;
}
function keyUp(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 0;
if (code == 40)
downPressed = 0;
if (code == 37)
leftPressed = 0;
if (code == 39)
rightPressed = 0;
}
</script>
</head>
<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'>
<!-- level -->
<div id="game"></div>
<!-- ant character -->
<img id='character' src='images/ant.png' style='position:absolute;left:500px;top:500px;height:125px;width:200px;'/>
</body>
</html>
Hello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve This is my first time doing JavaScript I don't what I did wrong here, but the problem its not showing up the current date and time. Code: <script language = "JavaScript" type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.GMTString();
document.wite("<b>localtime</b>" + localtime + "</br>");
document.write("<b>utctime</b>" + utctime);
</script>
This is what supposed to look like I have tried using different browser chrome,IE9,Maxtor, and Opera my OS is Win7 Is it possible to limit a textarea input with a max amount of letters? So if the form said 1,000 character limit. Can it block it after the 1,000th one is reached? Dear Friends, please give your solution about below problem. I call function test".$i."(){ edit($('$paket_id')); } function for editing in line text. <div onclick="test".$i."(this)"><img src="./images/edit01.png"></div> http://www.freeimagehosting.net/l5raa But when I click to call link, the textarea are opening again. How I can limit this? I have a script which allow a user to move users from one multiple selectbox to another and it works fine, but... I want to be able to restrict a user to only move x amount of users from one box to another. I want to create an alert when the user try to add a user to much... The javascript: Code: $().ready(function() {
$('#add').click(function() {
return !$('#box1 option:selected').remove().appendTo('#box2');
});
$('#remove').click(function() {
return !$('#box2 option:selected').remove().appendTo('#box1');
});
});
The HTML: Code: <table>
<tr>
<td valign="top"><select multiple id="box2" style="width:250px;height:200px;"></select></td>
<td width="100%" align="center"><a href="#" id="add">Add</a><br><a href="#" id="remove">Remove</a></td>
<td valign="top">
<select multiple id="box2" style="width:250px;height:200px;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
</select>
</td>
</tr>
</table>
Hope this makes sense... Thanks in advance... Hi All I am not a genius when it comes to javascript so if anyone could help, I would really be grateful. scenario: I am creating a custom product (75g) which will be made up of 3 others products (25g + 25g + 25g). The 3 options will be made up of a combination of smaller products each with their own options (25g, 50g, 75g) which will allow the customer to have one of each or fill up all 3 with just one type. Here is what I have in code already: Code: <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Sour Worms</h4> <div class="back"> <input name="id[14][48]" value="48" id="attrib-14-48" type="checkbox"><label class="attribsCheckbox" for="attrib-14-48">25g</label><br> <input name="id[14][49]" value="49" id="attrib-14-49" type="checkbox"><label class="attribsCheckbox" for="attrib-14-49">50g</label><br> <input name="id[14][50]" value="50" id="attrib-14-50" type="checkbox"><label class="attribsCheckbox" for="attrib-14-50">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Sugar Bears</h4> <div class="back"> <input name="id[15][51]" value="51" id="attrib-15-51" type="checkbox"><label class="attribsCheckbox" for="attrib-15-51">25g</label><br> <input name="id[15][52]" value="52" id="attrib-15-52" type="checkbox"><label class="attribsCheckbox" for="attrib-15-52">50g</label><br> <input name="id[15][53]" value="53" id="attrib-15-53" type="checkbox"><label class="attribsCheckbox" for="attrib-15-53">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Fruit Cocktail</h4> <div class="back"> <input name="id[16][54]" value="54" id="attrib-16-54" type="checkbox"><label class="attribsCheckbox" for="attrib-16-54">25g</label><br> <input name="id[16][55]" value="55" id="attrib-16-55" type="checkbox"><label class="attribsCheckbox" for="attrib-16-55">50g</label><br> <input name="id[16][59]" value="59" id="attrib-16-59" type="checkbox"><label class="attribsCheckbox" for="attrib-16-59">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Jelly Bears</h4> <div class="back"> <input name="id[17][57]" value="57" id="attrib-17-57" type="checkbox"><label class="attribsCheckbox" for="attrib-17-57">25g</label><br> <input name="id[17][58]" value="58" id="attrib-17-58" type="checkbox"><label class="attribsCheckbox" for="attrib-17-58">50g</label><br> <input name="id[17][60]" value="60" id="attrib-17-60" type="checkbox"><label class="attribsCheckbox" for="attrib-17-60">75g</label><br> </div> <br class="clearBoth"> </div> What I need to do is to some how ensure that the product is filled with 75g worth of the other products. Another option may to not use the 'grams' but rather use the 3 compartments that will be filled so 25g = 1, 50g = 2, 75g = 3 etc. Note: Name, Values, Ids are made dynamically by the cart, and I cannot change those as they are used for adding to cart and updating account info etc. PLEASE PLEASE PLEASE if anyone can help, I would really appreciate it. ----------------------------- Jay Thank you for your help with this. I am newer to JS and appreciate the assistance. I am using iScroll for an image gallery on the iPad. I can place 120 columns equalling 122,880 pixels in width. After that the content fails to display. How can I get additional 180 columns that I have to display? Hi, I have this code to get hints (PHP file): Code: <?php
include("include/session.php");
$GetNames = "SELECT firstname, lastname, username FROM users";
$GetNamesConnect = $database->query($GetNames);
While($row = mysql_fetch_array($GetNamesConnect))
{
$a[$row['username']] = $row['firstname'] . " " . $row['lastname'];
}
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint.", ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$id = $row['username'];
$response= "<a href='profile.php?user=$row['username']'>$hint</a>";
}
//output the response
echo $response;
?>
This is the display part (Javascript/Ajax) 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</body>
</html>
What I want to do it to limit the names suggested to 10, how would I do this? Hi - I have the following requirement for a textarea: Limit the number of lines to 8 Limit the number of characters to 20 per line Force a line beak when the user reaches he end of a line but break the line at the start of the last word (not half way through the word). Allow pasting into the field and auto-format the line/character count Keep he cursor where it should be (don't move it to the end of the field after any formatting) This is more complicated than it sounds - anyone worked on something similar? I want to limit a textarea to 500 characters. So somebody can't type in more than 500 characters or paste anything with more then 500 characters in the text box. However, if somebody were to enter something into the fields favoritedrink OR to favortefood, then I want the limit to change to 100 characters for the textarea. How can I do that using Javascript? I am using the form code below as an example. Code: <form action=""> <input type="text" name="firstname"><br /> <input type="text" name="lastname"> <textarea rows="2" cols="20" name="description"></textarea> <input type="text" name="favoritefood"> <input type="text" name="favoritedrink"> </form> I need some help for my site and would so much appreciate if somebody can help me with my problem. Thanks so much for any help. hello, i want to make a word limit on textarea in the below form any body help me- thank you. please reply me by editing below code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>freebacklinkcreator.blogspot.com submit form</title>
</head>
<body>
<form method="post" action="sendeail.php">
<!-- DO NOT change ANY of the php sections -->
<?php
$ipi = getenv("REMOTE_ADDR");
$httprefi = getenv ("HTTP_REFERER");
$httpagenti = getenv ("HTTP_USER_AGENT");
?>
<input type="hidden" name="ip" value="<?php echo $ipi ?>" />
<input type="hidden" name="httpref" value="<?php echo $httprefi ?>" />
<input type="hidden" name="httpagent" value="<?php echo $httpagenti ?>" />
Your Name: <br />
<select name="visitor" size="1">
<option value=" Business ">Business </option>
<option value=" Finance ">Finance </option>
<option value=" Reference ">Reference </option>
<option value=" Shopping ">Shopping </option>
<option value=" Arts and Entertainment ">Arts and Entertainment </option>
<option value=" Computers ">Computers </option>
<option value=" Health ">Health </option>
<option value=" News and Media ">News and Media </option>
<option value=" Regional ">Regional </option>
<option value=" Society ">Society </option>
<option value=" Education ">Education </option>
<option value=" Internet ">Internet </option>
<option value=" Recreation ">Recreation </option>
<option value=" Science and Technology ">Science and Technology </option>
<option value=" Sports ">Sports </option>
<option value=" Jobs ">Jobs </option>
<option value=" Online ">Online </option>
<option value=" Money ">Money </option>
<option value=" Affiliate Programs ">Affiliate Programs </option>
</select>
<br />
Your Email:<br />
<input type="text" name="visitormail" size="35" />
<br /> <br />
<br />
Site Title:<br />
<input type="text" name="attn" size="35" />
<br /><br />
Site Description:
<br />
<textarea name="notes" "rows="4" cols="40"></textarea>
<br />
<input type="submit" value="Send Mail" />
<br />
</form>
</body>
</html>
|
|||||||