Do I have to have a reference to jQuery?
Yes. SubtractJS uses jQuery functions to locate elements, change css properties, etc.
The CSS properties in the style attribute on my element are having no effect. Why is that?
SubtractJS uses, updates, or deletes a number of css properties at the element level. A inline css property (like the following height property) specified as
<div class="sj-fill-top" style="height: 50px"></div><!-- bad. don't do this -->
will be cleared by SubtractJS.
The way to specify the css property is specify either an id or class (or both) for it, I.E.
<div id="myHeader" class="myStyle sj-fill-top" ></div>
and create a style sheet for it (either inline in your document or a separate loaded style sheet) with something like
<style type="text/css">
/* applies to myHeader only */
#myHeader {
overflow: auto;
height: 100px;
}
/* applies to any tag with the myStyle class */
.myStyle {
margin: 5px;
border: 2px solid black;
padding: 10px;
}
</style>
What CSS properties does SubtractJS manipulate?
On "sj-fill-right" and "sj-fill-left" elements, SubtractJS manipulates the "left" and "width" properties to cause that element to fill the
alotted space.
On "sj-fill-top" and "sj-fill-bottom" elements, SubtractJS manipulates the "top" and "height" properties to cause that element to fill the
alotted space.
A parent element is one that contains a filler element such as "sj-fill-top", "sj-fill-right", or "sj-fill". A parent element must have the
"position" property set to "absolute" or "relative". The parent element's "overflow" will be (temporarily) manipulated, so, if you need to
set the "overflow" on a parent element, be sure to set it in a style sheet.
SubtractJS sets the following properties on all elements it manipulates:
- position: "absolute"
- display: "block"
SubtractJS sets the following properties on the html and body elements to enable a full-page layout. If you are only using SubtractJS in
child elements, you can call SubtractJS.SetBodyNoInit() before page load to prevent these properties from being set.
- height: "100%",
- width: "100%",
- margin: "0",
- padding: "0",
- border: "0px none"
What properties should I manipulate to get the most out of SubtractJS?
For "sj-fill-top" and "sj-fill-bottom" elements, you may specify the "height" property. If you don't specify it, the rendering engine will use
a height relevent to the size of your contents.
For "sj-fill-left" and "sj-fill-right" elements, you must specify the "width" property. The rendering engines default the width to about 100%,
which is most likely not what you want here.
SubtractJS reads from the border, margin, and padding properties to compute a size that fills 100% of the available space
while allowing for the specified border, margin, and padding.
I recommend that you experiment with different values for margin, border, and padding to get an idea of what you can do.
Any values you specify for margin, border, and padding are interpreted by
SubtractJS as inside the area that it is trying to fill. For example, if you specify "sj-fill-top" with a margin of 5px, a border of 2px,
and a padding of 3px, SubtractJS will size your element to fill the entire width of the top allowing enough space that your 2px wide border
has a margin of 5px between it and the edge of the screen on both sides.
If I use jQuery's RemoveClass (or another method) to remove the SubtractJS classes, can I get control of my object back from SubtractJS?
After you remove a class that SubtractJS uses, you should call SubtractJS.ClearSubtractJS(element) to revert the style to its original
value from page load. Then call SubtractJS.UpdateLayout() to update your layout.
If I use jQuery's AddClass to add a SubtractJS class, how to I make it take effect immediately?
Call SubtractJS.UpdateLayout()
Can I hide or show a SubtractJS object?
Just hide or show as you normally would, i.e. by using jQuery's .hide() and .show() commands, then call SubtractJS.UpdateLayout()
to update your layout.
How do I animate hiding or showing a SubtractJS object?
SubtractJS.UpdateLayout must be called throughout the animation process. I used the following options for jQuery's animate command.
var options = {
"duration": 100,
"progress": SubtractJS.UpdateLayout,
"complete": SubtractJS.UpdateLayout
};
I have other css classes named "sj-something". Can I change the prefix?
Yes. Call SubtractJS.SetPrefix(newPrefix); after you have loaded SubtractJS but before the page load event.
For example, put this in your <head> tag:
<script src="/Scripts/jQuery-2.0.3.min.js" type="text/javascript"></script>
<script src="/scripts/Subtract.min.js" type="text/javascript"></script>
<script type="text/javascript">
SubtractJS.SetPrefix("fun");
</script><br />