www.webdeveloper.com
Results 1 to 6 of 6

Thread: Text vanishing act in Firefox...

  1. #1
    Join Date
    Nov 2006
    Posts
    9

    resolved Text vanishing act in Firefox...

    I'm using a javascript array to hold product information (PC hardware) so that when a user click on a product the product details page is loaded.

    Each product has a number of key characteristics to be shown (a maximum of 10); in this case by using a standard unordered list with adequate id for each list item.

    The thing is: while the code works fine with IE6 it doesn't ever show in Firefox. It's probably something quite simple, but I can't seem to nail it down...

    Here's the function where it all happens:

    Code:
    function ShowValidListItems(){
      //function that shows all the current product's key characteristics
      var num_caract = -1
      var texto_caract=""
      var i = -1
      
      //ensure all product characteristics on the UL are made invisible
      for (i=0;i<=9;i++) {
       document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="hidden"
      }
      
      //get the number of characteristics to be listed for this product
      num_caract=data_array[id_produto][6]
     
      for (i=0; i<num_caract; i++) {
       //get the text for each product characteristic and then show it
       texto_caract=data_array[id_produto][9+i]
       if (i==0) {document.getElementById("car1").childNodes[0].nodeValue=texto_caract}
       if (i==1) {document.getElementById("car2").childNodes[0].nodeValue=texto_caract}
       if (i==2) {document.getElementById("car3").childNodes[0].nodeValue=texto_caract}
       if (i==3) {document.getElementById("car4").childNodes[0].nodeValue=texto_caract}
       if (i==4) {document.getElementById("car5").childNodes[0].nodeValue=texto_caract}
       if (i==5) {document.getElementById("car6").childNodes[0].nodeValue=texto_caract}
       if (i==6) {document.getElementById("car7").childNodes[0].nodeValue=texto_caract}
       if (i==7) {document.getElementById("car8").childNodes[0].nodeValue=texto_caract}
       if (i==8) {document.getElementById("car9").childNodes[0].nodeValue=texto_caract}
       if (i==9) {document.getElementById("car10").childNodes[0].nodeValue=texto_caract}
       //show
       document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="visible"
      }
     }
    also, for your reference, the list definition on the HTML's body

    Code:
    <div id="caracteristicas">
      <ul id="lista_caracteristicas" class="style7">
        <li  class="style5" id="car1">Car1</li>
        <li  class="style5" id="car2">Car2</li>
        <li  class="style5" id="car3">Car3</li>
        <li  class="style5" id="car4">Car4</li>
        <li  class="style5" id="car5">Car5</li>
        <li  class="style5" id="car6">Car6</li>
        <li  class="style5" id="car7">Car7</li>
        <li  class="style5" id="car8">Car8</li>
        <li  class="style5" id="car9">Car9</li>
        <li  class="style5" id="car10">Car10</li>
      </ul>
    </div>
    ::

    Thank you for reading. Any help will be very much appreciated.
    Last edited by Thorondor; 01-07-2007 at 08:21 AM.

  2. #2
    Join Date
    Jul 2004
    Location
    Rhode Island
    Posts
    190
    What are the contents of data_array and id_produto, and from where are they coming?
    Matt Pat
    The World's Best Web Browser (Windows, Linux, and Mac): Get Firefox!
    My website: http://www.mattpat.net
    Control iTunes Remotely: TuneConnect

    "What's accepted is not always what's right."
    Look it up: What's the longest word in the English language?

  3. #3
    Join Date
    Nov 2006
    Posts
    9
    id_produto holds the index of the user selected product on the data_array array (passed via the page URL when a product's image is clicked on another page).

    The array itself is initialised by way of the following statement
    data_array=SetupDataArray()

    The function above is located on a separate .js file (included by <script type="text/javascript" src="filename.js"></script>).

    Code:
    function SetupDataArray() {
      //function that fills the multidimensional array holding all product data
      //arranged as: standard image, product name, brand logo, price, short description, button text,
      //number of product characteristics, smaller_image, brand name, the characteristics themselves 
     
      var my_data_array=new Array()
      
      my_data_array[0]= new Array("logitech_G7.jpg","Rato Logitech G7","logo_logitech_mini.gif","€ 100,00","O novo rato de alta precisão para 'gamers'","Ratos Logitech",4,"logitech_g7_mini.gif","Logitech","Tecnologia Laser","2000 dpi de Resolução ","Sem fios","Bateria suplente recarregável sempre pronta")
      my_data_array[1]= new Array("inno3D_GS.jpg","Placa Gráfica Inno3D 7900 GS","logo_nvidia_mini.gif","€ 480,00","Alta performance numa placa nVidia a custo acessível","Placas INNO3D",5,"inno3D_GS_mini.gif","nVidia","Duplica o poder de Shading em relação à geração anterior","Suporte completo ao Shader Model 3.0 do DirectX 9.0","O motor CineFX 4.0 da nVidia providencia efeitos visuais avançados","Rendering HDR para uma iluminação natural totalmente imersiva","Interface PCI Express com uns estonteantes 4Gb/segundo")
      my_data_array[2]= new Array("intel_core_2_duo_logo1.gif","Intel Core 2 Duo Extreme","logo_intel_mini.gif","€ 650,00","O melhor desempenho em qualquer situação com o cunho da Intel","Processadores Intel",6,"intel_c_2_duo_mini.gif","Intel","Até 40% mais rápidos que a geração anterior","Gestão inteligente do consumo de energia","Smart Memory Access que optimiza o acesso à memória","Advanced Digital Media Boost para a melhor experiencia multimédia","Wide Dynamic Execution permitindo a execução de mais instruções por ciclo de relógio","Advanced Smart Cache para aplicações multi-threading de ponta")
      my_data_array[3]= new Array("hp_photosmart_D7160.jpg","HP Photosmart D7160","logo_hp_mini.gif","€ 150,00","Concebida para aqueles que desejam impressão fotográfica ultra-rápida com qualidade de laboratório, visualizar, editar e imprimir, com ou sem um PC.","Impressoras HP",4,"hp_phsm_D7160_mini.gif","HP","Seis tinteiros individuais para maior eficiência no consumo","Tecnologia jacto de tinta térmica HP","Até 4800 x 1200 ppp optimizados a cores (a partir de um PC)","Fotografias duradouras e documentos de texto com qualidade equivalente a laser")
      my_data_array[4]= new Array("hp_scanjet_4850.jpg","HP Scanjet 4850","logo_hp_mini.gif","€ 150,00","Para quem a qualidade de imagem vem primeiro este scanner nao desaponta. De negativos a objectos tridimensionais o desempenho permanece invejável.","Scanners HP",4,"hp_scjet_4850_mini.jpg","HP","Resolução óptica de digitalização de 4800 ppp","48 bits de profundidade de cor","256 niveis de cinzentos","Formato máximo de digitalização 220 x 315 mm")
      my_data_array[5]= new Array("logitech_Z-5500.jpg","Colunas Logitech Z-5500","logo_logitech_mini.gif","€ 250,00","Acorde os vizinhos com o potente som surround de alta performance da Logitech.","Colunas Logitech",4,"logitech_Z-5500_mini.jpg","Logitech","Sistema com certificação THX","Som 5.1 com 500 Watts de potência","Suporte a streams de audio DTS 96 kHz / 24-bit","Ligação a PC, consolas, leitor de DVD ou aparelhagem de som")
    	
     return my_data_array
    }
    ::

    I suspect trouble arises from the method used to reference the element to show, not the logic itself, though, since IE6 runs it without a glitch.

    And thanks for posting back, patenaudemat.
    Last edited by Thorondor; 01-06-2007 at 10:55 AM.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This won't work:
    Code:
    //ensure all product characteristics on the UL are made invisible
      for (i=0;i<=9;i++) {
      document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="hidden"
      }
    You are forgetting the DOM whitespace in Mozilla.
    childNodes[0] is #text
    childNodes[1] is LI
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Feb 2005
    Posts
    1,018
    It might be better to use document.getElementsByTagName() instead.
    Code:
    document.getElementById("lista_caracteristicas").getElementsByTagName('LI')[i].style.visibility="hidden"
    This helps avoid any whitespace issues among different browsers.
    If you can't handle the job then don't take the job or ask for help on it if you are getting paid for it.
    Web Developer's Handbook.::.Why Tables for Layout is Stupid?.::.Why I won't help you

  6. #6
    Join Date
    Nov 2006
    Posts
    9

    Thumbs up

    Thanks a million, _Aerospace_Eng_ Referencing by Tag Name as you suggested bridged the gap and did the trick!

    ::

    Product characteristics now show up without a hitch. Thanks, guys!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles