I’ve been trying to get a tabbed area to work with inline content. I’ve produced a test document to develop the tabs before implementing them on the new site, and as such it’s just the “bare bones”. You can see the result here:
It’s based on Walter’s Tabs, but it doesn’t seem to be working as I want it to.
The problem I’m having is that when I add anything other than text or an image, like a coloured html box with text and an image inside, the coloured box gets rendered but the text and any content disappears they are also rendered in the wrong place. Also the coloured boxes are appearing on every tab!
Turn off javascript and you can see what the content of the tabs should be.
I was hoping to use this on the site to have the product displayed in one tab and their respective technical data in another, so that customers could easily see the technical data without having to go to another page.
Is there any way to get the tabs to work with inline content?
Try adding div to the list of things your script will consider a “body”:
var bodies = box.select('p,ul,table,dl');
//change to
var bodies = box.select('p,ul,table,dl,div');
See if that helps.
Walter
On May 3, 2012, at 1:26 PM, SteveB wrote:
Hi,
I’ve been trying to get a tabbed area to work with inline content. I’ve produced a test document to develop the tabs before implementing them on the new site, and as such it’s just the “bare bones”. You can see the result here:
It’s based on Walter’s Tabs, but it doesn’t seem to be working as I want it to.
The problem I’m having is that when I add anything other than text or an image, like a coloured html box with text and an image inside, the coloured box gets rendered but the text and any content disappears they are also rendered in the wrong place. Also the coloured boxes are appearing on every tab!
Turn off javascript and you can see what the content of the tabs should be.
I was hoping to use this on the site to have the product displayed in one tab and their respective technical data in another, so that customers could easily see the technical data without having to go to another page.
Is there any way to get the tabs to work with inline content?
I’ve added div to the list, this brings everything that should be in a tab under the correct one, but the content of the div is not showing up in the tabs.
I’m not sure what is causing the non appearance of the div content. By rights if the div is displayed then the contents should be as well.
I have noticed that if you click on the box height in the inspector pallet, the height of the box shrinks to 1px, click in again and the box regains its correct height., rather strange behaviour considering that the box contains text.
If you go back to the page I uploaded, the first tab the top box has the height not defined, and the blue box is the height it should be, but missing the contents.
Can you shine a light as to what is happening with the divs and why they don’t appear as they should.
Thanks,
Steve.
On 3 May 2012, 5:46 pm, waltd wrote:
Try adding div to the list of things your script will consider a “body”:
var bodies = box.select(‘p,ul,table,dl’);
//change to
var bodies = box.select(‘p,ul,table,dl,div’);
Try applying the overflow: hidden setting to these inline boxes. The paragraphs inside them are being forced to float left by the script, so they need overflow:hidden set to force them to be calculated by the browser.
Another thing you might try is to follow a slightly different example I posted at another time.
This uses inline DIV elements to define each of the tab areas, so your layout could be made with one layer of inline DIV to define the tab area, and another layer of inline divs nested inside that second layer. (Sort of like Inception for tabs.)
Walter
On May 3, 2012, at 3:14 PM, SteveB wrote:
Thanks for the reply, Walter.
I’ve added div to the list, this brings everything that should be in a tab under the correct one, but the content of the div is not showing up in the tabs.
I’m not sure what is causing the non appearance of the div content. By rights if the div is displayed then the contents should be as well.
I have noticed that if you click on the box height in the inspector pallet, the height of the box shrinks to 1px, click in again and the box regains its correct height., rather strange behaviour considering that the box contains text.
If you go back to the page I uploaded, the first tab the top box has the height not defined, and the blue box is the height it should be, but missing the contents.
Can you shine a light as to what is happening with the divs and why they don’t appear as they should.
Thanks,
Steve.
On 3 May 2012, 5:46 pm, waltd wrote:
Try adding div to the list of things your script will consider a “body”:
var bodies = box.select(‘p,ul,table,dl’);
//change to
var bodies = box.select(‘p,ul,table,dl,div’);
Sounds like a good idea, I’ll have a look at it and see how it works. It could be what I’m looking for, but it will have to wait for a little while as it’s late here, and I’m not in the office for a couple of days.
Thanks for your ideas, it’s really helpful to have someone knowledgeable to guide us in our quest for good looking and functional websites.
Steve.
On 3 May 2012, 7:38 pm, waltd wrote:
Try applying the overflow: hidden setting to these inline boxes. The paragraphs inside them are being forced to float left by the script, so they need overflow:hidden set to force them to be calculated by the browser.
Another thing you might try is to follow a slightly different example I posted at another time.
This uses inline DIV elements to define each of the tab areas, so your layout could be made with one layer of inline DIV to define the tab area, and another layer of inline divs nested inside that second layer. (Sort of like Inception for tabs.)
Walter
On May 3, 2012, at 3:14 PM, SteveB wrote:
Thanks for the reply, Walter.
I’ve added div to the list, this brings everything that should be in a tab under the correct one, but the content of the div is not showing up in the tabs.
I’m not sure what is causing the non appearance of the div content. By rights if the div is displayed then the contents should be as well.
I have noticed that if you click on the box height in the inspector pallet, the height of the box shrinks to 1px, click in again and the box regains its correct height., rather strange behaviour considering that the box contains text.
If you go back to the page I uploaded, the first tab the top box has the height not defined, and the blue box is the height it should be, but missing the contents.
Can you shine a light as to what is happening with the divs and why they don’t appear as they should.
Thanks,
Steve.
On 3 May 2012, 5:46 pm, waltd wrote:
Try adding div to the list of things your script will consider a “body”:
var bodies = box.select(‘p,ul,table,dl’);
//change to
var bodies = box.select(‘p,ul,table,dl,div’);
Thanks for all the help on this one, I downloaded the example and did a bit of copying and pasting onto the test part of the new site an I’m pleased to say it works a treat.
Just another question, when using Protaculous, does the Doctype have to be set to XHTML?
Now on to the more complex account customers log-in and download of orders from Mals to a database.
Thanks again, once again your knowledge has helped me implement a simple idea that makes this site more user-friendly.
Cheers,
Steve (very grateful to you for your help).
Try applying the overflow: hidden setting to these inline boxes. The paragraphs inside them are being forced to float left by the script, so they need overflow:hidden set to force them to be calculated by the browser.
Another thing you might try is to follow a slightly different example I posted at another time.
This uses inline DIV elements to define each of the tab areas, so your layout could be made with one layer of inline DIV to define the tab area, and another layer of inline divs nested inside that second layer. (Sort of like Inception for tabs.)
Walter
On May 3, 2012, at 3:14 PM, SteveB wrote:
Thanks for the reply, Walter.
I’ve added div to the list, this brings everything that should be in a tab under the correct one, but the content of the div is not showing up in the tabs.
I’m not sure what is causing the non appearance of the div content. By rights if the div is displayed then the contents should be as well.
I have noticed that if you click on the box height in the inspector pallet, the height of the box shrinks to 1px, click in again and the box regains its correct height., rather strange behaviour considering that the box contains text.
If you go back to the page I uploaded, the first tab the top box has the height not defined, and the blue box is the height it should be, but missing the contents.
Can you shine a light as to what is happening with the divs and why they don’t appear as they should.
Not particularly, although if you’re going to do anything with moving and replacing content, it’s best if your page is set to Unicode for the character encoding.
Walter
On May 7, 2012, at 1:07 PM, SteveB wrote:
Just another question, when using Protaculous, does the Doctype have to be set to XHTML?