A simple sticky menu with auto updating classes based on elements position.
A Pen by Nicola Zanon on CodePen.
#ToDo:
/* | |
* To horizontally and vertically center an element in css: | |
* http://css-tricks.com/centering-percentage-widthheight-elements/ | |
*/ | |
.center { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); |
// ---------------------------------------------------------- | |
// A short snippet for detecting versions of IE in JavaScript | |
// without resorting to user-agent sniffing | |
// ---------------------------------------------------------- | |
// If you're not in IE (or IE version is less than 5) then: | |
// ie === undefined | |
// If you're in IE (>=5) then you can determine which version: | |
// ie === 7; // IE7 | |
// Thus, to detect IE: | |
// if (ie) {} |
/* | |
Modernizr already has a test for cssgradients but it checks the old webkit syntax | |
In order to do px points we need linear-gradient() | |
Webkit did not have suport for linear-gradient() until Jan 2011 | |
http://webkit.org/blog/1424/css3-gradients/ | |
So here is a test to check for it. | |
*/ | |
Modernizr.addTest('lineargradient', function () { | |
var test = document.createElement('div'), |
<script type="text/javascript"> | |
(function() { | |
var s = [ | |
"/javascripts/script1.js", | |
"/javascripts/script2.js", | |
"/javascripts/script3.js", | |
"/javascripts/script4.js", | |
"/javascripts/script5.js" | |
]; |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>Single-Column Responsive Email Template</title> | |
<style> | |
@media only screen and (min-device-width: 541px) { | |
.content { |
DO WHAT YOU WANT TO PUBLIC LICENSE | |
Version 2, December 2004 | |
Copyright (C) 2011 Eli Perelman <http://eliperelman.com> | |
Everyone is permitted to copy and distribute verbatim or modified | |
copies of this license document, and changing it is allowed as long | |
as the name is changed. | |
DO WHAT YOU WANT TO PUBLIC LICENSE |
// Taken from: http://codepen.io/sturobson/pen/xcdha | |
// Modernizr mixin to create html.modernizr selector | |
@mixin modernizr($test, $no: true) { | |
// if false then give the html.no-modernizr selector | |
@if $no == true { | |
html.no-#{$test} & { | |
@content; | |
} | |
} |