accessing a CSS file from an added JS file

[John Robin Dove]

Hi Clifton,

Once again I have a problem converting a shared action into a function in a JS file. In the shared action version I could use a CSS file to define the appearance of certain fields. I have tried to do this in my b.js file but it's not working. I load the CSS file with pgExtFiles in a TB action sequence triggered by on load page. I have also tried to load it directly in the JS file like this tbfunction_pgExtFiles("../images/field_styles.css","load");

The line not responding is tbfunction_userProperty("a" + triggerNo, "classname", theClass, "set"); other lines like tbfunction_pgTBObjSet("a" + triggerNo, "left", leftPos); are functioning correctly.

I have a vague idea you have already addressed this problem in a previous post but I can't find it. Sorry if this is a repetition.

[Clifton]

Troubleshooting techniques:

1. Ensure that the css file is actually loading. You can use the Firebug extension in Firefox to confirm this. It must load at the ToolBook page level, which is the default for PowerPac's pgExtFiles() function.
    
2. If the css file is NOT loading, then verify the path and case sensitivity in your parameter setup. Also check that you have added the css file to the export tree of the book.
    
3. Next verify that you have properly coded the class in your css file. The example below is a typical definition in a css file for a class called "notes".
   
   

   Code: Select all

   /* Example */
.notes {
    line-height: 1.34em;
    padding: 12px;
    height: auto;
    border: 4px double rgb( 0, 0, 255); /* blue double-lined border */
    border-radius: 14px; /* round the corners */
}


   
   
4. Then make sure the PowerPac function userProperty() is calling the object and class properly. Suppose the field name is "my_note" and we want to set the class to ".notes" from the css file.
   
   

   

   Setting an object's class using userProperty()

   Image 5.png (20.15 KiB) Viewed 522 times

   NOTE: You can also use className, class, classname for the prop parameter. The function will convert your entry to the proper JavaScript className property.

The PowerPac userProperty() function supports multiple classes for objects and is pretty flexible. My guess is that you will find that the css file is NOT loading because it was not included in the export tree of your book. If that is not the problem, then the css class definition may have errors and the browser treats it as an invalid class. Finally, it is also possible that your tbName parameter in userProperty() is pointing to an invalid or missing object.

You should be able to do all of this from your custom JavaScript file using the PowerPac functions:
tbfunction_pgExtFiles()
and
tbfunction_userProperty()
... in your custom function definition.

[John Robin Dove]

Hi Clifton,

Thanks very much for your helpful reply. I double-checked everything and found that I had made a mistake in the CSS file itself. The path to the image files came from an earlier version. I had forgotten to correct it.

I like writing javascript code like this but sometimes I miss the safety net I had in .NET!