Expand and Collapse headers through Javascript

Got the characters to work, I updated my meta-tags everywhere, and now my é,à,… work.
Got the template back to work, he updates the site again!
So then there is only the issue to get him online succesfully and without much layout differences crossbrowser and with different resolutions.
If you could just help me making this a bit better, so my site doesn’t transform at every browser of resolution, that would mean the world to me!

BTW: Sorry if you had a difficult week, and then you put so much time in helping me aswell!! So thanks a million!

2.So I changed my doctype of my template to strict . However, when I press save, my editor doesn’t ask me to apply the changes to every page of my site… I think this is due to the change to strict, because before every change was updated to every sitepage.
Do I have to change EVERY page manually?

This was something I wouldn’t have been able to answer, because it’s 100% to do with your editor. I use vim : )

  1. Inserted back the header tag, to place the Sitesmenu, and that turns out fine, BUT when shrinking the screen(AGAIN the shrinking problem ) my menu doesn’t appear. When I make it half page my Sitemenu just disappears, and even scrolling doens’t make it appear.

This is float drop. If you could see through the rest of the page, you’d see that eventually, the .header isn’t wide enough for both floats to sit side-by-side, so the later one in source has to drop beneath the first one. The reason the header isn’t growing taller to show the menu and pushing the rest of the page down is, you combined a set height with overflow: hidden. You really do not want to do this: if you set a height, don’t use overflow: hidden. Setting a width and overflow: hidden would be okay because nobody inside has a width greater than your page.

You could try just removing the height for .header and giving it a min-width. Set this to whatever amount still allows the two floats to remain side-by-side. This should mean if you try to make your browser smaller, the page gets a scrollbar.

There isn’t anyway the images become smaller when shrinking the screen and you can still see the text entirely?

There are ways to shrink images, but a lot of them suck. One trick is to set img tags in the html to width: 100% and height: 100%, and have them inside a box with flexiwidth. But since making that box smaller means the browser has to compress the image, and browsers suck at that, the image looks crappy.

In responsive pages, sometimes if an image MUST be present on the page, the server sends a smaller-dimensioned image when the screen is too small. I don’t see this page ever doing this. Still better to force a minimum wide width of the page and make people scroll… the other option being, completely redesign the site and figure something else out for the jQuery slideshow. Which I don’t believe is really an option for you.

But, screens wider than that minimum shouldn’t have a scrollbar.

Because on different resolutions, even fullscreen appears a scrollbar, and my client said she wasn’t that happy that you don’t see the text appearing in his total… Sigh

If they want all that stuff to fit in a row, then someone’s going to get a scrollbar. How many clowns can you stuff into a Volkswagen Beetle??

But you might be able to allow more room in the grey area for text if you (in an image editor! like Photoshop or something) shrink all those slideshow images a bit and reset the sizes for the slideshow img tags…

My browser has to be set at minstens 963px wide to get all of the image in the slideshow (also I’m missing some jquery so it’s not running in version 3). To get some usable amount of text in the right side, browser needs to be at least 1348px. Which is rather wide.

You could also maybe win some room by making the rand of the left menu smaller… that is, less room around the actual menu part. I don’t like suggesting decreasing font size too because then you have a hard-to-read site.

I think the general setup is just difficult to build well. It forces three large boxes to fit side-by-side (and the container being limited to non-full width as well), and at some point you must demand wide browsers to fit all that in there.

The clients are demanding that a whole lot of information be crammed onto the page, but then also that it looks nice and clean rather than cluttered. I think here there is too much being pushed onto the main page: I’d reduce what’s available in the left menu (making broader topic categories) and exchange those for an extra click on the part of the visitor. I’d also try to re-design the right side by allowing all that header+text to live underneath the slideshow rather than next to it.

But the client likes the general design already so I think I’d do this:

  1. Reduce the rand of maroon around the left menu (you’ve got 30px on each side… try making that 10px on each side). Slightly reduce the size of the text in the menu (I don’t like this because you’ve got 15px now and I do not like going below 14px when setting px fonts… and it looks bigger now because you have verdana, so maybe consider allowing only smaller fonts listed there? 14px Geneva, Helvetica, Arial or something? This might let you reduce the li’s from 200px wide to like 180px wide or something).

  2. Then see if you can reduce the dimensions of the photos. Try 400px by 360px (which should be the same proportion).

  3. Then see if you can set the min-width of the container to something that allows it to be 100% of the page until about 1024px. That’s a common resolution (though on many screens they will have less than that due to scroll bars and maybe sidebars like for bookmarks and things), and after that, wider screens get the centered look.

.container {
min-width: 1024px;
width: 80%;
}
or something. See how small you can make the min-width before stuff just wants to get cut off… after the other changes above you might be able to get away with something smaller for min-width.

This means any screens less than 1024px (or whatever) get a horizontal scrollbar on the page BUT the menu in the .header cannot drop and nobody can cover anyone else up.

  1. Finally see if you can change the sizes of the text on the right. Let the show-text be 14px and the koptext only 18px or something. Again I don’t like reducing text size but it’s probably the only way to stuff everything in this setup.

I’m not sure how much more you could do to get more to fit in less.

Changed most of your tips, the adaptation of the images to a smaller format, is something I am putting on the waiting list, and I’m gonna wait to see how the company will react.
Overall, I think it is pretty much finished now.
BTW: In the homepage, I added for the slideshow the alt-attributes, but I think due to the jquery adding of the prev/next buttons,the alt doesn’t show when hovering/standing on the slideshow. And the company wanted something like that to show aswell for some extra information concerning the images.
If you wanna have a look on the final result, here it is: http://www.maxx-it.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/index2.html
I’m posting it as a final result as soon as I’m getting your “GO”!

I mentioned you and Sitepoint in the meta-keywords tags, as my final thanks!
If you would see any errors or have any remarks, don’t hesitate!
P.S. in the final version on the site itself, I will add the CSS to 1 file. I’m a bit scared of the js files though in putting them all into 1 file:
Can I just copy/paste everything under eachother and then link to that 1 file? Is that all there needs to be done for the js?

Thanks heaps!!!
Maxx-iT

but I think due to the jquery adding of the prev/next buttons,the alt doesn’t show when hovering/standing on the slideshow.

Actually, alt isn’t supposed to show when hovering… that’s an old IE bug. Alt text should only ever be seen on the screen if/when the image doesn’t load.

What does appear on hover though is the title attribute. I’m usually against title most of the time because it’s often redundant and not useful and isn’t available to keyboarders… BUT if the company specifically wants some text to appear on hover then that’s exactly what you want.

<img src=“blah.jpg” width=“” height=“” alt=“you may or may not want alt and title at the same time” title=“text you want to appear on hover”>

Usually you don’t want alt and title to repeat each other. Some screen readers, if so configured (cause you can change the settings but we assume newbs don’t change anything, like with browsers) will read out both. So depending on how important the text is (which you must decide), you might want alt=“” and title=“the text”.

If it’s pretty important text then go ahead and repeat them. There are only 6 or so images in the slideshow anyway.

In the future if you have alt attributes and you notice that IE is showing a tooltip when you don’t want it, you can get around the bug by adding an empty title:
title=“” alt=“your real alt text”

Though I can’t say there wouldn’t be something jQuery does to make that not work quite right… for example the anchors are sitting right on top of the images and so hovering over them might not let a title tooltip from the image underneath to appear…

I mentioned you and Sitepoint in the meta-keywords tags, as my final thanks!

slimme poes! haha

I’m a bit scared of the js files though in putting them all into 1 file:
Can I just copy/paste everything under eachother and then link to that 1 file? Is that all there needs to be done for the js?

Yeah, I seem to recall that when I did that and jQuery was involved, I had to be careful with the part I added…

Ah, in my versions I also had the calling function at the very end, while you have it at the bottom of the page (shouldn’t matter because the ready function is waiting for the page load event anyway).

What you can do is just try it (make backups, or create a clone/fork of what you have so you don’t lose what you’ve got now) and try putting the scripts together and see if they still work. If you get errors, separate the Spry stuff from the jQuery stuff. You’d still have just one spry library and one jquery line.


      <li><a class="MenuBarItemSubmenu" href="vloerbekleding.html">Vloerbekleding</a>
        <ul>
          <li class="submenu"><a href="blah"></a></li>
          <li class="submenu"><a href="blah"></a></li>
          <li class="submenu"><a href="blah"></a></li>
        </ul>

I didn’t see .submenu in your style.css… is it for Spry? Without Spry, normally you don’t need a class on each sub-li. You normally target them with ul li li {styles} or use the class you’ve got on the anchor.


<table id="tabelwords"><tr><td class="words">creativiteit</td><td class="words">kwaliteit</td><td class="words">vakkennis</td><td class="words">veelzijdigheid & diversiteit</td></tr></table>

Similar. The class on each td isn’t necessary… #tablewords td would hit them the same way.

I forgot to mention this, but here’s another role that’s good to add:
<div class=“footer” role=“contentinfo”>

There are mostly two roles you’ll ever see on footers: contentinfo and complementary. Contentinfo is mostly information about who made the page and stuff like full company name, street address, etc… company info usually counts as contentinfo.
Complementary is for stuff that you’d also maybe see in a sidebar. Sometimes people put stuff in footers that’s stuff like, extra links, partner sites, side projects… often these are sitting in a “fat footer”. Like the black area of fabrique.

