[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
Yes, it is working. This is TABS layout, not TABS behaviour. It miss the proper jquery-javascript events and actions. this is a demo which shows that it is possible to display the HTML elements on screen as TABS layout without changing the DOM structure. El 15/01/2008 19:14, Olivier Percebois-Garve escribió: Hi I Just had a quick look in Opera 9.25 and it is not working... Olivier Enrique Meléndez Estrada wrote: Looking at official TABs plugin, I realized that the HTML structure is not very natural. It uses a list (UL) of tab headers follow by tab bodies (DIV). Normally, what you get from your favorite CMS is something more like : a header (div, h,...), its body (div), another header (div, h, ...), its body (div), etc... My challenge was, using this last natural HTML structure, try to layout it in a TABs way. I think I've got it: http://www.ita.es/jquery/tabs_only_css.htm , where practically I have used the same HTML for all 8 TABS combinations. The result is compatible with IE6, IE7, FF and Opera. But there are some limitations to take into account when implementing as a Jquery plugin (as I wish, ;-): * Only versions topRight, topLeft, leftTop and rightTop are100% automatic (CSS doesn't depend on TABs number, height and width). * Versions leftBottom, rightBottom, bottomLeft and bottomRight depends on TABS number, and the height and/or width applied (This is very jquerysh-able) * I used QUIRK format (see doctype in HTML) for IE: the same CSS for IE6 and IE7, but in STRICT format it would only work in IE7 (I don't control IE6 by now) * Body TABs height is fixed (100px) and scroll appears where content doesn't fit. In case of non-liquid TABs, with fixed width, it could be possible to automatically calculate height for no-scroll body via jquery-script with 3 modes: * 1. height fixed: like now in the example. 2. height max: fixed to maximum no-scroll body TAB height. 3. height auto: calculating each no-scroll body TAB height. With all this, next steps would be: to search a little more for IE6 STRICT mode compatibility, and to create a Jquery plugin (with CSS dinamically generated?) Any suggestions, help, critics, comments, are very welcome. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
Hi Enrique, It's looking good. Have you tried applying the jquery tabs plugin or any similar tabbing script to make them function? Bearing in mind that the idea behind tabs is to use javascript to apply the css structure, so that people without script can see the content. All the best, Dan. On Jan 16, 2008 9:45 AM, Enrique Meléndez Estrada [EMAIL PROTECTED] wrote: Yes, it is working. This is TABS layout, not TABS behaviour. It miss the proper jquery-javascript events and actions. this is a demo which shows that it is possible to display the HTML elements on screen as TABS layout without changing the DOM structure. El 15/01/2008 19:14, Olivier Percebois-Garve escribió: Hi I Just had a quick look in Opera 9.25 and it is not working... Olivier Enrique Meléndez Estrada wrote: Looking at official TABs plugin, I realized that the HTML structure is not very natural. It uses a list (UL) of tab headers follow by tab bodies (DIV). Normally, what you get from your favorite CMS is something more like : a header (div, h,...), its body (div), another header (div, h, ...), its body (div), etc... My challenge was, using this last natural HTML structure, try to layout it in a TABs way. I think I've got it: http://www.ita.es/jquery/tabs_only_css.htm , where practically I have used the same HTML for all 8 TABS combinations. The result is compatible with IE6, IE7, FF and Opera. But there are some limitations to take into account when implementing as a Jquery plugin (as I wish, ;-): * Only versions topRight, topLeft, leftTop and rightTop are100% automatic (CSS doesn't depend on TABs number, height and width). * Versions leftBottom, rightBottom, bottomLeft and bottomRight depends on TABS number, and the height and/or width applied (This is very jquerysh-able) * I used QUIRK format (see doctype in HTML) for IE: the same CSS for IE6 and IE7, but in STRICT format it would only work in IE7 (I don't control IE6 by now) * Body TABs height is fixed (100px) and scroll appears where content doesn't fit. In case of non-liquid TABs, with fixed width, it could be possible to automatically calculate height for no-scroll body via jquery-script with 3 modes: * 1. height fixed: like now in the example. 2. height max: fixed to maximum no-scroll body TAB height. 3. height auto: calculating each no-scroll body TAB height. With all this, next steps would be: to search a little more for IE6 STRICT mode compatibility, and to create a Jquery plugin (with CSS dinamically generated?) Any suggestions, help, critics, comments, are very welcome. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- Daniel Eastwell Portfolio and articles: http://www.thoughtballoon.co.uk Blog: http://www.thoughtballoon.co.uk/blog
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
I actually think that using a UL with divs for content is more natural than using a div with a clas for the tabs itself. The reason is because the tabs end up being in a list is the end, why not use a tab. I never learn your way which is also why I like this way a lot better. emelendez wrote: Looking at official TABs plugin, I realized that the HTML structure is not very natural. It uses a list (UL) of tab headers follow by tab bodies (DIV). Normally, what you get from your favorite CMS is something more like : a header (div, h,...), its body (div), another header (div, h, ...), its body (div), etc... My challenge was, using this last natural HTML structure, try to layout it in a TABs way. I think I've got it: http://www.ita.es/jquery/tabs_only_css.htm , where practically I have used the same HTML for all 8 TABS combinations. The result is compatible with IE6, IE7, FF and Opera. But there are some limitations to take into account when implementing as a Jquery plugin (as I wish, ;-): * Only versions topRight, topLeft, leftTop and rightTop are100% automatic (CSS doesn't depend on TABs number, height and width). * Versions leftBottom, rightBottom, bottomLeft and bottomRight depends on TABS number, and the height and/or width applied (This is very jquerysh-able) * I used QUIRK format (see doctype in HTML) for IE: the same CSS for IE6 and IE7, but in STRICT format it would only work in IE7 (I don't control IE6 by now) * Body TABs height is fixed (100px) and scroll appears where content doesn't fit. In case of non-liquid TABs, with fixed width, it could be possible to automatically calculate height for no-scroll body via jquery-script with 3 modes: * 1. height fixed: like now in the example. 2. height max: fixed to maximum no-scroll body TAB height. 3. height auto: calculating each no-scroll body TAB height. With all this, next steps would be: to search a little more for IE6 STRICT mode compatibility, and to create a Jquery plugin (with CSS dinamically generated?) Any suggestions, help, critics, comments, are very welcome. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- View this message in context: http://www.nabble.com/-TABS-plugin-RELATED--Look-mum%2C-TABS-layout-only-with-CSS-%21%21-tp14847263s27240p14878691.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
the idea I have in mind is: * You have your normal HTML structure with your own CSS applied: header, body, header, body, etc... within a container. All very accessible and W3C standard. * If you have Javascript enabled, and apply a (future kikeTabs) jquery plugin: it will add all sugar (new CSS, events, actions, behaivours, etc...) to display content as TABs layout and to behave like them. * So, the whole thing is completely accessible and W3C standard friendly. , the problem is that actual official TABS plugin is GREAT and very complete. I see it more like re-adapting it to fit this new DOM structure, and to add 8 CSS combinations, keeping all the other parameters. I don't want to reinvent the wheel. But I wonder if it is easier to the TABS plugin creators to make this adaptation, if they find this useful;-) Anyway, in a near future I would do it. thanxs, El 16/01/2008 11:55, Dan Eastwell escribió: Hi Enrique, It's looking good. Have you tried applying the jquery tabs plugin or any similar tabbing script to make them function? Bearing in mind that the idea behind tabs is to use javascript to apply the css structure, so that people without script can see the content. All the best, Dan. On Jan 16, 2008 9:45 AM, Enrique Meléndez Estrada [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Yes, it is working. This is TABS layout, not TABS behaviour. It miss the proper jquery-javascript events and actions. this is a demo which shows that it is possible to display the HTML elements on screen as TABS layout without changing the DOM structure. El 15/01/2008 19:14, Olivier Percebois-Garve escribió: Hi I Just had a quick look in Opera 9.25 and it is not working... Olivier Enrique Meléndez Estrada wrote: Looking at official TABs plugin, I realized that the HTML structure is not very natural. It uses a list (UL) of tab headers follow by tab bodies (DIV). Normally, what you get from your favorite CMS is something more like : a header (div, h,...), its body (div), another header (div, h, ...), its body (div), etc... My challenge was, using this last natural HTML structure, try to layout it in a TABs way. I think I've got it: http://www.ita.es/jquery/tabs_only_css.htm , where practically I have used the same HTML for all 8 TABS combinations. The result is compatible with IE6, IE7, FF and Opera. But there are some limitations to take into account when implementing as a Jquery plugin (as I wish, ;-): * Only versions topRight, topLeft, leftTop and rightTop are100% automatic (CSS doesn't depend on TABs number, height and width). * Versions leftBottom, rightBottom, bottomLeft and bottomRight depends on TABS number, and the height and/or width applied (This is very jquerysh-able) * I used QUIRK format (see doctype in HTML) for IE: the same CSS for IE6 and IE7, but in STRICT format it would only work in IE7 (I don't control IE6 by now) * Body TABs height is fixed (100px) and scroll appears where content doesn't fit. In case of non-liquid TABs, with fixed width, it could be possible to automatically calculate height for no-scroll body via jquery-script with 3 modes: * 1. height fixed: like now in the example. 2. height max: fixed to maximum no-scroll body TAB height. 3. height auto: calculating each no-scroll body TAB height. With all this, next steps would be: to search a little more for IE6 STRICT mode compatibility, and to create a Jquery plugin (with CSS dinamically generated?) Any suggestions, help, critics, comments, are very welcome. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón -- Daniel Eastwell Portfolio and articles: http://www.thoughtballoon.co.uk http://www.thoughtballoon.co.uk Blog: http://www.thoughtballoon.co.uk/blog -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
No, that way could be natural only when using TABS, BUT if javascript is disabled (no jquery plugin) it is not very accessible: you have all titles grouped in a list, and their bodies content one under the other. The accessibility for data is my prior concern (to obtain AA WAI degree). And that implies to disable Javascript, and to disable CSS. And the semantics (and normal way of thinking) dictates: header-body, header-body, etc... (you normally don't have a list of content at the beginning of a page...) anyway, I think it is the plugin which should have to create that list of content (titles) (ul) at the beginning (changing the original DOM structure). But in my demo, that is not necessary. regards, El 16/01/2008 12:29, Eridius escribió: I actually think that using a UL with divs for content is more natural than using a div with a clas for the tabs itself. The reason is because the tabs end up being in a list is the end, why not use a tab. I never learn your way which is also why I like this way a lot better. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
Enrique Meléndez Estrada wrote:
Looking at official TABs plugin, I realized that the HTML structure
is not very natural. It uses a list (UL) of tab headers follow by
tab bodies (DIV). Normally, what you get from your favorite CMS is
something more like : a header (div, h,...), its body (div), another
header (div, h, ...), its body (div), etc...
There's nothing wrong with the tabs HTML structure. The UL contains
anchor or 'same-page' links to the divs containing the appropriate
content. A little extra accessibility can eaasily be added using a
heading tag like h2 which could then be hidden by CSS but it is up to
the author what HTML goes into the tab sections. For example:
ul
lia href=#tab1Tab 1/a/li
lia href=#tab2Tab 2/a/li
/ul
div id=tab1
h2Tab 1/h2
/div
div id=tab2
h2Tab 2/h2
/div
CSS could contain the line:
div h2 { position: absolute; left: -px; } /* avoid 'display: none;'
so it is still read out by most screen readers */
This document is very typical on the web. It's a table of contents
containing links to the relevant sections of the page, just look at the
HTML specifications for an example.
-Rob
[jQuery] Re: [TABS plugin RELATED] Look mum, TABS layout only with CSS !!
Hi I Just had a quick look in Opera 9.25 and it is not working... Olivier Enrique Meléndez Estrada wrote: Looking at official TABs plugin, I realized that the HTML structure is not very natural. It uses a list (UL) of tab headers follow by tab bodies (DIV). Normally, what you get from your favorite CMS is something more like : a header (div, h,...), its body (div), another header (div, h, ...), its body (div), etc... My challenge was, using this last natural HTML structure, try to layout it in a TABs way. I think I've got it: http://www.ita.es/jquery/tabs_only_css.htm , where practically I have used the same HTML for all 8 TABS combinations. The result is compatible with IE6, IE7, FF and Opera. But there are some limitations to take into account when implementing as a Jquery plugin (as I wish, ;-): * Only versions topRight, topLeft, leftTop and rightTop are100% automatic (CSS doesn't depend on TABs number, height and width). * Versions leftBottom, rightBottom, bottomLeft and bottomRight depends on TABS number, and the height and/or width applied (This is very jquerysh-able) * I used QUIRK format (see doctype in HTML) for IE: the same CSS for IE6 and IE7, but in STRICT format it would only work in IE7 (I don't control IE6 by now) * Body TABs height is fixed (100px) and scroll appears where content doesn't fit. In case of non-liquid TABs, with fixed width, it could be possible to automatically calculate height for no-scroll body via jquery-script with 3 modes: * 1. height fixed: like now in the example. 2. height max: fixed to maximum no-scroll body TAB height. 3. height auto: calculating each no-scroll body TAB height. With all this, next steps would be: to search a little more for IE6 STRICT mode compatibility, and to create a Jquery plugin (with CSS dinamically generated?) Any suggestions, help, critics, comments, are very welcome. -- Enrique Meléndez Estrada (2367) Servicios Informáticos Organización y Servicios Internos Instituto Tecnológico de Aragón
