|
JavaScript - Project Deadline In 1 Day..please Help.
i am having a problem passing variables from a php file to a html file using a javascript funtion. here is the code i have.
Code: /////////InteractiveMap.HTML////////////////////////////////////////////////////
<script type="text/javascript">
// This function is called when a building is clicked.
function buildingClick(id,name,desc)
{
var mywin;
var isOpen = false;
var searchInt;
var passVal;
passVal = desc;
mywin = window.location.href = "informationPage.html";
searchInt = setInterval(function(){if(isOpen){var display=mywin.document.getElementById("infoArea");
display.value = passVal;}});}
///////////////////////////////////////////////////////////////////
////////////InformationPage.html///////////////////////////////
<script type="text/javascript">
window.onload = function(){window.opener.window["isOpen"] = true;};
</script>
<textarea disabled id="infoArea"></textarea>
//////////////////////////////////////////////////////
I am just tryin to display the variable desc in the textarea "infoArea" but it wont work.Any help would be appreciated. eoin Similar Tutorialsi am trying to add a fpwslideshowphp i got it to work but i cant find how to get it off the top of the page, here is code and page http://denniswilsonmusic.com/links.php <!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> <table width="965" cellspacing="0" cellpadding="0" border="0"><tr><td style="background-image:url(images/background.jpg); background-position:top center;background-repeat:no-repeat;"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dennis Wilson -- Castles In The Sand</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <?php include "header.php"; ?> <style type="text/css"> </div> <br /><br><br> ul.fpthumbs{ /*thumbnails main UL list*/ list-style-type:none; margin:0; padding:0; position:absolute; left:100; bottom:10px; width:98%; } ul.fpthumbs li{ display:inline; margin-right:10px; /*spacing between each thumbnail*/ } ul.fpthumbs li img{ border:2px solid white; background:gray; cursor:hand; cursorointer; margin-top:5px; width:50px; height:50px; } ul.fpthumbs li img.selected{ border-color:red; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://www.denniswilsonmusic.com/fpslideshowvar.php" type="text/javascript"></script> <script type="text/javascript" src="fpslideshow.js"> </script> </head> <body> <table width="80%"> <tr><br><br><br><br><br><br><br><br><br><td align="center" width="100%"><div style="position:absolute;z-index:1004;left:3px;top:1000;background:lightblue;padding:3px;font:bold 16px Arial"><a href="index.php" style="color:blue;text-decoration:none">Back To Home Page</a></div> <table width="100%" cellpadding="0" cellspacing="5" style="padding-left:30px;padding-right:30px;"> <tr><td height="19"> </div> </tr></table> <br> <div style="width:965;height:7px;background-color:#D3C5B8;"></div> <table width="955" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="450" div="div" class="content_box_fade"><div><br /> <br /> <br /> <br /> </div></td> <td> </td> <td width="450" class="content_box_fade"> </td> </tr><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <?php include "footer.php"; ?> </table></td></tr> </table> </td></tr> </table> </body> </html> I do this for free for this man, and he is profroming in atlanta for 4th, with Rev Charles Stanley thank you for your help Thanks to all of you who helped with the previous problems I was having with this form. I need to figure out is why is the submit ("continue") button moving when "auto" is selected (under "Select Your Move Type") and how to fix it. See: http://www.dvdgalleria.com/form/TEST_DIVsCENTERED.html It doesn't look like a CSS problem as far as I can tell. Any pointers would be so appreciated! I have to finish it by tonight! Thanks in advance. Code: <!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>
<style type="text/css">
/* zero out margins */
* {
margin:0;
padding:0
}
/* mac hide \*/
html, body {
height:100%;
width:100%;
}
/* end hide */
body {
text-align:center;
min-height:300px;/* for ie7*/
font-family:Arial, Helvetica, sans-serif;
font-size:.85em;
}
#xouter {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#xcontainer {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 300px;
}
#xinner {
width: 453px;
background:#fff;
height: 300px;
text-align: left;
margin-left:auto;
margin-right:auto;
background: url(web_developer_test_blank.jpg) no-repeat center;
}
/* not required for demo */
p, h1 {
margin-bottom:1em
}
#header {
margin-right:0
}
.maintxt {
text-align:left;
margin:1em;
}
.formItem {
float:left;
height: 37px;
}
.em1 {
font-size:1em;
}
.em95 {
font-size:.95em;
}
.em9 {
font-size:.9em;
}
.em85 {
font-size:.85em;
}
.em8 {
font-size:.8em;
}
.em75 {
font-size:.75em;
}
.select {
font-style:italic;
}
.start_quotes {
font-style:italic;
font-weight:bold;
color:#6a8da9;
font-size:1.35em;
text-align: left;
margin-left: 25px;
margin-top: 15px;
float:left;
position:relative;
width:100%;
}
#the_difference_box {
float:right;
width:165px;
text-align: left;
border: 1px solid #d5e2ea;
margin-top: -55px;
line-height: 1.1em;
font-family: Arial, Helvetica, sans-serif;
color:#383838;
background-color: #fff;
padding: 8px 10px 15px 12px;
margin-right: 15px;
height: 212px;
}
.the_difference {
font-size:1em;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#666;
margin-top:2px;
}
.safety, .quality, .security, .privacy, zipcode_finder {
margin-bottom:8px;
font-size: .8em;
}
.safety {
margin-top:5px;
}
.security {
margin-bottom:3px;
}
.which_is_right, .zipcode_finder {
font-size: 0.75em;
float: right;
margin-left: -10px;
}
.which_is_right, .privacy {
color:#2b5774;
text-decoration:underline;
margin: 0;
}
a:link, a:visited, a:active {
color:#2b5774;
}
#wrapper_form {
width:453px;
float: left;
}
#main_form {
width:220px;
float:left;
padding-left: 25px;
height: 238px;
padding-top: 8px;
margin-top: -66px;
}
input {
color: #999;
background: #fff;
border: 1px solid #06c;
border-color: #06C;
font-style: italic;
height:20px;
}
.approximate {
color: #777;
font-size: 0.85em;
}
.submit input {
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
select {
color: #999;
border: 1px solid #666699;
}
label {
color:#444;
font-size:.85em;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.continue_button {
float:left;
position:relative;
}
#arrow {
position:relative;
top:-17px; /* -18 for gecko */
left:-27px;
width: 28px;
height: 66px;
}
#move_type {
width:100px;
}
#move_type_id {
width:220px;
}
#year, #make, #model {
width:70px;
}
#residence_Type {
width:100px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#xouter{display:block}
#xcontainer{top:50%;display:block}
#xinner{top:-50%;position:relative}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
<script type="text/javascript">
function hide(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = 'hidden';
}
function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.visibility = 'visible';
}
function show_auto(optionValue)
{
if(optionValue=='auto'){
show('vehicle');
document.getElementById('residence_type').style.display='none';
document.getElementById('num_rooms').style.display='none';
}
else{
hide('vehicle');
document.getElementById('residence_type').style.display='';
document.getElementById('num_rooms').style.display='';
}
}
</script>
</head>
<body onload=hide('vehicle');>
<div id="xouter">
<div id="xcontainer">
<div id="xinner">
<div class="start_quotes">Start getting your free moving quotes</div>
<div id="wrapper_form">
<div id="arrow"><img src="arrow.gif" alt="" /></div>
<form action="#" id="main_form">
<div id="move_type_id" class="formItem">
<label for="move_type">Select Your Move Type<br />
<select id="move_type" name="move_type" onchange="show_auto(this.value)">
<option value="">Select</option>
<option value="full">Full</option>
<option value="self">Self</option>
<option value="auto">Auto</option>
</select>
</label>
<div class="which_is_right"><a href="#">Which is right for me?</a></div>
</div>
<div class="formItem" style="clear:left;">
<label for="moving_from" id="moving_from">Move Date <span class="approximate">(approximate)</span><br />
<input type="text" name="move_date_month" size="12" maxlength="10" value="Month" style="display:inline-block;float:left; margin-right:6px;" />
<input type="text" name="move_date_day" size="3" maxlength="2" value="Day" />
</label>
</div>
<div class="formItem" style="clear:left;">
<label for="moving_from" class="moving_from">Moving From<br />
<input type="text" name="Moving_From" size="12" maxlength="5" value="Zipcode" style="display:inline-block;float:left;"/>
</label>
</div>
<div class="formItem" style="margin-left:6px;">
<label for="moving_to" class="moving_to">Moving to<br />
<input type="text" name="Moving_To" size="12" maxlength="5" value="Zipcode" />
</label>
</div>
<div style="width:150px; margin-left:10px; padding-top:5px;">
<div class="zipcode_finder" style="float:left; height:14px; padding-top:2px;"><a href="">Zipcode Finder</a></div><div class="zipcode_finder" style="float:left; height:14px; padding-top:2px; margin-left:19px;"><a href="">Zipcode Finder</a></div>
</div>
<div style="clear:both;"></div>
<div id="residence_type" class="formItem">
<label for="residence_type">Residence type<br />
<select name="residence_type" id="residence_Type" />
<option value="select" selected="selected" class="select">Select</option>
<option>Apartment</option>
<option value="year">Condo</option>
<option value="year">Single Family</option>
</select>
</label>
</div>
<div id="num_rooms" class="formItem" style="margin-left:6px;">
<label for="num_rooms"># of Rooms<br />
<select name="num_rooms" id="num_rooms_sel" />
<option value="Select" selected="selected" class="select">Select</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
</label>
</div>
<div id="vehicle" class="formItem" style="height:40px;">
<label for="vehicle"> Vehicle<br />
<select name="year" id="year" />
<option>Year</option>
<option value="year">year</option>
</select>
<select name="make" id="make" />
<option>Make</option>
<option value="make">make</option>
</select>
<select name="model" id="model" />
<option>Model</option>
<option value="model">model</option>
</select>
</label>
</div>
<div class="continue_button"> <a href="javascript:document.myform.submit()"
onmouseover="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'"
onmouseout="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'"
onclick="return val_form_this_page()"> <img src="btn_continue_s1.gif" border="0" alt="Submit this form"
name="sub_but" align="left" /> </a> </div>
</form>
<div id="the_difference_box">
<div class="the_difference">The Difference</div>
<div class="safety"><strong>Safety</strong> – Our network consists of only fully licensed and insured movers.</div>
<div class="quality"><strong>Quality</strong> – All our moving companies must pass our strict 28-point inspection process to insure quality service.</div>
<div class="security"><strong>Security</strong> – GigaMoves does not permit moving companies to broker or sell customer information.</div>
<div class="privacy"><a href="#">Privacy Policy</a></div>
</div>
<!-- end wrapper_form -->
</div>
</div>
</div>
</body>
</html>
Hey, I have a drop down box that selects a project name. This is then taken to a javascript function that is supposed to fill in a read-only box with that name, but instead of filling it in with the project name, it fills it in with the project ID, which is how the sql database is set up. Each project has an ID, a name, and other values. Is there a way I can get the project name given the project ID in the javascript function?
Hello, I am new to this forum and am also new to Javascript, this is the first javascript I write on my own and it ALMOST works... which is why I'm here IDEA: I wanted to have a textarea in a form that "slides open" from 1px height to 100px height when the mouse goes over the 1px line or the description, and then to "slide back" to 1px height. PROBLEM: I managed to get the effect I needed, but when you hold your mouse button down while in the textarea and drag it out of it, then release it outside, it seems to mess up something (the problem) because then it wont close anymore and will go from 99px height to 97 and back.. Ok here is my code: Head Code: <script type="text/javascript">
var growing = 1;
var shrink = 1;
var ison = 0;
var ison2 = 0;
function ovntxt() {
if(ison2 == 1){clearInterval(ovclosing);ison2 = 0;}
// document.getElementById('textdescr').style.height = 150 + "px";
ovopening = setInterval("openrepeat()",10);
ison = 1;
}
function openrepeat() {
ovtxtfieldnumb = document.getElementById('textdescr').style.height.slice(0,-2);
if(ovtxtfieldnumb < 101 && ison2 != 1)
{
growing = Number(ovtxtfieldnumb) + 2;
if(growing <100 && ison2 != 1)
{
document.getElementById('textdescr').style.height = growing + "px";
//document.getElementById('textdescr').value = "growing" + growing + "px";
}
}else
{
growing = 1;
clearInterval(ovopening);
ison2 = 0;
}
}
function ovftxt() {
if(ison==1){clearInterval(ovopening);ison=0}
growing = 1;
ovclosing = setInterval("closerepeat()",10);
ison2 = 1;
}
function closerepeat() {
ovtxtfieldnumb2 = document.getElementById('textdescr').style.height.slice(0,-2);
if(ovtxtfieldnumb2>1 && ison != 1)
{
if(ison==1){clearInterval(ovopening);ison=0}
shrink = Number(ovtxtfieldnumb2) - 2;
document.getElementById('textdescr').style.height = shrink + "px";
//document.getElementById('textdescr').value = "shrink" + shrink + "px";
}else
{
shrink = 1;
clearInterval(ovclosing);
if(ison==1){clearInterval(ovopening);ison=0}
ison2 = 0;
}
}
</script>
Body Code: <a onMouseOver="javascript:ovntxt();" onMouseOut="javascript:ovftxt();">Tour Description</a><br><textarea onMouseOver="javascript:ovntxt();" onMouseOut="javascript:ovftxt();" id="textdescr" name="textdescr" style="border:1px solid gray;width:400px;height:100px;"><?php if($_SESSION['textdescr']){echo stripslashes($_SESSION['textdescr']);} ?></textarea>
<script>document.getElementById("textdescr").style.height = 1 + "px";</script>
Help is much apreciated! Thanks! I have to simulate a carnival wheel that has a similar layout to roulette in that the numbers range form 0-36 with the even numbers colored red and the odd numbers colored black. The page needs to have a button that "spins" the wheel (generates a random number) when you click the button. The results of the spin needs to be displayed in a text box and the background of the page needs to change to black if the # is odd and change to red if the # is even. I desperately need guidance with this so I would appreciate any help. I really have no background with JavaScript so I'm pretty much doing this blindly. Please help. A. Start. B. Display a prompt dialog box and store the user's input in UI. B1. Store UI acquired from a prompt dialog box. B2. Parse UI as a Base-10 integer and assign it to variable TV. C. Initialize the HITS counter to zero. D. Initialize the DD variable to the value of TV. E. While DD is greater than zero, repeat the following steps: E1. Test if the TV is evenly divisible by DD (that is if the remainder of TV/DD equals zero). If so, increment HITS by 1. E2. Decrement DD by 1. F. Display results within an HTML paragraph the browser's document window as seen in the Sample OUTPUT. F1. The string UI. F2. The string " is" F3. If HITS is greater than 2, then display the string " not" F4. The string " a prime number." G. End. This is what i have so far: <script type="text/javascript"> var UI=prompt("Enter a whole number to test as a prime number:"); var TV=parseint(UI); int HITS (0); int DD (tv); I'm doing a correspondence course on javascript, but the terminology is giving me up-hill and after hour of battling, my Javascript was just a mess. could someone help me with the javascript function. My instruction reads: "Create a web page with 5 text boxes. Assign to each text box's value attribute a value of zero. Add to each of the text boxes an onchange event handler that calls a function named calcAvg() and passes to the function the value of that text box by referencing it's document object, form name, and name and value attributes. Within the calcAvg() function, pass the five parameters to another function, named performCalc(), and assign the returned value to a variable named calcResult, then place the returned value in to another text box with a name averageResult. In the performCalc() function, calculate the average of the five numbers (by adding the five numbers and then dividing the total by 5), then return the result to the calcAvg() function. When you preform the calculation, use the parseInt() function to insure that the passes values are calculated as numbers." Please assist be as kind as to assist me with this project so I can use it as reference to the following projects that follow on the foundation of this one... My code so far; Code: <!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=iso-8859-1" />
<title>Calculate average</title>
<script type="text/javascript">
/*<![CDATA[*/
/*]]<*/
</script>
</head>
<body>
<h1>Calculating averages</h1>
<table>
<tr>
<td>
<tr>
<td>Value 1<br/></td>
<td>
<input type="text" name="valueOne" size="6" value="0" onchange="calcAvg()" /></td>
</tr>
<tr>
<td>Value 2<br/></td>
<td>
<input type="text" name="valueTwo" size="6" value="0" onchange="calcAvg()" /></td>
</tr>
<tr>
<td>Value 3<br/></td>
<td>
<input type="text" name="valueThree" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
<tr>
<td>Value 4<br/></td>
<td>
<input type="text" name="valuefour" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
<tr>
<td>Value 5</td><br/>
<td>
<input type="text" name="valueFive" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
</td>
</tr>
</table>
<form action="" name="averageResult" >
<p>The average of the 5 numbers:
<input type="text" name="cost" size="5" value="0"
style="border-style: none; border-color:inherit; border-width:medium; background-color: Transparent" text="0"/></p>
</form>
</body>
</html>
I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong? Here is the code so far, I think it is too long. Code: <script type="text/javascript">
/* <![CDATA[ */
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.gif";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.gif";
Image2=new Image();
Image2.src=grphcs[2]="images/leaf3.gif";
Image3=new Image();
Image3.src=grphcs[3]="images/leaf4.gif";
Image4=new Image();
Image4.src=grphcs[4]="images/leaf5.gif";
Image5=new Image();
Image5.src=grphcs[5]="images/leaf6.gif";
var minSpeed = 5;
var maxSpeed = 30;
var randomSpeed = 5;
var randomSpeed2 = 10;
var randomSpeed3 = 15;
var randomSpeed4 = 20;
var randomSpeed5 = 25;
var randomSpeed6 = 30;
var minHorizontal = 200;
var maxHorizontal = screen.availWidth - 300;
var leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition2 = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition3 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal +1)) + minHorizontal);
var leftPosition4 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition5 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition6 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var minVertical = 50;
var maxVertical = screen.availHeight - 300;
var topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition6 = Math.floor(Math.rnadom() * (maxVertical -
(minVertical + 1)) + minVertical);
function matchLeaf() {
if (navigator.appName == "Microsoft Internet Explorer") {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
}
else {
widthMax = window.innerwidth - 14;
heightMax = window.innerHeight;
}
autumnFall();
}
function autumnFall();
var fallingLeaf1 = document.getElementById("leaf1");
fallingLeaf1.style.left = leftPosition + "px";
fallingLeaf1.style.top = topPosition + "px";
fallingLeaf1.style.visibility = "visible";
topPosition += parseInt(randomspeed);
leftPosition += 0;
if (topPosition >= screen.availHeight - 300) {
topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 +
".gif";
randomSpeed = Math.floor(Math.random() * maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf2 = document.getElementById("leaf2");
fallingLeaf2.style.left = leftPosition2 + "px";
fallingLeaf2.style.top = topPosition2 + "px";
fallingLeaf2.style.visibility = "visible";
topPosition2 += parseInt(randomSpeed3);
leftPosition2 += 0;
if (topPosition2 >= screenavailHeight - 300) {
topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition2 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf2.src = "images/leaf" + Math.floor(Math.random() * 6)
+ "gif";
randomSpeed2 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf3 = document.getElementById("leaf3");
fallingLeaf3.style.left = leftPosition3 + "px";
fallingLeaf3.style.top = topPosition3 + "px";
fallingLeaf3.stye.visibility = "visible";
topPosition3 += parseInt(randomSpeed3);
leftPosition3 += 0;
if (topPosition3 >= screen.availHeight - 300) {
topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition3 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf3.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed3 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf4 = document.getElementById("leaf4");
fallingLeaf4.style.left = leftPosition4 + "px";
fallingLeaf4.style.top = topPosition4 + "px";
fallingLeaf4.style.visibility = "visible";
topPosition4 += parseInt(randomSpeed4);
leftPosition4 += 0;
if (topPosition4 >= screen.availHeight - 300) {
topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition4 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf4.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed4 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf5 = document.getElementById("leaf5");
fallingLeaf5.style.left = leftPosition5 + "px";
fallingLeaf5.style.top = topPosition5 + "px";
fallingLeaf5.style.visibility = "visible";
topPosition5= parseInt(randomSpeed5);
leftPosition5 += 0;
if (topPosition5 >= screen.availHeight - 300) {
topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition5 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf5.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed5 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf6 = document.getElementById("leaf6");
fallingLeaf6.style.left = leftPosition6 + "px";
fallingLeaf6.style.top = topPosition6 + "px";
fallingLeaf6.style.visibility = "visible";
topPosition6 = parseInt(randomSpeed6);
leftPosition6 += 0;
if (topPosition6 >= screen.availHeight - 300) {
topPosition6 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition6 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf6.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed6 = Math.floor(math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
}
/* ]]> */
</script>
</head>
<body onload="setInterval('matchLeaf()', 100);">
<img id="leaf1" src="images/leaf1.gif" alt="leafone"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf2" src="images/leaf2.gif" alt="leaftwo"
style="position:absolute; left:100px; top:100px;" />
<img id ="leaf3" src="images/leaf3.gif" alt="leafthree"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf4" src="images/leaf4.gif" alt="leaffour"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf5" src="images/leaf5.gif" alt="leaffive"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf6" src="images/leaf6.gif" alt="leafsix"
style="position:absolute; left:100px; top:100px;" />
I'm researching a possible web project. The project will allow users to create and run JS online, similar to JSFiddle, Construct 2 and GameSalad. At this stage I'm just looking to gather general information. So my first question is, just how big of a project would that be? what web technologies would be needed? Would Node.Js be needed? or would PHP be ok for the backend? Thanks for any advice. I'm working on a project (not for anyone in particular) called JSget. It's a JS framework that makes "getting" HTML elements in javascript easier. It's similar in function to jQuery, but it has a very different interface. Unlike jQuery, I use more javascript-like methods of getting elements, while jQuery gets elements based on parsed strings. I'm off to a good start but this project is no where closed to finished. The JSget script can be found here and I've created a testing page that utilizes some of its features here. I'm looking for collaborators who meet the following criteria:
Enthusiatic about the project. Someone who likes the idea and is willing to put effort into it.
An experienced coder in Javascript. You don't need to be an expert, but I'm not looking for beginners.
Someone who doesn't just want to rewrite my code, but is interested on building on it.
Also, please understand that I am a snob when it comes to "clean" code. I run everything I write through "JSLint". So, if you're interested, please reply to this thread or contact me by email at jazzo@jazzothegreat.com If your not completely interested, don't reply out of pity. Thanks, Jazzo In college i need to make a website, i have chosen to do one about gaming. One of the tools i want to add in about javascirpt is how to get a Xbox360 Gamercard to be in a corner off the website and updates when new achievements are earned. I understand i need to be able to connect to xbox.com to get details on the gamertag but i am new to the javascript language. Has anyone done a script for anything like this or know where i can find one. Ive tried googling etc for one and tried it for myself but i aint getting no where, let alone know if what ive tried scripting even exsists.
Building an inventory of financial models. 500-1000 small models. Need a few more programmers for launch.
I am in a basic computer science class. I have to do a simple javascript project, but some of the code isn't working. The popup works, but the button does not appear, and I cannot get my rollover image to appear. 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>
<h1>Money</h1>
<script>
function checkAGE(){if (!confirm
("Are you sure you want to enter? (<-- You can say whatever you want.)"))
history.go(-1);return " "}
document.writeln(checkAGE())
</script>
<script type="text/javascript">
<p>If you want to make Green, then you need to see Green!</p>
<FORM>
<INPUT type="button" value="Change to Green!" name="button3" onClick="document.bgColor='green'"> <br>
</FORM>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "http://news-libraries.mit.edu/blog/wp-content/uploads/2008/01/money.jpg"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "http://encefalus.com/wp-content/uploads/2008/09/resources_money.jpg"
function SwapOut(){
document.Rupert.src = Rollimage[1].src;
return true;
}
function SwapBack(){
document.Rupert.src = Rollimage[0].src;
return true;
}
// - stop hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P align="center">
<A HREF="http://www.joemaller.com/"
onmouseover="SwapOut()"
onmouseout="SwapBack()">
<IMG SRC="joe_open.jpg"
NAME="Rupert"
WIDTH=121
HEIGHT=153
BORDER=0>
</A>
</P>
</body>
</html>
I'm new to programming in general and have had trouble deciding on a good starter project. I've decided to start with something that is (hopefully) pretty simple. I have about a dozen boxes full of vinyl records and would like to write a program to catalogue everything alphabetically by artist using prompts to ask for Album Title, Artist Title, and year. My question at this point is, is JavaScript a good way to do this? I have a fundamental knowledge of HTML, CSS, JavaScript and Ruby. I assumed JS would be the best way (that I know at this point) to do this project, but if I'm wrong, would love to hear it. What I don't understand at this point is how to output the information to a text file, or how to set up an interface to run the scripts. Any advice is very much appreciated. So I feel like I should just explain what I am looking to do. Lets say there is an Item that has the number 001234-A1. This Number is the exact number that the manufacturer lists it is, however whenever it gets placed into other catalogs or websites the item number changes slightly for example:
12-34a1
0001234A1
1-234-A1
123-4a1
So what I would like to have someone show me how to do it write a script that can do three things
Remove all leading zero's
Remove all hyphens
Make all letters uppercase.
This way we now have a normalized number (1234A1). So to recap I need to create a string that takes any different numbers, normalizes those numbers, and then matches them with all other matching numbers. I really would appreciate some assistance in this. Thank You, Thank You Hello all i am working on a project. i would like to know how to remove the scroll bars , and how to align the captcha/webpage that loads in the iframe. <title>Test Raid Page</title> <script language="JavaScript" type="text/javascript"> <!--Begining of Java Script- function buildiframesA() { var rlink = prompt('Enter Raid ID:',""); var a = document.createElement("iframe"); a.setAttribute("width","330"); a.setAttribute("scrolling=no"); a.setAttribute('******', 'ifrm1'); document.body.appendChild(a); a.setAttribute('src', "http://*****.******/joinraid.php?raidid=" + rlink + "&suid=******&serverid=2"); } </script> Anything with "************" has been removed due to privacy i added this code in a.setAttribute("scrolling=no"); and it disables the whole script but, in dreamweaver shows it is fine, when i load to debug and click group a to load the frame nothing happens, ive tried many ways to disable the scroll bars and cant figure a way out. There is more to the script this is just my test for the iframe, what i have is groups, all accounts are grouped in groups, when a group is clicked, i am prompt with Enter raid ID, i enter the raid ID and the frames for how ever many people in that group load, on those pages that load in the iframe is a raid page with a captcha to join the raid, the captcha shows automatically in the frame but it is not perfectly aligned as i want it to be. I use dreamweaver and can debug in my browser, any help is appericiated, i can also post pictures as to what i am talking about. EDIT: i also forgot to say i am new to javascript, i know html and php very well.. MrGato =D I found a tutorial to create the HTML5 flip book. I combined three Edge "projects" with the HTML5 flip book. http://www.schrene.web44.net/Easter-2012/Book-A.html I tried to adjust the z-index so that the butterfly would fly out of the book but nothing I tried worked.. Also I wanted the animations to start with each flip of the page... I tried but I don't know enough javaScript to figure it out.... So I created a "cheesy" work around... A very large div on the right side of the page that has the animations in a mouse out event. Here is the page flip js: Code:
(function() {
// Dimensions of the whole book
var BOOK_WIDTH = 880;
var BOOK_HEIGHT = 460;
// Dimensions of one page in the book
var PAGE_WIDTH = 428;
var PAGE_HEIGHT = 450;
// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 30;
var page = 0;
var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );
var mouse = { x: 0, y: 0 };
var flips = [];
var book = document.getElementById( "book" );
// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );
// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;
flips.push( {
// Current progress of the flip (left -1 to right +1)
progress: 1,
// The target value towards which progress is always moving
target: 1,
// The page DOM element related to this flip
page: pages[i],
// True while the page is being dragged
dragging: false
} );
}
// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";
// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );
document.addEventListener( "mousemove", mouseMoveHandler, true );
document.addEventListener( "mousedown", mouseDownHandler, true );
document.addEventListener( "mouseup", mouseUpHandler, false );
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && (page - 1) >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
selPage=page-1;
}
else if (mouse.x > 0 && (page + 1) < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
selPage=page;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
if (selPage == page) page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
if (selPage != page ) page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
function render() {
context.clearRect( 0, 0, canvas.width, canvas.height );
for (var i = 0; i < flips.length; i++) {
var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
flip.progress += ( flip.target - flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}
}
}
function drawFlip( flip ) {
// Strength of the fold is strongest in the middle of the book
var strength = 1 - Math.abs( flip.progress );
if (strength < 0.01) strength=0.01;
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far the page should outdent vertically due to perspective
var verticalOutdent = 20 * strength;
// The maximum width of the left and right side shadows
var paperShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
// Change page element width to match the x position of the fold
flip.page.style.width = Math.max(foldX, 0) + "px";
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');
context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
}
})();
Here is the js for activating the Edge animations: Code: <script>
function playAnim1(){
var comp = $.Edge.getComposition("page1");
var stage = comp.getStage();
stage.play("play1");
}
$(document).ready(function(){
setTimeout(playAnim1, 1000);
});
function playAnim2(){
var comp = $.Edge.getComposition("page2");
var stage = comp.getStage();
stage.play("play2");
}
$(document).ready(function(){
setTimeout(playAnim2, 1000);
});
function playAnim3(){
var comp = $.Edge.getComposition("page3");
var stage = comp.getStage();
stage.play("play3");
}
$(document).ready(function(){
setTimeout(playAnim3, 1000);
});
</script>
Not sure if the things I want to accomplish with this are even possible??? If anybody has any help or advice I would greatly appreciate it. Hello, I'm learning JavaScript and have a problem with a world clock. I followed a tutorial and then added some buttons and variables to make the clock below (see code A), but it only works off the host computer's time and I need it to work off GMT. I found some code (see code B) to get GMT but cannot find a way to tie it to my first chunk of code. Any ideas? Thanks in advance. Code A: 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>Jamie's World Clock</title>
<script language="javascript">
<!-- // Comment out with HTML if JavaScript unavailable
// Variable for a time zone
var timeZone = 0;
// Variable for location
var geoLoc = "London";
// Set location using child node
function setLocation() {
document.getElementById("location").firstChild.nodeValue = geoLoc;
}
function updateClock ( )
{
// GET THE TIME
// Get current time from user's machine
var currentTime = new Date ( );
// Retrieve hours, minutes and seconds from new variable 'curretTime'
var localHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// FORMAT THE TIME
// Add a leading zero to mins and secs if less than 10
/* From tutorial: The ? and : symbols used above comprise the ternary operator.
This is a special operator that returns the value before the colon if the
condition before the query (?) is true, or the value after the colon if the
condition is false. It's a great way to write an if block in shorthand,
provided you only need to return a single value. */
// Put more simply: If x = less than 10 use 0 + currentMinutes else currentMinutes
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Variable for current hours
var currentHours = localHours + timeZone;
// Prevents negative time values eg 1.00am London = 8.00pm New York, not -4.00am
currentHours = (currentHours < 0 ? ((currentHours - 12) + 36) : currentHours);
// Ensures cannot go to 13.xx.xx PM+ and returns to AM
currentHours = ((timeZone + localHours) > 24 ? currentHours = (currentHours - 24) : currentHours);
// timeOfDay: If currentHours less than 12 = AM else PM
var timeOfDay = ( currentHours < 12 ) ? " AM" : " PM";
// 12 hour clock: If currentHours greater than 12 then -12 else currentHours
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// 12 hour clock: If currentHours = 0 then 12 else currentHours
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Put it all together in one variable
var currentTimeString = currentHours +":" + currentMinutes + ":" + currentSeconds + timeOfDay;
// DISPLAYING THE CLOCK
// Create the following span container: <span id="clock"> </span>...
// see HTML below script
/* From tutorial: By placing the inside the span element, we're creating
a child text node for the span in the DOM. We can then populate the container
with our time string by retrieving this child text node then setting its
nodeValue property, as follows:
*/
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
} // End function updateClock
// New York function
function changeZone() {
updateClock(); // Run updateClock function to get immediate change rather than waiting for <body> setInterval
document.getElementById("location").firstChild.nodeValue = geoLoc; // Change geoLoc variable using child node
alert ("Your time zone has been set to " + geoLoc + "."); // Alert the user to the change of time zone
}
// --> end HTML comment
</script>
</head>
<!-- Runs updateClock function on body load and repeats every second -->
<body onLoad="setLocation(); updateClock(); setInterval('updateClock()', 1000 )">
<!-- Runs updateClock function on body load and repeats every second -->
<span id="clock"> </span><br />
<p>Your current time zone is <span id="location"> </span>.</p>
<button onclick="timeZone = -5; geoLoc = 'New York'; changeZone()">New York</button><br />
<button onclick="timeZone = 0; geoLoc = 'London'; changeZone()">London</button><br />
<button onclick="timeZone = 4; geoLoc = 'Dubai'; changeZone()">Dubai</button><br />
<button onclick="timeZone = 8; geoLoc = 'Beijing'; changeZone()">Beijing</button><br />
<button onclick="timeZone = 11; geoLoc = 'Sydney'; changeZone()">Sydney</button><br />
</body>
</html>
Code B: Code: function getTime(zone, success) {
var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
ud = 'json' + (+new Date());
window[ud]= function(o){
success && success(new Date(o.datetime));
};
document.getElementsByTagName('head')[0].appendChild((function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = url + '&callback=' + ud;
return s;
})());
}
getTime('GMT', function(time){
// This is where you do whatever you want with the time:
alert(time);
});
|
|||||||