DZone Snippets: html code http://snippets.dzone.com/posts Thu, 24 Jul 2008 07:35:49 GMT DZone Snippets: html code Firefox 3 and input file http://snippets.dzone.com/posts/show/5760 The nsIDOMFile interface retrieves data from a file submitted to a form using the input type "file". This allows the file reference to be saved when the form is submitted while the user is using a web application offline, so that the data can be retrieved and uploaded once the Internet connection is restored. <br /> <br /><code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /><head> <br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> <title>input type=file & Firefox 3</title> <br /></head> <br /> <br /><body> <br /> <br /><h1>input type=file & Firefox 3</h1> <br /> <br /><script type="text/javascript"> <br />// <![CDATA[ <br /> <br />function inputFileOnChange() { <br /> var v_console = ''; <br /> v_console += 'value: ' + document.getElementById('my-file').value; <br /> v_console += '<br \/>'; <br /> <br /> if(document.getElementById('my-file').files) { <br /> // Support: nsIDOMFile, nsIDOMFileList <br /> v_console += 'files.length: ' + document.getElementById('my-file').files.length; <br /> v_console += '<br \/>'; <br /> <br /> v_console += 'fileName: ' + document.getElementById('my-file').files.item(0).fileName; <br /> v_console += '<br \/>'; <br /> <br /> v_console += 'fileSize: ' + document.getElementById('my-file').files.item(0).fileSize; <br /> v_console += '<br \/>'; <br /> <br /> v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsDataURL(); <br />// v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsBinary(); <br />// v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsText(); <br /> v_console += '<br \/>'; <br /> }; <br /> <br /> document.getElementById('console').innerHTML = v_console; <br />}; <br /> <br />// ]]> <br /></script> <br /> <br /><div> <br /> <input type="file" name="my-file" id="my-file" onchange="inputFileOnChange();" /> <br /> <br /><br /> <br /> <code id="console">...console...< /code> <br /></div> <br /> <br /></body> <br /></html> <br /></code> <br /> <br /><a href="http://www.ab-d.fr/plan-de-site/">Source: </a><a href="http://www.ab-d.fr/date/2008-07-12/">Firefox 3 and input type=file , upload file</a> Sat, 12 Jul 2008 10:51:15 GMT http://snippets.dzone.com/posts/show/5760 ki4ngel (Benoit Asselin) Disable auto complete in input form http://snippets.dzone.com/posts/show/5642 Disable auto complete in input form. <br /> <br /><code> <br /><script type="text/javascript"> <br /> <br />window.onload = function() { <br /> for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) { <br /> if(document.getElementsByTagName('input').item(i).type == 'text') { <br /> document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off'); <br /> }; <br /> }; <br />}; <br /> <br /><script> <br /></code> <br /> <br /><a href="http://www.ab-d.fr">Source AB-D: </a><a href="http://www.ab-d.fr/date/2008-06-14/">Disable autocomplete in input type="text"</a> Fri, 13 Jun 2008 22:10:57 GMT http://snippets.dzone.com/posts/show/5642 ki4ngel (Benoit Asselin) Image Rotate with CANVAS http://snippets.dzone.com/posts/show/5514 <code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <br /><head> <br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> <title>rotate()</title> <br /> <br /> <style type="text/css" media="screen"> <br /> img, canvas { border: 1px solid black; } <br /> </style> <br /> <br /> <br /><script type="text/javascript"> <br /> <br />function rotate(p_deg) { <br /> if(document.getElementById('canvas')) { <br /> /* <br /> Ok!: Firefox 2, Safari 3, Opera 9.5b2 <br /> No: Opera 9.27 <br /> */ <br /> var image = document.getElementById('image'); <br /> var canvas = document.getElementById('canvas'); <br /> var canvasContext = canvas.getContext('2d'); <br /> <br /> switch(p_deg) { <br /> default : <br /> case 0 : <br /> canvas.setAttribute('width', image.width); <br /> canvas.setAttribute('height', image.height); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, 0, 0); <br /> break; <br /> case 90 : <br /> canvas.setAttribute('width', image.height); <br /> canvas.setAttribute('height', image.width); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, 0, -image.height); <br /> break; <br /> case 180 : <br /> canvas.setAttribute('width', image.width); <br /> canvas.setAttribute('height', image.height); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, -image.width, -image.height); <br /> break; <br /> case 270 : <br /> case -90 : <br /> canvas.setAttribute('width', image.height); <br /> canvas.setAttribute('height', image.width); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, -image.width, 0); <br /> break; <br /> }; <br /> <br /> } else { <br /> /* <br /> Ok!: MSIE 6 et 7 <br /> */ <br /> var image = document.getElementById('image'); <br /> switch(p_deg) { <br /> default : <br /> case 0 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; <br /> break; <br /> case 90 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; <br /> break; <br /> case 180 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; <br /> break; <br /> case 270 : <br /> case -90 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; <br /> break; <br /> }; <br /> <br /> }; <br />}; <br /> <br /> <br />window.onload = function() { <br /> var image = document.getElementById('image'); <br /> var canvas = document.getElementById('canvas'); <br /> if(canvas.getContext) { <br /> image.style.visibility = 'hidden'; <br /> image.style.position = 'absolute'; <br /> } else { <br /> canvas.parentNode.removeChild(canvas); <br /> }; <br /> <br /> rotate(0); <br />}; <br /> <br /></script> <br /> <br /></head> <br /> <br /><body> <br /> <br /> <br /><p> <br /> rotate: <br /> <input type="button" value="0°" onclick="rotate(0);" /> <br /> <input type="button" value="90°" onclick="rotate(90);" /> <br /> <input type="button" value="180°" onclick="rotate(180);" /> <br /> <input type="button" value="-90°" onclick="rotate(-90);" /> <br /></p> <br /> <br /> <br /><p> <br /> <img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /> <br /> <canvas id="canvas"></canvas> <br /></p> <br /> <br /> <br /></body> <br /></html> <br /></code> <br /> <br /><a href="http://www.ab-d.fr">Source: AB-D.fr</a> - <a href="http://www.ab-d.fr/date/2008-05-18/">Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 )</a> Sun, 18 May 2008 15:22:51 GMT http://snippets.dzone.com/posts/show/5514 ki4ngel (Benoit Asselin) Position : fixed in MSIE6 http://snippets.dzone.com/posts/show/5132 <br /><code> <br /><?xml version="1.0" encoding="UTF-8"?> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <br /> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <br /><head> <br /> <title>"position: fixed" compatible Microsoft Internet Explorer 6</title> <br /> <br /> <br /> <!-- Code CSS for Firefox, Safari, Opera, Internet Explorer 7... --> <br /> <br /> <style type="text/css" media="screen"> <br /> <br /> #fixed { <br /> position: fixed; <br /> left: 0; top: 0; right: 0; <br /> width: 100%; <br /> padding: 10px; background: gray; <br /> } <br /> <br /> </style> <br /> <br /> <br /> <!-- Code CSS for Internet Explorer 6 --> <br /> <br /> <!--[if lte IE 6]> <br /> <style type="text/css" media="screen"> <br /> <br /> #fixed { <br /> position: absolute; <br /> top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight); <br /> } <br /> <br /> </style> <br /> <![endif]--> <br /> <br /> <br /></head> <br /> <br /><body> <br /> <br /> <div id="fixed">DIV in position: fixed;</div> <br /> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <p>Content...</p> <br /> <br /></body> <br /> <br /></html> <br /></code> <br /> <br /><a href="http://www.ab-d.fr/">Source: Asselin Benoit Developpement, conception de sites internet</a> Mon, 11 Feb 2008 20:39:19 GMT http://snippets.dzone.com/posts/show/5132 ki4ngel (Benoit Asselin) Make a variable CSS http://snippets.dzone.com/posts/show/5110 Page.html <br /><code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <br /><head> <br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <br /> <br /> <title>Variable CSS</title> <br /> <link rel="stylesheet" type="text/css" href="style.php" /> <br /></head> <br /> <br /><body> <br /> <br /> <br /><h1>Title</h1> <br /> <br /><p class="color-1"> Text Text Text </p> <br /> <br /><p class="color-2"> Text Text Text </p> <br /> <br /><p class="color-3"> Text Text Text </p> <br /> <br /> <br /></body> <br /> <br /></html> <br /></code> <br /> <br />Style.php <br /><code> <br /><?php <br />header('Content-Type: text/css'); <br /> <br />$color_0 = '#000000'; <br />$color_1 = '#ff0000'; <br />$color_2 = '#ff3300'; <br />$color_3 = '#ff6600'; <br /> <br />?> <br /> <br />* { font-family: sans-serif; } <br /> <br />h1 { <br /> padding: 5px; <br /> color: <?= $color_0 ?>; <br /> border: 5px solid <?= $color_2 ?>; <br /> background-color: <?= $color_3 ?>; <br />} <br /> <br />p.color-1 { color: <?= $color_1 ?>; } <br />p.color-2 { color: <?= $color_2 ?>; font-weight: bold; } <br />p.color-3 { color: <?= $color_3 ?>; font-style: italic; } <br /></code> <br /> <br /> <br /><a href="http://www.ab-d.fr">Source: Asselin Benoit Développement, création de site internet amiens</a> Wed, 06 Feb 2008 19:02:03 GMT http://snippets.dzone.com/posts/show/5110 ki4ngel (Benoit Asselin) iPhone Orientation http://snippets.dzone.com/posts/show/4912 iPhoneOrientation <br />Demonstrates how to handle iPhone or iPod touch orientation events using HTML, CSS, and JavaScript. <br /> <br /> <br />index.html <br /><code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /><head> <br /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <br /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <br /> <title>Handling iPhone or iPod touch Orientation Events</title> <br /> <br /> <!-- The iPhoneOrientation.css file is used to adjust the page appearance --> <br /> <link rel="stylesheet" href="iPhoneOrientation.css" type="text/css" /> <br /> <br /> <!-- The iPhoneOrientation.js file shows how to handle iPhone orientation events --> <br /> <script type="text/javascript" src="iPhoneOrientation.js"></script> <br /></head> <br /><body class="portrait"> <br /> <!-- Display a message that describes the current iPhone orientation after rotation --> <br /> <div id="currentOrientation"></div> <br /> <br /> <!-- The container div is made of two inner divs: leftContainer and rightContainer. The leftContainer and rightContainer are stacked <br /> up one above the other when iPhone is in portrait orientation and side by side when iPhone is in landscape orientation --> <br /> <div id="container"> <br /> <!--The button class is used to build a rounded rectangle around each text --> <br /> <!--The page appearance changes whenever iPhone rotates between portrait and landscape display views --> <br /> <div id="leftContainer"> <br /> <div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/chapter_10_section_1.html'">Debug Console</div> <br /> <div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_8.html'">Viewport Settings</div> <br /> </div> <br /> <div id="rightContainer"> <br /> <div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/chapter_5_section_4.html'">Highlighting Elements</div> <br /> <div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/chapter_7_section_1.html'">Form Auto Correction</div> <br /> </div> <br /> </div> <br /> <br /></body> <br /></html> <br /></code> <br /> <br /> <br /> <br />iPhoneOrientation.css <br /><code> <br />body <br />{ <br /> margin: 0px; <br /> padding: 0px; <br /> font-size: 12px; <br /> font-family: 'Lucida Grande', Verdana, sans-serif; <br /> font-weight: bold; <br /> /* Turn off font resizing */ <br /> -webkit-text-size-adjust: none; <br />} <br /> <br /> <br /> <br />/* Set the background color of the page when the body tag's class attribute is equal to portrait. <br /> The expression body[class="value"] is a CSS attribute selector where "body" is the html element to be styled, "class" the body's attribute to be <br /> manipulated, and "value" the class attribute's value, which is either portrait, landscapeLeft, or landscapeRight. <br /> This expression is used to dynamically select a body style according to the class attribute value. For instance, if the body's class attribute is set <br /> to landscapeLeft, then all style declarations matching body[class="landscapeLeft"] will be used to style "Handling iPhone or iPod touch Orientation Events". <br /> The JavaScript updateOrientation function in the iPhoneOrientation.js file is used to set the body's class attribute to one of these values. <br /> Further information about CSS attribute selectors can be found at http://www.w3.org/TR/css3-selectors/#attribute-selectors. <br /> */ <br />body[class="portrait"] <br />{ <br /> background: white; <br />} <br /> <br /> <br />/* Adjust a button when the body's class attribute is equal to portrait */ <br />body[class="portrait"] .button <br />{ <br /> background: white; <br /> width: 210px; <br /> height: 13px; <br /> <br /> padding: 10px 0px; <br /> margin: 10px auto; <br /> <br /> font-size: 15px; <br /> <br /> /* text is black on the button */ <br /> color: black; <br />} <br /> <br /> <br />/* The leftContainer and rightContainer div elements are stacked up one after the other when the body's class attribute is equal to portrait. <br /> They are both 200 pixels wide. */ <br />body[class="portrait"] #leftContainer <br />{ <br /> width: 200px; <br /> margin: auto auto; <br />} <br /> <br /> <br />body[class="portrait"] #rightContainer <br />{ <br /> width: 200px; <br /> margin: auto auto; <br />} <br /> <br /> <br />/* Set the background color of the page when the body's class attribute is set to landscapeLeft */ <br />body[class="landscapeLeft"] <br />{ <br /> background: lightgrey; <br />} <br /> <br /> <br />/* Adjust a button when the body's class attribute is set to landscapeLeft */ <br />body[class="landscapeLeft"] .button <br />{ <br /> background: black; <br />} <br /> <br /> <br />/* The container div is evenly split between leftContainer and rightContainer when the body's class attribute is set to landscapeLeft. <br /> leftContainer and rightContainer are stacked side by side. leftContainer aligns buttons to the left side of the page; <br /> rightContainer aligns buttons to the right side of the page. */ <br />body[class="landscapeLeft"] #leftContainer <br />{ <br /> width: 50%; <br /> /* Align the div to the left of the page */ <br /> float: left; <br />} <br /> <br /> <br />body[class="landscapeLeft"] #rightContainer <br />{ <br /> width: 50%; <br /> /* Align the div to the right of the page */ <br /> float: right; <br />} <br /> <br /> <br /> <br />/* Set the background color of the page when the body's class attribute is equal to landscapeRight */ <br />body[class="landscapeRight"] <br />{ <br /> background: tan; <br />} <br /> <br /> <br />/* Adjust a button when the body's class attribute is equal to landscapeRight */ <br />body[class="landscapeRight"] .button <br />{ <br /> background: darkred; <br />} <br /> <br /> <br />/* The container div is evenly split between leftContainer and rightContainer when the body's class attribute is set to landscapeRight. <br /> leftContainer aligns buttons to the left side of the page; rightContainer aligns buttons to the right side of the page. */ <br />body[class="landscapeRight"] #leftContainer <br />{ <br /> width: 50%; <br /> float: left; <br />} <br /> <br />body[class="landscapeRight"] #rightContainer <br />{ <br /> width: 50%; <br /> float: right; <br />} <br /> <br /> <br />/* Draw a rounded rectangle around a text */ <br /> .button <br />{ <br /> font-weight: bold; <br /> text-align: center; <br /> <br /> width: 130px; <br /> height: 13px; <br /> font-size: 10px; <br /> <br /> /* text is white on the button */ <br /> color: white; <br /> <br /> /* Draw a rectangle around a text */ <br /> border: 1px solid black; <br /> <br /> /* Round each corner of the generated rectangle */ <br /> -webkit-border-radius: 5px; <br /> padding: 5px 0px; <br /> margin: 5px auto; <br />} <br /> <br /> <br />/* Defines styling properties for the currentOrientation div, which shows a message that indicates iPhone's current orientation after rotation */ <br />#currentOrientation <br />{ <br /> width: 280px; <br /> text-align: center; <br /> margin: 10px auto; <br />} <br /> <br /> <br />a <br />{ <br /> text-decoration: none; <br />} <br /> <br /> <br />/* The container div contains four buttons that are evenly divided between the inner leftContainer and rightContainer div elements. <br /> Its width does not change when iPhone switches between portrait and landscape orientations. */ <br />#container <br />{ <br /> /* fixed width across all iPhone orientation changes */ <br /> width: 300px; <br /> margin: 10px auto; <br />} <br /></code> <br /> <br /> <br /> <br />iPhoneOrientation.js <br /><code> <br />/* updateOrientation checks the current orientation, sets the body's class attribute to portrait, landscapeLeft, or landscapeRight, <br /> and displays a descriptive message on "Handling iPhone or iPod touch Orientation Events". */ <br />function updateOrientation() <br />{ <br /> /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the <br /> left, or landscape mode with the screen turned to the right. */ <br /> var orientation=window.orientation; <br /> switch(orientation) <br /> { <br /> <br /> case 0: <br /> /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration <br /> in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ <br /> document.body.setAttribute("class","portrait"); <br /> <br /> /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */ <br /> document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom)."; <br /> break; <br /> <br /> case 90: <br /> /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the <br /> body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ <br /> document.body.setAttribute("class","landscapeLeft"); <br /> <br /> document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; <br /> break; <br /> <br /> case -90: <br /> /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the <br /> body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ <br /> document.body.setAttribute("class","landscapeRight"); <br /> <br /> document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; <br /> break; <br /> } <br /> <br />} <br /> <br />// Point to the updateOrientation function when iPhone switches between portrait and landscape modes. <br />window.onorientationchange=updateOrientation; <br /></code> <br /> <br /> <br />Source: http://developer.apple.com/samplecode/iPhone/idxSafari-date.html <br />( <a href="http://www.ab-d.fr/">AB-D</a> ) <br /> <br /> Sat, 22 Dec 2007 12:53:44 GMT http://snippets.dzone.com/posts/show/4912 ki4ngel (Benoit Asselin) How to detect a browser iPhone ? http://snippets.dzone.com/posts/show/4826 The browser is : <br /> <br /><code> <br /> <br />Mozilla/5.0 (iPhone; U; CPU like Mac OS X; fr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3B48b Safari/419.3 <br /> <br /></code> <br /> <br /><a href="http://www.ab-d.fr/">Source: ab-d.fr <br />Internet with iPhone <br /></a> Thu, 29 Nov 2007 10:34:42 GMT http://snippets.dzone.com/posts/show/4826 ki4ngel (Benoit Asselin)