How to have <div> added in <ul> category menu link list generated by CMSB generated
6 posts by 3 authors in: Forums > CMS Builder
Last Post: July 27, 2011 (RSS)
By davidcmsb - July 22, 2011 - edited: July 22, 2011
Hi,
I want to use the category menu list of links to categories that CMSB generates with a menu script. This menu script is a Dreamweaver extension that generates the <ul> list like this:
As you can see, it wraps submenu <ul>'s in <div> tags (see, e.g., lines 83 & 89, 92 & 107, and 96 & 102, above).
I think I can add the first opening <div> by using the __hasChild function by using perhaps something like this which adds the div after the link if the category record has a child, for example this --
BUT I just can't figure out after wrestling with it a long time just how to add the ending </div> tag. Something using _isLastChild perhaps, but I just can't figure out the exact code needed. And, it has to go after the </ul> tag that CMSB seems to auto generate to end the sub menu <ul>'s inside the main <ul>.
So, what I need is the code that will generate the category links in the format as per that used by the menu script I want to use as shown above that will add the necessary <div> and </div> surrounding the <ul></ul> pairs that get generated for sub menus (and sub sub menus etc.).
Thanks very much.
I want to use the category menu list of links to categories that CMSB generates with a menu script. This menu script is a Dreamweaver extension that generates the <ul> list like this:
div id="p7TMM_1" class="p7TMM04">
81 <ul class="p7TMM">
82 <li><a href="#">Root Menu Item</a>
83 <div>
84 <ul>
85 <li><a href="#">Menu Item</a></li>
86 <li><a href="#">Menu Item</a></li>
87 <li><a href="#">Menu Item</a></li>
88 </ul>
89 </div>
90 </li>
91 <li><a href="#">Root Menu Item</a>
92 <div>
93 <ul>
94 <li><a href="#">Menu Item</a></li>
95 <li><a href="#">Menu Item</a>
96 <div>
97 <ul>
98 <li><a href="#">Menu Item</a></li>
99 <li><a href="#">Menu Item</a></li>
100 <li><a href="#">Menu Item</a></li>
101 </ul>
102 </div>
103 </li>
104 <li><a href="#">Sub-Menu Item</a></li>
105 <li><a href="#">Sub-Menu Item</a></li>
106 </ul>
107 </div>
108 </li>
109 <li><a href="#">Root Menu Item</a>
110 <div>
111 <ul>
112 <li><a href="04carbon.htm">Current Mark</a></li>
113 <li><a href="#">Menu Item</a></li>
114 <li><a href="#">Menu Item</a></li>
115 </ul>
116 </div>
117 </li>
118 <li><a href="#">Root Menu Item</a>
119 <div>
120 <ul>
121 <li><a href="#">Menu Item</a></li>
122 <li><a href="#">Menu Item</a></li>
123 <li><a href="#">Menu Item</a></li>
124 </ul>
125 </div>
126 </li>
127 </ul>
128 <!--[if lte IE 6]>
129<style>.p7TMM04 .p7TMM, .p7TMM04 a, .p7TMM04 li {height:1%;}</style>
130<![endif]-->
131 <!--[if IE 5]>
132<style>.p7TMM04 a, .p7TMM04 a {overflow: visible !important;}</style>
133<![endif]-->
134 <script type="text/javascript">
135<!--
136P7_TMMop('p7TMM_1',3,0,0,3,1,1,1,0,-1,150);
137//-->
138 </script>As you can see, it wraps submenu <ul>'s in <div> tags (see, e.g., lines 83 & 89, 92 & 107, and 96 & 102, above).
I think I can add the first opening <div> by using the __hasChild function by using perhaps something like this which adds the div after the link if the category record has a child, for example this --
<ul>
<li><a href="?">(All Articles)</a></li>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_hasChild']): ?>
<a href="#"><?php echo $categoryRecord['name'] ?></a> <div>
<?php else: ?>
<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b> <?php endif ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach ?>
</ul>BUT I just can't figure out after wrestling with it a long time just how to add the ending </div> tag. Something using _isLastChild perhaps, but I just can't figure out the exact code needed. And, it has to go after the </ul> tag that CMSB seems to auto generate to end the sub menu <ul>'s inside the main <ul>.
So, what I need is the code that will generate the category links in the format as per that used by the menu script I want to use as shown above that will add the necessary <div> and </div> surrounding the <ul></ul> pairs that get generated for sub menus (and sub sub menus etc.).
Thanks very much.
Re: [davidcmsb] How to have <div> added in <ul> category menu link list generated by CMSB generated
By Jason - July 22, 2011
Hi,
That's an interesting problem. I've looking into it and you can do it, but you can't use the _listItemStart and _listItemEnd pseudo fields.
What you can do is use the _hasChild and _isLastChild pseudo fields to manually create the <ul> and <li> tags. For example:
Hope this helps get you started.
That's an interesting problem. I've looking into it and you can do it, but you can't use the _listItemStart and _listItemEnd pseudo fields.
What you can do is use the _hasChild and _isLastChild pseudo fields to manually create the <ul> and <li> tags. For example:
<div>
<ul>
<?php foreach ($categories as $category): ?>
<li><?php echo $category['name'];?>
<?php if ($category['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>
<?php if ($category['_isLastChild'] && !$category['_hasChild']): ?>
</ul>
</div>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>Hope this helps get you started.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Re: [Jason] How to have <div> added in <ul> category menu link list generated by CMSB generated
By davidcmsb - July 22, 2011 - edited: July 22, 2011
Thanks, Jason.
Two things:
[1] I'd like to understand _isLastChild better. When I first looked at the code in your reply, I didn't understand this line:
<?php if ($category['_isLastChild'] && !$category['_hasChild']): ?>
To me, this says that if the item is _isLastChild and it does not have a child. I didn't understand how something could be both _isLastChild but also have a child itself -- I had been assuming that _isLastChild meant the ultimate very last child at the very end of a branch (and since its the last item it would not have children), thus a last child item would not by definition have a child. But your code made me think that _isLastChild might instead mean the last child _in a level_ (and the last child in a level can have children below it on a sub level).
So, what exactly does _isLastChild specifically mean? Does it mean last child in a level, and not the ultimate very last child at the very end of a branch?
[2] At first your code did not work and outputted only php errors about undefined variables. I tweaked it a little by replacing the variable names you used to be the ones I used and it output the list without php errors, but it did not output and render the list properly. My list should be indented like this:
1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
Fish
Using _listItemStart did generate it indented like this, as I should be.
BUT your code put Fish indented in one level, putting it at the same level as Alaskan Huskie and Boxers, i.e., as a sub of Dogs, and not at the same level as Dogs as it should be as shown immediately above. Here's what your code generated after I tweaked it to use the correct variable names:
1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
- Fish
And here's the code that generated this (i.e., your code that I corrected the variable names in):
And here's the the html for this that got generated using your code:
So the question now is, with this testing feedback from me, what should the code be to output and generate the list properly with the correct indentation?
It looks like a closing </ul> to close the sub level under Dogs needs to be added before the <li> is generated before Fish. In other words, it seems that the code has to somehow adjust for what sub level, or sub sub level or sub sub sub level, the item immediately above Fish is at. I'm hoping the code you reply with will adjust for this, since the above is just a simple working example and my actual site may have different or more levels than this simple working example. I'm guessing it probably is something like some code that selects the last child in a level that adds the closing </ul> for sub levels to close it off else the item below will be included in the same level.
Thanks in advance, looking forward to the code you can supply.
David
Thanks,
David
Two things:
[1] I'd like to understand _isLastChild better. When I first looked at the code in your reply, I didn't understand this line:
<?php if ($category['_isLastChild'] && !$category['_hasChild']): ?>
To me, this says that if the item is _isLastChild and it does not have a child. I didn't understand how something could be both _isLastChild but also have a child itself -- I had been assuming that _isLastChild meant the ultimate very last child at the very end of a branch (and since its the last item it would not have children), thus a last child item would not by definition have a child. But your code made me think that _isLastChild might instead mean the last child _in a level_ (and the last child in a level can have children below it on a sub level).
So, what exactly does _isLastChild specifically mean? Does it mean last child in a level, and not the ultimate very last child at the very end of a branch?
[2] At first your code did not work and outputted only php errors about undefined variables. I tweaked it a little by replacing the variable names you used to be the ones I used and it output the list without php errors, but it did not output and render the list properly. My list should be indented like this:
1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
Fish
Using _listItemStart did generate it indented like this, as I should be.
BUT your code put Fish indented in one level, putting it at the same level as Alaskan Huskie and Boxers, i.e., as a sub of Dogs, and not at the same level as Dogs as it should be as shown immediately above. Here's what your code generated after I tweaked it to use the correct variable names:
1st No Alpha Test Category
Cats
Dogs
- Alaskan Huskie
-- Musher Huskie
-- Sarah Palin Huskie
- Boxers
-- Long Hair
-- Short Hair
- Fish
And here's the code that generated this (i.e., your code that I corrected the variable names in):
<div>
<ul>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<li><?php echo $categoryRecord['name'];?>
<?php if ($categoryRecord['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>
<?php if ($categoryRecord['_isLastChild'] && !$categoryRecord['_hasChild']): ?>
</ul>
</div>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>And here's the the html for this that got generated using your code:
<div>
367 <ul>
368
369 <li>1st No Alpha Test Category
370
371
372 </li>
373
374
375
376
377
378 <li>Cats
379
380
381 </li>
382
383
384
385
386
387 <li>Dogs
388
389
390 <div>
391 <ul>
392
393
394
395
396
397 <li>Alaskan Huskie
398
399
400 <div>
401 <ul>
402
403
404
405
406
407 <li>Musher Huskie
408
409
410 </li>
411
412
413
414
415
416 <li>Sarah Palin Huskie
417
418
419 </li>
420
421
422
423 </ul>
424 </div>
425
426
427
428 <li>Boxers
429
430
431 <div>
432 <ul>
433
434
435
436
437
438 <li>Long Hair
439
440
441 </li>
442
443
444
445
446
447 <li>Short Hair
448
449
450 </li>
451
452
453
454 </ul>
455 </div>
456
457
458
459 <li>Fish
460
461
462 </li>
463
464
465
466 </ul>
467 </div>
468
469
470
471</ul>
472</div>So the question now is, with this testing feedback from me, what should the code be to output and generate the list properly with the correct indentation?
It looks like a closing </ul> to close the sub level under Dogs needs to be added before the <li> is generated before Fish. In other words, it seems that the code has to somehow adjust for what sub level, or sub sub level or sub sub sub level, the item immediately above Fish is at. I'm hoping the code you reply with will adjust for this, since the above is just a simple working example and my actual site may have different or more levels than this simple working example. I'm guessing it probably is something like some code that selects the last child in a level that adds the closing </ul> for sub levels to close it off else the item below will be included in the same level.
Thanks in advance, looking forward to the code you can supply.
David
Thanks,
David
Re: [davidcmsb] How to have <div> added in <ul> category menu link list generated by CMSB generated
By ross - July 25, 2011
Hi David
Thanks for posting :). I think the best thing to do here would be setup a sample template with an example menu hardcoded on it exactly how you want everything to display. Do you have that already? Can you attach a copy for me to work with?
From there, I'll also get you to send me a copy of the schema file for that section (you'll find it in /data/schema).
With all of this, I can create a local copy of what you are working on and it will be much easier for me to test out.
The alternative would be for me to guess some code and let you test it, then tweak from there.
Let me know what you think. Thanks!
Thanks for posting :). I think the best thing to do here would be setup a sample template with an example menu hardcoded on it exactly how you want everything to display. Do you have that already? Can you attach a copy for me to work with?
From there, I'll also get you to send me a copy of the schema file for that section (you'll find it in /data/schema).
With all of this, I can create a local copy of what you are working on and it will be much easier for me to test out.
The alternative would be for me to guess some code and let you test it, then tweak from there.
Let me know what you think. Thanks!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
Re: [ross] How to have <div> added in <ul> category menu link list generated by CMSB generated
By davidcmsb - July 25, 2011
Thanks Ross. Let's for now do the second thing you said, i.e., give me some code you think will work and I'll test it and let you know the results. You should probably be able to give me some code that will create the unordered list structure that needs to work for this.
Thanks,
David
Thanks,
David
Re: [davidcmsb] How to have <div> added in <ul> category menu link list generated by CMSB generated
By Jason - July 27, 2011
Hi David,
_isLastChild indicates if it's the last child in a given branch. So we only want to close off a </ul> if it's the last child and has no children itself.
We can try also closing the </li> tag when closing a <ul> like this:
Give this a try and let us know if this works for you.
Hope this helps
_isLastChild indicates if it's the last child in a given branch. So we only want to close off a </ul> if it's the last child and has no children itself.
We can try also closing the </li> tag when closing a <ul> like this:
<div>
<ul>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<li><?php echo $categoryRecord['name'];?>
<?php if ($categoryRecord['_hasChild']): ?>
<div>
<ul>
<?php else: ?>
</li>
<?php endif ?>
<?php if ($categoryRecord['_isLastChild'] && !$categoryRecord['_hasChild']): ?>
</li>
</ul>
</div>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>Give this a try and let us know if this works for you.
Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/