JavaScript - Dependant Dropdowns To Text Field

Good Morning Everyone,

My first post here so hope i get the format right

The problem

I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image.

The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows:

Code:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

if (filename = 'about.php')
 {
  $('#about').attr('src', 'images/Nav/about_selected.png')
 }
else
 {
  $('#about').attr('src', 'images/Nav/about_over.png')
 }

I am using jQuery for this project thus the jQuery code being thrown in there.

The logic of the code iv made is, IF the page is 'About' then the 'About' menu button should display 'about_selected.png'.

I hope this makes sense and a solution would be much appreciated. Thanks!

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.

Ok, here is my issue. I want to have an input text on the top of the page that when I type in a series of numbers and hit submit, it populates the rest of the form. Does anyone have any idea what I need to perform this action?

I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me.

Code:

<script type='text/javascript'>
       function resizeIt() 
        {
	document.getElementById('comment').style.height = 50px;
        };
</script>

<input type='text' id='comment' class='urlTextArea' name='url' value=''
 size='75' onfocus='resizeIt()'>

I have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working.
This is the code I'm usign to populate the fields.
Code:

document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;

I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions?

Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code:

Code:

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"  onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  C  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box?

Hi guys,I was thinking about the code to :
write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white.
I really like to know how we code that in javascript using functions, without any CSS or anything else.
That means we have 2 objects a text box and a rectangle for feedback color.
Remark: there is no button at all, the validation will be each time you are typing.


A Bonus question : if someday we decide to change the color with pictures , is it possible to do that?
Thank you very much for your help, much appreciate it.

window.onload = initAll;

function initAll() {
document.getElementById("Message").onfocus = focusHandler;
document.getElementById("Message").onblur = blurHandler;

}

function focusHandler() {
document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>"
}

function blurHandler() {
var helpMessage = document.getElementById("helpYou").innerHTML = "";
}

function nameHandler(frm) {
var theName = frm.firstName.value;
}

Quote:
When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on.

I'm building a template editor and need some help changing some of the variables.

Part 1.

Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s

I need to be able to fill out two fields to change DEALERNAME and 00/00/00.
I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.


Part 2.

I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.

Head
Code:

<script language="javascript" type="text/javascript">
        function detail1a(){
        document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
        }
        function detail1b(){
        document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
        }
		function detail1c(){
        document.getElementById("detail1").innerHTML = "Lube Chassis";
        }
		function detail2a(){
        document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
        }
        function detail2b(){
        document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
        }
		function detail2c(){
        document.getElementById("detail2").innerHTML = "Lube Chassis";
        }
		function detail3a(){
        document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
        }
        function detail3b(){
        document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
        }
		function detail3c(){
        document.getElementById("detail3").innerHTML = "Lube Chassis";
        }
        </script>

Body
Code:

					
<span style="font-weight: bold;">Offer Details</span><br />
					<p style="margin: 8px 10px">
					Detail 1<br />
					<input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 2<br />
					<input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 3<br />
					<input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br />
					</p>

Output
Code:

										
<ul>
<li><span id="detail1">Detail 1</span></li>
<li><span id="detail2">Detail 2</span></li>
<li><span id="detail3">Detail 3</span></li>
</ul>

Hello, I am needing the coding to do the follow:

When a user makes a selection from a dropdown, the value is placed in a text input.

SELECT >>> INPUT

Thank you so much for your help!

[ICODE]
<html>
<head>
<title>ABS</title>
<?php
$j="dove";
?>

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{

if (form.Name.value == "") {
alert( "Please enter your email address." );
form.Game.value="<?php echo $j;?>";
form.Name.focus();
return false ;
}

if (form.Game.value == "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;
}
if (document.form.Shame[0].value== "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;

}
return true ;

}


</script>
</head>
<body>

<form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);">


<input type="text" name="Name" />
<input type="text" name="Game" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input name="submit" type="submit">

</form>
</body>
</html>
[icode]

I need to use the array's shame and just check if the third one is not empty.

I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array.

Hi guys,

I have this drag and drop script:

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>
	<title>JavaScript Drag and Drop Tutorial</title>
	
</head>

<body>
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
	position: absolute; 
}
	</style>
	
    <div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" >
		
		<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
		<pre id="debug"> </pre>
		
		
	</div>
		
	<script language="JavaScript" type="text/javascript">
<!--
function $(id){
	return document.getElementById(id);
}

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e){	
	if (e == null) 
		e = window.event; 
		
	var target =  e.target != null ? e.target : e.srcElement;
		
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')	{
		_startX = e.clientX;
		_startY = e.clientY;
		
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);	
		
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;		
		_dragElement = target;	
		
		document.onmousemove = OnMouseMove;
		
		document.body.focus();
		
		document.onselectstart = function () { return false; };
		
		target.ondragstart = function() { return false; };
		
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
}

function OnMouseUp(e)
{
	
	if (_dragElement != null)	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;		
	}
}
	</script>
</div>		
	</body>

</html>

Is there a way to drag and drop text field?

Dear All

I have done some coding in javascript . Where i am generating the textbox field and checkbox dynamicaly . That is as per condition if there is one record match as per condition then that many text field will be generated

So just to give a example , which is not dynamical

What i want to do is first the text field are disable and when the checkbox is checked then the text box should be enable

For 1 record the logic is working proper , but if there are more then 1 record then it does not work

Can you'll please help




<?php session_start();?>


<!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>
<link rel="stylesheet" href="../locationpropertydesirecom/css/adcss1.css" type="text/css" media="screen" />


<script language="JavaScript">


function enable_text(status)
{

status=!status;

var e=document.getElementsByTagName("tr");

for(var i=0;i<e.length;i++)
{


e[i].disabled = status;


}

}

</script>

</head>

<body>

<table>

<tr>
<td><input type="text" id="aa" name="a" disabled="disabled"/></td>
<td><input type="text" id="aa" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>

<tr>
<td><input type="text" name="a" disabled="disabled"/></td>
<td><input type="text" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>



</table>


Thanks , regards

Jim

Hey there everybody!

I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out.

What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point.

Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window?

I hope I explained that without it sounding confusing. I would really appreciate any help.

Here is my basic code, it does not include a popup code however.
Code:

<html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
}
</script>
<body>
<form>


<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">

<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>