SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM FORMs not working with IE

    I have a problem with the following page: http://www.sci.fi/~tenu/test/switcher.htm

    All dynamic content show up in IE (5, 5.5 and 6) but onclick-events won't get triggered. It works with Opera and Firefox.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got the on click events to work, nice code please share the final code with me

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html><head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>test</title>


    <
    style type="text/css"><!--

    #targetswitcher form, #textsizer form, #linespacer form
     
    {border1px dotted #000;margin:1px;padding:1px}

    .size_xl {font-size:x-large}
    html .size_xl {font-size:large;f\ont-size:x-large}
    .
    size_l  {font-size:large}
    html .size_l {font-size:medium;f\ont-size:large}
    .
    size_m {font-size:medium}
    html .size_m {font-size:small;f\ont-size:medium}
    .
    size_s {font-size:small}
    html .size_s {font-size:x-small;f\ont-size:small}
    .
    size_xs {font-size:x-small}
    html .size_xs {font-size:xx-small;f\ont-size:x-small}
    .
    harva {padding0 0.3em}

    .
    lh_select width2emheight2emcolor#000; background-repeat: repeat; margin-right:5px}
    .lh_select:active color#001; } /* force Opera relayout */

    .lh_tight {  background-imageurl(lh_tight.gif)}
    .
    lh_mid {  background-imageurl(lh_mid.gif)}
    .
    lh_loose {  background-imageurl(lh_loose.gif)}

    --></
    style>

    <
    script type="text/javascript"><!--

    /* target switcher */

    function addTargetSwitcher(div_id) {
    /* [label][input type="checkbox" onclick="toggleTarget(this.checked)"]
       Open links in new window[/label]

       implicit association doesn't work with IE
    */

     
    var div=document.getElementById(div_id);
     if (!
    div) return;
     var 
    form=document.createElement("form");
     
    form.action="";
     var 
    label=document.createElement("label");
     var 
    input=document.createElement("input");
     
    input.type="checkbox";
     
    input.onclick=function(){ toggleTarget(this.checked); }
     
    label.appendChild(input);
     
    label.appendChild(document.createTextNode(" Open links in new window"));
     
    form.appendChild(label);
     
    div.appendChild(form);
    }

    function 
    toggleTarget(state) {
     if (!
    document.getElementsByTagName) return;

     var 
    state "_blank" "_top";
     var 
    anchors=document.getElementsByTagName("a");
     for (var 
    i=0i<anchors.lengthi++) {
      var 
    a=anchors[i]; 
      if (
    String(a.getAttribute("href")).indexOf("://")!=-1a.target=t;
     }
    }

    /* tekst size switcher */

    function addTextSizer(div_id) {
    /* Text size[br]
       [span class="size_m"]
       [a class="size_xl harva" onclick="txtSz(this);" title="Very large text"]t[/a]
       [a class="size_l harva"  onclick="txtSz(this);" title="Large text"]t[/a]
       [a class="size_m harva"  onclick="txtSz(this);" title="Medium text"]t[/a]
       [a class="size_s harva"  onclick="txtSz(this);" title="Small text"]t[/a]
       [a class="size_xs harva" onclick="txtSz(this);" title="Very small text"]t[/a]
       [/span]
    */
     
    sizes="xl,l,m,s,xs".split(',');
     
    titles="Very large text,Large text,Medium text,Small text,Very small text".split(',');

     var 
    div=document.getElementById(div_id);
     if (!
    div) return;

     var 
    form=document.createElement("form");
     
    form.action="";
     var 
    span=document.createElement("span");
     
    form.appendChild(span);
     
    span.style.className="size_m";
     
    span.appendChild(document.createTextNode("Text size"));
     
    span.appendChild(document.createElement("br"));

     for(var 
    i=0i<sizes.lengthi++) {
      var 
    a=document.createElement("a");
      
    a.className="size_"+sizes[i]+" harva";
      
    a.onclick=function(){txtSz(this); }
      
    a.title=titles[i];
      
    a.appendChild(document.createTextNode("t"));
      
    span.appendChild(a);
     }
     
    div.appendChild(form);
    }

    function 
    txtSz(t) {
     var 
    t.className;
     var 
    c.indexOf(' '); if (> -1c=c.substr(0,i); // first class only
     
    document.getElementsByTagName('body')[0].className=c;
    }


    /* line spacing */

    function addLineSpacer(div_id) {
    /* Line space[br]
       [input class="lh_tight lh_select" type="button" value="" onclick="setLineHeight(1.2)" title="Line space 1"]
       [input class="lh_mid lh_select" type="button" value="" onclick="setLineHeight(1.4)" title="Line space 1.5"]
       [input class="lh_loose lh_select" type="button" value="" onclick="setLineHeight(1.6)" title="Line space 2"]
    */

     
    classes="tight,mid,loose".split(',');
     
    heights="1.2,1.4,1.6".split(',');
     
    titles="1,1.5,2".split(',');

     var 
    div=document.getElementById(div_id);
     if (!
    div) return;
     var 
    form=document.createElement("form");
     
    form.setAttribute("action","");

     
    form.appendChild(document.createTextNode("Line space"));
     
    form.appendChild(document.createElement("br"));

     for(var 
    i=0i<classes.lengthi++) {
      var 
    input=document.createElement("input");
      
    input.className="lh_"+classes[i]+" lh_select"
      
    input.setAttribute("type","button");
      
    input.setAttribute("value","");
      
    input.setAttribute("onclick","setLineHeight("+heights[i]+")");
      
    input.title="Line space "+titles[i];
      
    form.appendChild(input);
     }

     
    div.appendChild(form);
    }

    function 
    setLineHeight(h) {
     var 
    div=document.getElementById("content");
     if (
    h<1h=1; if (h>2h=2;
     
    div.style.lineHeight=h+"em";
    }


    function 
    initPage() {
     
    addTargetSwitcher("targetswitcher");
     
    addTextSizer("textsizer");
     
    addLineSpacer("linespacer");
    }

    window.onload = function(e) {
    }

    window.onunload = function(e) {
    }

    -->
    </script></head>
    <body class="size_xs">

    <div id="targetswitcher"><form action=""><label><input onclick="toggleTarget(this.checked)" type="checkbox"> Open links in new window</label></form></div>
    <div id="textsizer"><form action=""><span>Text size<br><a title="Very large text" onclick="javascript:txtSz(this)" class="size_xl harva">t</a><a title="Large text" onclick="javascript:txtSz(this)" class="size_l harva">t</a><a title="Medium text" onclick="javascript:txtSz(this)" class="size_m harva">t</a><a title="Small text" onclick="javascript:txtSz(this)" class="size_s harva">t</a><a title="Very small text" onclick="javascript:txtSz(this)" class="size_xs harva">t</a></span></form></div>
    <div id="linespacer"><form action="">Line space<br><input title="Line space 1" onclick="setLineHeight(1.2)" value="" class="lh_tight lh_select" type="button"><input title="Line space 1.5" onclick="setLineHeight(1.4)" value="" class="lh_mid lh_select" type="button"><input title="Line space 2" onclick="setLineHeight(1.6)" value="" class="lh_loose lh_select" type="button"></form></div>

    <script type="text/javascript"><!--
      initPage();
    //--></script>

    <div id="content" style="line-height: 1.4em;">

    <a href="http://www.opera.com/">Opera</a>
    <a href="http://www.mozilla.org/">Mozilla</a>
    <a href="http://www.microsoft.com/windows/ie/">IE</a>
    <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in
    justo a ligula sagittis adipiscing. Ut mauris nunc, varius a, blandit
    vitae, sagittis vestibulum, leo. Sed facilisis lacinia orci. Quisque
    aliquam. Donec quis sem ut nibh ultrices malesuada. In metus ante,
    faucibus vel, rhoncus in, pellentesque consequat, erat. Ut nec sapien.
    In hac habitasse platea dictumst. Duis vitae est at enim fringilla
    sollicitudin. Pellentesque posuere mollis diam. Nulla interdum, massa
    id dictum tempus, erat felis blandit leo, ultrices lacinia lectus quam
    nec nulla.<br>
    Maecenas ligula massa, sollicitudin et, euismod vitae, ultrices sit
    amet, nibh. Fusce ultricies urna posuere enim. Aenean turpis leo,
    aliquam eget, lobortis vitae, consequat vestibulum, libero. Vestibulum
    sed purus. In venenatis est ac nisl. Fusce dapibus, ligula in aliquam
    vestibulum, pede mi ultrices dui, non blandit lectus lacus sit amet
    tortor. Nulla nisl mauris, pharetra nec, suscipit sit amet,
    sollicitudin at, dolor. Vivamus mi sapien, feugiat at, ultricies id,
    vestibulum et, mi. Curabitur enim massa, dictum eu, congue id,
    tincidunt nec, eros. Nunc porttitor euismod massa. Praesent ac est.
    Fusce porta lacinia risus. Aenean venenatis nisl nec leo. Aliquam ut
    tellus id orci scelerisque sodales. Vivamus at arcu at felis rhoncus
    tincidunt.<br>
    Donec interdum feugiat elit. Aenean consequat, dolor quis eleifend
    accumsan, metus lorem semper metus, eu condimentum dolor neque ut enim.
    Phasellus nonummy fermentum pede. Duis venenatis mollis est. Integer
    odio tortor, laoreet eget, vulputate sed, mattis at, magna. Nullam
    velit pede, mollis at, tempus in, condimentum eu, sapien. Curabitur
    eget purus. Aliquam arcu. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Quisque egestas nunc vitae
    diam. In ipsum. Sed tempus varius magna. Nulla commodo tristique orci.<br>
    Aenean velit elit, mollis molestie, convallis at, vestibulum in,
    mauris. Donec pretium, pede at bibendum sodales, odio dolor bibendum
    quam, ac rhoncus est tortor in nunc. Quisque iaculis placerat nisl.
    Aliquam eu odio. Suspendisse bibendum diam euismod tortor. In vulputate
    nonummy neque. Maecenas ac dolor. Proin lacinia. Proin in arcu. Fusce
    at lorem. Cras vel magna. Curabitur sodales enim. Aliquam in magna vel
    enim hendrerit placerat. Duis iaculis, odio eu ullamcorper egestas,
    lectus neque pulvinar nulla, ut adipiscing purus purus molestie risus.
    Nam accumsan, lectus et cursus imperdiet, lacus wisi iaculis pede, non
    ullamcorper metus quam eu tellus. Etiam nec purus.<br>
    Aliquam turpis. Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Suspendisse potenti. In elementum
    sodales ante. Morbi fringilla, diam in vulputate ultricies, velit augue
    porttitor augue, ornare varius erat justo nec dolor. Nullam quis augue.
    Nam scelerisque quam quis ligula. Curabitur eleifend, ipsum vitae
    venenatis laoreet, sem lorem ullamcorper purus, non auctor pede est ut
    sapien. Quisque rhoncus egestas lacus. Donec nibh urna, consequat sed,
    aliquet vitae, aliquam eu, mi. Quisque ac justo. Integer ac leo.
    Aliquam eget lorem. Morbi in ligula sit amet massa lacinia commodo.
    Duis auctor. Vivamus ac dolor id wisi laoreet feugiat. Integer a tortor
    eu quam sodales aliquet. Nunc id neque ac orci congue cursus.
    Vestibulum velit mi, cursus nec, pretium ut, viverra in, sem. Nam quam.<br>

    </div>
    </body></html> 

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. New code is still at http://www.sci.fi/~tenu/test/switcher.htm

    • uses addEventListener/attachEvent instead of onclick for W3C/IE compatible browsers
    • all styles are controlled with CSS
    • chgClass() for multiple styles with mutual exclusion
    • findInput() to find input element attached to click target
    • targetSwitcher doesn't touch links with rel="local"


    findInput() is overkill for this one (Safari fix + label.firstChild would be enough) but it might come handy later.

    textsizer & linespacer code is quite nice IMHO, it applies input's style (first one if multiple styles are specified) to destination element. Same code can be used for many other styling options.



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
  •