2

I have a page where class names are dynamically generated. The class has the "writing-mode: tb-rl;" property but I would like to add the other properties needed for vertical text in other browsers than IE.

Link to JSFiddle Example: http://jsfiddle.net/VheJd/1/

Full HTML:

<html>
<head>
<title>test page</title>
<style type="text/css">
    .dynamic_name {
        writing-mode: tb-rl;
        /*Would like to find the class by the writing-mode property then add the properties below:*/
        /*-webkit-transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -o-transform: rotate(90deg);*/
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //find classes with  writing-mode: tb-rl and add -moz-transform etc... properties
    });
</script>
</head>
<body>
<table>
    <tr>
        <td class="dynamic_name">text 1</td>
        <td class="dynamic_name">text 2</td>
    </tr>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</table>
</body>
</html>
Tom
  • 61
  • 1
  • 5
  • 1
    Does the dynamic name have any kind of dependable format you can parse? like `dynamic_class_name_VARIABLE_PART` – prodigitalson Dec 31 '12 at 16:26
  • It seems there's no selector for CSS. But you can loop over *all* elements and then filter for your CSS. See this question and answers http://stackoverflow.com/q/1220834/1741542 – Olaf Dietsche Dec 31 '12 at 16:31
  • This is SQL Reporting Services that generates the class names. The class name that I pulled from the page is: .Acf3e9901792e4e94a1cec069d6f1ea70122 so I dont think it will be even partially predictable. – Tom Dec 31 '12 at 17:48
  • @Olaf I tried to loop through all of the elements but it seems that jQuery doesn't recognize the "writing-mode" property. 'var test = $('*').filter(function () { return $(this).css('font-family').toLowerCase().indexOf('batang') > -1 });' Will work to find fonts but var test = $('*').filter(function () { return $(this).css('writing-mode').toLowerCase().indexOf('tb-rl') > -1 }); throws a javascript error in Firefox. – Tom Jan 02 '13 at 14:07
  • I just tried it myself and it couldn't get it to work either. – Olaf Dietsche Jan 02 '13 at 16:03

1 Answers1

0

You could use getComputedStyle() to check value of specific CSS property for all elements on the page via JS, but that would be very slow.

It's better to find a way to determine name of dynamic class, and then select needed elements by this class name. For example, if all these dynamic classes have some prefix, you could select such elements this way (prefix is foo- in this example):

var elems = document.querySelectorAll('[class ^= "foo-"]');

If class name always contains numeric substring (and there is no other elements with digit-containing class names on the page), then complex attribute-substring selector may be used:

TD[class*="1"], TD[class*="2"], TD[class*="3"], TD[class*="4"], TD[class*="5"],
TD[class*="6"], TD[class*="7"], TD[class*="8"], TD[class*="9"], TD[class*="0"]
Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • Thanks for the suggestions but I am not comfortable using a generic selection approach. I would like to be sure that the elements I am targeting have the writing-mode property. – Tom Jan 02 '13 at 14:38
  • So the only way to achieve this is to use `getComputedStyle()` (or jQuery's equivalent if needed) as I've suggested in the first paragraph of my answer. – Marat Tanalin Jan 02 '13 at 15:54