Tutorials

Tutorials - 6 - Positioning Items
In WebDDM 3.0-3.2, there was only one way to position items and subitem
containers ('items' arrays). You positioned them absolutely from the
parent 'items' array. Example: // ... Start menu ... // 'items' array #1 'items':{ // position from base of where menu is 'top':0,'left':0, 1:{ // position from 'items' array #1 'top':0,'left':0, // ... more attributes }, 2:{ // position from 'items' array #1 'top':30,'left':0, // ... more attributes , // 'items' array #2 , 'items':{ // position from 'items' array #1 'top':45,'left':0, 1:{ // position from 'items' array #2 'top':0,'left':0, // ... more attributes }, 1:{ // position from 'items' array #2 'top':30,'left':0, // ... more attributes } } } } // ... End menu ...This system made sense, but it can make modifying and creating menus pretty time-consuming. So, as of WebDDM 3.4, there is a new system!
Some of you may, however, like the old system better. If you do, simply put this at the beginning of the menu array:
var menuData = {
// ... attributes here ...
// Use old positioning system
'useOldPositioning':true,
// ... attributes here ...
};
1. So, the new system: offsets
One feature that many other menu softwares have is positioning offsets.
This allows you to position items in relation to where the previous item was
positioned. Take, for example, this simple portion of code:
1:{
'offsetLeft':0, 'offsetTop':0,
// ... etc ...
},
2:{
'offsetLeft':2, 'offsetTop':20,
// ... etc ...
},
3:{
'offsetLeft':0, 'offsetTop':20,
// ... etc ...
},
4:{
'offsetLeft':0, 'offsetTop':20,
// ... etc ...
}
Here is where those items would be positioned on the screen, measuring
by pixels:
- Left: 0. Top: 0.
- Left: 2. Top: 20.
- Left: 2. Top: 40.
- Left: 2. Top: 60.
And also remember: only item arrays can use the 'offsetLeft' and 'offsetTop' attributes; 'items' and 'background-item' arrays must use the 'top' and 'left' attributes.
2. WebDDM does something automatically?!
Now, I am not a fan of software doing things behind your back for you,
automatically. It's slow and it's not controllable. So I was reluctant to
incorporate this feature.However, this feature adds about 10 milliseconds for the WHOLE PAGE - so, yes, generation is slower, but not much so!
This feature is also very small. At the same time, it's extremely useful and makes positioning things a lot simpler.
So, enough of why it's justified - what does it do?!
3. 'items' jumping
Essentially what this new feature does, is jumps 'items' elements automatically
to the top, left position of the parent item. Then you can position it in
relation to the parent item, instead of the parent 'items' array. If you prefer the old system, or if you're worried about losing 10 milliseconds of processing time, see this section on how to turn the feature off and how to use the old positioning system.
Tutorials
Tutorials: Last - Next