207 lines
9.7 KiB
HTML
207 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FLOdata tester</title>
|
|
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
|
|
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
|
|
<meta name="author" content="Codrops" />
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
|
|
<script src="js/modernizr.custom.js"></script>
|
|
<!-- Imported from index3.html .. to be integrated later -->
|
|
<link rel="stylesheet" type="text/css" href="css/normalize1.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/demo1.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/component1.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/content1.css" />
|
|
<style>
|
|
.btn {
|
|
background-color: DodgerBlue;
|
|
border: none;
|
|
color: white;
|
|
padding: 12px 16px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Darker background on mouse-over */
|
|
.btn:hover {
|
|
background-color: RoyalBlue;
|
|
}
|
|
</style>
|
|
<script src="js/modernizr1.custom.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!--This section is all imported from index3.html -->
|
|
<div class="morph-button morph-button-overlay morph-button-fixed">
|
|
<button type="button" class="codrops-icon" href="#"><i class="codrops-icon codrops-icon-info"></i><span>This is a demo for a fullscreen form</span></button>
|
|
<div class="morph-content" style="left: 642.5px; top: 391.734px;">
|
|
<div>
|
|
<div class="content-style-overlay">
|
|
<span class="icon icon-close">Close the overlay</span>
|
|
<h2>What is token tester</h2>
|
|
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
|
|
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
|
|
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
|
|
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
|
|
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
|
|
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- morph-button -->
|
|
</div><!-- /container -->
|
|
<script src="js/classie.js"></script>
|
|
<script src="js/selectFx.js"></script>
|
|
<script src="js/fullscreenForm.js"></script>
|
|
<script>
|
|
(function() {
|
|
var formWrap = document.getElementById('fs-form-wrap');
|
|
|
|
[].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
|
|
new SelectFx(el, {
|
|
stickyPlaceholder: false,
|
|
onChange: function(val) {
|
|
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
|
|
}
|
|
});
|
|
});
|
|
|
|
new FForm(formWrap, {
|
|
onReview: function() {
|
|
classie.add(document.body, 'overview'); // for demo purposes only
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
<script src="js/uiMorphingButton_fixed.js"></script>
|
|
<script>
|
|
(function() {
|
|
var docElem = window.document.documentElement,
|
|
didScroll, scrollPosition;
|
|
|
|
// trick to prevent scrolling when opening/closing button
|
|
function noScrollFn() {
|
|
window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
|
|
}
|
|
|
|
function noScroll() {
|
|
window.removeEventListener('scroll', scrollHandler);
|
|
window.addEventListener('scroll', noScrollFn);
|
|
}
|
|
|
|
function scrollFn() {
|
|
window.addEventListener('scroll', scrollHandler);
|
|
}
|
|
|
|
function canScroll() {
|
|
window.removeEventListener('scroll', noScrollFn);
|
|
scrollFn();
|
|
}
|
|
|
|
function scrollHandler() {
|
|
if (!didScroll) {
|
|
didScroll = true;
|
|
setTimeout(function() { scrollPage(); }, 60);
|
|
}
|
|
};
|
|
|
|
function scrollPage() {
|
|
scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
|
|
didScroll = false;
|
|
};
|
|
|
|
scrollFn();
|
|
|
|
var el = document.querySelector('.morph-button');
|
|
|
|
new UIMorphingButton(el, {
|
|
closeEl: '.icon-close',
|
|
onBeforeOpen: function() {
|
|
// don't allow to scroll
|
|
noScroll();
|
|
},
|
|
onAfterOpen: function() {
|
|
// can scroll again
|
|
canScroll();
|
|
// add class "noscroll" to body
|
|
classie.addClass(document.body, 'noscroll');
|
|
// add scroll class to main el
|
|
classie.addClass(el, 'scroll');
|
|
},
|
|
onBeforeClose: function() {
|
|
// remove class "noscroll" to body
|
|
classie.removeClass(document.body, 'noscroll');
|
|
// remove scroll class from main el
|
|
classie.removeClass(el, 'scroll');
|
|
// don't allow to scroll
|
|
noScroll();
|
|
},
|
|
onAfterClose: function() {
|
|
// can scroll again
|
|
canScroll();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
<script type="text/javascript">
|
|
(function(document, documentElement) {
|
|
// Enable strict mode
|
|
"use strict";
|
|
|
|
// Form the style on the fly to result in smaller minified file
|
|
var important = "!important;";
|
|
var style = "position:absolute" + important + "visibility:hidden" + important + "width:1em" + important + "font-size:1em" + important + "padding:0" + important;
|
|
|
|
window.getEmPixels = function(element) {
|
|
|
|
var extraBody;
|
|
|
|
if (!element) {
|
|
// Emulate the documentElement to get rem value (documentElement does not work in IE6-7)
|
|
element = extraBody = document.createElement("body");
|
|
extraBody.style.cssText = "font-size:1em" + important;
|
|
documentElement.insertBefore(extraBody, document.body);
|
|
}
|
|
|
|
// Create and style a test element
|
|
var testElement = document.createElement("i");
|
|
testElement.style.cssText = style;
|
|
element.appendChild(testElement);
|
|
|
|
// Get the client width of the test element
|
|
var value = testElement.clientWidth;
|
|
|
|
if (extraBody) {
|
|
// Remove the extra body element
|
|
documentElement.removeChild(extraBody);
|
|
} else {
|
|
// Remove the test element
|
|
element.removeChild(testElement);
|
|
}
|
|
|
|
// Return the em value in pixels
|
|
return value;
|
|
};
|
|
}(document, document.documentElement));
|
|
|
|
var emToPx = getEmPixels();
|
|
|
|
if (window.innerWidth < emToPx * 52.5) {
|
|
var x = document.getElementsByClassName("fs-continue");
|
|
x[0].innerHTML = '';
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|