HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Javascript & Management Navigation Issues

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#38419 (In Topic #8646)
Joe
Avatar

Honoured member

Let's start with the management navigation issue. The navigation bar extends more, in width, than the actual body width. I tried everything to see if I can't make the width of the navigation a bit smaller so it aligns with the body width of the layout, but all of my tries have been unsuccessful. :P



Now, on to the Javascript issues. It seems Javascript isn't extending the comcode page as far as it's supposed to, resulting in some information on the comcode page being cut off (you can see a better example in the above picture):


Back to the top
 
Posted
Rating:
#38435
Avatar

Hi,

1)

I am guessing the width problem is due to a situation like this:

Code

<div style="background: url(background.png)">
   <div>
      Management navigation
   </div>
   <div style="margin: 0 20px">
      Main content
   </div>
</div>

I made up all the XHTML there, just to make a point. I think the "main area" has some margin or padding that the management navigation does not have. A stable fix would be to change it to something akin to:

Code

<div style="background: url(background.png)">
   <div style="margin: 0 20px">
      Management navigation
   </div>
   <div style="margin: 0 20px">
      Main content
   </div>
</div>

i.e. give the same left/right margin to the management navigation as the main content has.

Now I could be completely wrong here as I don't know how your theme is built, but even if I am wrong I think you could solve the problem like this.

2)

This possibly could be due to our Javascript hack for the default theme. Does it look right if Javascript is disabled?


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#38440
Joe
Avatar

Honoured member

Chris Graham said

Hi,

2)

This possibly could be due to our Javascript hack for the default theme. Does it look right if Javascript is disabled?
 
Yes, it does.

Back to the top
 
Posted
Rating:
#38444
Avatar

So the question now becomes, does the main site need the Javascript hack? If not, remove this lump out of JAVASCRIPT.tpl:

Code

   move_dyn_bottom();
   addEventListenerAbstract(window,'resize',move_dyn_bottom);
   window.setInterval(move_dyn_bottom,1000);

If the hack is still needed then changes would perhaps need making to adapt the code to your theme. I'd advise getting rid of the hack if you can, I am not a fan of it, it's just something we were forced to deploy in order to maintain our table-layout styling for the newer pure-CSS-layout.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#38452
Joe
Avatar

Honoured member

The only problem is for pages that have a lot of content, the layout gets destroyed. So I'm assuming this is a "must need".

Besides, I don't really like the idea of the page extending too far (even though it's not far enough for some pages with a lot of content) for pages that only have a few lines of text. :/

There's no way to just make a few linebreaks somewhere? :P

Back to the top
 
Posted
Rating:
#38453
Joe
Avatar

Honoured member

By the way, thanks for the management navigation help. I tried what you said, and it looks perfect now. :)

Back to the top
 
Posted
Rating:
#38498
Avatar

I'll try and explain what the Javascript hack does.

The default theme does it's layout by placing the left and right panels in div's that are absolutely positioned, whilst giving the middle area margins that leave the necessary space. The bottom area is supposed to sit underneath the panels and middle area (whichever is tallest would determine where it sits). Because the panels are absolutely positioned, their height is not taken into account when positioning the bottom area of the layout, so what is supposed to happen cannot, due to this limitation of CSS.
The way this is resolved is with the Javascript hack. It calculates the heights of the middle area and panels, and determines just how far down the bottom area needs to be placed. It's complex code, because it needs to cater for things like window resizes.

There are various other ways around the problem, but they all make assumptions so we couldn't use them in our general-purpose theme
  • You can apply the min-height CSS property to the middle area to make sure that it is always taller than your panels. E.g. if you know your panels will never be taller than "100em", do something roughly like .global_middle { min-height: 100em; }. The only problems with this are that it doesn't work on IE6 and that you have to hard-code that min-height value.
  • You can change the look. Rather than placing the 'bottom' underneath everything else, you can place it underneath the middle area but between the panels. This is what ocPortal's default theme actually does do if Javascript is not enabled.
Actually there are other '3 columned layout' techniques but they always forget something, like that you might want to use 'floats' inside the middle; most do not allow a 'bottom' at all. There is also one other way which we're using in v4, which very few CSS programmers on the planet know about, but this is not supportable by ocPortal at the moment due to the way Comcode is output.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#43632
Joe
Avatar

Honoured member

Chris, I want to remove this in the theme I'm developing. Since this post was originally based from v3, how do I remove it in v4?

Back to the top
 
Posted
Rating:
#43633
Avatar

v4 uses an entirely different way of solving the problem I discussed in my post. It doesn't use Javascript at all.

Instead, v4 uses a little-known trick to contain floats in a box (the panels are now floats). The footer then sits under the box.
It works something like this:

Code

<div style="overflow: auto; width: 100%">
<div id="panel_left" style="float: left; width: 20em">panel left</div>
<div id="panel_right" style="float: right; width: 20em">panel left</div>
<div id="content">
main page content
</div>
</div>
<div id="footer">footer</div>

It's "overflow" that does the magic. Normally that CSS property is used for something else entirely, but it also has the feature of containing any floats within it's box.

(Small note: Because of this technique, ocPortal can't use the CSS "clear" property at all, because it would mess with the panels.)


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#43635
Joe
Avatar

Honoured member

Well, my problem is a bit different this time.

Basically I gave the theme a fixed width and added a background image. There is a huge gap of space between the middle (between the left and right panels) and the footer of the page (in which you can see the background). I'd prefer that the height of the middle section extends completely to the footer regardless of how much content the page contains (as the problem only happens when the page has little to no content).

Back to the top
 
Posted
Rating:
#43636
Avatar

You'll need to assign the background to a div surrounding the div containing the panels and middle. If you've always got left and right panels, set it to be a centered background; otherwise you'll need to build in some whitespace in the background to offset it manually.

Code

<div style="background: url(whatever) repeat-y center top">
<div style="overflow: auto; width: 100%">
<div id="panel_left" style="float: left; width: 20em">panel left</div>
<div id="panel_right" style="float: right; width: 20em">panel left</div>
<div id="content">
main page content
</div>
</div>
</div>
<div id="footer">footer</div>


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#43637
Avatar

Oh, and if there's a background already set further inside (I think .global_middle sets one) you'll need to unset that, because obviously it would overwrite your one.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: