Click here to register.
      
PBWG Banner


     Discuss > WebGUI Dev Goto page «Previous Page   1 2    Next Page»

Unordered List with Navigation Template?

User wouter
Date 7/18/2006 3:50 pm
Views 3647
Rating 6    Rate [
|
]
Previous · Next
User Message
wouter
It seems impossible to me to create an XHTML compliant unordered list
with Navigation templates. Did I miss something? Has anybody succeeded
in creating this?

If such a template could be made, that would be very cool, because it is
already useful in its own right, but together with CSS this is a very
powerful combination. You could create almost any type of navigation
with an unordered list and some CSS. It would also be very easy to
switch to a completely different layout, by only changing the stylesheet
(even on-the-fly if you want).

The nested structure of UL's can be used for other purposes as well, but
I'm having troubles with the last item, that should close all the open
tags. For example, if I have a structure like:

1
1.2
1.2.3

this should produce:

[ul]
[li] 1
[ul]
[li] 1.2
[ul]
[li] 1.2.3
[/li]
[/ul]
[/li]
[/ul]
[/li]
[/ul]

However, I didn't find out how to generate the last 3 [/li] tags?

So far, I only succeeded by creating this using javascript, but that's
not a good solution.

Maybe a template variable should be added to make this possible. Either
a property that describes if a page is the last of the navigation (not
the last in the current directory), or something like a lastPageDepth_loop.

Wouter


Back to Top
Rate [
|
]
 
 
martink
I'm pretty sure I once solved this problem in older webgui's. I'll see
if I can do the same on 7.x tomorrow.

Martin

webguidev@plainblack.com wrote:

> wouter wrote:
>
> It seems impossible to me to create an XHTML compliant unordered list
> with Navigation templates. Did I miss something? Has anybody succeeded
> in creating this?
>
> If such a template could be made, that would be very cool, because it is
> already useful in its own right, but together with CSS this is a very
> powerful combination. You could create almost any type of navigation
> with an unordered list and some CSS. It would also be very easy to
> switch to a completely different layout, by only changing the stylesheet
> (even on-the-fly if you want).
>
> The nested structure of UL's can be used for other purposes as well, but
> I'm having troubles with the last item, that should close all the open
> tags. For example, if I have a structure like:
>
> 1
> 1.2
> 1.2.3
>
> this should produce:
>
> [ul]
> [li] 1
> [ul]
> [li] 1.2
> [ul]
> [li] 1.2.3
> [/li]
> [/ul]
> [/li]
> [/ul]
> [/l i]
> [/ul]
>
> However, I didn't find out how to generate the last 3 [/li] tags?
>
> So far, I only succeeded by creating this using javascript, but that's
> not a good solution.
>
> Maybe a template variable should be added to make this possible. Either
> a property that describes if a page is the last of the navigation (not
> the last in the current directory), or something like a
> lastPageDepth_loop.
>
> Wouter
>
>
> http://www.plainblack.com/webgui/dev/discuss/unordered-list-with-navigation-template
>
>
>------------------------------------------------------------------------
>
>
>
>
>



Back to Top
Rate [
|
]
 
 
crythias

Why? I mean, seriously... anything you can do with LI you can do with span and class.



Back to Top
Rate [
|
]
 
 
pwrightson

Sorry about the previous post not showing the code properly. 

This is working for me in 6.3 -> 6.8
 

<ul>
<tmpl_loop page_loop>
<tmpl_if page.depthDiffIs-1><ul></tmpl_if>
<tmpl_loop page.depthDiff_loop></ul></tmpl_loop>
<li><a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var page.url>">
<tmpl_if page.isCurrent><span class="selectedMenuItem"><tmpl_var page.menuTitle></span>
<tmpl_else><tmpl_var page.menuTitle></tmpl_if></a></li>
<tmpl_if __LAST__><tmpl_loop page.indent_loop></ul></tmpl_loop></tmpl_if>
</tmpl_loop>
</ul>

