{"id":15190456,"url":"https://github.com/dmitryfillo/jquery.porthole","last_synced_at":"2025-10-27T14:30:20.672Z","repository":{"id":7383436,"uuid":"8711264","full_name":"DmitryFillo/jquery.porthole","owner":"DmitryFillo","description":"Simple and fast viewport plugin","archived":false,"fork":false,"pushed_at":"2018-01-12T01:41:12.000Z","size":114,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-27T20:23:22.474Z","etag":null,"topics":["html","javascript","jquery","porthole","viewport"],"latest_commit_sha":null,"homepage":"http://dmitryfillo.github.io/jquery.porthole/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DmitryFillo.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-03-11T19:24:32.000Z","updated_at":"2021-07-29T00:26:06.000Z","dependencies_parsed_at":"2022-08-20T16:10:21.861Z","dependency_job_id":null,"html_url":"https://github.com/DmitryFillo/jquery.porthole","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitryFillo%2Fjquery.porthole","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitryFillo%2Fjquery.porthole/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitryFillo%2Fjquery.porthole/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DmitryFillo%2Fjquery.porthole/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DmitryFillo","download_url":"https://codeload.github.com/DmitryFillo/jquery.porthole/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875621,"owners_count":16554694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","jquery","porthole","viewport"],"created_at":"2024-09-27T20:23:27.342Z","updated_at":"2025-10-27T14:30:20.329Z","avatar_url":"https://github.com/DmitryFillo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"===============\njquery.porthole\n===============\n\nSimply and fast viewport plugin for jQuery which using css transforms.\n\nIf you have large size content that should be placed into the small viewport,\nthis plugin is for you.\n\n.. contents::\n\nExplanatory demo\n================\n\nhttp://dmitryfillo.github.io/jquery.porthole/\n\nInstallation\n============\n\nThe best way::\n\n    bower install jquery.porthole\n\nHow to use\n==========\n\nYou should include the plugin to the page, something like this:\n\n.. code:: html\n\n    \u003cscript src=\"bower_components/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"bower_components/jquery.porthole/dist/jquery.porthole.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        var porthole = $('#viewport').porthole();\n        // ...\n    \u003c/script\u003e\n\n*If you are using js builders, e.g. gulp, grunt, some framework assets system, etc,\nyou should have no problems with this plugin. Also it supports AMD/RequireJS, CommonJS, ES6 modules\n(and, of course, globals).*\n\nAPI\n===\n\nPorthole object has ``options`` property which is an object with:\n\n+ startPos\n+ onDrag\n+ onDragStop\n+ onDragStart\n\nThese properties can be assign via constructor or directly to the options object.\n\nAlso porthole object has methods:\n\n+ init\n+ destroy\n+ update\n+ getCurrentPos\n+ getStatus\n\nporthole.options.startPos\n-------------------------\n\nStart position coordinates.\n\n.. code:: javascript\n\n    var porthole = $('#viewport').porthole({\n        startPos: [10, 10]\n    });\n\n    // Or attach directly to the options object and update porthole (see info below about update)\n    porthole.options.startPos = [10, 20];\n    porthole.update();\n\nDefault is ``[0, 0]``.\n\nporthole.options.onDrag\n-----------------------\n\nThis method will be fired when dragging (mousemove/touchmove) event occurs.\n\n.. code:: javascript\n\n    var porthole = $('#viewport').porthole({\n        onDrag: function(o) {\n            /* \n                o is the porthole object.\n            */ \n        }\n    });\n\nporthole.options.onDragStart\n----------------------------\n\nThis method will be fired when drag start (mousedown/touchstart) event occurs.\n\n.. code:: javascript\n\n    var porthole = $('#viewport').porthole({\n        onDragStart: function(o) {\n            /* \n                o is the porthole object.\n            */ \n        }\n    });\n\nporthole.options.onDragStop\n---------------------------\n\nThis method will be fired when drag stop (mouseup/touchend) event occurs.\n\n.. code:: javascript\n\n    var porthole = $('#viewport').porthole({\n        onDragStop: function(o) {\n            /* \n                o is the porthole object.\n            */ \n        }\n    });\n\nporthole.destroy\n----------------\n\nDestroy method. You can use it for destroy the porthole and render back to the initial state.\n\nporthole.init\n-------------\n\nInitialization method. Automatically fires in the constructor. You can use it for\nmanual init after destroy.\n\nporthole.update\n---------------\n\nUpdate method. Useful for update the porthole after options change. Simply fires\n``destroy()`` first and ``init()`` after.\n\nporthole.getCurrentPos\n----------------------\n\nGets current porthole position. Actually it is css transform coordinates.\n\nExample:\n\n.. code:: javascript\n\n    porthole.getCurrentPos();\n    /*\n        Example: Object {left: -219, top: -71}\n    */\n\nporthole.getStatus\n------------------\n\nGets current porthole status. Returns object with status properties. There are:\n\n+ initialized (it's ``false`` after ``destroy()``, otherwise it's ``true``)\n\nExample:\n\n.. code:: javascript\n\n    porthole.getStatus();\n    /*\n        Prints: Object {initialized: true};\n    */\n\n    porthole.destroy();\n\n    porthole.getStatus();\n    /*\n        Prints: Object {initialized: false};\n    */\n\n    porthole.update();\n\n    porthole.getStatus();\n    /*\n        Prints: Object {initialized: true};\n    */\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitryfillo%2Fjquery.porthole","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitryfillo%2Fjquery.porthole","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitryfillo%2Fjquery.porthole/lists"}