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

Fix for pages with long text #61

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix for pages with long text #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c6b9b8
fix modal on long pages
nobitagit Jun 28, 2014
466a1a6
fixes stack animation
nobitagit Jun 28, 2014
124e72f
readme update
nobitagit Jun 28, 2014
3e70c51
refactor demo page for long text
nobitagit Jun 28, 2014
d5e5dd5
fix typo
nobitagit Jun 28, 2014
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ $('element').avgrund({
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
container: $('#container') // the container that gets scaled when the modal is in view
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
holderClass: '', // lets you name custom class for popin holder..
Expand Down
17 changes: 8 additions & 9 deletions example/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
body {
background: #FFF;
background: url(http://subtlepatterns.com/patterns/dark_dotted.png) repeat #222;
color: #666;
font: 14px/22px 'Open Sans', Arial, sans-serif;
text-align: justify;
}

html {
background: url(http://subtlepatterns.com/patterns/dark_dotted.png) repeat #222;
}

a {
color: #ED5E2F;
}
Expand All @@ -21,8 +17,10 @@ h1 {
color: #333;
font-family: 'Headland One', Georgia, serif;
font-size: 40px;
line-height: 50px;
text-align: center;
margin: 0 0 25px;
padding-top: 45px;
}

pre, code {
Expand All @@ -38,9 +36,9 @@ pre, code {
}

.container {
width: 600px;
margin: 0 auto;
padding: 45px 0 0;
padding: 0 30%;
background: #fff;
min-height: 100%;
}

.buttons {
Expand Down Expand Up @@ -77,7 +75,8 @@ pre, code {

.socials {
font-size: 12px;
margin: 10px 0 0;
padding: 20px 0 20px;
text-align: right;
}

/* Custom styles for popin & close button */
Expand Down
111 changes: 111 additions & 0 deletions example/index-long.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dmitri Voronianski">
<title>jQuery plugin for Avgrund concept popin</title>
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="../style/avgrund.css">

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container" class="container">
<h1>Avgrund Modal: example with long page.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<div class="buttons">
<a href="#" id="show" class="button left">Show it</a>
<a href="https://github.com/voronianski/jquery.avgrund.js" class="button download left" target="_blank">Download source</a>
</div>

<p class="clear">You can simply init Avgrund with one line:</p>
<pre>$('element').avgrund();</pre>

<p>Avgrund has several options for you to customize it easily:</p>

<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>

<div class="socials">
<span>&copy;2012</span>
<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a>
</div>
</div>

<a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 200,
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
onBlurContainer: '',
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' +
'<div>' +
'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' +
'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' +
'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' +
'</div>'
});
});
</script>
</body>
</html>
23 changes: 3 additions & 20 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<![endif]-->
</head>
<body>
<div class="container">
<div id="container" class="container">
<h1>Avgrund Modal.</h1>
<p>Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). File size is under 2Kb, MIT Licensed.</p>

Expand All @@ -27,31 +27,13 @@ <h1>Avgrund Modal.</h1>
<pre>$('element').avgrund();</pre>

<p>Avgrund has several options for you to customize it easily:</p>
<pre>$('element').avgrund({
width: 380, // max is 640px
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
holderClass: '', // lets you name custom class for popin holder..
overlayClass: '', // ..and overlay block
enableStackAnimation: false, // another animation type
onBlurContainer: '', // enables blur filter for specified block
openOnEvent: true, // set to 'false' to init on load
setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
onLoad: function (elem) { ... }, // set custom call before popin is inited..
onUnload: function (elem) { ... }, // ..and after it was closed
template: 'String content..' // or function (elem) { }, or $('.content')
});</pre>

<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>

<div class="socials">
<div class="right">
<span>&copy;2012</span>
<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a>
</div>
</div>
</div>

Expand All @@ -66,6 +48,7 @@ <h1>Avgrund Modal.</h1>
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
container: $('#container'),
onBlurContainer: '.container',
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' +
'<div>' +
Expand Down
4 changes: 3 additions & 1 deletion jquery.avgrund.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
setEvent: 'click',
onLoad: false,
onUnload: false,
template: '<p>This is test popin content!</p>'
template: '<p>This is test popin content!</p>',
container : $('#container')
};

options = $.extend(defaults, options);
Expand All @@ -47,6 +48,7 @@
template = typeof options.template === 'function' ? options.template(self) : options.template;

body.addClass('avgrund-ready');
options.container.addClass('avgrund-ready avg-container');

if ($('.avgrund-overlay').length === 0) {
body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
Expand Down
19 changes: 15 additions & 4 deletions style/avgrund.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,20 @@ html, body {
background: #000;
width: 100%;
position: relative;
top: -1500px;
left: 0;
z-index: 101;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -40;
}

body.avgrund-ready,
.avgrund-ready,
.avgrund-ready .avgrund-popin,
.avgrund-ready .avgrund-overlay {
-webkit-transform-origin: 50% 50%;
Expand All @@ -51,7 +56,7 @@ body.avgrund-ready,
transition: 0.3s all ease-out;
}

body.avgrund-active {
.avgrund-active .avg-container{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
Expand All @@ -70,13 +75,19 @@ body.avgrund-active {
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: 40;
}

.avgrund-active .avgrund-overlay {
visibility: visible;
opacity: .5;
filter: alpha(opacity=50);
height: 20000px;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
}

.avgrund-popin.stack {
Expand Down