[Javascript]getElementById()

Claudiu · **Posted:** Fri Jul 24, 2009 8:36 am

Buna!

Ok, sunt "tanar" cand e vorba de JS si as avea nevoie de ceva ajutor

Lucrez la un "panou de administrare" a unei tabele MySQL. Cei care au acces la panoul respectiv au cateva categorii pe care le pot accesa, sa le spunem Categoria1, Categoria2 si Categoria 3.

Initial, pe pagina, aceste categorii apar pe site sub forma de link-uri, una sub alta:

Quote:

Categoria1
Categoria2
Categoria3

La fiecare Categorie totul se intampla intr-o forma, eventual o tabela HTML cu rezultate din baza de date. Un screenshot:
[Imagine lipsa]

Inregistrare noua si Sterge inregistrare sunt doua categorii. Cand dau click pe unul din link-uri, formul de dedesubt (inclusiv tabela la a doua categorie) e setata pe hidden. Ce as vrea, ar fii un efect in genul "expanding" (tree-view pe un singur nivel, nu stiu daca intelegeti...). Daca ascund formul de la Inregistrare noua, atunci sa urce Sterge inregistrare, cu tot cu form si tabela pana sub link.

Am incercat cu getElementById() dar, din motive dubioase mie, nu merge. Tot ce vedeti pe pagina e JS (document.writeln()), din cate stiu, HTML-ul este generat la runtime.

Sa presupunem ca link-ul de sus e element2 iar celalalt e element1:
Codul de mai jos functioneaza:

Code:

document.getElementById(element1).style.top = document.getElementById(element2).style.top

Dar daca vreau sa si vad link-ul Sterge Inregistrare (cum e mai sus se "ascunde" sub celalalt) nu merge

Code:

document.getElementById(element1).style.top = document.getElementById(element2).style.top+30

(Net)help?

Daca trebuie mai multe detalii, shout

Pablo · **Posted:** Fri Jul 24, 2009 9:06 am

Poti da un link ? Sa inteleg mai bine ce doresti.

Claudiu · **Posted:** Fri Jul 24, 2009 9:34 am

E pe local, uploadez si pun si link

Pablo · **Posted:** Fri Jul 24, 2009 9:48 am

Div-urile in care sunt afisate categoriile au aceeasi inaltime?

Claudiu · **Posted:** Fri Jul 24, 2009 10:01 am

Da, au aceeasi inaltime (link-urile + div-ul albastru de fundal). Insa tot ce tine de categorie, de sub link, nu.

Afisarea categoriilor (doar la linkuri ma refer):

Code:

document.writeln(" <div id=\"admin_inregistrare_bar\" style=\"position:absolute; overflow:hidden; left:20px; top:120px; width:980px; height:27px; border:#2C6784 1px solid; background:#2C6784\"></div>  "); 
document.writeln(" <div id=\"admin_inregistrare\" style=\"position:absolute; overflow:hidden; left:30px; top:125px; width:210px; height:27px; z-index:4\"> "); 
document.writeln(" <div class=\"normal\"> "); 
document.writeln(" <div><font face=\"Verdana\"><B><a href=\"#admin_inregistrare\" onClick=\"toggleElementById('admin_form_inregistrare')\" title=\"\" class=\"Category\">Inregistrare noua</a></B></font></div> "); 
document.writeln(" </div></div> ");

document.writeln(" <div id=\"admin_delete_bar\" style=\"position:absolute; overflow:hidden; left:20px; top:250px; width:980px; height:27px; border:#2C6784 1px solid; background:#2C6784\"></div>  "); 
document.writeln(" <div id=\"admin_delete\" style=\"position:absolute; overflow:hidden; left:30px; top:255px; width:210px; height:27px; z-index:4\"> "); 
document.writeln(" <div class=\"normal\"> "); 
document.writeln(" <div><font face=\"Verdana\"><B><a href=\"#admin_inregistrare\" onClick=\"toggleElementsById('table_delete', 'admin_form_delete')\" title=\"\" class=\"Category\">Sterge inregistrare</a></B></font></div> "); 
document.writeln(" </div></div> ");

