Skip to content

Instantly share code, notes, and snippets.

@yajd

yajd/_noitidart.github.io

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yajd/9332815 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yajd/9332815 to your computer and use it in GitHub Desktop.
Download ZIP
todo: noitidart.github.io
Raw
_noitidart.github.io
in chrome
-the class sicial_icons is blocked by adblock
-on refresh or tab dupe the form doent remember
contact:
5px padding on boxes is making it exceed form width, one soln is to set width to 300px (right now is 100%)
_ig-commit - 3/3/14
fixed form
swapping skillset now slides but doesnt show the middle slide
restarting anim on skillset slide
initial work on content sizing
_ig-commit - 3/4/14
* Removed reliance on onanimationend event listener to repeat animations
* Made so animations trigger even when selecting main tab of "My Skills"
* Removed the top from anim because then i was having to set top to 43px on the anim and i dont want to bother calcing this, plus i think it makes it heavier on the css calc anim browser performance, using visibilty now, could not use display as its not animatable
* Had to change content height of skillset to use MarginTop instead of PaddingTop I cant figure out how skillset is getting a top and bottom margin of 14px (its right left are 0)
* Fixed padding issues on bottom of content-# so now makes sure to have 15px or whatever is the bottom padding of the content-# divs, the issue was the last element should not have 0 margin-bottom
* Fixed up the contentSizing function to account for skillsets
* Changed css so content-#'s padding-bottom is 30px instead of 15px
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class=" js " xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Noitidart - Firefox Addon Developer</title>
<link rel="stylesheet" type="text/css" href="site_files/style.css">
<link rel="stylesheet" type="text/css" href="site_files/fontello.css">
<script src="site_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript" src="site_files/modernizr.js"></script>
<link href="site_files/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="site_files/jquery.js"></script>
<script>
var last_tabs_radio;
var last_tabs2_radio;
function sizeContentToContents() {
var tabs_radio = $('input[name=radio-set]:checked').attr('class');
var tabs2_radio = $('input[name=tab-2-radio-set]:checked').attr('class');
var content = $('.content');
if (last_tabs_radio == 'tab-selector-2' && tabs_radio == 'tab-selector-2') {
content.addClass('skillsetDelay');
content.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
content.removeClass('skillsetDelay');
});
}
var elsToAccountForHeight = [];
switch (tabs_radio) {
case 'tab-selector-1':
elsToAccountForHeight.push($('.content-1'));
break;
case 'tab-selector-2':
elsToAccountForHeight.push($('.content-2'));
switch (tabs2_radio) {
case 'tab-2-tab-selector-1':
elsToAccountForHeight.push($('.skillset:nth-of-type(1)'));
break;
case 'tab-2-tab-selector-2':
elsToAccountForHeight.push($('.skillset:nth-of-type(2)'));
break;
case 'tab-2-tab-selector-3':
elsToAccountForHeight.push($('.skillset:nth-of-type(3)'));
break;
default:
alert('unsupported tabs2_radio');
}
break;
case 'tab-selector-3':
elsToAccountForHeight.push($('.content-3'));
break;
default:
alert('unsupported tabs_radio');
}
var totalHeight = 0;
$.each(elsToAccountForHeight, function(i, el) {
var contentsHeight = parseInt(el.css('height'));
var paddingTop = parseInt(el.css('padding-top'));
var paddingBtm = parseInt(el.css('padding-bottom'));
var marginTop = parseInt(el.css('margin-top'));
var marginBtm = parseInt(el.css('margin-bottom'));
totalHeight += contentsHeight + paddingTop + paddingBtm + marginTop + marginBtm;
});
content.height(totalHeight);
last_tabs2_radio = tabs2_radio;
last_tabs_radio = tabs_radio;
}
$( document ).ready(function() {
sizeContentToContents();
$('input[type=radio]').change(function() {
sizeContentToContents();
});
$("textarea").mousedown(function() {
$(document).on('mousemove', sizeContentToContents);
//todo: only add the mousemove if the users mouse coords are near the bottom right
//todo: need to remove mousemvoe on highlight as they are obviously not in highlight area
});
$("textarea").on('mouseleave', sizeContentToContents); //to handle if user dbl clicks the resizer, which restoes original dimensons to ta //tsted and cannot add this event during mousdown and rem on mouseup. as when it rems on mouseup it is rendered useless on the resizer dbl click
$("textarea").mouseup(function() {
$(document).off('mousemove', sizeContentToContents);
//sizeContentToContents();
});
$('form > *').removeAttr('disabled','false');
});
var submitting = true;
function onsendbtnanimiter() {
if (!submitting) {
//do it this way because we want to stop animation after sendingComplete AND iteration complete
$('form').removeClass('sending');
$('form')[0].reset();
$('form > *').removeAttr('disabled','false');
//if no errors then reset form and notify success else notify issue
}
}
function sendForm() {
//animationiteration
$('form').addClass('sending');
$('form > *').removeAttr('disabled','true');
$('form > .button').one ('animationiteration', onsendbtnanimiter);
setTimeout(function() {
submitting = false;
}, 100);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-48501852-1']);
_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';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="pro_cover">
<img src="site_files/avatar.jpg" class="pro_dp"> <span class="name">Noitidart</span>
<p class="tw-name">Firefox Addon Developer</p>
<ul class="my_resources">
<li><a href="https://gist.github.com/Noitidart"><i class="icon-gist"></i></a></li>
<li><a href="https://github.com/Noitidart/"><i class="icon-github"></i></a></li>
<li><a href="http://stackoverflow.com/users/1828637/noitidart"><i class="icon-stackoverflow"></i></a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/user/Noitidart/"><i class="icon-firefox"></i></a></li>
</ul>
<section class="tabs">
<input id="tab-1" name="radio-set" class="tab-selector-1" type="radio" checked="checked">
<label for="tab-1" class="tab-label-1"><i class="icon-about-me"></i></label>
<input id="tab-2" name="radio-set" class="tab-selector-2" type="radio">
<label for="tab-2" class="tab-label-2"><i class="icon-trophy"></i></label>
<input id="tab-3" name="radio-set" class="tab-selector-3" type="radio">
<label for="tab-3" class="tab-label-3"><i class="icon-mail"></i></label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<p>I am a Firefox Addon ethusiast and an avid developer. My
aim is to make great addons and help others do the same. I created this
page to showcase these resources. Read below to learn about the four
shortcuts above.</p>
<h3>Gists</h3>
<p>Useful bits of code to help you build Firefox addons. I chose
Gists as the venue to share because edits are version controlled, code
is easily forked, and discussion can take place right on the Gist page.</p>
<p>Related Gists are prefixed with <i>_ff-addon-TYPE</i>. Type is either <i>snippet</i> or <i>template</i></p>
<h4>Snippet</h4>
<p>These are codes you can copy and paste to "Scratchpad" in Firefox. Set the "Environment" to "Browser" and run.</p>
<h4>Template</h4>
<p>These are full addons but very basic, ready to fork and personalize. I start all my addons based on one of these templates.</p>
<h3>GitHub</h3>
<p>All that I know today is thanks to open source projects. All my codes are available here.</p>
<h3>Stackoverflow</h3>
<p>If you need help with any of my Gists or anything Firefox addon
dev related, ask the question here and I will be sure to get to you.</p>
<h3>AMO</h3>
<p>Find all my released addons here.</p>
</div>
<div class="content-2">
<input id="tab-2-tab-1" name="tab-2-radio-set" class="tab-2-tab-selector-1" checked="checked" type="radio">
<label for="tab-2-tab-1" class="tab-2-tab-label-1">General</label>
<input id="tab-2-tab-2" name="tab-2-radio-set" class="tab-2-tab-selector-2" type="radio">
<label for="tab-2-tab-2" class="tab-2-tab-label-2">Firefox</label>
<input id="tab-2-tab-3" name="tab-2-radio-set" class="tab-2-tab-selector-3" type="radio">
<label for="tab-2-tab-3" class="tab-2-tab-label-3">Javascript</label>
<h2>My Skills</h2>
<ul class="skillset">
<li><span class="skill css3"><span></span></span><span>CSS 3</span></li>
<li><span class="skill html5"><span></span></span><span>HTML 5</span></li>
<li><span class="skill git"><span></span></span><span>Git &amp; GitHub</span></li>
<li><span class="skill javascript"><span></span></span><span>Javascript</span></li>
<li><span class="skill sql"><span></span></span><span>MySQL, SQL, SQLite</span></li>
<li><span class="skill npp"><span></span></span><span>Notepad++</span></li>
<li><span class="skill php"><span></span></span><span>PHP</span></li>
<li><span class="skill vb"><span></span></span><span>Visual Basic 6.0 &amp; VBA</span></li>
</ul>
<ul class="skillset">
<li><span class="skill css3"><span></span></span><span>nsIWindowsMediatorService</span></li>
<li><span class="skill css3"><span></span></span><span>nsIPromptService</span></li>
<li><span class="skill css3"><span></span></span><span>nsIHttpChannel</span></li>
<li><span class="skill css3"><span></span></span><span>cTypes</span></li>
<li><span class="skill css3"><span></span></span><span>Bootstrap</span></li>
<li><span class="skill css3"><span></span></span><span>nsIZipWriter</span></li>
<li><span class="skill css3"><span></span></span><span>nsIXMLHttpRequest, nsIXMLHttpRequestEventTarget, &amp; nsIJSXMLHttpRequest</span></li>
<li><span class="skill css3"><span></span></span><span>nsITimer</span></li>
</ul>
<ul class="skillset">
<li><span class="skill html5"><span></span></span><span>prototype &amp; scritp.aculo.us</span></li>
<li><span class="skill html5"><span></span></span><span>jQuery</span></li>
<li><span class="skill html5"><span></span></span><span>Canvas</span></li>
<li><span class="skill html5"><span></span></span><span>RegExp</span></li>
<li><span class="skill html5"><span></span></span><span>Custom, Native, &amp; CSS3 Events</span></li>
</ul>
</div>
<div class="content-3">
<h2>Contact Me</h2>
<form class="form-wrapper-01">
<input id="" class="inputbox" placeholder="Your Name" type="text">
<input id="" class="inputbox" placeholder="Your Email" type="text">
<textarea id="" class="message_box" type="textarea" placeholder="Message"></textarea>
<a href="#" onclick="sendForm();return false" draggable="false" class="button"></a>
</form>
</div>
</div>
</section>
</div>
</body></html>
Raw
style.css
@charset "utf-8";
/* CSS Document */
ul.my_resources li a {
transition: opacity 0.1s;
}
.my_resources i {
border-radius: 50%;
color: #000;
background-color: #FFF;
padding: 7px;
}
h1, h2, h3, h4, h5, h6, h7 {
margin: 0;
}
body {
margin:0;
padding:0;
background:#EDE9DF url(img/topbg.png) top repeat-x fixed;
font-family: "Open Sans",sans-serif;
font-size:14px;
}
ul {
padding:0;
}
.pro_cover {
width:390px;
height:400px;
background:#000 url(img/cover.png) top center no-repeat;
margin:100px auto 0;
text-align:center;
border-radius: 7px 7px 0 0;
}
.pro_cover .name {
font-size:30px;
color:#fff;
margin:10px 0;
}
.pro_cover .tw-name {
color:#eee;
font-size: 15px;
font-style: italic;
font-weight: 600;
margin: 0 0 10px;
}
.pro_dp {
border: 8px solid #fff;
border-radius:50%;
box-shadow: 0 0 7px #898989;
margin: -20% 24% 5%;
width: 150px;
}
ul.my_resources {
list-style:none;
cursor: default;
}
ul.my_resources li{
display:inline-block;
margin:0 12px;
font-size:16px;
line-height: 46px;
}
ul.my_resources li a {
text-decoration:none;
outline:none;
opacity:0.8;
color:#fff;
}
ul.my_resources li a:hover {
opacity:1;
}
.skillset {
list-style:none;
width:310px;
padding-left:0 !important; /*i dont know why he set this to ipmortant*/
position: absolute;
vertical-align: top;
}
.skillset li {
margin-bottom:15px;
background:#eaedf2;
height:30px;
border-radius:3px;
}
.skillset li:last-of-type {
margin-bottom:0;
}
.skillset li em {
position:relative;
top:-30px;
}
.skill > span, .skill + span {
border-radius: 3px;
color: #323A45;
font-style: italic;
font-weight: bold;
height: 18px;
margin: 2px 0;
padding: 4px 0;
position: absolute;
}
.skill + span {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;
text-indent:5px;
}
.skill { position:relative; display:block }
.skill > span { width:100%; } /*-moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; -o-animation:anim-skill 2s ease-out; animation:anim-skill 2s ease-out;*/
.css3 { width: 65%; }
.css3 > span { background:#fed201; }
.git { width: 25%; }
.git > span { background:#E2A9F3; }
.html5 { width: 70%; }
.html5 > span { background:#14bad4; }
.javascript { width: 90%; }
.javascript > span { background:#f5696c; }
.npp { width: 40%; }
.npp > span { background:#c6de64; }
.php { width: 50%; }
.php > span { background:#5ac5bd; }
.vb { width: 40%; }
.vb > span { background:#FE9A2E; }
.sql { width: 45%; }
.sql > span { background:#A9BCF5; }
.anim-skill {width:100%; animation:anim-skill 2s ease-out; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; -o-animation:anim-skill 2s ease-out;}
@keyframes anim-skill { from {width:0px;} to {width:100%} }
@-moz-keyframes anim-skill { from {width:0px;} to {width:100%} }
@-webkit-keyframes anim-skill { from {width:0px;} to {width:100%} }
@-o-keyframes anim-skill { from {width:0px;} to {width:100%} }
.skillset {
display: inline-block;
}
.content-2 h2 {
width: 310px; /*the width of pro-cover minus 40px padding left and right. otherwise the float doesnt happen right because content-2 width is width of just the h2 text*/
}
/*start h5*/
.content-2 input[type=radio] {
position: absolute;
z-index: 1000;
cursor: pointer;
display: none;
}
.content-2 label {
cursor: pointer;
background: #F47564;
font-size: 10.5px;
float: right;
padding: 0 4px;
color: #fff;
border-radius: 2px;
margin: 3px 3px 0 0;
font-weight: bold;
}
.content-2 input:hover + label {
background: #59c4bc;
}
.content-2 label:first-of-type {
z-index: 3;
/*box-shadow: 2px 0 2px rgba(0,0,0,0.1);*/
}
.tab2-tab-label-2 {
z-index: 2;
}
.tab2-tab-label-3 {
z-index: 1;
}
.content-2 input:checked + label {
background: #59c4bc;
color: #000; /*#2c2c2c*/
z-index: 6;
}
/*
.skillset {
opacity: 0;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}
.content-2 input.tab-2-tab-selector-1:checked ~ #skills > .skillset:nth-of-type(1),
.content-2 input.tab-2-tab-selector-2:checked ~ #skills > .skillset:nth-of-type(2),
.content-2 input.tab-2-tab-selector-3:checked ~ #skills > .skillset:nth-of-type(3),
.content-2 input.tab-2-tab-selector-4:checked ~ #skills > .skillset:nth-of-type(4) {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
*/
.skillset {
left: 40px;
visibility: hidden;
/*
-webkit-transition: left cubic-bezier(1, 0, 0, 1) 0.2s;
-moz-transition: left cubic-bezier(1, 0, 0, 1) 0.2s;
-o-transition: left cubic-bezier(1, 0, 0, 1) 0.2s;
-ms-transition: left cubic-bezier(1, 0, 0, 1) 0.2s;*/
transition: left cubic-bezier(1, 0, 0, 1) 1s, visibility linear 0s 1s;
}
.content-2 input.tab-2-tab-selector-1:checked ~ .skillset:nth-of-type(1) { left:40px;visibility: visible;transition: left cubic-bezier(1, 0, 0, 1) 1s, visibility linear 0s 0s;}
.tabs > input.tab-selector-2:checked ~ .content .content-2 input.tab-2-tab-selector-1:checked ~ .skillset:nth-of-type(1) .skill > span { -moz-animation:anim-skill 2s ease-out } /*this anim also runs on load*/
.content-2 input.tab-2-tab-selector-1:checked ~ .skillset:nth-of-type(2) { left:-350px;}
.content-2 input.tab-2-tab-selector-1:checked ~ .skillset:nth-of-type(3) { left:-350px;}
.content-2 input.tab-2-tab-selector-2:checked ~ .skillset:nth-of-type(1) { left:430px;}
.content-2 input.tab-2-tab-selector-2:checked ~ .skillset:nth-of-type(2) { left:40px;visibility: visible;transition: left cubic-bezier(1, 0, 0, 1) 1s, visibility linear 0s 0s;}
.tabs > input.tab-selector-2:checked ~ .content .content-2 input.tab-2-tab-selector-2:checked ~ .skillset:nth-of-type(2) .skill > span { -moz-animation:anim-skill 2s ease-out; }
.content-2 input.tab-2-tab-selector-2:checked ~ .skillset:nth-of-type(3) { left:-350px;}
.content-2 input.tab-2-tab-selector-3:checked ~ .skillset:nth-of-type(1) { left:430px;}
.content-2 input.tab-2-tab-selector-3:checked ~ .skillset:nth-of-type(2) { left:430px;}
.content-2 input.tab-2-tab-selector-3:checked ~ .skillset:nth-of-type(3) { left:40px;visibility: visible;transition: left cubic-bezier(1, 0, 0, 1) 1s, visibility linear 0s 0s;}
.tabs > input.tab-selector-2:checked ~ .content .content-2 input.tab-2-tab-selector-3:checked ~ .skillset:nth-of-type(3) .skill > span { -moz-animation:anim-skill 2s ease-out; }
/*end h5*/
/*end - my skills content*/
.tabs {
position: relative;
margin: 20px auto;
width: 390px;
/*border-radius: 0 0 7px 7px;*/
}
.tabs > input[type=radio] {
position: absolute;
z-index: 1000;
width: 125px;
height: 60px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}
.tabs > input#tab-2{
left: 133px;
}
.tabs > input#tab-3{
left: 265px;
}
.tabs > label {
cursor: pointer;
background: #F47564;
font-size: 34px;
line-height: 60px;
height: 50px;
position: relative;
padding:14px 20px 0;
float: left;
display: block;
width: 90px;
color: #fff;
text-align: center;
}
.tabs > label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs > input:hover + label {
background: #59c4bc;
}
/*
.tabs > label:first-of-type {
z-index: 3;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
*//*commented out this above but its orig maybe still relavent to my future betterment of the boxshadow on these tabs buttons*/
.tabs {
overflow: hidden;
}
.tabs > label {
z-index: 3;
box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.05); /*box-shadow: 0px -2px 2px 2px rgba(0, 0, 0, 0.1);*/
}
.tab-label-2 {
z-index: 2;
}
.tab-label-3 {
z-index: 1;
}
.tabs > input:checked + label {
background: #fff;
color:#2c2c2c;
z-index: 6;
}
.clear-shadow {
clear: both;
}
.content {
background: #fff;
position: relative;
text-align: left;
width: 100%;
z-index: 5;
border-radius: 0 0 2px 2px;
transition: height linear 0.1s; /*for skillset need to use delay of 0.4s*/
}
.skillsetDelay { /*for use to apply to content*/
transition: height linear 0.1s 0.5s; /*for skillset need to use delay of 0.4s*/
}
.content div {
position: absolute;
top: 0;
left: 0;
padding: 15px 40px 30px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}
.tabs > input.tab-selector-1:checked ~ .content .content-1,
.tabs > input.tab-selector-2:checked ~ .content .content-2,
.tabs > input.tab-selector-3:checked ~ .content .content-3,
.tabs > input.tab-selector-4:checked ~ .content .content-4 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
color: #398080;
}
.content div p {
color: #777777;
line-height: 22px;
margin: 0 0 10px 0;
text-align: left;
}
.content div > *:last-child { /*should be last-child that is not position:absolute, its ok though, the last ul in content-2, the last skillset is getting margin-bottom 0 its fine though because i have to give all skillsets margin-bottom of 0 but i have to leave that .skilset:last-of-type {margin-bottom:0} intact*/
margin-bottom: 0 !important;
}
.form-wrapper-01 {
margin: 0;
margin-top: 10px; /*replaced padding: 10px 0;*/
text-align: center; /*centers the send button*/
position: relative;
}
.form-wrapper-01 .inputbox {
border: 1px solid #eaedf2;
background:#eaedf2;
border-radius:3px;
height: 20px;
padding: 10px 5px;
width: 300px;
outline:none;
margin-bottom:10px;
font-family: "Open Sans",sans-serif;
}
.form-wrapper-01 *[class*=box]::-webkit-input-placeholder { color:rgba(0,0,0,.5); }
.form-wrapper-01 *[class*=box]:-moz-placeholder { color:rgba(0,0,0,.5); }
.form-wrapper-01 *[class*=box]::-moz-placeholder { color:rgba(0,0,0,.5); }
.form-wrapper-01 *[class*=box]:-ms-input-placeholder { color:rgba(0,0,0,.5); }
.form-wrapper-01 .inputbox[placeholder="Your Name"] {
text-indent: 32px;
background: url('img/your_name.png') no-repeat scroll 9px center #EAEDF2;
}
.form-wrapper-01 .inputbox[placeholder="Your Email"] {
text-indent: 32px;
background: url('img/your_email.png') no-repeat scroll 9px center #EAEDF2; /*for x =(textindent/2) - Math.ceil(imgWidth/2) do math.ceil because when i made the image it was not perfectly center it was 1px heavier on left*/
}
.form-wrapper-01 .message_box {
border: 1px solid #eaedf2;
background:#eaedf2;
border-radius:3px;
height: 100px;
padding: 10px 5px;
width: 300px;
outline:none;
margin-bottom:10px;
resize: vertical;
}
.form-wrapper-01 .button {
background: none repeat scroll 0 0 #14B9D5;
border: none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: inherit;
font-size: 15px;
font-weight: 700;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
}
.form-wrapper-01 .button:before {
content: 'SEND';
}
.sending > *{
/*todo: figure out if these are crossbrowser*/ /*todo: note this is low priority because im using js right now, it makes sense because if no js enabled can never set form class to sending*/
/*-moz-user-focus: ignore; /*ignore | normal*/
/*-moz-user-select: none; /*none | text | all | element | -moz-none*/
/*user-select: none; /*none | text | all | element | -moz-none*/
/*-moz-user-input: disabled; /*none | enabled | disabled | inherit*/
/*-moz-user-modify: read-only; /*-moz-user-modify: read-only | read-write | write-only*/
}
.sending .button:before {
content: 'SENDING';
}
.sending .button:after {
animation:btnanim 1s linear 5; -moz-animation:btnanim 1s linear 5; -webkit-animation:btnanim 1s linear 5; -o-animation:btnanim 1s linear 5;
}
/*
@keyframes btnanim { from {transform:rotate(0deg);} to {transform:rotate(360deg)} }
@-moz-keyframes btnanim { from {transform:rotate(0deg);} to {transform:rotate(360deg)} }
@-webkit-keyframes btnanim { from {transform:rotate(0deg);} to {transform:rotate(360deg)} }
@-o-keyframes btnanim { from {transform:rotate(0deg);} to {transform:rotate(360deg)} }
*/
/*@keyframes btnanim { 0% {top:25%;} 25% {top:0%;} 100% {top:57%} }*/
/*@keyframes btnanim { 0% {top:0%)} 50% {top: -130%} 50.1% {top: 155%} 100%{top:0%}}*/ /*works how i want it to but not at an angle*/
@keyframes btnanim { 0% {top:0%;left:0%} 50% {top: -130%;left:25%;} 50.1% {top: 155%;left:-25%;} 100%{top:0%;left:0%;}}
.form-wrapper-01 .button:after {
content: '\e80e';
font-family: "fontello";
font-weight: normal;
font-size: 20px;
position: relative;
padding-top: 1px;
padding-left: 10px;
padding-right: 0px;
color: black;
top: 0%;
left: 0%;
}
.form-wrapper-01 .button:hover {
background:#0e778a;
}
.sending:after {
content: '';
width: 100%;
height: 83%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
opacity: .4;
z-index: 1; /*otherwise the after element in the button is on top of this*/
cursor: wait;
}
.sending:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #fff;
opacity: 0;
z-index: 1; /*otherwise the after element in the button is on top of this*/
cursor: wait;
}
@Noitidart

Noitidart commented Mar 22, 2014

Copy link
Copy Markdown

also take the tea timer markup code and put it in gist i cant port it to my ideas wiki

@Noitidart

Noitidart commented Mar 22, 2014

Copy link
Copy Markdown

also take the tea timer markup code and put it in gist i cant port it to my ideas wiki

@Noitidart

Noitidart commented Apr 22, 2014

Copy link
Copy Markdown 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Noitidart - Firefox Addon Developer</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="font/css/fontello.css" />
        <script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            var last_tabs_radio;
            var last_tabs2_radio;
            function sizeContentToContents() {
                var tabs_radio = $('input[name=radio-set]:checked').attr('class');
                var tabs2_radio = $('input[name=tab-2-radio-set]:checked').attr('class');
                var content = $('.content');

                if (last_tabs_radio == 'tab-selector-2' && tabs_radio == 'tab-selector-2') {
                    content.addClass('skillsetDelay');
                    content.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
                        content.removeClass('skillsetDelay');
                    });
                }

                var elsToAccountForHeight = [];
                switch (tabs_radio) {
                    case 'tab-selector-1':
                        elsToAccountForHeight.push($('.content-1'));
                        break;
                    case 'tab-selector-2':
                        elsToAccountForHeight.push($('.content-2'));
                        switch (tabs2_radio) {
                            case 'tab-2-tab-selector-1':
                                elsToAccountForHeight.push($('.skillset:nth-of-type(1)'));
                                break;
                            case 'tab-2-tab-selector-2':
                                elsToAccountForHeight.push($('.skillset:nth-of-type(2)'));
                                break;
                            case 'tab-2-tab-selector-3':
                                elsToAccountForHeight.push($('.skillset:nth-of-type(3)'));
                                break;
                            default:
                                alert('unsupported tabs2_radio');
                        }
                        break;
                    case 'tab-selector-3':
                        elsToAccountForHeight.push($('.content-3'));
                        break;
                    default:
                        alert('unsupported tabs_radio');
                }

                var totalHeight = 0;
                $.each(elsToAccountForHeight, function(i, el) {
                    var contentsHeight = parseInt(el.css('height'));
                    var paddingTop = parseInt(el.css('padding-top'));
                    var paddingBtm = parseInt(el.css('padding-bottom'));
                    var marginTop = parseInt(el.css('margin-top'));
                    var marginBtm = parseInt(el.css('margin-bottom'));
                    totalHeight += contentsHeight + paddingTop + paddingBtm + marginTop + marginBtm;
                });

                content.height(totalHeight);
                last_tabs2_radio = tabs2_radio;
                last_tabs_radio = tabs_radio;
                }

            $( document ).ready(function() {
                sizeContentToContents();
                $('input[type=radio]').change(function() {
                    sizeContentToContents();
                });

                $("textarea").mousedown(function() {
                    $(document).on('mousemove', sizeContentToContents);
                    //todo: only add the mousemove if the users mouse coords are near the bottom right
                    //todo: need to remove mousemvoe on highlight as they are obviously not in highlight area
                });
                $("textarea").on('mouseleave', sizeContentToContents); //to handle if user dbl clicks the resizer, which restoes original dimensons to ta //tsted and cannot add this event during mousdown and rem on mouseup. as when it rems on mouseup it is rendered useless on the resizer dbl click
                $("textarea").mouseup(function() {
                    $(document).off('mousemove', sizeContentToContents);
                    //sizeContentToContents();
                });
                $('form > *').removeAttr('disabled','false');

                $('form > .button').on('animationiteration', onsendbtnanimiter);
            });

            var submitting;
            function onsendbtnanimiter() {
                if (!submitting) {
                    //do it this way because we want to stop animation after sendingComplete AND iteration complete
                    $('form').removeClass('sending');
                    $('form > *').removeAttr('disabled','false');

                    if (sendSuccess) {
                        $('form')[0].reset();
                        //alert('succesfull sent msg');
                    } else {
                        //alert('something went wrong and message was NOT sent');
                    }
                    //if no errors then reset form and notify success else notify issue
                }
            }

            var sendSuccess = false;
            function sendForm() {
                //animationiteration
                submitting = true;
                $('form').addClass('sending');
                $('form > *').attr('disabled','true');

                var serializedData = $('form').serializeArray();
                var data = {};
                for (var i=0; i<serializedData.length; i++) {
                    data[serializedData[i].name] = serializedData[i].value;
                }
                console.log('serializedData',serializedData);
                sendSuccess = false;
                $.ajax({
                        url: "http://noitidart.herobo.com/mail.php",
                        type: "post",
                        data: data,
                        dataType: 'json',
                        // callback handler that will be called on success
                        success: function(response, textStatus, jqXHR){
                            // log a message to the console
                            sendSuccess = true;
                            alert('SUCCESS');
                        },
                        // callback handler that will be called on completion
                        // which means, either on success or error
                        complete: function(e) {
                            // enable the inputs
                            console.log(e);
                            submitting = false;
                            alert('complete');
                        },
                        error: function() {
                            alert('err');
                        }
                });

                // setTimeout(function() {
                //    submitting = false;
                // }, 2000);
            }

        </script>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-48501852-1']);
            _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';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    <body>
    <div class="pro_cover"> 
      <img src="img/avatar.jpg" class="pro_dp" /> <span class="name">Noitidart</span>
      <p class="tw-name">Firefox Addon Developer</p>
      <ul class="my_resources">
        <li><a href="https://gist.github.com/Noitidart"><i class="icon-gist"></i></a></li>
        <li><a href="https://github.com/Noitidart/"><i class="icon-github"></i></a></li>
        <li><a href="http://stackoverflow.com/users/1828637/noitidart"><i class="icon-stackoverflow"></i></a></li>
        <li><a href="https://addons.mozilla.org/en-US/firefox/user/Noitidart/"><i class="icon-firefox"></i></a></li>
      </ul>
      <section class="tabs">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
        <label for="tab-1" class="tab-label-1"><i class="icon-about-me"></i></label>

        <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
        <label for="tab-2" class="tab-label-2"><i class="icon-trophy"></i></label>

        <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
        <label for="tab-3" class="tab-label-3"><i class="icon-mail"></i></label>
        <div class="clear-shadow"></div>
        <div class="content">
          <div class="content-1">
            <p>I am a Firefox Addon ethusiast and an avid developer. My aim is to make great addons and help others do the same. I created this page to showcase these resources. Read below to learn about the four shortcuts above.</p>
            <h3>Gists</h3>
            <p>Useful bits of code to help you build Firefox addons. I chose Gists as the venue to share because edits are version controlled, code is easily forked, and discussion can take place right on the Gist page.</p>
            <p>Related Gists are prefixed with <i>_ff-addon-TYPE</i>. Type is either <i>snippet</i> or <i>template</i></p>
            <h4>Snippet</h4>
            <p>These are codes you can copy and paste to "Scratchpad" in Firefox. Set the "Environment" to "Browser" and run.</p>
            <h4>Template</h4>
            <p>These are full addons but very basic, ready to fork and personalize. I start all my addons based on one of these templates.</p>
            <h3>GitHub</h3>
            <p>All that I know today is thanks to open source projects. All my codes are available here.</p>
            <h3>Stackoverflow</h3>
            <p>If you need help with any of my Gists or anything Firefox addon dev related, ask the question here and I will be sure to get to you.</p>
            <h3>AMO</h3>
            <p>Find all my released addons here.</p>
          </div>
          <div class="content-2">
            <input id="tab-2-tab-1" type="radio" name="tab-2-radio-set" class="tab-2-tab-selector-1" checked="checked" />
            <label for="tab-2-tab-1" class="tab-2-tab-label-1">General</label>
            <input id="tab-2-tab-2" type="radio" name="tab-2-radio-set" class="tab-2-tab-selector-2" />
            <label for="tab-2-tab-2" class="tab-2-tab-label-2">Firefox</label>
            <input id="tab-2-tab-3" type="radio" name="tab-2-radio-set" class="tab-2-tab-selector-3" />
            <label for="tab-2-tab-3" class="tab-2-tab-label-3">Javascript</label>
            <h2>My Skills</h2>
                <ul class="skillset">
                  <li><span class="skill css3"><span></span></span><span>CSS 3</span></li>
                  <li><span class="skill html5"><span></span></span><span>HTML 5</span></li>
                  <li><span class="skill git"><span></span></span><span>Git &amp; GitHub</span></li>
                  <li><span class="skill javascript"><span></span></span><span>Javascript</span></li>
                  <li><span class="skill sql"><span></span></span><span>MySQL, SQL, SQLite</span></li>
                  <li><span class="skill npp"><span></span></span><span>Notepad++</span></li>
                  <li><span class="skill php"><span></span></span><span>PHP</span></li>
                  <li><span class="skill vb"><span></span></span><span>Visual Basic 6.0 &amp; VBA</span></li>
                </ul>
                <ul class="skillset">
                  <li><span class="skill css3"><span></span></span><span>nsIWindowsMediatorService</span></li>  
                  <li><span class="skill css3"><span></span></span><span>nsIPromptService</span></li>   
                  <li><span class="skill css3"><span></span></span><span>nsIHttpChannel</span></li> 
                  <li><span class="skill css3"><span></span></span><span>cTypes</span></li> 
                  <li><span class="skill css3"><span></span></span><span>Bootstrap</span></li>  
                  <li><span class="skill css3"><span></span></span><span>nsIZipWriter</span></li>   
                  <li><span class="skill css3"><span></span></span><span>nsIXMLHttpRequest, nsIXMLHttpRequestEventTarget, &amp; nsIJSXMLHttpRequest</span></li> 
                  <li><span class="skill css3"><span></span></span><span>nsITimer</span></li>   
                </ul>
                <ul class="skillset">
                  <li><span class="skill html5"><span></span></span><span>prototype &amp; scritp.aculo.us</span></li>   
                  <li><span class="skill html5"><span></span></span><span>jQuery</span></li>    
                  <li><span class="skill html5"><span></span></span><span>Canvas</span></li>    
                  <li><span class="skill html5"><span></span></span><span>RegExp</span></li>    
                  <li><span class="skill html5"><span></span></span><span>Custom, Native, &amp; CSS3 Events</span></li> 
                </ul>

          </div>
          <div class="content-3">
            <h2>Contact Me</h2>
            <form class="form-wrapper-01"><input id="" name="s" value="Mail from noitidart.github.io" type="hidden"/>
              <input id="" name="name" class="inputbox" type="text" placeholder="Your Name" />
              <input id="" name="from" class="inputbox" type="text" placeholder="Your Email" />
              <textarea id="" name="msg" class="message_box" type="textarea" placeholder="Message"></textarea>
              <a href="#" onclick="sendForm();return false" draggable="false" class="button"></a>
            </form>
          </div>
        </div>
      </section>
    </div>
    </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment