SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    img bordering function without innerHTML

    I've decided to try and change my site from absolute positioning to relative.

    The problem is I like my image borders, which were really easy to create with absolute positioning.

    I wrote this script previously, which can be found in this thread....
    http://www.sitepointforums.com/showt...ht=borderclass
    Code:
    function borderClass() {
     var x=document.getElementsByTagName('*');
     for(i=0;i<x.length;i++) {
     if(x[i].className.indexOf("border")>-1) {
     var h=x[i].style.width;var v=x[i].style.height
     x[i].innerHTML+='<img alt="UnitingRhythms" class="tlc" style="width:'+h+';height:20px" src="images/bamvsmlt.gif">'+
     '<img alt="UnitingRhythms" class="trc" style="width:20px;height:'+v+';" src="images/bamvsmlr.gif">'+
     '<img alt="UnitingRhythms" class="brc" style="width:'+h+';height:20px" src="images/bamvsmlb.gif">'+
     '<img alt="UnitingRhythms" class="blc" style="width:20px;height:'+v+';" src="images/bamvsmll.gif">'+
     '<img alt="UnitingRhythms" class="tlc" src="images/bamcsmltl.gif">'+
     '<img alt="UnitingRhythms" class="trc" src="images/bamcsmltr.gif">'+
     '<img alt="UnitingRhythms" class="brc" src="images/bamcsmlbr.gif">'+
     '<img alt="UnitingRhythms" class="blc" src="images/bamcsmlbl.gif">'
     }}}
    It borders all tags that have a "border" class attribute attached.
    The classes on the images represent starting point corners, tlc=TopLeftCorner, brc=BottomRightCorner

    I want to now use this script again, but without using innerHTML.

    How do I create new elements inside existing elements after the page has loaded ( I'll need to apply the border onload ). I can swap elements with existing ones, but I don't yet know how to create a new one.

    (or is using innerHTML cross-browser enough now???)

    I don't need the line
    Code:
    var h=x[i].style.width;var v=x[i].style.height
    and I don't need the sizing in px, it will be done using percentages....

    Thanks.....
    Last edited by Markdidj; Jan 11, 2004 at 08:52.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  2. #2
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think that if you are changing elements like that, then innerHTML is your only choice. I don't think it can be manipulated otherwise.

    innerHTML is cross-browser enough, but if you are holding for universal cross-browser thing, its a NO.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's good enough I suppose, I could just check for innerHTML, and if it doesn't exist create CSS borders.

    Thanks

    added: it would be better to create css borders of the same pixel size (10px) first, then if innerHTML exists change the css border to 0px, then add the images. Thus keeping the layout the same.

    Nice.......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ditto
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!


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
  •