homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / XML Development
Forum Library, Charter, Moderators: httpwebwitch

XML Development Forum

    
XSL / Width Assistance
ledkin




msg:4125209
 9:35 pm on Apr 30, 2010 (gmt 0)

I'm currently developing XML/XSL to display a row of divs. The number of divs will differ each time and I want them to always be in the same row. Each div represents % of use, so it's essentially 1 div that contains 2 divs. A colored one on the left that takes up the % of use for that item, and a plain white div on the right to fill up the remaining unused time.

My xml looks something like:

<item>
<usage>50</usage>
</item>
<item>
<usage>75</usage>
</item>


and so on.

So I would like my xsl to take these 2 items, create side to side divs. The first div would contain 2 divs of equal width, the second would contain 2 divs with the first taking up 75% and the 2nd 25%.

My question is: Can I use XSL to tell these divs what their width should be? I can use the value of to get the usage number (percentage), but I'm not sure how to make that be the div width.



<xsl:template match="/item">
<div style="width:100px">
<div style="width:?%">
</div>
<div style="width:?%">
</div>
</div>
</xsl:template>


I'm not sure what to put in the ? areas. Or if there's a different way to do it. I know I can get the usage by this:

<xsl:value-of select="/item/usage" />

I just don't know how to inject it into the width!

Any help would be appreciated! Thanks for helping this xml/xsl newb!

 

httpwebwitch




msg:4125622
 4:48 am on May 2, 2010 (gmt 0)

use the width attribute instead of the style property

ledkin




msg:4126151
 3:25 pm on May 3, 2010 (gmt 0)

Can you provide an example?


<xsl:variable name="barWidth" select="100" />
<div class="bar" width="{$barWidth}">
<xsl:value-of select="usage" />
</div>


Produces the html


<div class="bar" width="100">0</div>


But the divs are not taking up 100px. They just take up enough room to print the value, which in this case is 0.

Any other guidance? Thanks

ledkin




msg:4126180
 4:03 pm on May 3, 2010 (gmt 0)

also...


<div class="bar">
<xsl:attribute name="width">
<xsl:value-of select="$barWidth" />
</xsl:attribute>
<xsl:value-of select="usage" />
</div>



produces the same html as above, but it is not taking up the specified width...

httpwebwitch




msg:4126285
 6:33 pm on May 3, 2010 (gmt 0)

my CSS bad. that tactic might have worked with an <img>

try:
<div class='bar'>
<xsl:attribute name="style">
<xsl:text>width:</xsl:text>
<xsl:value-of select="$barWidth" />
<xsl:text>px;</xsl:text>
</xsl:attribute>
<xsl:value-of select="usage"/>
</div>

I didn't test that, just trying to show that you can put a <xsl:text> into the attribute, and build the style CSS string with variables injected into it.

httpwebwitch




msg:4126291
 6:40 pm on May 3, 2010 (gmt 0)

oh by the way,
welcome to WebmasterWorld!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / XML Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved