JavaScript - Changing Opacity Of A Div If The Text Input Field In It Is Active

I'm creating a page that calculates a number depending on what value is inputted into a text field. I need to create some javascript that updates this new calculated value and outputs it next to the input field. Anytime the user changes the number, it recalculates the value. My calculation is currently being produced by PHP, however if I need to, I can create javascript as well to recalculate these numbers.

My formulas for all 4 calculations are as follows:

First: Inputted Value * 10
Second: Inputted Value * 20
Third: Inputted Value / 2
Fourth: Inputted Value * 2

Here is my code I'm working with:

PHP Code:
<?php
session_start();
$username = $_SESSION['username'];

include_once('inc/connect.php');

$credquery = mysql_query("SELECT * FROM userstats WHERE username='$username'");
$row = mysql_fetch_assoc($credquery);

$credits = $row['credits'];
$bannercredits = $row['bannercredits'];
$textcredits = $row['textcredits'];

$sitetobanner = $_POST['sitetobanner'];
$sitetotext = $_POST['sitetotext'];
$bannertotext = $_POST['bannertotext'];
$texttobanner = $_POST['texttobanner'];

if (isset($sitetobanner)){

$bannerimp = round($_POST['bannerimp']);
    if ($bannerimp > 1){
        $s = "s";
    }
    if ($bannerimp <= $credits){
        $newcredits = $credits - $bannerimp;
        $newbannercredits = $bannerimp * 10;
        $totalbannercredits = $bannercredits + $newbannercredits;
        
        $updatebanner = mysql_query("UPDATE userstats SET credits='$newcredits', bannercredits='$totalbannercredits' WHERE username='$username'");
        
        $credits = $row['credits'];
        $bannercredits = $row['bannercredits'];
        $textcredits = $row['textcredits'];

        $convertedbanner = "You converted ".$bannerimp." credit".$s." into ".$newbannercredits." banner impressions";
        
    }
    else{
    if ($credits>1){
    $mycredits = $credits - 1;}
    $errorbanner = number_format($mycredits, 0, '.', '');

    }

}


if (isset($sitetotext)){

$textimp = round($_POST['textimp']);
    if ($textimp > 1){
        $s = "s";
    }
    if ($textimp <= $credits){
        $newcredits = $credits - $textimp;
        $newtextcredits = $textimp * 20;
        $totaltextcredits = $textcredits + $newtextcredits;
        
        $updatebanner = mysql_query("UPDATE userstats SET credits='$newcredits', textcredits='$totaltextcredits' WHERE username='$username'");
        
        $credits = $row['credits'];
        $bannercredits = $row['bannercredits'];
        $textcredits = $row['textcredits'];
        
        $convertedtext = "You converted ".$textimp." credit".$s." into ".$newtextcredits." text ad impressions";
        
    }
    else{
    
    if ($credits>1){
    $mycredits = $credits - 1;}
    $errortext = number_format($mycredits, 0, '.', '');
    
    }

}


if (isset($texttobanner)){

$texttobannerimp = round($_POST['texttobannerimp']);
    if ($texttobannerimp > 1){
        $s = "s";
    }

    if ($texttobannerimp <= $textcredits){
        if ($texttobannerimp>=2&&$texttobannerimp>""){
        $newcredits = $textcredits - $texttobannerimp;
        $newbannercredits = $texttobannerimp / 2;
        $totalbannercredits = $bannercredits + $newbannercredits;
        
        $updatebanner = mysql_query("UPDATE userstats SET textcredits='$newcredits', bannercredits='$totalbannercredits' WHERE username='$username'");
        
        $credits = $row['credits'];
        $bannercredits = $row['bannercredits'];
        $textcredits = $row['textcredits'];
        
        $convertedtextimp = "You converted ".$texttobannerimp." text ad impression".$s." into ".$newbannercredits." banner impressions";
        }
        else{
            $convertedtextimp = "You Hag";
        }
    }
    else{
    
    if ($textcredits>1){
    $mycredits = $textcredits - 1;}
    $errortextimp = number_format($mycredits, 0, '.', '');
    
    }
}


