PDA

View Full Version : Smart Folding Menu Tree Scr: How change the leftmost postion of the menu



pluus_x
11-14-2005, 12:40 PM
I am quite new in javascript.
But i wanted to change the left postion of the menu, and also the amount of identation.

I thought it had to be changed in

tItem.more.style.pixelLeft = (tMenu.style.pixelWidth - 17);
tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft - 17);

change the -17 value to something else (like -4) does not work.

How and where can i make the changes?

pluus_x
11-25-2005, 01:37 PM
Is my question so difficult,
or ridiculous
or does nobody uses this menu-script?

pls help

jscheuer1
11-25-2005, 04:30 PM
How far to the left or right do you want it moved?

whatever
.

pluus_x
11-26-2005, 08:07 PM
this is the dhtml menu: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

and this is the (problematic) page: www.provoost.info

I want to move the menu to the left so i have more space for the right 'window' in which is the real information

jscheuer1
11-26-2005, 09:44 PM
OK, on your page with the tree on it, make a division that contains the menu:


<div id="foldcontainer">
<ul>
<li id="foldheader">Familie</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://home.hccnet.nl/m.provoost">Oude homepage</a></li>
<li><a href="http://www.provoost.info/photos">Foto album</a></li>
<li id="foldhe . . .

. . . </ul>
<li><A HREF=./Muziek/Git/Wilhelmus/Wilhelmus.txt>Wilhelmus</a></li>

</ul>

</ul>
</ul>
</div>

Make the style section look like this:


<style type="text/css">

#foldcontainer {
margin-left:-15px;
}
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(./img/fold.gif)}
#foldinglist{list-style-image:url(./img/list.gif);margin-left:-25px!important;margin-left:8px;}

</style>

Or better yet, really neaten it up (values are the same, it is just easier on the eyes this way):


<style type="text/css">

#foldcontainer {
margin-left:-15px;
}

#foldheader {
cursor:pointer;
cursor:hand ;
font-weight:bold ;
list-style-image:url(./img/fold.gif);
}

#foldinglist {
list-style-image:url(./img/list.gif);
margin-left:-25px!important;
margin-left:8px;
}

</style>

pluus_x
11-28-2005, 07:50 AM
Tnx a lot it works.
but can you explain me what i did?
especially this line:
#foldinglist{list-style-image:url(./img/list.gif);margin-left:-25px!important;margin-left:8px;}

jscheuer1
11-28-2005, 08:03 AM
Well, in general, having a negative left margin will move things over to the left. However, virtually all browsers that parse this code except for IE see things a little differently. They see it that only the top level items get moved over, while IE sees everything getting moved over. That is why we follow moving the container over 15px with this kludge for the lower level elements:


margin-left:-25px!important;margin-left:8px;

The !important hack tells virtually all browsers to ignore any other rule for this property and will follow the -25px left shift. Since IE already moved all these items over, along with the top level elements, it actually needs to move them back about 8px to give them any indent at all. Since IE doesn't know from !important, it will use the second rule.

pluus_x
11-28-2005, 09:56 AM
tnx again John!