SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating and styling a new node from selection?

    A question regarding DOM for any gurus out there...

    I am curious if this is even possible...

    1. The user highlights a soem text on the page.
    2. The user presses a button that automatically puts some text either side, in this case <span id="$js_var">Highlighted Text</span>
    3. Using the DOM to change styles for that specific ID eg:

    Code:
    <script language="JavaScript">
      function makeBold()
        {
    
          b = document.getElementById("$js_var");
    
          b.style.fontWeight = "bold";
    
        }
    </script>
    Can you see where I am going with this? Is this even possible to add selected text to a new node on the fly, and also style it?

    Mind you I have not used js variables before so the syntax is most probably wrong, am not interested in that part for nowe, only if changing "new" nodes on the fly is at all possible, and if so, is it cross-browser compatible?

    Thanks guys...
    Jordan Windebank

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think for this, you will need the power of the DOM2 Range Interface which is currently only supported by Gecko browsers. I racked my brain to find a DOM1 solution, but I just don't think it's there.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Beetle, I'll look into it for now...
    Jordan Windebank

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    northern Maine
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no standard yet to work with user-selections. Fortunately though, Mozilla exposes the selection as a range :

    var selectionRange = window.getSelection().getRangeAt(0);

    Now you can use DOM2 Range methods and properties to modify this range, and do:

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(selectionRange);


    To do this in Internet Explorer, you'll need to mess around with its crappy TextRange object.
    Jason - Contact Me
    Supermoderator @ CodingForums


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •