For your perusal, here are the applied page CSS styles.
This library is free software; you can redistribute it and/or modify it under the terms of the GNU Library General Public License Version 2 as published by the Free Software Foundation.
This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU Library General Public License Version 2 along with this library named as gpl-2.0.txt. If not, you can find it at http://www.gnu.org/licenses/old-licenses/gpl-2.0.html or write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA.
In this document, the background-color and border-style of source code denotes what kind of source code it is. Here is the color key.
/* CSS Code */
<!-- HTML Code -->
// JavaScript Code
The result of given sets of code, if feasible, are shown under the heading "Result" immediately following the sets of code. The results have been given a LightBlue background so that you can see their area within the layout if they are bigger than their contents.
All mentions of HTML tags in plain old text will be in all caps and have it's outer brackets ("<" and ">").
Each <IFRAME> has been given a DarkRed border so that you can see their total area as well.
There are no "screenshots" on this page. The functionality you see is actual. Go ahead and click around inside of the <IFRAME>s.
While playing with CSS transforms, I noticed something I didn't like when dealing with <IFRAME> elements. Thought I could scale the elements and have all of their functionality remain intact, they would still take up the their original size in the layout.
This is what happens when there's just CSS transforms applied to an <IFRAME>. Regardless of the viewable size of the frame, the element takes up the original amount of space in the layout. In the example below, a DIV wraps our <IFRAME> to help visualize the real space the <IFRAME> takes up.
<div class="example">
<iframe id="bad_example" src="testhtml/brynmosher.com.htm" class="frame-quarter"></iframe>
<div class="clear"></div>
</div>
It seemed as though fitting a scaled <IFRAME> into an element with overflow set to hidden would be needed to correctly make the <IFRAME> take up its scaled area in the layout. It also seemed like a tedious thing to do that would be made easier with a jQuery plugin. It would be nice to have optional zoom controls and keep mind of the <IFRAME>'s CSS "float" value as well.
So that's what I did. I give you jQuery.fn.scaleFrame(). I honestly have no idea what I or anyone else is going to do with it. But, there it is. And it works for the most part.
At its core, the syntax for using jQuery.fn.scaleFrame() is simple.
$(selector).scaleFrame( options );
"selector" is, of course, your jQuery selector. "options" is an optional Object containing the jQuery.fn.scaleFrame() options you would like applied. See the section called "Options" for a complete listing of each option and its usage. For now, here's an example usage with the default options.
<div class="example">
<iframe id="default_options" src="testhtml/brynmosher.com.htm" class="frame-quarter"></iframe>
<div class="clear"></div>
</div>
There are only a couple of truly universal options. The options are primarily for controlling zoom navigation, should you choose to use it.
| Option | Default | Description |
|---|---|---|
| reApply | false | If jQuery.fn.scaleFrame() has already been applied to an element, remove it first and then re-create it using this newest call. Without this option set to true, if your selector includes elements that already have jQuery.fn.scaleFrame() applied, they will be skipped on the subsequent call. |
| wrapClass | "" | Additional CSS class name to apply to the wrapping element. This can be a single class name or multiple class names. The names should be in the format of a normal HTML "class" attribute. |
| zoom | 0 |
Setting the "zoom" option to a positive value greater than 0 will enable the zoom controls to appear with the affected <IFRAME> and the incremental controls will zoom by the amount given in the "zoom" option. When setting the value for the "zoom" option, you may want to start with a small floating-point value. An equivalent zoom of 100% is a "zoom" option value of 1 and an equivalent zoom of 50% is a "zoom" option value of 0.5. The zoom controls container is a <UL> element and does not have any default styling. The zoom controls themselves are made up of a <LI> elements and do not have any default styling. To stle these elements, see the "zoomClass" option. There is a final <LI> element at the end of the zoom controls container with a "style" attribute of "clear: both;". This final <LI> is a safguard allowing you to style the individual control elements in any way you choose, including floating them. |
| zoomClass | "" |
Totally irrelevant if not using the "zoom" option. Additional CSS class name to apply to the zoom controls <UL> element and its child <LI> elements. This should be a single class name. The child <LI> elements will all have a class applied with "-item" appended to the "zoomClass" option. Additionally, the child <LI> elements will each have their type appended to this class name for convenience. For example, the "min" zoom control will have "-min" appended to the class name. Here is some sample CSS assuming that the "zoomClass" option is set to "my-nav-class".
|
| zoomMax | 3 |
Totally irrelevant if not using the "zoom" option. Maximum amount that the frame can be scaled using the zoom controls. Must be a value of at least 0. |
| zoomMin | 0.05 |
Totally irrelevant if not using the "zoom" option. Minimum amount that the frame can be scaled using the zoom controls. Must be a value of at least 0. |
| zoomControls | [ "min", "minus", "reset", "whole", "plus", "max" ] |
Totally irrelevant if not using the "zoom" option. This is an Array containing the names of individual zoom controls to include. If this Array is empty, no controls will be added. The order of this Array dictates the order in which the individual controls will appear. The types of controls are as follows.
|
| zoomStrMax | "max" |
Totally irrelevant if not using the "zoom" option or if not using "max" in the "zoomControls" option. String value which dictates the contents of the "max" zoom control. Strings containing HTMl are allowed. |
| zoomStrMin | "min" |
Totally irrelevant if not using the "zoom" option or if not using "min" in the "zoomControls" option. String value which dictates the contents of the "min" zoom control. Strings containing HTMl are allowed. |
| zoomStrMinus | "-" |
Totally irrelevant if not using the "zoom" option or if not using "minus" in the "zoomControls" option. String value which dictates the contents of the "minus" zoom control. Strings containing HTMl are allowed. |
| zoomStrPlus | "+" |
Totally irrelevant if not using the "zoom" option or if not using "plus" in the "zoomControls" option. String value which dictates the contents of the "plus" zoom control. Strings containing HTMl are allowed. |
| zoomStrReset | "reset" |
Totally irrelevant if not using the "zoom" option or if not using "reset" in the "zoomControls" option. String value which dictates the contents of the "reset" zoom control. Strings containing HTMl are allowed. |
| zoomStrWhole | "100%" |
Totally irrelevant if not using the "zoom" option or if not using "whole" in the "zoomControls" option. String value which dictates the contents of the "whole" zoom control. Strings containing HTMl are allowed. |
Here's an example with only setting the "zoom" option.
<div class="example">
<iframe id="with_controls" src="testhtml/brynmosher.com.htm" class="frame-quarter"></iframe>
<div class="clear"></div>
</div>
As you can see in the result, the zoom controls appear in an unstyled <UL>. Despite being unstyled, the controls are functional. Notice that the background-color of the "example" CSS class is visible in the layout space the controls take up.
In this example, we're doing more of what I expect typical usage to be. We're setting up a class to apply to our wrapper element, giving it a green-ish border. We're enabling zoom controls, but only certain ones. We're setting up some classes to apply to those zoom controls. Finally, we're going to limit the range of zooming using the "zoomMax" and "zoomMin" options.
<div class="example">
<iframe id="with_options" src="testhtml/brynmosher.com.htm" class="frame-quarter"></iframe>
<div class="clear"></div>
</div>
There were some extra things that seemed they could stand on their own. Here they are.
| Bonus | Syntax | Description |
|---|---|---|
| jQuery.incrementAll() | $.incrementAll( soil, fertilizer, weeds, flo ) | This is a duplicate of the function bpmv.incall(), which is part of one of my other projects: bpmv.js. Please see that project's documentation on bpmv.incall() for a full explanation of its syntax. |
| jQuery.fn.readMatrix() | $(selector).readMatrix() | This will read the CSS transform matrix() from a matched element or set of matched elements. If only one element is matched, jQuery.fn.readMatrix() will return a single six-value array representing the matrix(). If multiple elements are matched, jQuery.fn.readMatrix() will return an array of six-value arrays representing the matrix() of each matched element. |
| jQuery.fn.readScale() | $(selector).readScale() | This will read the CSS transform scale() from a matched element or set of matched elements. If only one element is matched, jQuery.fn.readScale() will return a single two-value array representing the scale(). If multiple elements are matched, jQuery.fn.readScale() will return an array of two-value arrays representing the scale() of each matched element. |