Log in / Register

Forum › How do I...?

string-set with hidden element

jesses
We could also use the similar functionality.

For our case, we'd like to be able to dynamically modify the page-footer according to the string contents of a hidden element.

<HTML>
<HEAD>
<META http-equiv="Content-Language" content="en-us" />
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE></TITLE>
<style type="text/css">
div.mt_lfd_styles{page: mt_lfd_styles}
@page mt_lfd_styles {
	
	@bottom-left{
		content: "LFD Budget Analysis";
		font-size: 12pt;
		font-family: arial;
	} 
	
	@bottom-center{
		content: string(group) "-" counter(page);
		font-size: 12pt;
		font-family: arial;
	}

	@bottom-right{
		content: string(bienval2) " Biennium";
		font-size: 12pt;
		font-family: arial;
	}
	
}

div.hiddenBien{
	display: none;
	string-set: bienval2 content();
}

.hiddenGroup{
	display: none;
	string-set: group content();
}
</style>
</HEAD>
<BODY id='LFD'>
<div class="mt_lfd_styles">
     <table align="center" style="table-layout: auto;">
        <tfoot>
        </tfoot>
	<thead>
	<tr class="bottomBorder">
	     <td align="left" colspan="10">
		<div style="width: 100%;">
		     <span class="title4" style="float: left;">
			11040 - Legislative Branch</span>
		     <span class="title4 tRight" style="float: right;">
			SUMMARY</span>
		</div>
		<div id="hiddenBien" class="hiddenBien">
		   2013</div> 	
		<div id="hiddenGroup" class="hiddenGroup">
		   A</div> 
	     </td>
	</tr>
	</thead>
         <tbody> 
              table contents...
               ...
               ...
</div>
<div class="mt_lfd_styles">
     <table align="center" style="table-layout: auto;">
	<tfoot>
	</tfoot>
	<thead>
	     <tr class="bottomBorder">
		<td align="left" colspan="10">
		     <div style="width: 100%;">
			<span class="title4" style="float: left;">
			    21100 - Judicial Branch</span>
			<span class="title4 tRight" style="float: right;">
			    SUMMARY</span>
		     </div>
		     <div id="hiddenBien" class="hiddenBien">
			2013</div> 	
		     <div id="hiddenGroup" class="hiddenGroup">
			D</div> 
		</td>
		</tr>
	</thead>
        <tbody> 
                     table contents...
               ...
               ...
</div>
</body>
</html>


In this example, what we'd like to happen is to have the page counter change whenever there is a "hiddenGroup" element, but as it works now, it just uses the value of the first hidden element found in the document.

e.g. The pages for department 11020 have the footer of "A-1" and when the document changes to display details department 21100, the footer will be "D-1".


Thanks,
Jesse
mikeday
(I moved this issue to a new topic, as the last topic was related to table headers and was getting a bit long).

In this case I think applying "display: none" to the divs is interfering with the string-set property, due to a long-standing issue. An alternative is to apply "visibility: hidden; height: 0" which will make them invisible but still leave them in the tree, in which case string-set should work. Another alternative is to put the text in an attribute of another element, for example you could put attributes on the table element, and the string-set can reference them.
jim_albright
Great ideas. Thanks for sharing how to do this.

Jim Albright
Wycliffe Bible Translators

jesses
That worked!! Thanks a bunch!!