Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by John Gamonon on Dec 02, 2009 16:18
open dhtmlx forum
<div> attributes 'name' and 'width'

At last I had found a GREAT tab component. I use it in a cms (cmsms) but I think there are two non standard <div> attributes used: 'name' and 'width'. The are refused by the cms and removed everytime I publish. I've looked at several pages on the internet and found that hey are not standard indeed?

Is there a way around this, by making use of accepted attributes so I can use this dhtml goody?

Thanks
John
Answer posted by Alex (support) on Dec 03, 2009 01:55

Hello,

both attributes are necessary for tabbar initialization:

name - tab label;

width - the width of the tab (100px by default).

There is no way to use other attributes. You can use javascript intialization instead: http://www.dhtmlx.com/docs/products/dhtmlxTabbar/samples/01_initialization/01_init_from_script.html

Answer posted by John on Dec 03, 2009 03:15
I did try that one to but it seems that html code is not accepted as content.
Text is displayed without a problem but when I put a html table as content,
nothing is displayed?

Thanks for the quick reply John!
Answer posted by Alex (support) on Dec 03, 2009 04:37

Could you please provide the sample to recreate the issue (the example of tabbar container that fails)

Answer posted by John on Dec 03, 2009 06:02
I have pasted the whole contentblock as I have tried to use it in my cms. Sorry it is this big, but somewhere might be
the reason that this does not work.
Again, this configuration of the module works fine as long as I put plain tekst in the content.

-------------------------------------------
<div class="art-PostContent">