webguidev@plainblack.com wrote:

> martink wrote:
>
> I'm pretty sure I once solved this problem in older webgui's. I'll see
> if I can do the same on 7.x tomorrow.
>
> Martin
>
> webguidev@plainblack.com wrote:
>
> > wouter wrote:
> >
> > It seems impossible to me to create an XHTML compliant unordered list
> > with Navigation templates. Did I miss something? Has anybody succeeded
> > in creating this?
> >
> > If such a template could be made, that would be very cool, because it is
> > already useful in its own right, but together with CSS this is a very
> > powerful combination. You could create almost any type of navigation
> > with an unordered list and some CSS. It would also be very easy to
> > switch to a completely different layout, by only changing the stylesheet
> > (even on-the-fly if you want).
> >
> > The nested structure of UL's can be used for other purposes as well, but
> > I'm having troubles with the last item, that should close all the open
> > tags. For example, if I have a structure like:
> >
> > 1
> > 1.2
> > 1.2.3
> >
> > this should produce:
> >
> > [ul]
> > [li] 1
> > [ul]
> > [li] 1.2
> > [ul]
> > [li] 1.2.3
> > [/li]
> > [/ul]
> > [/li]
> > [/ul]
> > [/l i]
> > [/ul]
> >
> > However, I didn't find out how to generate the last 3 [/li] tags?
> >
> > So far, I only succeeded by creating this using javascript, but that's
> > not a good solution.
> >
> > Maybe a template variable should be added to make this possible. Either
> > a property that describes if a page is the last of the navigation (not
> > the last in the current directory), or something like a
> > lastPageDepth_loop.
> >
> > Wouter
> >
> >
> >
> http://www.plainblack.com/webgui/dev/discuss/unordered-list-with-navigation-template
>
> >
> >
> >------------------------------------------------------------------------
> >
> >
> >
> >
> >
>
>
>
> http://www.plainblack.com/webgui/dev/discuss/unordered-list-with-navigation-template/1
>
>
>------------------------------------------------------------------------
>
>
>
>
>



Back to Top
Rate [
|
]
 
 
wouter
If with "working" you mean that it is rendered correctly in most browsers, than you're probably right.
However, you close the li tags before going into a deeper level (next ul-tag), which is not allowed in any HTML-standard.


Back to Top
Rate [
|
]
 
 
pwrightson
You know - when you're right, you're right.
Lets see what we can do about that.

webguidev@plainblack.com wrote:

> wouter wrote:
>
> If with "working" you mean that it is rendered correctly in most
> browsers, than you're probably right.
> However, you close the li tags before going into a deeper level (next
> ul-tag), which is not allowed in any HTML-standard.
>
>
> http://www.plainblack.com/webgui/dev/discuss/unordered-list-with-navigation-template/12
>
>
>------------------------------------------------------------------------
>
>
>
>
>



Back to Top
Rate [
|
]
 
 
JT
> wouter wrote: It seems impossible to me to create an XHTML compliant unordered list
> with Navigation templates. Did I miss something? Has anybody succeeded
> in creating this?

