![[PAGINA] HTML Mercer User_l10](https://i.servimg.com/u/f10/16/47/91/52/user_l10.png)
Entrar
Cadastre-se![[PAGINA] HTML Mercer Icon_q10](https://i.servimg.com/u/f10/16/47/91/52/icon_q10.png){kind=icon}
Início1![[PAGINA] HTML Mercer Empty](https://2img.net/i/empty.gif)
[PAGINA] HTML Mercer Sáb Jan 05, 2013 12:47 am
Mercer
Minis : ![[PAGINA] HTML Mercer Qdzdbk10](https://i.servimg.com/u/f19/17/03/02/43/qdzdbk10.png)
:00![[PAGINA] HTML Mercer C96eus10](https://i.servimg.com/u/f19/17/03/02/43/c96eus10.png)
:00![[PAGINA] HTML Mercer Zc0mgz10](https://i.servimg.com/u/f19/17/03/02/43/zc0mgz10.png)
:00
:00:00:00Mensagens : 148
Fiz uma pagina html,nao estarei usando,tem alguns bugs acho eu porém simples e pá.nao sou muito bom em codigos quem quiser dar uma olhada está ae...
Há um bug qndo vou ver a pagina,mas veem vocees mesmos se ta errado rsrs
preview: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Há um bug qndo vou ver a pagina,mas veem vocees mesmos se ta errado rsrs
- Código:
<!DOCTYPE html>
<html id="jsbin" lang="en" class="">
<head>
<meta charset=utf-8 />
<title>JS Bin - Collaborative JavaScript Debugging</title>
<link rel="icon" href="http://static.jsbin.com/images/favicon.png">
<link rel="stylesheet" href="http://static.jsbin.com/css/style.css?3.0.19" type="text/css">
<!--[if lte IE 9 ]><link rel="stylesheet" href="http://static.jsbin.com/css/ie.css?3.0.19" type="text/css"><![endif]-->
</head>
<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]-->
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]-->
<!--[if gte IE 8 ]><body class="source ie"><![endif]-->
<!--[if !IE]><!--><body class="source"><!--<![endif]-->
<div id="control">
<div class="control">
<div class="buttons">
<div class="menu">
<a href="http://jsbin.com/abodeb/2/edit#actionmenu" target="_blank" class="brand button button-dropdown group"><img src="http://static.jsbin.com/images/favicon.png"> <h1>JS Bin</h1></a>
<div class="dropdown" id="actionmenu">
<div class="dropdownmenu">
<a id="addmeta" title="Add meta data to bin" class="button group" href="#">Add description</a>
<a title="Create milestone" class="button save group" href="http://jsbin.com/save">Create milestone</a>
<a id="startingpoint" title="Set as starting code" class="button group" href="http://jsbin.com/save">Save as template</a>
<a id="clone" title="Create a new copy" class="button clone group" href="/clone">Clone</a>
<a id="download" title="Save to local drive" class="button download group" href="http://jsbin.com/download">Download</a>
<a id="createnew" class="button group" title="Create fresh bin" href="http://jsbin.com">New</a>
</div>
</div>
</div><!--
--><div class="menu">
<span class="button group">Add library
<select id="library"></select>
</span>
</div><div id="sharemenu" class="menu ">
<a href="#share" class="button button-dropdown group">Share</a>
<div class="dropdown" id="share">
<div class="dropdowncontent">
<form>
<div class="lockoption" id="enablelock"><input type="button" title="Locks the bin's content so no more changes will be made this URL, and typing will create a new bin as if you 'created milestone'" class="lockrevision" value="Lock revision #2"> <small>from further changes.</small></div>
<!-- <div id="removelock"><input type="button" title="Unlocks the revision that you own so that you can continue to write to this specific bin" class="unlocklockrevision" value="Unlock revision #2"> <small>to allow changes.</small></div> -->
<div>
<strong><a class="link" data-path="/" target="_blank" href="http://jsbin.com/abodeb/2">Live & Full Preview</a></strong><br><input data-path="/" class="link" value="http://jsbin.com/abodeb/2/" type="text">
</div>
<div>
<strong><a class="link" data-path="/edit" target="_blank" href="http://jsbin.com/abodeb/2/edit">Code View</a></strong><br><input data-path="/edit" class="link" value="http://jsbin.com/abodeb/2/edit" type="text">
</div>
<div>
<strong>Embed</strong><br><textarea data-path="/embed" class="link"><a class="jsbin-embed" href="http://jsbin.com/abodeb/2/embed?live">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script></textarea>
</div>
<div class="disabled">
<strong><a class="link" target="_blank" data-path="/watch" href="http://jsbin.com/abodeb/2/watch">Codecast</a></strong><br><input data-path="/watch" class="link" value="http://jsbin.com/abodeb/2/watch" type="text">
</div>
</form>
</div>
</div>
</div><!-- intentional space -->
<div id="start-saving" class="menu">
<a href="/abodeb/2/save" class="save button group">Start saving your work</a>
</div>
<div id="panels"></div>
<div class="help">
<div class="menu">
<a href="#login" class="button button-open" id="loginbtn">Log in</a>
<div class="dropdown dd-right" id="login">
<div class="dropdowncontent">
<form class="forgot" action="/forgot" method="post">
<div>
<label>Email<br>
<input name="email" required type="email"></label>
</div>
<div>
<input type=submit value="Request password reset">
<input type="hidden" name="_csrf" value="Ff9wRbu+iKEeutmMoh5IRFW2">
<input type="hidden" name="_redirect" value="home">
</div>
</form>
<form class="login">
<p class="loginFeedback"></p>
<div>
<label>Username or Email<br>
<input name="username" type="text"></label>
</div>
<div>
<label>Password<br>
<input name="password" type="password"></label>
</div>
<div>
<input type=submit value="Log in">
<a id="lostpass" href="http://jsbin.com/forgot">Reset password</a>
</div>
</form>
</div>
</div>
</div><div class="menu">
<a href="#register" class="button button-open" id="regbtn">Register</a>
<div class="dropdown dd-right" id="register">
<div class="dropdowncontent">
<p>Registration allows you to retrieve your saved files.</p>
<form class="login">
<p class="loginFeedback"></p>
<div>
<label>Username<br><input required name="username" type="text"></label>
</div>
<div>
<label>Email<br>
<input name="email" required type="email"></label>
</div>
<div>
<label>Password<br>
<input required name="password" type="password"></label>
</div>
<div>
<input type=submit value="Register">
</div>
</form>
</div>
</div>
</div><!--
--><div class="menu">
<a href="#helpmenu" class="button button-dropdown">Help</a>
<div class="dropdown dd-right" id="helpmenu">
<div class="dropdownmenu">
<a id="showhelp" href="#keyboardHelp">Keyboard Shortcuts</a>
<a id="showurls" href="#urls">JS Bin URLs</a>
<a target="_blank" href="http://jsbin.tumblr.com">Tutorials</a>
<a target="_blank" href="http://jsbin.tumblr.com/faq">FAQ</a>
<a target="_blank" href="http://github.com/remy/jsbin/issues/new">Send feedback & file bugs</a>
<a target="_blank" href="http://github.com/remy/jsbin/">Fork on Github</a>
<a target="_blank" href="http://jsbin.tumblr.com/about">About</a>
<a target="_blank" href="http://twitter.com/js_bin">Follow @js_bin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
<div id="source" class="binview stretch">
</div>
<div id="panelswaiting">
<div class="code stretch html panel">
<div class="label menu">
<span class="name"><strong><a href="#htmlprocessors" class="fake-dropdown button-dropdown">HTML</a></strong></span>
<div class="dropdown" id="htmlprocessors">
<div class="dropdownmenu processorSelector" data-type="html">
<a href="#html">HTML</a>
<a href="#markdown">Markdown</a>
<a href="#jade">Jade</a>
<a href="#convert">Convert to HTML</a>
</div>
</div>
</div>
<div class="editbox">
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="html"></textarea>
</div>
</div>
<div class="code stretch javascript panel">
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#javascriptprocessors">JavaScript</a></strong></span>
<div class="dropdown" id="javascriptprocessors">
<div class="dropdownmenu processorSelector" data-type="javascript">
<a href="#javascript">JavaScript</a>
<a href="#coffeescript">CoffeeScript</a>
<a href="#processing">Processing</a>
<a href="#traceur">Traceur</a>
<a href="#typescript">TypeScript</a>
<a href="#convert">Convert to JavaScript</a>
</div>
</div>
</div>
<div class="editbox">
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="javascript"></textarea>
</div>
</div>
<div class="code stretch css panel">
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#cssprocessors">CSS</a></strong></span>
<div class="dropdown" id="cssprocessors">
<div class="dropdownmenu processorSelector" data-type="css">
<a href="#css">CSS</a>
<a href="#less">LESS</a>
<a href="#stylus">Stylus</a>
<a href="#convert">Convert to CSS</a>
</div>
</div>
</div>
<div class="editbox">
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="css"></textarea>
</div>
</div>
<div class="stretch console panel">
<div class="label">
<span class="name"><strong>Console</strong></span>
<span class="options">
<button id="runconsole" title="ctrl + enter">Run</button>
</span>
</div>
<div id="console" class="stretch"><ul id="output"></ul><form>
<textarea autofocus id="exec" spellcheck="false" autocapitalize="off" rows="1" autocorrect="off"></textarea>
</form></div>
</div>
<div id="live" class="stretch live panel">
<div class="label">
<span class="name"><strong>Output</strong></span>
<span class="options">
<button id="runwithalerts" title="ctrl + enter
Include alerts, prompts & confirm boxes">Run with JS</button>
<label>Auto-run JS<input type="checkbox" id="enablejs"></label>
<a target="_blank" title="Live preview" id="jsbinurl" class="" href="/abodeb/2"><img src="http://static.jsbin.com/images/popout.png"></a>
</span>
</div>
</div>
</div>
<form id="saveform" method="post" action="/abodeb/2/save">
<input type="hidden" name="method" />
<input type="hidden" name="_csrf" value="Ff9wRbu+iKEeutmMoh5IRFW2" />
</form>
</div>
<div id="tip">
<p>You can jump to the latest bin by adding <code>/latest</code> to your URL</p><a class="dismiss" href="#">Dismiss x</a>
</div>
<div id="keyboardHelp" class="modal">
<h2>Keyboard Shortcuts</h2>
<table>
<thead>
<tr>
<th class="shortcut">Shortcut</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>ctrl + [panel num]</td>
<td>Show nth panel</td>
</tr>
<tr>
<td>ctrl + §<br />(or `)</td>
<td>Hide focused panel</td>
</tr>
<tr>
<td>ctrl + enter</td>
<td>Re-render JavaScript.<br>If console visible: run JS in console</td>
</tr>
<tr>
<td>ctrl + \</td>
<td>Auto hide navigation bar</td>
</tr>
<tr>
<td>ctrl + /</td>
<td>Toggle comment on single line</td>
</tr>
<!-- <tr>
<td>ctrl + alt + .</td>
<td>Close current HTML element</td>
</tr> -->
<tr>
<td>esc</td>
<td>Code complete (JavaScript only) and close open overlays - like this</td>
</tr>
<tr>
<td>ctrl + s</td>
<td>Save current Bin</td>
</tr>
<tr>
<td>ctrl + shift + s</td>
<td>Clone current Bin</td>
</tr>
<tr>
<td>cmd + [ (or tab)</td>
<td>Indents selected lines</td>
</tr>
<tr>
<td>cmd + ] (or shift + tab)</td>
<td>Unindents selected lines</td>
</tr>
<tr><td colspan="2"><small><br>JS Bin also supports <a href="https://github.com/sergeche/zen-coding" target="_blank">Emmet/Zen Coding</a> shortcuts (except tab key)</small></td></tr>
<tr><td colspan="2"><small><br><input type="checkbox" id="enablealt"> <label for="enablealt">Use "cmd + alt + key" instead of "cmd + key" (refresh required)</label></small></td></tr>
</tbody>
</table>
</div>
<div id="urlHelp" class="modal">
<h2>JS Bin URLs</h2>
<table>
<thead>
<tr>
<th class="shortcut">URL</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>/</td>
<td>Show the full rendered output.<br><small>This content will update in real time as it's updated from the /edit url.</small></td>
</tr>
<tr>
<td>/edit</td>
<td>Edit the current bin</td>
</tr>
<tr>
<td>/watch</td>
<td>Follow a Code Casting session</td>
</tr>
<tr>
<td>/embed</td>
<td>Create an embeddable version of the bin</td>
</tr>
<tr>
<td>/[username]/last</td>
<td>View the last edited bin for this user</td>
</tr>
<tr>
<td>/[username]/last/edit</td>
<td>Edit the last edited bin for this user</td>
</tr>
<tr>
<td>/[username]/last/watch</td>
<td>Follow the Code Casting session for the latest bin for this user</td>
</tr>
<tr>
<td>/quiet</td>
<td>Remove analytics and edit button from rendered output</td>
</tr>
<tr>
<td>.js</td>
<td>Load only the JavaScript for a bin</td>
</tr>
<tr>
<td>.css</td>
<td>Load only the CSS for a bin</td>
</tr>
<tr><td colspan="2"><br><small>Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.</small></td></tr>
</tbody>
</table>
</div>
<script>
var template = {"html":"<!DOCTYPE html>\n<html>\n<title>Mercer DESIGN</title>\n <div class=\"headerbar\"><div class=\"inner\"><span class=\"corners-top\"><span></span></span><div id=\"logo-desc\"><a href=\"/\" id=\"logo\"> <img src=\"http://i.imgur.com/vTonx.png\" alt=\"Mercer Teste\"></a> <p><font color=\"#FFFFFF\" face=\"Orator Std\"> OBRIGADO PELA PREFERÊNCIA VOLTE SEMPRE !</font></p></div><span class=\"corners-bottom\"><span></span></span></div></div>\n <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />\n <center> <div id='cssmenu'>\n<ul>\n <li class='active '><a href='index.html'><span>INICIO</span></a></li>\n <li><a href='/forum'><span>FORUM</span></a></li>\n <li><a href='/portfolio'><span>PORTFOLIO</span></a></li>\n <li><a href='/contato'><span>CONTATO</span></a></li>\n <li><a href='http://youtube.com/mindgfx8'><span>YOUTUBE</span></a></li>\n</ul>\n </div>\n <br />\n <a href=\"/forum\"><div class=\"anuncio\"></div></a>\n <br />\n <div class=\"caixatexto\">\n <img src=\"http://r21.imgfast.net/users/2112/28/77/07/smiles/633772.png\">Pagina Criada pelo Designer Gráfico Mercer <br />\n <img src=\"http://r21.imgfast.net/users/2112/28/77/07/smiles/633772.png\">Mais Informações entre em Contato <br />\n <img src=\"http://r21.imgfast.net/users/2112/28/77/07/smiles/633772.png\">Querendo editar esta pagina HTML, Nao retirar Creditos \n <br />\n<img src=\"http://r21.imgfast.net/users/2112/28/77/07/smiles/633772.png\">Cordialmente, Mercer</div>\n </center>\n <body background=\"http://www.escudda.com.br/wp-content/uploads/2012/04/fundo-cinza-escudda-sombreadores.jpg\">\n <br /> <br />\n <a href=\"/forum\"><div class=\"box1\"> <font color=\"#000000\">Anuncie Aqui!</font></div></a>\n <a href=\"/forum\"><div class=\"box2\"> <font color=\"#000000\">Anuncie Aqui!</font></div></a>\n <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />\n <center><div class=\"creditos\"> Creditos ao Autor e Designer Grafico , Mercer </div></center>\n </body>\n </html>\n ","css":".headerbar {\nwidth: 100%;\nposition: absolute;\ntop: 0px;\nleft: 0px;\nheight: auto;\nbackground: url(http://i42.servimg.com/u/f42/15/42/26/78/header16.png);\nbackground-position: 0px -60px;\nborder-bottom: 1px solid #222;\nbox-shadow: 1px 1px 6px #222;\n}\n\n.box1 {\n background-color: #fee938;\n background-image: url(http://ec.comps.canstockphoto.com/can-stock-photo_csp5123766.jpg); \n opacity:0.5;\n background-position: center;\n border: 2px solid #fee938;\n font-family: Orator Std;\n width: 300px;\n height: 200px;\n float:left;\n}\n.box2{ \n background-color: #fee938;\n background-image: url(http://ec.comps.canstockphoto.com/can-stock-photo_csp5123766.jpg); \n opacity:0.5;\n background-position: center;\n border: 2px solid #06c1ff;\n font-family: Orator Std;\n width: 300px;\n height: 200px;\n float:right;\n }\n.anuncio{\n background-image: url(http://www.loogic.com/wp-content/uploads/2007/07/anuncis.gif);\n opacity: 0.6;\n border:1px solid #22dc33;\n font-family:Orator Std;\n background-position:center;\n width:350px;\n height:134px;\n float:center; \n}\n\n.caixatexto {\nbackground-color: #DDD;\nwidth:600px;\nheight:75px;\nborder: 1px solid #53AD77;\n border-radius: 50px;\nfont-family: tahoma,arial,verdana,sans-serif;\nfont-size: 13px;\nfont-weight: 400;\nfont-color:#000000\n}\n\n.creditos {\nbackground-color: #DDD;\nborder: 1px solid #bfbfbf;\nwidth:relative;\nheight:auto;\n font-size: 12px;\nfont-family:tahoma,arial,verdana,sans-serif;\nfont-color:#000000;\n}\n\n/* Let's import the lovely google font, please keep this line at the top of your stylesheet */\n\n@import url(http://fonts.googleapis.com/css?family=Capriola);\n\n\n\n/* Menu CSS */ \n\n#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{\n\t\n\tpadding: 0;\n\tmargin: 0;\n\tline-height: 1;\n\tfont-family: 'Capriola', sans-serif;\n\t\n}\n\n#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {\n\n\tcontent: '';\n\tdisplay: table;\n\t\n}\n\n\n#cssmenu:after, #cssmenu > ul:after {\n\n\tclear: both;\n\t\n}\n\n#cssmenu {\n\n\tzoom:1;\n\theight: 69px;\n\tbackground: url(http://cssmenumaker.com/sites/default/files/menu/150/bottom-bg.png) repeat-x center bottom;\n width:660px;\n\tborder-radius: 2px;\n\t\n}\n\n#cssmenu ul{\n\n\tbackground: url(http://cssmenumaker.com/sites/default/files/menu/150/nav-bg.png) repeat-x 0px 4px;\n width: 660px;\n\theight: 69px;\n\t\n}\n\n#cssmenu ul li{\n\n\tfloat: left;\n\tlist-style: none;\n\t\n}\n\n#cssmenu ul li a{\n\t\n\tdisplay: block;\n\theight: 37px;\n\tpadding: 22px 30px 0;\n\tmargin: 4px 2px 0;\n\tborder-radius: 2px 2px 0 0;\n\ttext-decoration: none;\n\tfont-size: 15px;\n\tcolor: white;\n\ttext-shadow: 0 1px 1px rgba(0, 0, 0, .75);\n\tfont-weight: 400;\n\topacity: .9;\n\t\n}\n\n#cssmenu ul li:first-child a{\n\t\n\tmargin: 4px 2px 0 0;\n\t\n}\n\n#cssmenu ul li a:hover, #cssmenu ul li.active a{\n\t\n\tbackground: url(http://cssmenumaker.com/sites/default/files/menu/150/color.png) center bottom;\n\tdisplay: block;\n\theight: 37px;\n\tmargin-top: 0px;\n\tpadding-top: 26px;\n\tcolor: #616161;\n\ttext-shadow: 0 1px 1px rgba(255, 255, 255, .35);\n\topacity: 1;\n\t\n}\n ","javascript":"/** @license\n * DHTML Snowstorm! JavaScript-based Snow for web pages\n * --------------------------------------------------------\n * Version 1.43.20111201 (Previous rev: 1.42.20111120)\n * Copyright (c) 2007, Scott Schiller. All rights reserved.\n * Code provided under the BSD License:\n * http://schillmania.com/projects/snowstorm/license.txt\n */\n\n/*global window, document, navigator, clearInterval, setInterval */\n/*jslint white: false, onevar: true, plusplus: false, undef: true, nomen: true, eqeqeq: true, bitwise: true, regexp: true, newcap: true, immed: true */\n\nvar snowStorm = (function(window, document) {\n\n // --- common properties ---\n\n this.autoStart = true; // Whether the snow should start automatically or not.\n this.flakesMax = 128; // Limit total amount of snow made (falling + sticking)\n this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)\n this.animationInterval = 33; // Theoretical \"miliseconds per frame\" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower\n this.excludeMobile = true; // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.\n this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for \"full-screen\" snow effect\n this.followMouse = true; // Snow movement can respond to the user's mouse\n this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.\n this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.\n this.snowStick = true; // Whether or not snow should \"stick\" at the bottom. When off, will never collect.\n this.targetElement = null; // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference\n this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it \"melt\" and fade out if browser supports it\n this.useTwinkleEffect = false; // Allow snow to randomly \"flicker\" in and out of view while falling\n this.usePositionFixed = false; // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported\n\n // --- less-used bits ---\n\n this.freezeOnBlur = true; // Only snow when the window is in focus (foreground.) Saves CPU.\n this.flakeLeftOffset = 0; // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.\n this.flakeRightOffset = 0; // Right margin/gutter space on edge of container\n this.flakeWidth = 8; // Max pixel width reserved for snow element\n this.flakeHeight = 8; // Max pixel height reserved for snow element\n this.vMaxX = 5; // Maximum X velocity range for snow\n this.vMaxY = 4; // Maximum Y velocity range for snow\n this.zIndex = 0; // CSS stacking order applied to each snowflake\n\n // --- End of user section ---\n\n var s = this, storm = this, i,\n // UA sniffing and backCompat rendering mode checks for fixed position, etc.\n isIE = navigator.userAgent.match(/msie/i),\n isIE6 = navigator.userAgent.match(/msie 6/i),\n isWin98 = navigator.appVersion.match(/windows 98/i),\n isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),\n isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),\n noFixed = (isMobile || isBackCompatIE || isIE6),\n screenX = null, screenX2 = null, screenY = null, scrollY = null, vRndX = null, vRndY = null,\n windOffset = 2,\n windMultiplier = 3,\n flakeTypes = 6,\n fixedForEverything = false,\n opacitySupported = (function(){\n try {\n document.createElement('div').style.opacity = '0.5';\n } catch(e) {\n return false;\n }\n return true;\n }()),\n didInit = false,\n docFrag = document.createDocumentFragment();\n\n this.timers = [];\n this.flakes = [];\n this.disabled = false;\n this.active = false;\n this.meltFrameCount = 20;\n this.meltFrames = [];\n\n this.events = (function() {\n\n var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,\n evt = {\n add: (old?'attachEvent':'addEventListener'),\n remove: (old?'detachEvent':'removeEventListener')\n };\n\n function getArgs(oArgs) {\n var args = slice.call(oArgs), len = args.length;\n if (old) {\n args[1] = 'on' + args[1]; // prefix\n if (len > 3) {\n args.pop(); // no capture\n }\n } else if (len === 3) {\n args.push(false);\n }\n return args;\n }\n\n function apply(args, sType) {\n var element = args.shift(),\n method = [evt[sType]];\n if (old) {\n element[method](args[0], args[1]);\n } else {\n element[method].apply(element, args);\n }\n }\n\n function addEvent() {\n apply(getArgs(arguments), 'add');\n }\n\n function removeEvent() {\n apply(getArgs(arguments), 'remove');\n }\n\n return {\n add: addEvent,\n remove: removeEvent\n };\n\n }());\n\n function rnd(n,min) {\n if (isNaN(min)) {\n min = 0;\n }\n return (Math.random()*n)+min;\n }\n\n function plusMinus(n) {\n return (parseInt(rnd(2),10)===1?n*-1:n);\n }\n\n this.randomizeWind = function() {\n var i;\n vRndX = plusMinus(rnd(s.vMaxX,0.2));\n vRndY = rnd(s.vMaxY,0.2);\n if (this.flakes) {\n for (i=0; i<this.flakes.length; i++) {\n if (this.flakes[i].active) {\n this.flakes[i].setVelocities();\n }\n }\n }\n };\n\n this.scrollHandler = function() {\n var i;\n // \"attach\" snowflakes to bottom of window if no absolute bottom value was given\n scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));\n if (isNaN(scrollY)) {\n scrollY = 0; // Netscape 6 scroll fix\n }\n if (!fixedForEverything && !s.flakeBottom && s.flakes) {\n for (i=s.flakes.length; i--;) {\n if (s.flakes[i].active === 0) {\n s.flakes[i].stick();\n }\n }\n }\n };\n\n this.resizeHandler = function() {\n if (window.innerWidth || window.innerHeight) {\n screenX = window.innerWidth-16-s.flakeRightOffset;\n screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);\n } else {\n screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;\n screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);\n }\n screenX2 = parseInt(screenX/2,10);\n };\n\n this.resizeHandlerAlt = function() {\n screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;\n screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;\n screenX2 = parseInt(screenX/2,10);\n };\n\n this.freeze = function() {\n // pause animation\n var i;\n if (!s.disabled) {\n s.disabled = 1;\n } else {\n return false;\n }\n for (i=s.timers.length; i--;) {\n clearInterval(s.timers[i]);\n }\n };\n\n this.resume = function() {\n if (s.disabled) {\n s.disabled = 0;\n } else {\n return false;\n }\n s.timerInit();\n };\n\n this.toggleSnow = function() {\n if (!s.flakes.length) {\n // first run\n s.start();\n } else {\n s.active = !s.active;\n if (s.active) {\n s.show();\n s.resume();\n } else {\n s.stop();\n s.freeze();\n }\n }\n };\n\n this.stop = function() {\n var i;\n this.freeze();\n for (i=this.flakes.length; i--;) {\n this.flakes[i].o.style.display = 'none';\n }\n s.events.remove(window,'scroll',s.scrollHandler);\n s.events.remove(window,'resize',s.resizeHandler);\n if (s.freezeOnBlur) {\n if (isIE) {\n s.events.remove(document,'focusout',s.freeze);\n s.events.remove(document,'focusin',s.resume);\n } else {\n s.events.remove(window,'blur',s.freeze);\n s.events.remove(window,'focus',s.resume);\n }\n }\n };\n\n this.show = function() {\n var i;\n for (i=this.flakes.length; i--;) {\n this.flakes[i].o.style.display = 'block';\n }\n };\n\n this.SnowFlake = function(parent,type,x,y) {\n var s = this, storm = parent;\n this.type = type;\n this.x = x||parseInt(rnd(screenX-20),10);\n this.y = (!isNaN(y)?y:-rnd(screenY)-12);\n this.vX = null;\n this.vY = null;\n this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // \"amplification\" for vX/vY (based on flake size/type)\n this.vAmp = this.vAmpTypes[this.type];\n this.melting = false;\n this.meltFrameCount = storm.meltFrameCount;\n this.meltFrames = storm.meltFrames;\n this.meltFrame = 0;\n this.twinkleFrame = 0;\n this.active = 1;\n this.fontSize = (10+(this.type/5)*10);\n this.o = document.createElement('div');\n this.o.innerHTML = storm.snowCharacter;\n this.o.style.color = storm.snowColor;\n this.o.style.position = (fixedForEverything?'fixed':'absolute');\n this.o.style.width = storm.flakeWidth+'px';\n this.o.style.height = storm.flakeHeight+'px';\n this.o.style.fontFamily = 'arial,verdana';\n this.o.style.cursor = 'default';\n this.o.style.overflow = 'hidden';\n this.o.style.fontWeight = 'normal';\n this.o.style.zIndex = storm.zIndex;\n docFrag.appendChild(this.o);\n\n this.refresh = function() {\n if (isNaN(s.x) || isNaN(s.y)) {\n // safety check\n return false;\n }\n s.o.style.left = s.x+'px';\n s.o.style.top = s.y+'px';\n };\n\n this.stick = function() {\n if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {\n s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';\n } else if (storm.flakeBottom) {\n s.o.style.top = storm.flakeBottom+'px';\n } else {\n s.o.style.display = 'none';\n s.o.style.top = 'auto';\n s.o.style.bottom = '0px';\n s.o.style.position = 'fixed';\n s.o.style.display = 'block';\n }\n };\n\n this.vCheck = function() {\n if (s.vX>=0 && s.vX<0.2) {\n s.vX = 0.2;\n } else if (s.vX<0 && s.vX>-0.2) {\n s.vX = -0.2;\n }\n if (s.vY>=0 && s.vY<0.2) {\n s.vY = 0.2;\n }\n };\n\n this.move = function() {\n var vX = s.vX*windOffset, yDiff;\n s.x += vX;\n s.y += (s.vY*s.vAmp);\n if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check\n s.x = 0;\n } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {\n s.x = screenX-storm.flakeWidth-1; // flakeWidth;\n }\n s.refresh();\n yDiff = screenY+scrollY-s.y;\n if (yDiff<storm.flakeHeight) {\n s.active = 0;\n if (storm.snowStick) {\n s.stick();\n } else {\n s.recycle();\n }\n } else {\n if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {\n // ~1/1000 chance of melting mid-air, with each frame\n s.melting = true;\n s.melt();\n // only incrementally melt one frame\n // s.melting = false;\n }\n if (storm.useTwinkleEffect) {\n if (!s.twinkleFrame) {\n if (Math.random()>0.9) {\n s.twinkleFrame = parseInt(Math.random()*20,10);\n }\n } else {\n s.twinkleFrame--;\n s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'invisible');\n }\n }\n }\n };\n\n this.animate = function() {\n // main animation loop\n // move, check status, die etc.\n s.move();\n };\n\n this.setVelocities = function() {\n s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);\n s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);\n };\n\n this.setOpacity = function(o,opacity) {\n if (!opacitySupported) {\n return false;\n }\n o.style.opacity = opacity;\n };\n\n this.melt = function() {\n if (!storm.useMeltEffect || !s.melting) {\n s.recycle();\n } else {\n if (s.meltFrame < s.meltFrameCount) {\n s.setOpacity(s.o,s.meltFrames[s.meltFrame]);\n s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';\n s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';\n s.meltFrame++;\n } else {\n s.recycle();\n }\n }\n };\n\n this.recycle = function() {\n s.o.style.display = 'none';\n s.o.style.position = (fixedForEverything?'fixed':'absolute');\n s.o.style.bottom = 'auto';\n s.setVelocities();\n s.vCheck();\n s.meltFrame = 0;\n s.melting = false;\n s.setOpacity(s.o,1);\n s.o.style.padding = '0px';\n s.o.style.margin = '0px';\n s.o.style.fontSize = s.fontSize+'px';\n s.o.style.lineHeight = (storm.flakeHeight+2)+'px';\n s.o.style.textAlign = 'center';\n s.o.style.verticalAlign = 'baseline';\n s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);\n s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;\n s.refresh();\n s.o.style.display = 'block';\n s.active = 1;\n };\n\n this.recycle(); // set up x/y coords etc.\n this.refresh();\n\n };\n\n this.snow = function() {\n var active = 0, used = 0, waiting = 0, flake = null, i;\n for (i=s.flakes.length; i--;) {\n if (s.flakes[i].active === 1) {\n s.flakes[i].move();\n active++;\n } else if (s.flakes[i].active === 0) {\n used++;\n } else {\n waiting++;\n }\n if (s.flakes[i].melting) {\n s.flakes[i].melt();\n }\n }\n if (active<s.flakesMaxActive) {\n flake = s.flakes[parseInt(rnd(s.flakes.length),10)];\n if (flake.active === 0) {\n flake.melting = true;\n }\n }\n };\n\n this.mouseMove = function(e) {\n if (!s.followMouse) {\n return true;\n }\n var x = parseInt(e.clientX,10);\n if (x<screenX2) {\n windOffset = -windMultiplier+(x/screenX2*windMultiplier);\n } else {\n x -= screenX2;\n windOffset = (x/screenX2)*windMultiplier;\n }\n };\n\n this.createSnow = function(limit,allowInactive) {\n var i;\n for (i=0; i<limit; i++) {\n s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));\n if (allowInactive || i>s.flakesMaxActive) {\n s.flakes[s.flakes.length-1].active = -1;\n }\n }\n storm.targetElement.appendChild(docFrag);\n };\n\n this.timerInit = function() {\n s.timers = (!isWin98?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);\n };\n\n this.init = function() {\n var i;\n for (i=0; i<s.meltFrameCount; i++) {\n s.meltFrames.push(1-(i/s.meltFrameCount));\n }\n s.randomizeWind();\n s.createSnow(s.flakesMax); // create initial batch\n s.events.add(window,'resize',s.resizeHandler);\n s.events.add(window,'scroll',s.scrollHandler);\n if (s.freezeOnBlur) {\n if (isIE) {\n s.events.add(document,'focusout',s.freeze);\n s.events.add(document,'focusin',s.resume);\n } else {\n s.events.add(window,'blur',s.freeze);\n s.events.add(window,'focus',s.resume);\n }\n }\n s.resizeHandler();\n s.scrollHandler();\n if (s.followMouse) {\n s.events.add(isIE?document:window,'mousemove',s.mouseMove);\n }\n s.animationInterval = Math.max(20,s.animationInterval);\n s.timerInit();\n };\n\n this.start = function(bFromOnLoad) {\n if (!didInit) {\n didInit = true;\n } else if (bFromOnLoad) {\n // already loaded and running\n return true;\n }\n if (typeof s.targetElement === 'string') {\n var targetID = s.targetElement;\n s.targetElement = document.getElementById(targetID);\n if (!s.targetElement) {\n throw new Error('Snowstorm: Unable to get targetElement \"'+targetID+'\"');\n }\n }\n if (!s.targetElement) {\n s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);\n }\n if (s.targetElement !== document.documentElement && s.targetElement !== document.body) {\n s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions\n }\n s.resizeHandler(); // get bounding box elements\n s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported\n fixedForEverything = s.usePositionFixed;\n if (screenX && screenY && !s.disabled) {\n s.init();\n s.active = true;\n }\n };\n\n function doDelayedStart() {\n window.setTimeout(function() {\n s.start(true);\n }, 20);\n // event cleanup\n s.events.remove(isIE?document:window,'mousemove',doDelayedStart);\n }\n\n function doStart() {\n if (!s.excludeMobile || !isMobile) {\n if (s.freezeOnBlur) {\n s.events.add(isIE?document:window,'mousemove',doDelayedStart);\n } else {\n doDelayedStart();\n }\n }\n // event cleanup\n s.events.remove(window, 'load', doStart);\n }\n\n // hooks for starting the snow\n if (s.autoStart) {\n s.events.add(window, 'load', doStart, false);\n }\n\n return this;\n\n}(window, document));","url":"http://jsbin.com/abodeb/2"};
var jsbin = {"root":"http://jsbin.com","static":"http://static.jsbin.com","version":"3.0.19","state":{"token":"Ff9wRbu+iKEeutmMoh5IRFW2","stream":false,"code":"abodeb","revision":2,"processors":{},"checksum":null},"settings":{"panels":[]}}; tips = {};
</script>
<script src="http://static.jsbin.com/js/jsbin-3.0.19.min.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1656750-13']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
</body>
</html>
preview: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