So you could add a role of contentinfo to the footer.

If you were to add a role of main, it would probably either be the beginning of the slideshow (the table itself), or, likely better, the right td with the actual text in it.

I happened upon raamdecoratie.html randomly clicking and there, it seems two grey areas, and the smaller one has the text? I clicked on another page and it looked fine.

Check your site in the validator:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.maxx-it.be%2FAanbod%2FWebdesign%2FMira%2520Site%2FMira%2Fsweetfruits%2Findex2.html&charset=(detect+automatically)&doctype=Inline&group=0

Most of those errors are explained below:

XHTML sees META and meta as two very different things… it’s case-sensitive. If you’re going to keep all those, lowercase them. If you’re going to use XHTML rather than HTML4/5, then you need to close the meta tags like /> in the <head>.

You have two charset tags: <META NAME=“charset” CONTENT=“ISO-8859-1”> is later… it’s possible that this one is making your letters okay since I’m not sure if it is able to override the other meta tag or not. Remove it and then check your letters.

You still have </br> in the page. This tag does not exist. For XHTML, you’d need <br/>.


akkennis</td><td class="words">veelzijdigheid & diversiteit</td></tr></table>

Ampersands (&) need to be escaped because they can have special meaning. Change them to &amp ; (without the space).

This also means in URLs. If you have an & in a url, the validator will not only complain about the &, but it will also flag any trailing = as well. The = is not an error, it’s just being triggered by the &. You can safely turn & into &amp’s in URLs because browsers convert them to the correct character.

The roles will give you errors because the validator with that doctype does not know what they are. These are errors we are willing to accept, because they aren’t real errors.

The last error is complaining about the type.

required attribute “type” not specified

<script> $(function(){

It’s up to you if you want to add the text/javascript to satisfy the validator or not. Under the HTML5 experimental doctype the validator would say nothing (same for roles) because it knows what that means, but XHTML will always flag it as an error… browsers don’t care.

It’s up to you.

Beyond that, triple check your pages by clicking through them, and then, I guess release it.

Your next site will be so much better : )

Don’t forget to checkout fronteers.nl… they have meetings in Belgium (non-members can attend), where they talk about front-end stuff. A meeting is where I first heard of @media queries, ARIA roles, and Phonegap. :slight_smile:

ha, heel toevallig: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

Something to bookmark for the future

Ok, so added the title attributes, and hop, it works…
the li class=“submenu” is indeed styled in the spryvertical layout, and yeah, I shouldn’t add that class to each li :p… But!! That is something DW did automatic when I inserted the spry.
On the suckerfish menus in the future, I won’t be having this problem then^^
Added the role-contentinfo!

Analyzed the site with the validator. He says that all my meta tags give errors and that the "-characters aren’t allowed, because of incorrect use of strict-document: lowercased them, EDIT: I need to change the Uppercase words like NAME and CONTENT aswell (something for tomorrow)!

I happened upon raamdecoratie.html randomly clicking and there, it seems two grey areas, and the smaller one has the text? I clicked on another page and it looked fine.

Well yeah, I saw that today aswell :s. It must have happened when changing the widths for the floats that shouldn’t drop.
Has it got something to do with the fact you adviced to put .content {width: 85%; min-width: 1024px}? Again, this is only noticeable at other(smaller?) screens then mine, because on mine everything was perfect.
I changed the widths, and I hope that it’s ok now! Don’t even know how it came that some pages had that grey area next to the slideshow…
Changed the </br>'s into <br/> !

If you look at the page: http://www.maxx-it.be/Aanbod/Webdesign/Mira%20Site/Mira/sweetfruits/kijker.html, you notice that the content, doesn’t reach the end of the page, with the grey backgroundcolor.
This is due to the fact that every other page doesn’t have this problem, because the width is adjusted to the quantity of the text. And just on this page, the sentences don’t come long enough to extend the class tot the right end of the page. Any idea how to adapt this?

Going to adapt the script type aswell tomorrow… Have a meeting tonight

Thanks!!

Kind regards!

Has it got something to do with the fact you adviced to put .content {width: 85%; min-width: 1024px}?

It didn’t correct itself as I played with my browserwidth, so no.

What the css declaration should mean:
at all times, .content is 85%
except if forced smaller, always be at least 1024px wide.

If you look at the page: http://www.maxx-it.be/Aanbod/Webdesi...ts/kijker.html, you notice that the content, doesn’t reach the end of the page, with the grey backgroundcolor.

This is how it looks on my end: http://stommepoes.nl/max.jpg it’s supposed to look different?

I changed it already, and everything seemed to work. So I guess the release is a “GO” :-)!!!

Thanks again!!!