It's not impossible. It's just not very straight forward. Our designer actually put a
template into WebGUI 7 for this, but for some reason it never got imported...so that's
something I need to check on. Anyway, here's the gist of it:












  • page.newWindow>onclick="window.open('')" href="#"
    href="">

















  • JT ~ Plain Black
    ph: 703-286-2525 ext. 810
    fax: 312-264-5382
    http://www.plainblack.com

    I reject your reality, and substitute my own. ~ Adam Savage


    Back to Top
    Rate [
    |
    ]
     
     
    wouter
    "It seems impossible to me to create an XHTML compliant unordered list
    with Navigation templates. Did I miss something? Has anybody succeeded in creating this?"

    Oh, I'm stupid! Yes, I missed something... The __LAST__ template variabele is needed for the proper closing. It just wasn't documented in the Navigation Template documentation, but only in the Template Language help docs, where I didn't search :)

    So, a possible template which generates (at least for my test cases) valid XHTML is:

    <tmpl_if session.var.adminOn><tmpl_var controls><br /></tmpl_if>
    <tmpl_if displayTitle><h2><tmpl_var title></h2></tmpl_if>
    <tmpl_if description><p><tmpl_var description></p></tmpl_if>

    <tmpl_loop page_loop>

    <tmpl_if page.isRankedFirst>
    <ul class="level<tmpl_var page.relDepth>">
    </tmpl_if>

    <tmpl_loop page.depthDiff_loop>
    </li>
    </ul>
    </tmpl_loop>

    <tmpl_unless page.isRankedFirst>
    </li>
    </tmpl_unless>

    <li class="level<tmpl_var page.relDepth>"><a href="<tmpl_var page.url>"><tmpl_var page.menuTitle></a>

    <tmpl_if __LAST__>
    <tmpl_loop page.indent_loop>
    </li>
    </ul>
    </tmpl_loop>
    </tmpl_if>

    </tmpl_loop>

    Based on this, I revoke my suggestion that new template variables are necessary :) I'll commit a fixed version of the "Bulleted List" navigation template later.


    Back to Top
    Rate [
    |
    ]
     
     
    wouter
    Hmm, even my last template does not always give the correct result. The problem is that the page.indent_loop is run page.relDepth times, where page.relDepth is relative to the starting point. However, the first item does not have to start at depth 0. This depends on the settings of the navigation (for example if "self" is included or not).
    So there is no way to find out how many closing tags are required.

    A possible solutions is then to add another loop (e.g. page.close_loop), that will do the same as indent_loop, but uses the depth relative to the first item. I'm not sure if this is the best solution, though.


    Back to Top
    Rate [
    |
    ]
     
     
    JT
    > A possible solutions is then to add another loop (e.g. page.close_loop), that will do
    >the same as indent_loop, but uses the depth relative to the first item. I9m not sure if
    >this is the best solution, though.

    The real problem is that we're trying to solve a recursive problem iteratively. But I'm
    not sure how else to do it. Even if we turned the flat loop structure into nested loops,
    there'd be no way to determine how many loops deep we'd need to make the template
    because you can't do recursion in a template.

    The problem at the end is that the outdent could go 1 level or 150 levels. You just
    don't know. A page.close_loop could do the job, but creating that accurately seems like
    a difficult task.

    JT ~ Plain Black
    ph: 703-286-2525 ext. 810
    fax: 312-264-5382
    http://www.plainblack.com

    I reject your reality, and substitute my own. ~ Adam Savage


    Back to Top
    Rate [
    |
    ]
     
     
         Discuss > WebGUI Dev Goto page «Previous Page   1 2    Next Page»



    Recent Discussions Color Key

    Design:

    Development:

    Et Cetera:

    Install/Upgrade:  

    Smoketest:

    Template Group:


    Re: Site paid for by advertizing by Klaus - Fri @ 02:27am

    Smoke Test for WebGUI (Stable) (2008-11-21) by botaction - Fri @ 12:37am

    Re: Site paid for by advertizing by pwrightson - Thu @ 10:59am

    Re: Site paid for by advertizing by JT - Thu @ 08:58am

    Re: Regelmäßiger Termin für Usertreffen in der Rhein-Neckar-Region by Klaus - Thu @ 06:11am

    Smoke Test for WebGUI (Stable) (2008-11-20) by botaction - Thu @ 12:00am

    Smoke Test for SVN (2008-11-20) by botaction - Thu @ 12:00am

    Re: Improving page layouts by fdillon - Wed @ 08:38pm

    Re: Improving page layouts by knowmad - Wed @ 08:25pm

    Re: Site paid for by advertizing by knowmad - Wed @ 08:07pm

    Re: SSL Configuration? by knowmad - Wed @ 07:51pm

    Re: The Death of the Collaboration System by preaction - Wed @ 07:39pm