if (isset($bannertotext)){

$bannertotextimp = round($_POST['bannertotextimp']);
    if ($bannertotextimp > 1){
        $s = "s";
    }
    if ($bannertotextimp <= $bannercredits){
        $newcredits = $bannercredits - $bannertotextimp;
        $newtextcredits = $bannertotextimp * 2;
        $totaltextcredits = $textcredits + $newtextcredits;
        
        $updatebanner = mysql_query("UPDATE userstats SET bannercredits='$newcredits', textcredits='$totaltextcredits' WHERE username='$username'");
        
        $credits = $row['credits'];
        $bannercredits = $row['bannercredits'];
        $textcredits = $row['textcredits'];

        $convertedbannerimp = "You converted ".$bannertotextimp." banner impression".$s." into ".$newtextcredits." text impressions";
        
    }
    else{
    
    if ($bannercredits>1){
    $mycredits = $bannercredits - 1;}
    $errorbannerimp = number_format($mycredits, 0, '.', '');
    }
}



?>
<html>
<head>
<title>Convert Credits</title>
<script type="text/javascript" language="javascript">
function inputLimiter(e,allow) {
var AllowableCharacters = '';
if (allow == 'NumbersOnly'){AllowableCharacters='0123456789.';}

var k;
k=document.all?parseInt(e.keyCode): parseInt(e.which);
if (k!=13 && k!=8 && k!=0){
if ((e.ctrlKey==false) && (e.altKey==false)) {
return (AllowableCharacters.indexOf(String.fromCharCode(k))!=-1);
} else {
return true;
}
} else {
return true;
}
}

</script>
</head>
<body>
<h1>Convert Credits</h1><br />
Credits: <?php echo $credits; ?><br />
Banner Impressions: <?php echo $bannercredits; ?><br />
Text Ad Impressions: <?php echo $textcredits; ?><br />

<form action="convert.php" method="POST">
    <h3>Credits To Banner Impressions</h3>
    Convert <input type="text" name="bannerimp" id="NumbersOnly" onkeypress="return inputLimiter(event,'NumbersOnly')" value="<?php echo $errorbanner; ?>" onChange=""> credits into BLANK Banner Impressions! 
    <input type="submit" name="sitetobanner" value="Convert"><br />
    <?php echo $convertedbanner; ?>
</form>

<form action="convert.php" method="POST">
    <h3>Credits To Text Ad Impressions</h3>
    Convert <input type="text" name="textimp" id="NumbersOnly" onkeypress="return inputLimiter(event,'NumbersOnly')" value="<?php echo $errortext; ?>"> credits into BLANK Text Ad Impressions! 
    <input type="submit" name="sitetotext" value="Convert"><br />
    <?php echo $convertedtext; ?>
</form>

<form action="convert.php" method="POST">
    <h3>Text Ad To Banner Impressions</h3>
    Convert <input type="text" name="texttobannerimp" id="NumbersOnly" onkeypress="return inputLimiter(event,'NumbersOnly')" value="<?php echo $errortextimp; ?>"> Text Ad Impressions into BLANK Banner Impressions! 
    <input type="submit" name="texttobanner" value="Convert"><br />
    <?php echo $convertedtextimp; ?>
</form>

<form action="convert.php" method="POST">
    <h3>Banner To Text Ad Impressions</h3>
    Convert <input type="text" name="bannertotextimp" id="NumbersOnly" onkeypress="return inputLimiter(event,'NumbersOnly')" value="<?php echo $errorbannerimp; ?>"> Banner Impressions into BLANK Text Ad Impressions! 
    <input type="submit" name="bannertotext" value="Convert"><br />
    <?php echo $convertedbannerimp; ?>
</form>

</body>
</html>

I'm using code based on these functions to fade images up from black as part of a slideshow:

Code:

function fade_down(id, millisec) {
	// fade image from 0% to 100% visible
	var speed = Math.round(millisec / 100);
	var timer = 0;
	for(i = 100; i >= 0; i--) { 
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
    }
}

function fade_up(id, millisec) {
	// fade image from 0% to 100% visible
	var speed = Math.round(millisec / 100);
	var timer = 0;
	for(i = 0; i <= 100; i++) { 
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
        timer++; 
    }
}

