cbe and the x.js

[Leon Dwyer]

Okay so I'm a newbe to js, I don't really understand the syntax and all but I can nut a few things out with out to much trouble.

I have been reworking our site www.vicnet.net.au, to a complete css layout design. everything been going great sitepoint and cssZengarden have been an inspiration. I have my dropdown menus working really nicely from the cde menu9.js wow that was great. So i go to tackle the footer placement issue with the x.js application. well I got that working to. But they don't work together. There must be some value that they both use because if I put the x.js on the bottom the footer appears but not the dropdown menu, if I swap it around the menu appears but not the footer.


check it out at http://leon.vicnet.net.au/vicxml/index.html

can any one help me out her! really hope so.

[beetle]

Well, the author of those libraries, Mike Foster, is a member here, so hopefully he'll drop by soon!

!! Paging MikeFoster -- Paging MikeFoster !!

[AlexW]

Hi Leon,

It's looking really good.

I haven't looked at the intricacies of what you're doing, but CBE and X overlap functionality quite a bit and are very likely to step on each others toes while they're in the same file. While it may be possible to hack a method to get them both to work on this occasion, I think you would be best to select one and base your scripts around that library.

X is more efficient and loads quicker. CBE is a little more friendly to work with if you're less familiar with JavaScript.

Cutting out one library will eliminate the clash and a superfluous download at the same time

[Leon Dwyer]

Thanks Alex you have made a really good point. I have found the hack - they were both (of course) using the window.windowOnload function, one was cancelling the others variable - I just put them together and it fix it. But you are so right, their is now so much java script blot. I spend so long trying to save a k or 2 on my images but then add 20k of JavaScript's that and only uses 2 properties from it.now so much java script blot. I spend so long trying to save a k or 2 on my images but then add 20k of javascrpts that and only use 2 propertys from it.

[Leon Dwyer]

Ha see my last post for WOW what a stutter

[AlexW]

Exactly. I seem to remember CBE being about 150k or so, so that's a pretty fair saving if you can make it work with X.

[MikeFoster]

Hi Guys!

Leon, the site looks great!

The CBE core, event, and slide files total about 47K. All the files total about 70K, but you rarely need all of them in one app.

X is about 15K. I wrote it after the experience of writing CBE. Unless you really need the extra features of CBE, I suggest using X.

I'm working on a cascading menu similar to cbe menu9, but based on X. I'll be posting something about it here soon.

But since you've already got the cbe menu implemented, a quick solution would be to just use cbe for the footer. I'll take a look at it and make some suggestions.

[MikeFoster]

Try this for the adjustLayout function. Is there any more code that uses X?

function adjustLayout()
{
  // inner elements
  var ct = cbeGetElementById("contenttest").cbe;
  var lt = cbeGetElementById("leftcoltest").cbe;
  var rt = cbeGetElementById("rightcoltest").cbe;
  var con = cbeGetElementById("container").cbe;
  // wrapper elements
  var c = cbeGetElementById("content").cbe;
  var l = cbeGetElementById("leftcol").cbe;
  var r = cbeGetElementById("rightcol").cbe;
  var f = cbeGetElementById("footer").cbe;
  // get max height
  var maxHeight = Math.max(ct.height(), Math.max(lt.height(), rt.height()));
  // set column heights
  c.height(maxHeight);
  l.height(maxHeight);
  r.height(maxHeight);
  // setup footer
  f.width(con.width());
  f.moveTo(0, maxHeight);
  f.zIndex(10);
  f.show();
}

[Leon Dwyer]

Thankyou so much mike.
I had not checked back for some time and was betting my head trying to get the syntax right for cbe it so nice now

thanks again

leon

[AlexW]

Wow, there's service for you. Brilliant Mike

[MikeFoster]

You're very welcome, Leon.

Thanks, Alex.

[Leon Dwyer]

Sound so great that you are making an equivalent menu9 for the x.js Mike
I have a suggestion for you.
would you think it possible to have the menus run of nested unorded list instead of the div mark-up.

The two problems with the divs are

1 in order for the menus to make sense when downgraded you need to put h1 h2 h3 all over the shop.

2 Also "bobby" does not like two links together with out something separating them so in order to get past bobby level 2 you need to put a fullstops after every link and then hide it with the stylesheet, witch then inturn puts big lumps of space between the links when downgraded and then fixing that problem.. blar blar..... it all starts getting messy.

I would think that the mark up would look somthing like this

<ul id="heading" >heading
<li id="item">item</li>
<li id="item">item</li>
<ul id="heading" >heading
<li id="item">item</li>
<li id="item">item</li>
</ul>
<li id="item">item</li>
</ul>


Cheers Leon

[MikeFoster]

Hi Leon,

