Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rewrote plugin in pure js, without jQuery #28

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

rewrote plugin in pure js, without jQuery #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 3 additions & 118 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,4 @@
# jQuery Actual Plugin CHANGELOG
# Javascript Actual Plugin CHANGELOG

## 1.0.19

- Add `main` property to `package.json`



## 1.0.18

- Depend on jQuery as a peer



## 1.0.17

- Added display inline support



## 1.0.16

- [refactoring] Keep original element styles as far as possible



## 1.0.15

- [bug fix] Replaced jQuery version detection with feature detection. Previously this would not properly detect jQuery 1.10+



## 1.0.14

- Added support for jQuery 1.9.0



## 1.0.13

- [bug fix] Local variable `style` not initialized, thanks to [Searle](https://github.com/Searle)



## 1.0.12

- [refactoring] Use `.eq( 0 )` instead of `.filter( ':first' )` for better performance, thanks to Matt Hinchliffe



## 1.0.11

- [refactoring] Select only the first hidden element to improve the perfomance



## 1.0.10

- [bug fix] Override `!imporant` css declarations



## 1.0.9

- [bug fix] jQuery 1.8.0 compatibility



## 1.0.8

- [bug fix] Inverted code lines



## 1.0.7

- [refactoring] Save/restore element style rather than individual CSS attributes( thanks to Jon Tara )



## 1.0.6

- [bug fixed] Pass `configs.includeMargin` to only `outerWidth` and `outerHeight` so it does not break in $ 1.7.2



## 1.0.5

- Add package.json for new jquery plugin site



## 1.0.4

- Add `includeMargin` for `outerWidth`( thanks to Erwin Derksen )



## 1.0.3

- [bug fixed] `$` namespace conflict



## 1.0.2

- [bug fixed] Typo



## 1.0.1

- [bug fixed] Typo



## 1.0.0

- First stable release
## 0.1.0
Rewrote [dreamerslab/jquery.actual](https://github.com/dreamerslab/jquery.actual) in pure javascript without jQuery. Add `convertToNumber` option. Remove `includeMargin` option.
70 changes: 23 additions & 47 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,25 @@
# jQuery Actual Plugin
# Javascript Actual Plugin

Get the actual width/height of invisible DOM elements with jQuery.
Get the actual width/height of invisible DOM elements in pure javascript without jQuery. Based on [dreamerslab/jquery.actual](https://github.com/dreamerslab/jquery.actual)



## Description

jQuery has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property 'display' set to 'none'. `$('.hidden').width();` will return 0 instead of the actual width; This plugin simply fix it.



## Demo

- Normal usage see demo/normal.html
- If you use [css3pie](http://css3pie.com/) you might also want to take a look at another demo( demo/css3pie.html )
- Live demo please take a look at [this](http://dreamerslab.com/demos/get-hidden-element-width-with-jquery-actual-plugin) and [this](http://dreamerslab.com/demos/get-hidden-element-width-with-jquery-actual-plugin-with-css3pie/)


Javascript has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property 'display' set to 'none'. `document.querySelector('.hiddden').width();` will return 0 instead of the actual width; This plugin simply fix it.

## Documentation

- There is a syntax highlight version, please see [this post](http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/)
- For chinese version please go [here](http://dreamerslab.com/blog/tw/get-hidden-elements-width-and-height-with-jquery/)



## Requires

- jQuery >= 1.2.3
### actual( method[, options] )

- `method` - string with name of css property (width, height etc.)
- `options` (object): An object containing additional options for the function. Possible properties are:
- `absolute` (boolean, default: false): Whether to return the absolute value of the result.
- `clone` (boolean, default: false): Whether to return a clone of the result instead of the original value.
- `display` (string, default: "block"): The value to be used for the display CSS property of the result.
- `convertToNumber` (boolean, default: false): Whether to convert the result to a number before returning it.

<!-- todo: add info about return -->

## Browser Compatibility

Expand All @@ -47,51 +37,37 @@ jQuery has trouble finding the width/height of invisible DOM elements. With elem

<!-- -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.actual.js"></script>

<script type="text/javascript" src="path-to-file/js.actual.js"></script>


## Usage

Example code:

// get hidden element actual width
$( '.hidden' ).actual( 'width' );

// get hidden element actual innerWidth
$( '.hidden' ).actual( 'innerWidth' );
// get hidden element actual width with units (px and etc)
document.getElementsByClassName( 'hidden' ).actual( 'width' );
// 200px

// get hidden element actual outerWidth
$( '.hidden' ).actual( 'outerWidth' );

// get hidden element actual outerWidth and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerWidth', { includeMargin : true });
// get hidden element actual width with convert to number
document.getElementById( '.hidden' ).actual( 'width', { convertToNumber: true } );
// 200

// get hidden element actual height
$( '.hidden' ).actual( 'height' );

// get hidden element actual innerHeight
$( '.hidden' ).actual( 'innerHeight' );

// get hidden element actual outerHeight
$( '.hidden' ).actual( 'outerHeight' );

// get hidden element actual outerHeight and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerHeight', { includeMargin : true });
document.querySelector( '.hidden' ).actual( 'height', { convertToNumber: true } );
// 100

// if the page jumps or blinks, pass a attribute '{ absolute : true }'
// be very careful, you might get a wrong result depends on how you makrup your html and css
$( '.hidden' ).actual( 'height', { absolute : true });
document.querySelector( '.hidden' ).actual( 'height', { absolute : true } );

// if you use css3pie with a float element
// for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
// please see demo/css3pie in action
$( '.hidden' ).actual( 'width', { clone : true });
document.querySelector( '.hidden' ).actual( 'width', { clone : true });

// if it is not a block element. By default { display: 'block' }.
// for example a inline element
$( '.hidden' ).actual( 'width', { display: 'inline-block' });
document.querySelector( '.hidden' ).actual( 'width', { display: 'inline-block' });



Expand Down
19 changes: 0 additions & 19 deletions bower.json
View file
Open in desktop

This file was deleted.

Loading