function changeOpac(opacity, id) {
   //change the opacity for different browsers
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")";
}

It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks.

the following script works great in Chrome. very smooth... but in Firefox and IE it is very jittery/jumpy from 0 to 100 opacity too quickly...
Code:

function changeFadeLevel(newval){
	document.getElementById("redbg").style.opacity=newval/100;
	document.getElementById("redbg").style.filter  = "alpha(opacity=" + newval + ")";
}

function changeBg(state){
	if(state==1){
		for(var i=0; i<=100; i++){
			setTimeout("changeFadeLevel("+i+")",i*3);
		}
		document.getElementById("overlaystatus").value='on';
	}else{
		for(var i=0; i<=100; i++){
			setTimeout("changeFadeLevel("+(100-i)+")",i*3);
		}
		document.getElementById("overlaystatus").value='off';
	}
}

Code:

<input type="hidden" id="overlaystatus" value="off" />
<img src="/bg.jpg" id="bg" border"0" />
<img src="/redbg.jpg" id="redbg" border="0" />

the images are 1596x1057 resolution stretched to 100% width with css

Code:

html, body {
height: 100%;
margin: 0;
padding: 0;
background:#000;
font-family:Arial, Helvetica, sans-serif;
}

img#bg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}

img#redbg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
opacity:0.0;
filter:alpha(opacity=0);
}

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

im clueless when it comes to javascript, but this is what im trying to find:

i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in?

The Hyperlinks:
Code:

<a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a>

The textareas:
PHP Code:
                <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> 


as you can see the textareas are created on the fly based on a php array.

would anyone be willing to put some code together for this?
or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field?

I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work.

Can I do this?

Help

Hi,

I am writing a script which contains several check boxes, one of which selects all of the other check boxes. When check boxes are ticked the information from their values is put into a hidden field as a list and if it is un-ticked it is removed. When the one which selects all of the other check boxes is ticked I want all there values to be added to the list.

I cannot get the script to fill in the hidden field when the all check box is selected.

The code is,

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function display(box) {
// get reference to form object, and to array of same-named checkboxes
var temparr = new Array(), f = box.form, boxgroup = f[box.name];
// loop through it
for (var i=0; i<boxgroup.length; i++) {
// add the value of any checked box to next available slot in temparr
if (boxgroup[i].checked) temparr[temparr.length] = boxgroup[i].value;
// run the .join() method on the array (separator = ',') and output it to field
f.readout.value = temparr.join(',');
}
}

