Ajax.InPlaceEditor

The in-place “text edit” testing allows for “on-the-fly” textfields. See the documentation on Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor

Syntax

new Ajax.InPlaceEditor( element, url, {options});

Options

Name	since	default	Description
okControl	V??	“button”	What type of ok button to use in edit mode, or none at all (button, link, false)
cancelControl	V??	“link”	What type of cancel button to use in edit mode, or none at all (button, link, false)
okText	V1.5	“ok”	The text of the submit button that submits the changed value to the server
cancelText	V1.5	“cancel”	The text of the link that cancels editing
savingText	V1.5	“Saving…”	The text shown while the text is sent to the server
clickToEditText	V1.6	“Click to edit”	The text shown during mouseover the editable text
formId	V1.5	id of the element to edit plus ‘InPlaceForm’	The id given to the element
externalControl	V1.5	null	ID of an element that acts as an external control used to enter edit mode. The external control will be hidden when entering edit mode and shown again when leaving edit mode.
externalControlOnly	V1.5	false	Whether or not to disable onclick editing so that only an external control can activate editable mode
rows	V1.5	1	The row height of the input field (anything greater than 1 uses a multiline textarea for input)
onComplete	V1.6	“function(transport, element) {new Effect.Highlight(element, {startcolor: this.options.highlightcolor});}”	Code run if update successful with server
onFailure	V1.6	“function(transport) {alert(“Error communicating with the server: ” + transport.responseText.stripTags());}”	Code run if update failed with server
cols	V1.5	none	The number of columns the text area should span (works for both single line or multi line)
size	V1.5	none	Synonym for ‘cols’ when using single-line (rows=1) input
highlightcolor	?	Ajax.InPlaceEditor.defaultHighlightColor	The highlight color
highlightendcolor	?	”#FFFFFF”	The color which the highlight fades to
savingClassName	V1.5	“inplaceeditor-saving”	CSS class added to the element while displaying “Saving…” (removed when server responds)
formClassName	V1.5	“inplaceeditor-form”	CSS class used for the in place edit form
hoverClassName	?	?	?
loadTextURL	V1.5	null	Will cause the text to be loaded from the server (useful if your text is actually textile and formatted on the server)
loadingText	V1.5	“Loading…”	If the loadText URL option is specified then this text is displayed while the text is being loaded from the server
callback	V1.5	function(form) {Form.serialize(form)}	A function that will get executed just before the request is sent to the server, should return the parameters to be sent in the URL. Will get two parameters, the entire form and the value of the text control.
submitOnBlur	V1.6	“false”	This option if true will submit the in_place_edit form when the input tag loses focus.
ajaxOptions	V1.5	{}	Options specified to all AJAX calls (loading and saving text), these options are passed through to the prototype AJAX classes.

The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

for more information please check this url: http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor

javascrip regular expression for name with space

var re = /^[a-zA-Z\s]*$/;

if(re.test(‘Sachin Makwana’)){

alert(‘in’);

} else {

alert(‘out’);

}

getElementsByAttribute for Javascipt

document.getElementsByAttribute=function(attrN,attrV,multi){
attrV=attrV.replace(/\|/g,’\\|’).replace(/\[/g,’\\[‘).replace(/\(/g,’\\(‘).replace(/\+/g,’\\+’).replace(/\./g,’\\.’).replace(/\*/g,’\\*’).replace(/\?/g,’\\?’).replace(/\//g,’\\/’);
var
multi=typeof multi!=’undefined’?
multi:
false,
cIterate=document.getElementsByTagName(‘*’),
aResponse=[],
attr,
re=new RegExp(multi?’\\b’+attrV+’\\b’:’^’+attrV+’$’),
i=0,
elm;
while((elm=cIterate.item(i++))){
attr=elm.getAttributeNode(attrN);
if(attr &&
attr.specified &&
re.test(attr.value)
)
aResponse.push(elm);
}
return aResponse;
}

tinyMCE text editor – complete buttons

Here’s the javascript for tinyMCE text editor
With this javascript you can have all the advanced features of tinyMCE text editor.

if you want to remove some of the features from you editor you can do so by removing the related tags or keywords used for that particular feature.

for example, if you want to remove the save feature from the first row – just remove the “save,” from the scirpt.

also “separator” is used for putting separator between different buttons

tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
plugins : “safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager”,
theme_advanced_buttons1_add_before : “save,newdocument,separator”,
theme_advanced_buttons1_add : “fontselect,fontsizeselect”,
theme_advanced_buttons2_add : “separator,insertdate,inserttime,preview,separator,forecolor,backcolor”,
theme_advanced_buttons2_add_before: “cut,copy,paste,pastetext,pasteword,separator,search,replace,separator”,
theme_advanced_buttons3_add_before : “tablecontrols,separator”,
theme_advanced_buttons3_add : “emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
content_css : “/example_data/example_full.css”,
plugin_insertdate_dateFormat : “%Y-%m-%d”,
plugin_insertdate_timeFormat : “%H:%M:%S”,
external_link_list_url : “example_data/example_link_list.js”,
external_image_list_url : “example_data/example_image_list.js”,
flash_external_list_url : “example_data/example_flash_list.js”,
template_external_list_url : “example_data/example_template_list.js”,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : “+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv”
});

Javascript trim is a string function. It will trim all leading and trailing occurrences of whitespace characters.

here is a simple javascript function for triming white blank spaces from a given string:

function trim(str, chars) {
return ltrim(rtrim(str, chars), chars);
}

function ltrim(str) {
chars = “\\s”;
return str.replace(new RegExp(“^[” + chars + “]+”, “g”), “”);
}

function rtrim(str) {
chars = “\\s”;
return str.replace(new RegExp(“[” + chars + “]+$”, “g”), “”);
}

thanks,

Sachin (samsami2um@gmail.com)

Browser detection javascript

heres a javascript for the detection of the web browser used by the end user:

if(navigator.userAgent.indexOf(‘Safari’)!=-1){
alert(‘safari’);
} else if(navigator.userAgent.indexOf(‘Gecko’)!=-1) {
alert(‘mozilla’);
}  else {
if(navigator.userAgent.indexOf(‘MSIE 7.0’)!=-1) {
alert(‘ie 7’);
} else {
alert(‘ie 6’);
}
}

now i’ll explain you the above script:

navigator.userAgent returns the full description of the user agent or web browser used by the client or end user.

indexOf() function returns the character position of the string passed to it in a given string.

i.e.  navigator.userAgent.indexOf(‘Safari’)!=-1

here, navigator.userAgent is the “search” string  and Safari is the “search keyword”; so if Safari is found in the “search” string, the comparison will return a non-negative number and if not found will return -1

so if the search keyword is found in the search string the condition becomes true.

thanks,

Sachin (samsami2um@gmail.com)

Calling external javascript on button click in Flash

Calling external javascript in flash is really easy. just follow the guidelines given below:

create a flash button in flash.

single click on the flash button and open the action script window related to the flash button.

in the action script window please write down the following action script:

on (release) {
getURL(“javascript:JavascriptFunction();”,”_self”);
}

where JavascriptFunction() is the external javascript function that is to be called by the click of the flash button.

If you have any queries or questions please do contact me.

Thanks,

Sachin (samsami2um@gmail.com)