Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
This repository has been archived by the owner on Mar 21, 2022. It is now read-only.
/ viewRatio Public archive

Zooming based on windows width

License

Notifications You must be signed in to change notification settings

howion/viewRatio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

viewRatio-dev

0.833 kb JS library to zoom page based on window width.

Usage

Download and include viewRatio.min.js

<script src="viewRatio.min.js"></script>

Options

Name Takes Optional Defaults To
width Int --
zoomRatio Float undefined ✔️ 1
maxWidth Int undefined ✔️ INF
minWidth Int undefined ✔️ 0

Methods

.enable() Enables .scale() method

.disable() Disables .scale() method

.scale() Scales based on choices & winWidth

.resetScale() Removes scale

.scaleTo( $customRatio ) Scales to specified ratio

Example Usage

// CREATE VIEW RATIO OBJECT
var $viewRatio = viewRatio({
    maxWidth: 1920, // STOP ZOOMING IF WIDTH IS BIGGER THAN 1920px
    minWidth: 480,  // STOP ZOOMING IF WIDTH IS SMALLER THAN 480px
    width: 1920,    // ZOOM WILL BE BASED ON THIS WIDTH
    zoomRatio: 0.5, // ZOOM WILL BE 0.5 SLOWER
    zoomRatio: 2    // ZOOM WILL BE 2x  FASTER
});

// INITAL ZOOM
$viewRatio.scale();

// FIRE SCALE EVENT ON WINDOW RESIZE
window.addEventListener('resize', $viewRatio.scale, false);

Last Words

First of all making something like this was hard due to cross browser support and it still has some problems so its in development stage for now .

Known Bugs

  • Edge & IE shows scrollbars on both sides
  • Using fixed position in scaled element causes element to be not fixed. ( See Issue )

License

MIT