toggle display, but must double-click. WHY?

Discussion in 'JavaScript' started by zymosius, May 16, 2008.

0
  1. #1
    http://zymosius.zxq.net/iframe.html

    For the script on the link above, I have to first double-click to get the display to toogle. After that a single click works.

    Originally I was using something along...
    

if(el.display == "block")
 el.display="none";
else{
 el.display="block"
    Code (markup):
    and read somewhere (I forget) that...

    

if(el != null){
el_display=(el_display != 'none')? 'none' : 'block';
    Code (markup):
    would fix my double-click problem. But hasn't. Any suggestion as to why and what I might not be doing right.

    Thanks
    John
     
    zymosius, May 16, 2008 IP
  2. apmsolutions

    apmsolutions Peon

    Messages:
    66
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You could try this: 
    function toggleDisplay(x) {
if( document.getElementById(x).style.display == "none" ) {
    document.getElementById(x).style.display = "block";
  } else {
    document.getElementById(x).style.display = "none"; }
}
    Code (markup):
    Is your element showing or hidden originally?
     
    apmsolutions, May 16, 2008 IP
  3. zymosius

    zymosius Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok, here is the complete story:

    1.) I have a textarea that will be showing initially(display:block), and an iframe that is initially display:none.

    2.) You type some code/text into the textarea.

    3.) Click the div and the textarea changes to display:none and passes the code/text to an iframe that changes to display:block.

    Everything works. That's not the problem. The thing, for some reason I'm not sure of, is I have to double-click (click twice) the first time to get the script to change from textarea to iframe. And I'm... :eek: ready to break something.

    Any thought of why I would have to click on the div twice the first time to get the script to change?

    Here's the complete source code. Link to the page is in above post. Thanks for the help.
    

<html>
     <head>


     <script type = "text/javascript">
<!--
           function get_id(el) {
                      var el = document.getElementById(el);
                         return el;
                   }

            function Show(val) {
                   var testFrame = get_id("myFrame");
                   var doc = testFrame.contentDocument;

                       if (doc == undefined || doc == null)
                          doc = testFrame.contentWindow.document;
                          doc.open();
                          doc.write(val);
                          doc.close();        
                       
                     }
             

   function show_msg( ) {
       var txt_val = get_id("txt1").value;
       var iframe_vis = get_id("myFrame").style;
       var txt_vis = get_id("txt1").style;
     
      if (get_id != null) {
          iframe_vis.display = (iframe_vis.display != 'none')? 'none' : 'block';
          txt_vis.display = (txt_vis.display != 'block')? 'block' : 'none';
         }
           
                     Show(txt_val);
     }

                    
 //-->           
            </script>


       <style type = "text/css">

         #t { 
           position:absolute;
           width:730px;
           height:430px;
             padding:2px;
             border: 1px solid red;
         }

         #t1 { 
           position:relative;
           width:230px;
           background-color: #FFE6BF; 
          }

         iframe#myFrame{
             position:relative;
               width: 730px;
                height: 430px;
                 border: 1px dashed #000000;
                 padding: 2px;
                   display:none;
             }

         textarea#txt1{
              position:relative;
               width:730px;
               height:430px;
               padding:2px;
                border:1px dashed #000000;
                display:block;
         }
       
       </style>


     </head>

<body>

<div id="t"> 
  
   <div id="t1" onclick="show_msg();">CLICKE'</div>
   <textarea id = "txt1"  ></textarea>
     <iframe id = "myFrame" frameborder = "0">    </iframe>      
</div>

     
</body>
</html>
    Code (markup):
     
    zymosius, May 16, 2008 IP