Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: <hr> Replacing

  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <hr> Replacing

    I was reading up on styling <hr> elements today when I came across this page; http://www.sovavsiti.cz/css/hr.html
    Basically, if you want to have a background-image for <hr> element you need to use a <div> with a 'hidden' hr in there for compatibility. Leaving you with:
    Code:
    <div class="hr"><hr /></div>
    Which is quite a bit of needless markup.
    So, I was thinking if javascript could be used to replace the <hr /> to <div class="hr"><hr /></div>, I have manage to do some basic string replaces however I am not sure how to 'catch' the content of the <body> (eg for a field you would do document.getelementbyid('id_here).value) could anyone tell me how I would be able to get the contents of the body and replace <hr /> with <div class="hr"><hr /></div>?

    Thanks for all of your help.

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You probably only want to do the replacement in DOM-enabled browsers anyway, so something like this run onload should work.
    Code:
    function changeHR(){
      if(!document.getElementsByTagName) return;
      var d, h=document.getElementsByTagName('hr');
      while(h.length){
        (d=document.createElement('div')).className='hr';
        h[0].parentNode.replaceChild(d,h[0]);
        }
      }
    Last edited by Harry Armadillo; 04-15-2005 at 05:51 PM.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    First at all, I guess that your solution will not work for Moz, for IE only.

    As a funny trial you may use for IE something like that:
    PHP Code:
    <script type="text/JavaScript">
    onload = function(){
    var 
    oHr document.getElementsByTagName('hr');
    for(var 
    i=0;i<oHr.length;i++){
    var 
    newHr document.createElement('div');
    newHr.className='hr';
    var 
    someHr document.createElement('hr');
    newHr.appendChild(someHr)
    var 
    root oHr[i].parentNode;
    root.replaceChild(newHr,oHr[i])
    }
    }
    </script> 
    But, frankly said... Why to replace hr with an image... Why not use a div/span with background or something like that? It looks wasting of time to try something like that. (Well, waisting of time was also my time spending with the replacement code, but it was only for execrcise) So.. why do you need such e funny replacemant?
    Last edited by Kor; 04-15-2005 at 05:43 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    First at all, I guess that your solution will not work for Moz, for IE only.
    Speaking of my function? Actually, I did make a mistake (and edited the code above), but it worky just fine in Moz.

    I chose not to give a replacement div its own hr, since idea is to use the div's styling.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Nope, not your code... i was talking about the replacement... For me (at least my code) does not work for Moz (but no error is to be shown). Anyway, I consider the problem not a serious one, as trere are multiple graphical or CSS solution to avoid that replacenet... I don't get the ideea... If it is a site to be repaired, simply use, say, the Find/replace functions of any serious Editor...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your code probably has the same mine did before I bothered to actually run it. As you add/remove hr's, oHr is updated in unanticipated ways.

    But, yeah, it's all silly. I guess if you insist on clean compact markup, maybe.

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the reason for not using using a <div>/<span> for it is compatibility (older browsers which do not support the background-image div will display the <hr> and my page has close to 20 <hr>'s so it works out at less code to do it that way than just using <div class="hr"><hr></div> each time. Having the <hr> in the div also creates a better document structure. In the CSS the div.hr hr element has display: none in it, so that newer browsers do not display it.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    well, hm... <hr> (or similar) is used less and less (it looks a much too "baroque" piece of design). On the other hand old browsers are also fewer and fewer... In my oppinion it does not worth to waste your time with this problem. Use divs and forget about <hr>. If one in a million user will have and old browser, he will see no div, no hr... but he will be able to follow your content, which is the most important thing...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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