xMenu3 is much better than cbeMenu9. It is very flexible - the html requirements are minimal.

Originally Posted by Leon

1 in order for the menus to make sense when downgraded you need to put h1 h2 h3 all over the shop.

Why? The labels already have their own css class - style them to look as you want.

Originally Posted by Leon

2 Also "bobby" does not like two links together with out something separating them...

Just apply a little left/right margin in the links' css.

Originally Posted by Leon

would you think it possible to have the menus run of nested unorded list instead of the div mark-up.

Yes. It might even work with almost no changes to the code - only change the html. The code really doesn't care what elements you use but it does make a few assumptions about how they are structured.

But, using DIVs, if you apply left margin to each box then the downgraded menu will look just like a UL but without the dots. Go to the Hawk site, turn javascript off, and reload the page to see the menu downgraded.

By "downgrade mode" I'm assuming that we still have CSS support. Without CSS support the menu may not be very pretty - but it is still completely accessible, as is all the other content. But I agree that, in this case, it would look better as a UL.

So let's look at the possible html...

<ul id='myMenuName' class='xmBox myMenuBar'>
  <li class='xmLbl myMenuBarLbl'>barLabel</li>
  <ul class='xmBox myMenuBox'>
    <li><a>item</a></li>
    <li class='xmLbl myMenuBarLbl'>boxLabel</li>
    <ul class='xmBox myMenuBox'>
      <li><a>item</a></li>
    </ul>
  </ul>
</ul>

This should create a menu bar with one label (barLabel) which opens a box with one item and one label (boxLabel) which opens a box with one item.

Hmmmm... this may be very easy to try out. In fact it could require no code changes - only html changes... I'm going to experiment with it.

Thanks Leon, you've pointed out some things that I should have originally considered!

[MikeFoster]

Yes it works! All you have to change is the css and html.

[MikeFoster]

I spoke too soon. IE has a problem with it, but it works in Opera and Firebird. Check out my test here.

btw, the horizontal menu uses nested ULs and the vertical menu uses nested DIVs. They both use the same js and css.

Edit:

that menu demo now uses only DIVs, not ULs

[MikeFoster]

Is my above xhtml valid? Or do the nested ULs have to be contained by the LIs, as below?

<ul id='xMenu1' class='xmBox myMenuBar'>
  <li class='xmLbl myMenuBarLbl'>barLabel
    <ul class='xmBox myMenuBox'>
      <li><a href=''>item</a></li>
      <li class='xmLbl myMenuBarLbl'>boxLabel
        <ul class='xmBox myMenuBox'>
          <li><a href=''>item</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

[beetle]

Mike, your XHTML is correct. Nested ULs have to be children to LIs, and cannot be children to other ULs.

In fact, IE will render the improper correctly, but if you view the innerHTML with script, it will report a format like yours.

[MikeFoster]

Thanks Beetle!

In fact, IE will render the improper correctly, but if you view the innerHTML with script, it will report a format like yours.

Ah, that's why it's not working in IE.

Mike, your XHTML is correct. Nested ULs have to be children to LIs, and cannot be children to other ULs.

I was afraid of that. Leon that presents us with 2 problems. (1) The menu js assumes that a label and its box both have the same parent element - but now a box will be contained by its label. (2) It's nice to let the bar labels be inline for a horizontal menu bar - but now a box (block) will be contained by its label (inline). The result is that (1) I can't use the same js logic for both nested DIVs and nested ULs, and (2) it will take a re-design/re-write to support nested ULs.

I'll be thinking about it

[Leon Dwyer]

Well thanks for all the effort Mike,
My latency in replying is not because I'm ignoring you efforts it's because I'm in Australia.

A question about xMenu3, when I checked it out it seemed necessary to click on the menu before the dropdowns would work, although after you click on one of the Parents all of them then work on the hover. is this intentional and can it be change?

Cheers Leon

[MikeFoster]

Yes it's intentional - I got tired of the menus popping up everytime I moved the mouse to the browser's menu or toolbar.

Do you mean change it back to working strictly on mouseover? Yes it could be changed pretty easily.

[Leon Dwyer]

Yep thats what I ment - cool I'm gonna try doing my menu in it today!

cheers

[MikeFoster]

I've been experimenting with implementing a dhtml cascading menu using standard nested ULs. I'm making progress. This is very experimental, but check it out if you want.

xMenu4, using nested ULs

[AlexW]

Nice idea. Everyone seems to be trying to make their nav out of restyled Lists. Very useful. Hawk is cool too. Love the way that nav sneaks in when your not paying attention.

[MikeFoster]

Thanks, Alex!

Currently the UL menu experiment works with IE and Opera ... but not Mozilla - I wasn't expecting that, and it makes me suspicious.

[MikeFoster]

It's working with Moz now