<div id="a_tabbar" style="width: 600px; height: 400px;">
<script type="text/javascript">// <![CDATA[
tabbar = new dhtmlXTabBar("a_tabbar", "top");
tabbar.setSkin('dhx_skyblue');
tabbar.setImagePath("base/script/tabbar/");
tabbar.addTab("a1", "Tab 1-1", "100px");
tabbar.addTab("a2", "Tab 1-2", "100px");
tabbar.addTab("a3", "Tab 1-3", "100px");
tabbar.setContentHTML("a1", "

<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">
<tr>
<td width="90" align="middle"valign="top">
<br /><a id="thumb1" class="highslide" onclick="return hs.expand(this)" href="base/graphics/ontwerpen/paginas/p700.jpg">
<img title="Klik om te vergroten" src="base/graphics/ontwerpen/paginas/p700s.jpg" alt="afbeelding" width="75" height="51" /></a></td>
<td width="560" valign="top">
<br />
<strong>Indeling</strong><br /> De pagina met een breedte van 700 pixels is de kleinste pagina. Hierin kan maximaal 1 kolom geplaatst worden.
Het is wel mogelijk om in deze kolom twee tekstblokken te maken die slechts korte teksten kunnen bevatten. <br />
<strong>Mogelijkheden</strong><br />
Ook in dit formaat heeft u uiteraard meer dan voldoende de ruimte om een fotoshow, contactformulier en extra modules te plaatsen.<br />
<strong>Toepassing</strong><br />Gebruik deze grootte indien u weinig teksten en plaatjes wilt laten zien. Het belangrijkste doel van deze website
is aanwezigheid op internet en contact/adres informatie. Het voordeel van deze groote is dat er relatief weinig onderhoud aan uitgevoerd hoeft te worden.<br>
U kunt de pagina <a href="http://www.websitenoodzaak.nl/base/graphics/ontwerpen/paginas/700pix.html" target="_blank">hier</a> op ware afmetingen bekijken.
</td>
</tr>
</table>");

tabbar.setContentHTML("a2", "
<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">
<tr>
<td width="90" align="middle"valign="top">
<br /><a id="thumb2" class="highslide" onclick="return hs.expand(this)" href="base/graphics/ontwerpen/paginas/p800.jpg">
<img title="Klik om te vergroten" src="base/graphics/ontwerpen/paginas/p800s.jpg" alt="afbeelding" width="75" height="51" /></a></td>
<td width="560" valign="top">
<br /><strong>Indeling</strong><br />
De pagina met een breedte van 800 pixels biedt wat meer ruimte omdat er 2 kolommen in geplaatst kunnen worden. In de kleine kolom kunnen
plaatjes gezet worden maar voor tekst is de kolom aan de smalle kant.
<br /><strong>Mogelijkheden</strong><br />
Ook in dit formaat heeft u uiteraard meer dan voldoende de ruimte om een fotoshow, contactformulier en extra modules te plaatsen.
<br /><strong>Toepassing</strong><br /> Gebruik deze grootte indien u wat meer tekst kwijt wilt. Met deze afmeting kan een redelijke hoeveelheid
tekst en plaatjes getoond worden. Ook hier geldt dat door de relatief kleine afmeting en beperkte hoeveelheid teksten, de site wat minder onderhoud zal vragen. <br />
U kunt de pagina <a href="http://www.websitenoodzaak.nl/base/graphics/ontwerpen/paginas/800pix.html" target="_blank">hier</a> op ware afmetingen bekijken.
</td>
</tr>
</table>");

tabbar.setContentHTML("a3", "
<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">
<tr>
<td width="90" align="middle"valign="top">
<br /><a id="thumb3" class="highslide" onclick="return hs.expand(this)" href="base/graphics/ontwerpen/paginas/p900.jpg">
<img title="Klik om te vergroten" src="base/graphics/ontwerpen/paginas/p900s.jpg" alt="afbeelding" width="75" height="51" /></a></td>
<td width="560" valign="top"><br />
<strong>Indeling</strong><br />
De pagina met een breedte van 900 pixels is een middelgrote website. Hierin kunnen 3 kolommen geplaatst worden. Twee kleine kolommen
aan de zijkant en een grote kolom in het midden. In deze pagina kan flink wat tekst en plaatjes gezet worden.<br />
<strong>Mogelijkheden</strong><br />
Deze afmeting biedt voldoende ruimte om veel tekst en plaatjes in te kunnen zetten. De kleine kolommen bieden redelijke ruimte voor het plaatsen
van tekst, hoewel deze niet te lang kunnen zijn.<br />
<strong>Toepassing</strong><br />
Gebruik deze grootte indien u behoorlijk wat tekst en plaatjes wilt laten zien. Door de grote afmeting en dus grote hoeveelheid tekst en plaatjes, zal
deze website wel wat werk in het onderhoud vergen.<br />
U kunt de pagina <a href="http://www.websitenoodzaak.nl/base/graphics/ontwerpen/paginas/900pix.html" target="_blank">hier</a> op ware afmetingen bekijken.
</td>
</tr>
</table>");

tabbar.setContentHTML("a4", "
<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">
<tr>
<td width="90" align="middle"valign="top">
<br /><a id="thumb4" class="highslide" onclick="return hs.expand(this)" href="base/graphics/ontwerpen/paginas/p1000.jpg">
<img title="Klik om te vergroten" src="base/graphics/ontwerpen/paginas/p1000s.jpg" alt="afbeelding" width="75" height="51" /></a></td>
<td width="560" valign="top">
<br />
<strong>Indeling</strong><br />De pagina met een breedte van 1000 pixels is de grote jongen en biedt veel mogelijkheden met maar liefst drie ruime kolommen.
Ook in de kleine kolommen aan de zijkant kan tekst ruimschoots een plaatsje vinden. Afhankelijk van het soort, kunnen in de kleine kolommen ook extra modules
geplaatst worden. <br />
<strong>Mogelijkheden</strong><br />
Deze afmeting biedt eigenlijk voldoenderuimte voor alles wat u kunt bedenken. Deze breedte wordt over het algemeen als maximale breedte gebruikt omdat er nog
mensen zijn die een monitor of resolutie gebruiken die niet verder gaat dan 1000 pixels.<br />
<strong>Toepassing</strong><br />
Deze pagina grootte is bedoeld voor de wat zwaardere websites die zeer veel tekst en plaatjes willen tonen. Uiteraard geldt dat voor deze afmeting het onderhoud
aanzienlijk zal zijn.<br />
U kunt de pagina <a href="http://www.websitenoodzaak.nl/base/graphics/ontwerpen/paginas/1000pix.html" target="_blank">hier</a> op ware afmetingen bekijken.
</td>
</tr>
</table>");

tabbar.setTabActive("a1");
// ]]></script>
</div>

<!-- end PostContent -->
</div>
-------------------------------------------

Answer posted by Alex (support) on Dec 03, 2009 06:27

The html content is set incorrectly:

- the external quotes must be single if you use double quotes inside the string;

- moreover string formatting is also incorrect.

html content should be a correct string, like:

tabbar.setContentHTML("a2", '<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">....</table>');

instead of

tabbar.setContentHTML("a2", "
<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">



Answer posted on Dec 03, 2009 07:40
"the external quotes must be single if you use double quotes inside the string" I did not know that.
Together with the html content as one string (on the same row), made it display correctly.

Thank you for helping me out here John

Have a great day!
John