cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add some conditional classes and behaviour for internet explorer

Browse Source
This commit is contained in:
Georg Fischer 2014-06-19 13:07:41 +02:00
parent f476b76fc2
commit 98b1bef7b5
3 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,6 +1,8 @@
<!doctype html> <!doctype html>
<html> <!--[if lt IE 10 ]> <html class="oldie"> <![endif]-->
<head> <!--[if gt IE 9 ]> <html class="somewhatokie"> <![endif]-->
<!--[if gt IE 11]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>image glitch experiment</title> <title>image glitch experiment</title>
<link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/main.css" />

6
scripts/src/controls.js vendored
View File

@ -6,6 +6,7 @@ define(
var is_initialized = false; var is_initialized = false;
var signals; var signals;
var controls; var controls;
var is_ie = document.querySelector( 'html' ).classList.contains( 'somewhatokie' );
function init( shared ) function init( shared )
{ {
@ -24,6 +25,11 @@ define(
control.addEventListener( 'input', controlUpdated, false ); control.addEventListener( 'input', controlUpdated, false );
if ( is_ie )
{
control.addEventListener( 'change', controlUpdated, false );
}
updateValue( getInputKey( control.id ), control.value ); updateValue( getInputKey( control.id ), control.value );
updateInput( getCorrespondingInput( control.id ), control.value ); updateInput( getCorrespondingInput( control.id ), control.value );
} }

19
styles/main.css
View File

@ -164,6 +164,10 @@ a:hover {
max-width: 120px; max-width: 120px;
} }
.oldie .control-label {
max-width: 100%;
}
.control-slider { .control-slider {
display: block; display: block;
float: left; float: left;
@ -177,6 +181,14 @@ a:hover {
appearance: none; appearance: none;
} }
.oldie .control-slider {
display: none;
}
.somewhatokie .control-slider {
height: 10px;
}
.control-number { .control-number {
display: block; display: block;
color: #333; color: #333;
@ -187,6 +199,13 @@ a:hover {
background-color: transparent; background-color: transparent;
} }
.oldie .control-number {
float: none;
width: 20px;
margin-left: auto;
margin-right: auto;
}
#import-input { #import-input {
display: none; display: none;
} }