Please join your peers on either March 26 (8pm GMT) or March 28 (8am GMT) to watch as user extraordinaire and forum legend @"lindsay.stevens" demonstrates OpenClinica Insight.

See preview and register at https://openclinica.com/insight-webinar

Insight makes it easy to ask questions of ALL of your clinical and operational data and visualize answers via interactive reports and dashboards. The idea is simple, but the results are powerful: ask your questions, choose your visualizations, then return often for updated, interactive results that link you to all of the underlying data.

changing a stylesheet with java-script

GerbenRienkGerbenRienk Posts: 769 ✭✭✭
One of my clients asked if for one CRF the style sheet could be changed a bit: align the left-item text to the left and have a bit more space. (Sounds familiar?)
But, as they work in a multi-study-setup of OpenClinica, they did not want to change the styles.css.
I came up with this java-script-solution. I put it in the Instructions part of the first section.
It works for both IE8 and FF3, so I thought I’d share it.
The result is this:

The script is
var cssRules;
for (var S = 0; S < document.styleSheets.length; S++) {
if (document.styleSheets[S]['rules']) {
cssRules = 'rules';
}
if (document.styleSheets[S]['cssRules']) {
cssRules = 'cssRules';
}
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++){
if (document.styleSheets[S][cssRules][R].selectorText == ".aka_text_block"){
document.styleSheets[S][cssRules][R].style["width"] = "20em";
document.styleSheets[S][cssRules][R].style["textAlign"] = "left";
}
}
}

And what is basically does is first determine how to loop through the stylesheets, by using “rules” or “cssRules”, depending on the browser. Then it loops through all the classes, until it finds “.aka_text_block”. Then it changes the width to 20em and the text-align to left. (This last bit was tricky, as text-align became textAlign.)

Have fun.

Gerben Rienk Visser
http://www.trialdatasolutions.com
Attachments:
Jscript.zip 13.5 KB

Comments

  • GerbenRienkGerbenRienk Posts: 769 ✭✭✭
    One of my clients asked if for one CRF the style sheet could be changed a bit: align the left-item text to the left and have a bit more space. (Sounds familiar?)
    But, as they work in a multi-study-setup of OpenClinica, they did not want to change the styles.css.
    I came up with this java-script-solution. I put it in the Instructions part of the first section.
    It works for both IE8 and FF3, so I thought I’d share it.
    The result is this:

    The script is
    var cssRules;
    for (var S = 0; S < document.styleSheets.length; S++) {
    if (document.styleSheets[S]['rules']) {
    cssRules = 'rules';
    }
    if (document.styleSheets[S]['cssRules']) {
    cssRules = 'cssRules';
    }
    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++){
    if (document.styleSheets[S][cssRules][R].selectorText == ".aka_text_block"){
    document.styleSheets[S][cssRules][R].style["width"] = "20em";
    document.styleSheets[S][cssRules][R].style["textAlign"] = "left";
    }
    }
    }

    And what is basically does is first determine how to loop through the stylesheets, by using “rules” or “cssRules”, depending on the browser. Then it loops through all the classes, until it finds “.aka_text_block”. Then it changes the width to 20em and the text-align to left. (This last bit was tricky, as text-align became textAlign.)

    Have fun.

    Gerben Rienk Visser
    http://www.trialdatasolutions.com
    Attachments:
    Jscript.zip 13.5 KB
This discussion has been closed.