Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning a javascript menu

    How can i place a javascript menu inside a table?

    I have created a js menu, but i can only seem to position it from the edge and top of the page, and not inside a table, which i require.

    The problem is, that when the browser window is adjusted in size, the menu moves with the browser, thus taking the position away from its desired fixed position which would be inside the table.

    can anybody help?

    below is the code:
    Code:
    <html>
    <head>
    <title>help me js experts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript">
    
    
    <!-----------------------Edition des caractèristiques du menu ----------------------------->
    
    var largeur = 110;//Largeur du menu
    var gauche = 226;//nombre de pixe de la gauche de l'écran
    var top = 162;//Nombre de pixels du haut de la page
    var couleur_police_cat="#4E83C4";//Couleur du texte des categories
    var couleur_police_scat="#ffffff";//Couleur du texte des sous-categories
    var couleur_cat="#ffffff";//Couleur de fond des categories
    var couleur_scat="#366EB7";//Couleur de fond des sous-categories
    
    
    var taille = 11;//Police de caractères
    var police = "Arial";//Type de police
    
    
    
    <!-----------------------Texte et lien des menus et sous menus---------------------------->
    
    var nb_elem = 8;//Nombre de categorie dans le menu
    
    var nb_souscat = new Array(nb_elem);//Nb_souscat contient le nombre de sous categorie pour chaque categorie
    
    //nb_souscat[0] = 0;//Nombre de sous categorie 1
    //nb_souscat[1] = 0;//Nombre de sous categorie 2
    //nb_souscat[2] = 0;//Nombre de sous categorie 3
    nb_souscat[3] = 7;//Nombre de sous categorie 4
    //nb_souscat[4] = 0;//Nombre de sous categorie 5
    //nb_souscat[5] = 0;//Nombre de sous categorie 6
    //nb_souscat[6] = 0;//Nombre de sous categorie 7
    //nb_souscat[7] = 0;//Nombre de sous categorie 8
    //répeter aussi souvent qu'il y a de categorie... 
    
    
    var categorie = new Array(nb_elem);
    var soustab = new Array;
    
    var tab0 = new Array(nb_souscat[0]);
    var tab1 = new Array(nb_souscat[1]);
    var tab2 = new Array(nb_souscat[2]);
    var tab3 = new Array(nb_souscat[3]);
    var tab4 = new Array(nb_souscat[4]);
    var tab5 = new Array(nb_souscat[5]);
    var tab6 = new Array(nb_souscat[6]);
    var tab7 = new Array(nb_souscat[7]);
    //répeter aussi souvent qu'il y a de categorie... 
    
    
    <!-------Edition PREMIERE categorie et sous categorie------------>
    categorie[0] = " &nbsp;Profile"; //Titre de la categorie
    
    //tab0[0] = " Script|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
    //tab0[1] = " Tutoriaux|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
    //tab0[2] = " Liens|http://www.script-masters.com|_blank";//Troisième sous-titre|liens|cible
    
    
    <!-------Edition SECONDE categorie et sous categorie------------>
    categorie[1] = " &nbsp;Products";//Titre de la categorie
    
    tab1[0] = " Liens|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
    tab1[1] = " Forums|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
    tab1[2] = " Livres|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible
    
    
    <!-------Edition TROISIEME categorie et sous categorie------------>
    categorie[2] = " &nbsp;Markets";//Titre de la categorie
    
    tab2[0] = " Bases|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
    tab2[1] = " Livres|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
    
    
    <!-------Edition QUATRIEME categorie et sous categorie------------>
    categorie[3] = " &nbsp;Accreditation"; //Titre de la categorie
    
    tab3[0] = " &nbsp;BSI ISO9002-17025|";//Premier sous-titre|liens|cible
    tab3[1] = " &nbsp;UKAS|";//Second sous-titre|liens|cible
    tab3[2] = " &nbsp;HACCUP|";//Troisième sous-titre|liens|cible
    tab3[3] = " &nbsp;GMP|";
    tab3[4] = " &nbsp;PHARMACOPIA|";
    tab3[5] = " &nbsp;IIP|";
    tab3[6] = " &nbsp;HOME OFFICE|";
    
    categorie[4] = " &nbsp;Cust. Service";
    
    categorie[5] = " &nbsp;Analytical";
    
    categorie[6] = " &nbsp;Training";
    
    categorie[7] = " &nbsp;Prod. Pricelist";
    
    soustab[0] = tab0;
    soustab[1] = tab1;
    soustab[2] = tab2;
    soustab[3] = tab3;
    //répeter aussi souvent qu'il y a de categorie... 
    
    
    <!------------------------------------Fonctions-------------------------------------------->
    <!------------------------------NE PLUS RIEN MODIFIER-------------------------------------->
    
    var conf = -1;
    function Init(){
    var hauteur = top;
    for(i=1;i<=nb_elem;i++){
    document.getElementById("menu"+i+"").style.top = hauteur;
    hauteur = hauteur + 17;
    }
    }
    
    function voir(z){
    if(conf==z){
    document.getElementById("sousmenu"+z+"").style.visibility = 'hidden';
    Init();
    conf=conf+nb_elem;
    }else{
    conf=z;
    
    //Calcul de la hauteur dont doit se baisser le menu
    haut=0;
    var haut = 15*nb_souscat[z-1]+z*18+top;
    
    
    //On retracte tous les éléments
    for(i=1;i<=nb_elem;i++){
    document.getElementById("sousmenu"+i+"").style.visibility = 'hidden';
    }
    
    //on les remets tous à leur place
    Init();
    
    //on cale le sous menu sous la categorie
    document.getElementById("sousmenu"+z+"").style.top = 16;
    dec = haut;
    
    //On peut alors baisser tous les autre menus
    for(i=z+1;i<=nb_elem;i++){
    
    document.getElementById("menu"+i+"").style.top = dec;
    dec=dec+18;
    }
    
    //Enfin, on rend le menu visible
    document.getElementById("sousmenu"+z+"").style.height = 15*nb_souscat[z-1];
    document.getElementById("sousmenu"+z+"").style.visibility = 'visible';
    
    }
    
    }
    
    function affiche(){
    
    //feuille de style
    document.write('<style>');
    document.write('div.menu{visibility:visible; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_cat+'}');
    document.write('div.sousmenu{position:absolute; left:-1; height:20; visibility:hidden; width:'+ largeur +'; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_scat+'}');
    document.write('a.menu{font-family: '+ police +'; color: '+couleur_police_cat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
    document.write('a.smenu{font-family: '+ police +'; color: '+couleur_police_scat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
    document.write('</style>');
    document.write('<div>');
    
    for(i=0;i<nb_elem;i++){
    boucle = nb_souscat[i];
    
    
    document.write('<div id="menu'+(i+1)+'" style="position:absolute; left:'+ gauche +'px; width:'+ largeur +'px;" class="menu">');
    document.write('<a href="#" class="menu" onClick="javascript:voir('+(i+1)+')">'+categorie[i]+'</a>');
    
    document.write('<div width="'+ largeur +'" id="sousmenu'+(i+1)+'" class="sousmenu">');
    
    
    for(z=0;z<boucle;z++){
    elem=soustab[i][z].split("|");
    document.write('<div height="15"><a href="'+elem[1]+'" target="'+elem[2]+'" class="smenu">'+elem[0]+'</a></div>');
    }
    
    
    document.write('</div>');
    document.write('</div>');
    
    }
    
    document.write('</div>');
    
    document.onLoad=Init();
    }
    </script>
    </head>
    
    <body>
    <table width="30%" border="0" align="center">
    <tr> 
    <td colspan="2"><img src="bannerv2.gif" width="701" height="130"></td>
    </tr>
    <tr> 
    <td width="19%" height="518" valign="top" background="navbg.gif"> 
    <script language="Javascript">
    affiche();
    </script>
    </td>
    <td width="81%" background="contentbg2.gif">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    thanks.
    Last edited by liorean; 10-07-2004 at 11:33 AM. Reason: [code]-ified.

  • #2
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    I'm not quite sure where the problem is - the French text in your code is throwing me way off.

    I would suggest changing where you see
    position:absolute

    and change them one at a time to
    position:relative.


    Absolute is placing the menu in relation to the actual page.
    Relative will place it in relation to whatever it's sitting in (like TABLEs).

    Re: Willy Duitt's suggestion
    Last edited by ArcticFox; 10-13-2004 at 12:11 AM.
    <div> - putting your mind in a box since 1997


  •  

    Posting Permissions

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