SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    NZ
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why My code doesn't work on IE but ok on Firefox

    if you can please copy the following code and runs it on both IE and Firefox,
    then you will see what I intended to do and where my problem was.

    Please Help me
    thank you


    PHP Code:
    <div id="search">
     <
    span><a href="#" id="search_domestic"><img src="images/search-01.png" width="60" height="75" border="0" id="search_domestic_image" /></a></span>
     <
    span><a href="#" id="search_oversea"> <img src="images/search-02off.png" width="60" height="75" border="0" id="search_oversea_image" /></a></span>
     
         <
    div id="searchContent">
             <
    ul>
             <
    form
              <
    li><span>start <select name="travel01"></select></span
              <
    span>end <select name="travel01"></select></span
              <
    span>date <select name="travel01"></select></span></li><br />  
              <
    li><span>type <select name="travel01"></select></span
              <
    span>days <select name="travel01"></select></span
              <
    input name="goButton" type="submit" value="search" /></li
              </
    ul
             </
    form>
         </
    div>
    </
    div>
    <
    script  type="text/javascript">
    <!-- 
    Start Search Boxes -->    
        function 
    search_id(id){
          
          var 
    domestic "off";
          var 
    oversea  "off";
          
         
          if (
    id==1){domestic ="";}
          if (
    id==2){oversea ="";} 
        
          
          var 
    image document.getElementById('search_domestic_image');
          
    image.src='images/search-01'+domestic+'.png';
          var 
    image document.getElementById('search_oversea_image');
          
    image.src 'images/search-02'+oversea+'.png';
         
          
        }
        
        
    // Search Domestci
        
    document.getElementById('search_domestic').onclick = function () {
          
    search_id('1');  
          
    document.getElementById('searchContent').innerHTML '<form action="#">\
                  <ul>\
                  <li><span>start <select name="travel01"></select></span>\
                  <span>end <select name="travel01"></select></span> \
                  <span>date <select name="travel01"></select></span></li><br />\
                  <li><span>type <select name="travel01"></select></span>\
                  <span>days <select name="travel01"></select></span>\
                  <input name="goButton" type="submit" value="search" /></li> \
                  </ul>\
                  </form>'
    ;
        }
        
    // Search oversea
        
    document.getElementById('search_oversea').onclick = function () {
          
    search_id('2');
          
    document.getElementById('searchContent').innerHTML '<form action="#"> \
                  <ul>\
                  <li><span>start <select name="travel01"></select></span>\
                  <span>type <select name="travel01"></select></span>\
                  <span>route <select name="travel01"></select></span></li><br /> \
                  <li><span>route <select name="travel01"></select></span>\
                  <span>country <select name="travel01"></select></span>\
                  <span>city <select name="travel01"></select></span>\
                  <input name="goButton" type="submit" value="search" /></li>\
                  </ul>\
                </form>'
    ;
        }
    </script> 
    Drunkpanda

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think because you are not using name attribute of div tag


    ----------------------------------
    naughty flash games
    auto submission

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a very similar problem tha you so I will post it here :

    ok, I hate IE , but I need to program things for it. And this code does not work. In my main file have a table where each row has two DIVs. the code is the following:

    Code:
    <DIV id="bloques">
    <table class="tabbloques" ><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr><tr><td>
    <DIV class="bloque"></div><DIV class="inbloque" >Cargando...</div>
    </td></tr></table>
    </div>
    well, then I try to attach events to them: when I click on "bloque" DIV, I want "inbloque" to appear and disappear (really easy).

    I use the Eventutil.js code from Nick Zakas book (it is really easy and uses event listener or attachevent for each browser). My code is the following:



    Code:
    function clickblock() {
    	var bloqs = document.getElementById("bloques");
    	
    	var divs = bloqs.getElementsByTagName('DIV');
    	alert(divs.length);
    	var divCounter = 1;
    	
    	for(var no=0;no<divs.length;no++){
    		if(divs[no].className=='bloque'){
    		divs[no].id = 'bloque'+divCounter;
    		divs[no].nextSibling.id = 'inbloque'+divCounter;
    
    		EventUtil.addEventHandler(divs[no], 'click', toggle);
    
    	  	divCounter ++;
    	  	}
      	}
    	
    }
    I mean, I search for DIVS inside "bloques" and I alternate them the IDs and I attach the clickon toggle function to "bloqueX" DIVS.

    It works properly in FF, but... in IE I have the following behaviour:

    - If I execute the code as it is above, only the first DIVS couple will work (I mean, the toogle function will work).
    - If I remove the TABLE, TR and TDs tags, then it wonīt work in the FIRST couple of tags but it will work in the rest 9 couple of DIVS tags!!



    I have no idea what is happening. If I canīt solve this I will have to detect the browser from the server-side and Use different PHP code for each


  4. #4
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the following code to toggle the display of the div items.

    Code:
    <script language="javascript">
    
    function toggle(items)
    {
       if(document.getElementById(items).style.visibility=='visible')
           document.getElementById(items).style.visibility='hidden';
       else
          document.getElementById(items).style.visibility='visible';
    }
    </script>
    
    
    <?php 
    
      for($i=0;$i<=10;$i++)
        {
    ?>
        <DIV id="bloque<?php echo $i; ?> " onclick="javascript:toggle('inbloque<?php echo $i; ?>')"><?php echo "Item".$i; ?>
    	   <DIV id="inbloque<?php echo $i; ?>" style="visibility:hidden;">Cargando<?php echo $i; ?></div>
    	</div>
    <?php	
    	}
    ?>

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PragyaRatna
    I used the following code to toggle the display of the div items.

    Code:
    <script language="javascript">
    
    function toggle(items)
    {
       if(document.getElementById(items).style.visibility=='visible')
           document.getElementById(items).style.visibility='hidden';
       else
          document.getElementById(items).style.visibility='visible';
    }
    </script>
    
    
    <?php 
    
      for($i=0;$i<=10;$i++)
        {
    ?>
        <DIV id="bloque<?php echo $i; ?> " onclick="javascript:toggle('inbloque<?php echo $i; ?>')"><?php echo "Item".$i; ?>
    	   <DIV id="inbloque<?php echo $i; ?>" style="visibility:hidden;">Cargando<?php echo $i; ?></div>
    	</div>
    <?php	
    	}
    ?>

    thank you! that works. the problem with that solution is that if an element is hidden I can reload the content of "hidden divs" using AJAX. And I need to insert the divs in a table because It will be sorted afterwards.

    anyway, I think I found the problem (but I canīt belive it). With the first code I wrote:

    - The first DIV aplies the toggle function to ALL the content of the div (you can click anywhere and it works).
    - For the rest od DIVS... I had to add some text and click on it (in my example it was empty so thats why it did not work), because the toggle function (in these cases) does not aply to ALL the DIV, but only to the content (text) of it.



    do you know why IE has this behaviour???

  6. #6
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here are my CSS, maybe the explanation is here:

    Code:
    .tabbloques {
        width: 50%;
        border: 3px solid #EEE;
        cellpadding: 2px;
    }
    
    
    .bloque {
        background-color:#EFF5FF;
        font-weight:bold;
        color: #00368F;
        cursor: pointer;
        border:1px solid #79A7E2;
        padding: 5px;
    }
    	
    .inbloque {
    	border: 1px solid #79A7E2; 
    	padding-right: 5px;
    	padding-left: 5px;
    	padding-bottom: 5px;
    	display: block;
    	font-family: verdana;
    	color: #111;
    }



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
  •