Si codul pentru toggleElementsById() respectiv toggleElementById():

Code:

function toggleElementById(itemID){
   if ((document.getElementById(itemID).style.display == 'none')) {
      document.getElementById(itemID).style.display = '';
   } else {
      document.getElementById(itemID).style.display = 'none';
   }
}

function toggleElementsById(itemID, itemIDsecond) {
   if ((document.getElementById(itemID).style.display == 'none')&&(document.getElementById(itemIDsecond).style.display == 'none')) {
      document.getElementById(itemIDsecond).style.display = '';
      document.getElementById(itemID).style.display = '';
   } else {
      document.getElementById(itemIDsecond).style.display = 'none';
      document.getElementById(itemID).style.display = 'none';
   }
}

In functiile de mai sus vreau sa integrez si ceea ce spuneam...

Pablo · **Posted:** Fri Jul 24, 2009 3:07 pm

Din cate am inteles din ce ai scris in primul post cred ca vrei un script care sa faca slide la divuri :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.div_init {
   background-color: #F90;
   border: thin solid #000;
   width: 450px;
   margin-top: 5px;
}
.div_hide {
   overflow: hidden;
   display: none;
}
</style>
<script language="javascript" type="text/javascript">
var div_afisat_curent = null;
var div_afisat_anterior = null;

function AfiseazaDiv(id){
   var listitems= document.getElementById("lista_divuri_categorii").getElementsByTagName("div");
   for (i=0; i<listitems.length; i++) {
      if (listitems[i].className == "div_hide") {
         listitems[i].style.display = "none"; 
      }      
   }
   document.getElementById('div_hide_' + id).style.height = "0px";
   document.getElementById('div_hide_' + id).style.display = "block"; 
   SlideDiv(id);
}

function SlideDiv(id) {
   var divh = document.getElementById('div_hide_' + id).offsetHeight;
   var newh = divh + 5;   
   if (newh >= document.getElementById('div_categoria_' + id).offsetHeight + 10 ) {
      clearTimeout(t2);
   } else {
      t2 = setTimeout("SlideDiv("+ id +")",15);
   }
   document.getElementById('div_hide_' + id).style.height= newh + "px";
} 
</script>
</head>
<body>
<a href="javascript:AfiseazaDiv(1);">Categoria 1</a>&nbsp; | <a href="javascript:AfiseazaDiv(2);">Categoria 2</a>&nbsp; | <a href="javascript:AfiseazaDiv(3);">Categoria 3</a>&nbsp; | <a href="javascript:AfiseazaDiv(4);">Categoria 4</a>&nbsp; |
<div id="lista_divuri_categorii">
<div id="div_hide_1" class="div_hide">
  <div id="div_categoria_1" class="div_init"> Content for  id "div_categoria_1" Goes Here
    dfg<br />
    dfgd<br />
    d gdfgdfgdf<br />
    dfg<br />
    dfgd dfgdfg  fd gdfgdfgdf dfgdfg<br />
    dfgdf<br />
  </div>
</div>
  <div id="div_hide_2" class="div_hide">
    <div id="div_categoria_2" class="div_init">Content for  id "div_categoria_2" Goes Here
    asdasd awsdas
    das d
    as
    d sfds gdfg<br />
    <img src="http://www.nethelp.ro/styles/bo2Soft/imageset/logo.jpg"/></div>
  </div>
  <div id="div_hide_3" class="div_hide">
    <div id="div_categoria_3" class="div_init">Content for  id "div_categoria_3" Goes Here</div>
  </div>
  <div id="div_hide_4" class="div_hide">
    <div id="div_categoria_4" class="div_init">Content for  id "div_categoria_4" Goes Here</div>
  </div>
</div>
</body>
</html>

Pablo · **Posted:** Wed Jul 29, 2009 1:55 pm

Este bun codul?

[Javascript]getElementById()

Who is online