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;
}
@yajd

yajd commented Mar 4, 2014

Copy link
Copy Markdown
Author

README

Rev4

  • All 3/3/14 work.
  • This is when I would have the initial animation set in the style sheet so I would have to use important now I'm thinking of starting it off inline so I don't have to use important later on. (aim is for rev5)

Rev5

  • 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

Rev6

bootstrap.js + style.css

  • doing jquery content height dyanmically, modfied style.css apropriately
  • only thing that remains is contact form

Rev7

index.html

  • on resize of textarea am properly sizing content now
  • also on end of delaySkillset anim on content i remove it
  • contact form set up for when add ajax
    • anim on send btn
    • form disabling
    • form renabling
    • todo: notification method on success or failure

@yajd

yajd commented Mar 4, 2014

Copy link
Copy Markdown
Author

TODO:

  • on load there is a position change, need to address this i dont know whats causing it but need to make it not have position change from readystate loading to loaded

Tea Timer

timer with obtrusive alert, the ones existing now are not obtrusive and the one that is obtrusive isnt pretty or restartless. there is one restartless on with frame pop in middle but it disapperas on click and minimizes with window. if fifefox window is not open user will not see that panel.

Features:

  • Icon in nav bar with anim if running, put label showing time count down, have link in button to add 1 min, 2 min,
  • Pp up notification should be over everything
  • Right click on the icon should start last timer, so it should remember what was used last time (if no last then as if popped up)
  • Right click during timer running should stop it but with confirmation, in confirmation ask if should just pause it? maybe add middle click to stop and right click to pause?
  • On left click pop open panel
    • if running
      • then allow them to add 1 min, 2 min? add some amount of time
      • pause/stop buttons
      • show countdown
    • if not running
      • show history of stuff last used, allow time setting,
      • start button

IDEA: show a log of last run timers (start/stop time/duration) when currently not running, maybe even when running

SurfaceNotes

GitHub Ext Installer

@Noitidart

Noitidart commented Mar 8, 2014

Copy link
Copy Markdown

Use mail script here: http://noitidart.me.pn/mail.php

@Noitidart

Noitidart commented Mar 8, 2014

Copy link
Copy Markdown

For mail.php use this:

<?php
$params = array('from'=>0,'s'=>0,'msg'=>0);
$json = array('errors'=>array());
foreach ($params as $k => $v) {
    if (!isset($_POST[$k])) {
        $json['errors'][] = 'Missing parameter "'. $k .'"';
        } else {
                $params[$k] = $_POST[$k];
        }
}

$to = 'noitidart@gmail.com';
$HEADERS = "From: " . $params['from'] . " rn" .
"Reply-To:  " . $params['from'] . " rn" .
"Content-type: text/plain; charset=UTF-8 rn";

if (count($json['errors']) == 0) {
    unset($json['errors']);
        if (mail($to, $params['s'], $params['msg'], $HEADERS)) {
                $json['mail_result'] = 1;
                print json_encode($json);
        } else {
                $json['mail_result'] = 0;
                print json_encode($json);
        }
} else {
        print json_encode($json);
}


function isValidEmail($email) {
    return preg_match('#^[a-z0-9.!\#$%&\'*+-/=?^_`{|}~]+@([0-9.]+|([^\s\'"<>]+\.+[a-z]{2,6}))$#si', $email);
}


?>

@Noitidart

Noitidart commented Mar 22, 2014

Copy link
Copy Markdown

i applied all revs for notiidart.github.io

just need to do contact form ajax now.

@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