Editable regions within list box option

Javascript coding ..

Moderators: macek, egami, gesf

PeterJ
New php-forum User
New php-forum User
Posts: 5
Joined: Thu Jul 14, 2011 7:59 am

Editable regions within list box option

Postby PeterJ » Sat Jul 16, 2011 9:34 am

I posted this in the wrong forum, so re posting it here.

Hi, I am new to the forum and very new to coding. I'm learning as much as I can and searching for everything. I often try to use scripts and then change them, to get them to behave the way I want. Then, when I've worked out how all the pieces work, I start to write my own code, to do the same functions.

I am stuck on a project that I would like to make. I would like a drop down list box where each list box would be in two sections. The first being static text, to describe the list box and the second being editable text, coming from mysql and being returned to mysql when edited.

For example.
Drop down title: Edit Text:
First box. English: English text to be edited.
Second box. Spanish: Spanish text to be edited.
Third box. Greek: Greek text to be edited.

Is this possible.

Pete


Since this, I have been experimenting with some javascript. If anyone can advise on this it would be great.

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">

<!--//EDITABLE HTML SELECT BOX SCRIPT
//Author: Teo Cerovski
//CommentsTo: teoDOTcerovskiATgmailDOTcom
/*
Include this script to your web page.
example: <SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js"></SCRIPT>

Put event attributes onClick="beginEditing(this);" and onBlur="finishEditing();" to your select box.
example: <SELECT name="foo" id="foo" onClick="beginEditing(this);" onBlur="finishEditing();">...</SELECT>

When editing is finished option values are overwriten with text values, so only text of the selected option will be posted.
*/

Script added here for working on file-->

<script language="JavaScript" type="text/javascript">

var o = null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var selectedIndex = 0;
var pointer = "|";
var blinkDelay = null;
var pos = 0;

function beginEditing(menu) {
finishEditing();
if(menu.selectedIndex > -1 && menu[menu.selectedIndex].value != "read-only") {
o = new Object();
o.editOption = menu[menu.selectedIndex];
o.editOption.old = o.editOption.text;
o.editOption.text += pointer;
selectedIndex = menu.selectedIndex;
if(navigator.userAgent.toLowerCase().indexOf("msie") != -1) //user is using IE
document.onkeydown = keyPressHandler;
else
document.onkeypress = keyPressHandler;
pos = o.editOption.text.indexOf(pointer);
blinkDelay = setTimeout("blinkPointer()", 300);
}

function keyPressHandler(e){
stopBlinking();
menu.selectedIndex = selectedIndex;
var option = o.editOption;
var keyCode = (window.event) ? event.keyCode : e.keyCode;
var specialKey = true;
if(keyCode == 0){
keyCode = (isNN) ? e.which : event.keyCode;
specialKey = false;
}

if(keyCode == 16)
return false;
else if(keyCode == 116 && specialKey){
finishEditing();
window.location.reload(true);
}
else if(keyCode == 8)
option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 46 && option.text.indexOf(pointer) < option.text.length)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
else if (keyCode == 13)
finishEditing();
else if(keyCode == 37 && option.text.indexOf(pointer) > 0 && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)-1,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 39 && option.text.indexOf(pointer) < option.text.length && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.indexOf(pointer)+2) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
else if(((keyCode == 37 && option.text.indexOf(pointer) <= 0) || (keyCode == 39 && option.text.indexOf(pointer) >= option.text.length) || keyCode == 40 || keyCode == 38 || keyCode == 20 || keyCode == 33 || keyCode == 34) && specialKey){
//do nothing
}else if(keyCode == 36 && specialKey)
option.text = pointer + option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 35 && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length) + pointer;
else
option.text = option.text.substring(0,option.text.indexOf(pointer)) + String.fromCharCode(keyCode) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);

pos = option.text.indexOf(pointer);
blinkDelay = setTimeout("blinkPointer()", 300);

if(!((keyCode >= 48 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 122)))
return false;

}

}

function blinkPointer(){
if(o == null)
return;
pos = o.editOption.text.indexOf(pointer);
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,o.editOption.text.indexOf(pointer)) + "." + o.editOption.text.substring(o.editOption.text.indexOf(pointer)+1,o.editOption.text.length)
blinkDelay = setTimeout("blinkPointer2()", 300);
}

function blinkPointer2(){
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,pos) + pointer + o.editOption.text.substring(pos+1,o.editOption.text.length)
blinkDelay = setTimeout("blinkPointer()", 300);
}

function stopBlinking(){
clearTimeout(blinkDelay);
if(o.editOption.text.charAt(pos) != pointer)
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,pos) + pointer + o.editOption.text.substring(pos+1,o.editOption.text.length)
}

function finishEditing() {
if(o != null) {
stopBlinking();
option = o.editOption;
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);

option.value = option.text;
document.onkeypress = null;
document.onkeydown = null;
o = null;
}
}
</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>



<form>
<select name="test" onClick="beginEditing(this);" onBlur="finishEditing();" style="width:400px;">
<option value="0" selected="selected">Edit Slogan Text</option>
<option value="en"><span >English:</span>&nbsp;This is where the English text will be</option>
<option value="test"><span >Spanish:</span>&nbsp;This is where the Spanish text will be</option>
<option value="test"><span >Greek:</span>&nbsp;This is where the Greek text will be</option>
<option value="test"><span >Italian:</span>&nbsp;This is where the Italian text will be</option>
<option value="test"><span >French:</span>&nbsp;This is where the French text will be</option>
<option value="test"><span >Maltese:</span>&nbsp;This is where the Maltese text will be</option>
<option value="test"><span >Portuguese:</span>&nbsp;This is where the Portuguese text will be</option>
<option value="test"><span >German:</span>&nbsp;This is where the German text will be</option>
</select>
</form>

</body>
</html>
.........Code

User avatar
gandahar
New php-forum User
New php-forum User
Posts: 112
Joined: Tue Mar 15, 2011 4:05 am

Re: Editable regions within list box option

Postby gandahar » Wed Jul 20, 2011 12:29 am

yes it's possible, please post the code between apropriate [code tag

have you found solution to your problem ?


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 0 guests