function Check(chk)
{
if(document.myform.Check_ctr.checked==true){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}else{

for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
}

</script>
</head>
<body onLoad="document.forms[0].reset()">


<form name="myform">

<ul>
<li><label><input type="checkbox" name="Check_ctr" value="yes" onClick="Check(document.myform.group)"/></label> All Africa</li>

<li><label><input type="checkbox" name="group" value="01A" onclick="display(this)" onChange="display(this)"/></label> Algeria</li><li><label><input type="checkbox" name="group" value="02A" onclick="display(this)" onChange="display(this)"/></label> Angola</li><li><label><input type="checkbox" name="group" value="03A" onclick="display(this)" onChange="display(this)"/></label> Benin</li><li><label><input type="checkbox" name="group" value="04A" onclick="display(this)" onChange="display(this)"/></label> Botswana</li><li><label><input type="checkbox" name="group" value="05A" onclick="display(this)" onChange="display(this)"/></label> Burkina_Faso</li><li><label><input type="checkbox" name="group" value="06A" onclick="display(this)" onChange="display(this)"/></label> Burundi</li><li><label><input type="checkbox" name="group" value="07A" onclick="display(this)" onChange="display(this)"/></label> Cameroon</li><li><label><input type="checkbox" name="group" value="08A" onclick="display(this)" onChange="display(this)"/></label> Canary_Islands</li><li><label><input type="checkbox" name="group" value="09A" onclick="display(this)" onChange="display(this)"/></label> Cape_Verde</li><li><label><input type="checkbox" name="group" value="10A" onclick="display(this)" onChange="display(this)"/></label> Central_African_Republic</li><li><label><input type="checkbox" name="group" value="11A" onclick="display(this)" onChange="display(this)"/></label> Chad</li><li><label><input type="checkbox" name="group" value="12A" onclick="display(this)" onChange="display(this)"/></label> Comoros</li><li><label><input type="checkbox" name="group" value="13A" onclick="display(this)" onChange="display(this)"/></label> Congo</li><li><label><input type="checkbox" name="group" value="14A" onclick="display(this)" onChange="display(this)"/></label> Democratic_Republic_of_Congo</li><li><label><input type="checkbox" name="group" value="15A" onclick="display(this)" onChange="display(this)"/></label> Djibouti</li>


</ul>
<br><input type="hidden" name="readout" size="20">

</form>
</body>
</html>

Can anyone help solve this?

Thanks,
Cs1h

Hi all

can someone guide me (total JS newbie) on this presumably pretty easy task?

I have a "parent" page with some text inputs in it (a form). This is what I am after:
-when the user clicks a link it pops open a new window via JS - "child" (this is working).
-in the "child" window there are also some text inputs (another form) (done).
-when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window.

Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled!

I set up a test page to make this all easy to talk about:

http://www.yellow-turtle.com/testDumpMe_parent.html

Please let me know!
Thanks!
-John

Hi,

I have a table with a list of items which currently show 8 items per page. I want to have an input box at the top of the page so if I want a different amount of items to be shown i enter the number and the page alters the pagination to what ever number is entered. Hope this makes sense.

Thanks for any help

I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url.
I am also assuming this can be accomplished with javascript.

Any help is greatly appreciated.

I have now go an applet from http://castleamber.com/amberticker.html, I have contacted the publisher and asked whether ther is a way to add line/streaming text from a textarea into he applet at runtime, however they are not responding as yet.

If possible could someone tell me how I would use a repaint() case statement in this applet in order to get the value of the textarea to reflect in the ticker.

Any code I do use will have all compliments to the creators and those who have helped along the way.

Thank you

Hi,

Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

This is probably way, way off but I've done this and it doesn't work.

Any help would be greatly appreciated, thanks.


<script language="JavaScript">
function changelist() {
//here we assign the value of the hidden input to x
x=eval(document.getElementByName("SelectLists[40]");

if(document.getElementById("SelectLists[40]").selected=true
x=SelectLists[40]

else(document.getElementById("SelectLists[41]").selected=true
x=SelectLists[41]

else(document.getElementById("SelectLists[42]").selected=true
x=SelectLists[42]

//now we assign the new value to the input
document.getElementById("theHiddenInput").name=x;

//and now we test
alert(document.getElementById("theHiddenInput").name)


}
</script>





<input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
<select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
<option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
<option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
<option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>

Hello i am using a simple calendar date picker in which when u click a date is displayed in an input field.
Using a javascript i am trying to retrieve data from a second page using this value but probably i am doing something wrong.

1st page:
Code:

<script type="text/javascript">
 function showCustomer(str)
 {
 if (str=="")
   {
   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","check6.asp?q="+str,true);
 xmlhttp.send();
 }
 </script>
</head>
<body>
<form>
    Check in: 
    <input onchange="showCustomer(this.value)" size="22" id="f_date1" /><button id="f_btn1">...</button> 
    <script type="text/javascript">//<![CDATA[
      var cal = Calendar.setup({
          onSelect: function(cal) { cal.hide() },
          showTime: true
      });
      cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d");
    //]]></script>
</form>
 <br />
 <div id="txtHint">here...</div>
</body>
 </html>

and in second one i am trying to get date like this:


Code:

sql_cmd.CommandText = "SELECT dbo.rooms.id, type, image, price,details FROM dbo.rooms, dbo.transactions WHERE dbo.rooms.id=dbo.transactions.roomid and '" & request.querystring("q") & "' not between checkin and checkout"

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.


Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="javascript/text">
			<!--
				function clearInputField( input, def )
					input = document.getElementById( input );
					if ( input.value == def ) {
						input.value = '';
					}
				
				}
			-->
		</script>
	</head>
	<body>
		<b>Testing Input</b>
		<input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text"  />
	<body>
</html>

This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...?