|
JavaScript - Display Div For Set Amount Of Time, And Then Fade Out?
Hey guys.
So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! Similar TutorialsI have this code which converts Fahrenheit to Celsius. Now, I have to have a counter that displays the amount of times I have made a conversion. I have no clue how to do this. This is the initial code:
Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I don't know how to approach this so I tried different things.... Code: tml>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
function counter()
{
if (function convert1().onclick==true)
{count++;}
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
but then I did some research and it said I couldn't do that.... so I tried this: Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
var count=0;
function documentClick()
{
document.getElementById('clicked').value = ++clickCount
}
document.onclick = documentClick;
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I think this last code is correct, the problem I have now is that I don't know how to call it to just display as text under the buttons and conversions. I'm looking for some way to display it like ("you have made"+ count+ "conversions");. No boxes or buttons, just text and I don't know how to call for this after the </script>, inside the body. I am new at all this and would appreciate any help. Thanks. It should look like this. How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
hi i have following code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id = "time"></div>
<script type = "text/javascript">
}
function display(secs) {
if (secs <= 0) {
alert("Your time is up!");
return;
}
secs--;
document.getElementById("time").innerHTML = "You have " +
Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
setTimeout("display("+secs+")",1000);
}
display(51); // 300 seconds = 5 minutes
</script>
<p>
<form name="form1" method="post" action="quiz2action.php">
<?php
$db = mysql_connect("localhost");
mysql_select_db("videoshop", $db);
//$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die();
$queryquestions = "SELECT * FROM quiz" or die();
$resultquestions = mysql_query($queryquestions) or die();
while($rowquestions = mysql_fetch_array($resultquestions))
{
$questionid = $rowquestions['id'];
$question = $rowquestions['question'];
$answerone = $rowquestions['option1'];
$answertwo = $rowquestions['option2'];
$answerthree = $rowquestions['option3'];
$answerfour = $rowquestions['option4'];
echo "
<b>Question $questionid: $question</b><br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>";
echo "<br><br>";
}
?>
</p>
<label>
<input type="submit" name="Submit" id="button" value="Submit">
</label>
</form>
<p> </p>
</body>
</html>
above is the code of quiz which is created in php. that quiz is fine. the problem in in js script above the php script. what i want is when the time of 5 mins is completed then i want to disable all those radio buttons except submit button. how can this be done? This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! Pretty simple, I just want to display a <div> after say 20 seconds or any predefined value. Ideally with jQuery
hi all, im looking for a script that does the following when the page loads "text1" is displayed. then on the next line 2 seconds later "text2" is displayed and test1 is still displayed. and i need this to go to 5 lines so the final project should look like --- text1 text2 text3 text4 text5 thanks Hi! First post here! Would really appreciate some help on a javascript that would display the time elapsed since a particular visitor last visited my webpage, using cookies. So basically it should show something like: "You last visited my page 2 days & 12 mins ago!" I've a little background in java but none in javascript... Thanks so much! Hi, I want to display my listings like they do he http://www.ticketnetwork.com/performers/concerts/a.aspx The code on my end calling the third party service looks like this: <script language="javascript" type="text/javascript"> document.write('<script language="javascript" src="http://###########.com/?bid='+####+'&sitenumber='+#+'&tid=event_names&pcatid=2&showcats=true&title=Concerts Tickets"></' + 'script>'); </script> How do I make it only display one letter at a time? I believe some variation on the sort method might work... How can I draw a cookie where number of chocolate chips represents the number of seconds and the number of bites represents the number of minutes. I want to show the passage of time on a clock that looks like items are being added to the display according to the number of seconds and minutes. Maybe using a mouse input aswell! Please guide.:confused: I use the Processing Software I was trying to display time of last visit along with login name.. can someone help me on this pls? My question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. When the site loads up, invite the user to enter their name and then display a message at the top of the document which will say< good morning, evening, or afternoon >, based on the time they access your site, welcome to <insert the name of your site> This is the question how do i do it?? Hello I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903 except I need it to be dependent on the hour and minute. Background: I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule. An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well. Let me know if you have additional questions. EDIT: 17-Mar-12 @ 12:37PM I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal 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. 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 is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks |
|||||||