it probably is working, but you failed to *do* anything with the generated <span> tag... that's why i added as a comment:
// append/set this '$spn' inside another DOM object On Jan 18, 12:29 pm, Mircea <i...@amsterdamsat.com> wrote: > Thanx for the code. > It does not work to me. I am a newbye is JQuery, please excuse the > dumb questions... > > This is my code and markup: > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd";> > <html> > <head> > <script src="http://code.jquery.com/jquery-latest.js";></script> > <script type="text/javascript" src="http://jqueryui.com/latest/ui/ > ui.core.js"></script> > <script type="text/javascript" src="http://jqueryui.com/latest/ui/ > ui.draggable.js"></script> > > <script type="text/javascript"> > > $(document).ready(function(){ > > $("p").live("mouseup", > function() { > selection = getSelectedText(); > if(selection.length >= 3) { > var $spn = $("<span></span>").html(selection).addClass > ("selected"); > // append/set this '$spn' inside another DOM object > } > } > ); > > //Grab selected text > function getSelectedText(){ > if(window.getSelection){ > return window.getSelection().toString(); > } > else if(document.getSelection){ > return document.getSelection(); > } > else if(document.selection){ > > return document.selection.createRange().text; > } > > } > }); > > </script> > > <style> > p { color:blue; } > div { color:red; } > span.hl { background: yellow; } > #selected {background: yellow;} > .selected {background: yellow;} > </style> > </head> > <body> > <div id="#container"> > <p>this is the text to be selected - a part of it</div> > </body> > </html>
