Select DOM element by user input

[Vortexmind]

Hi all
I was wondering if this is possible in Javascript.

I want to make a bookmarklet. When a user launches it, it tells the
user to select an element in the page (for example a textarea) with the
mouse. When the user clicks on the textarea, my script gets a reference
of the element that he clicked so i can operate on it. Is it possibile?

Thanks for any input on this, I have some difficulties sorting my ideas
out :)

Best regards

Vortexmind
http://www.vortexmind.net

[no.way]

Vortexmind wrote:

Hi all
I was wondering if this is possible in Javascript.

I want to make a bookmarklet. When a user launches it, it tells the
user to select an element in the page (for example a textarea) with the
mouse. When the user clicks on the textarea, my script gets a reference
of the element that he clicked so i can operate on it. Is it possibile?

Thanks for any input on this, I have some difficulties sorting my ideas
out :)

Best regards

Vortexmind
http://www.vortexmind.net

I picked up this bookmarklet a while back... does basically what you ask for...

Put it all back together as one line then feed it through a tidy or similar function
to clean it up real quick.

D.

The purpose of this one is to resize text boxes...

javascript:TxtRsz={formEl:null,adEv:function(t,ev, fn){if(typeof
document.addEventListener!='undefined'){t.addEvent Listener(ev,fn,false)}else{t.attachEvent('on'+ev,f n)}},rmEv:function(t,ev,fn){if(typeof
document.removeEventListener!='undefined'){t.remov eEventListener(ev,fn,false)}else{t.detachEvent('on '+ev,fn)}},init:function(){var
textareas=document.getElementsByTagName('textarea' );for(var
i=0;i<textareas.length;i++){textareas[i].style.cursor='se-resize'}var
inputs=document.getElementsByTagName('input');for( var
i=0;i<inputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='e-resize'}}TxtRsz.adEv(document,'mousedown',TxtRsz.i nitResize)},initResize:function(event){if(typeof
event=='undefined'){event=window.event}var
target=event.target||event.srcElement;if(target.no deName.toLowerCase()=='textarea'||(target.nodeName .toLowerCase()=='input'&&target.type=='text')){Txt Rsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz. formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRs z.formEl.clientHeight;TxtRsz.formEl.startX=event.c lientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.a dEv(document,'mousemove',TxtRsz.resize);TxtRsz.adE v(document,'mouseup',TxtRsz.stopResize);try{event. preventDefault()}catch(e){}}},resize:function(even t){if(typeof
event=='undefined'){event=window.event}try{TxtRsz. formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+'px' }catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase() =='textarea'){TxtRsz.formEl.style.height=event.cli entY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+'px '}},stopResize:function(event){TxtRsz.rmEv(documen t,'mousedown',TxtRsz.initResize);TxtRsz.rmEv(docum ent,'mousemove',TxtRsz.resize);var
textareas=document.getElementsByTagName('textarea' );for(var
i=0;i<textareas.length;i++){textareas[i].style.cursor='text'}var inputs=document.getElementsByTagName('input');for( var
i=0;i<inputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='text'}}}};TxtRsz.init();

[ASM]

Vortexmind a écrit :

Hi all
I was wondering if this is possible in Javascript.

I want to make a bookmarklet. When a user launches it, it tells the
user to select an element in the page (for example a textarea) with the
mouse. When the user clicks on the textarea, my script gets a reference
of the element that he clicked so i can operate on it. Is it possibile?

<textarea onclick="alert(this.name)" name="Me">

[no.way]

This is the mozilla only version because of it's length .. IE gags on it...

His IE Version calls up a JS file located on his server.

I can't remember where it came from... sorry.

D.

D.

The purpose of this one is to resize text boxes...

javascript:TxtRsz={formEl:null,adEv:function(t,ev, fn){if(typeof
document.addEventListener!='undefined'){t.addEvent Listener(ev,fn,false)}else{t.attachEvent('on'+ev,f n)}},rmEv:function(t,ev,fn){if(typeof
document.removeEventListener!='undefined'){t.remov eEventListener(ev,fn,false)}else{t.detachEvent('on '+ev,fn)}},init:function(){var
textareas=document.getElementsByTagName('textarea' );for(var
i=0;i<textareas.length;i++){textareas[i].style.cursor='se-resize'}var
inputs=document.getElementsByTagName('input');for( var
i=0;i<inputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='e-resize'}}TxtRsz.adEv(document,'mousedown',TxtRsz.i nitResize)},initResize:function(event){if(typeof
event=='undefined'){event=window.event}var
target=event.target||event.srcElement;if(target.no deName.toLowerCase()=='textarea'||(target.nodeName .toLowerCase()=='input'&&target.type=='text')){Txt Rsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz. formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRs z.formEl.clientHeight;TxtRsz.formEl.startX=event.c lientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.a dEv(document,'mousemove',TxtRsz.resize);TxtRsz.adE v(document,'mouseup',TxtRsz.stopResize);try{event. preventDefault()}catch(e){}}},resize:function(even t){if(typeof
event=='undefined'){event=window.event}try{TxtRsz. formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+'px' }catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase() =='textarea'){TxtRsz.formEl.style.height=event.cli entY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+'px '}},stopResize:function(event){TxtRsz.rmEv(documen t,'mousedown',TxtRsz.initResize);TxtRsz.rmEv(docum ent,'mousemove',TxtRsz.resize);var
textareas=document.getElementsByTagName('textarea' );for(var
i=0;i<textareas.length;i++){textareas[i].style.cursor='text'}var
inputs=document.getElementsByTagName('input');for( var
i=0;i<inputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='text'}}}};TxtRsz.init();

[Björn Langhof]

Vortexmind schrieb:

I want to make a bookmarklet. When a user launches it, it tells the
user to select an element in the page (for example a textarea) with the
mouse. When the user clicks on the textarea, my script gets a reference
of the element that he clicked so i can operate on it. Is it possibile?

Have a look at the "Dom Inspector" extension:
http://www.mozilla.org/projects/inspector/
With this extension you can click on an element in the html document and
the extension shows the element in the document structure tree. I don't
know how it is done but I think you can use similar code.

Björn

[Mr. Wilson]

no****@comcast.net wrote:

This is the mozilla only version because of it's length .. IE gags on
it...

His IE Version calls up a JS file located on his server.

I can't remember where it came from... sorry.

D.

From themaninblue.com, perhaps?
http://www.themaninblue.com/writing/...ve/2006/08/25/

--Mr. Wilson

[Björn Langhof]

Vortexmind schrieb:

I want to make a bookmarklet. When a user launches it, it tells the
user to select an element in the page (for example a textarea) with the
mouse. When the user clicks on the textarea, my script gets a reference
of the element that he clicked so i can operate on it. Is it possibile?

I've had a similar problem. I solved it by adding an event listener to
the whole document. The event.target property is the clicked element:

window.document.addEventListner('click', windowClick, true);

function windowClick(event){
alert('Element clicked: '+event.target);
}

BJörn