Skip to content

Instantly share code, notes, and snippets.

View SaraSoueidan's full-sized avatar
🎯
Focusing

Sara Soueidan SaraSoueidan

🎯
Focusing
4.3k followers · 31 following
View GitHub Profile
@SaraSoueidan
SaraSoueidan / bocoup-training-more-efficient-event-handlers.js
Created May 13, 2013 11:47 — forked from cowboy/bocoup-training-more-efficient-event-handlers.js
Lazy Evaluation and Event Delegation for more efficient event handling. Source: http://training.bocoup.com/screencasts/more-efficient-event-handlers/
// Straightforward + simple.
$("button").on("click", function(event) {
event.preventDefault();
var button = $(this);
var numberElem = button.find(".number");
var number = Number(numberElem.text()) - 1;
numberElem.text(number);
if (number === 0) {
button.prop("disabled", true);
button.off("click");
@SaraSoueidan
SaraSoueidan / index.html
Created June 7, 2013 19:33
A CodePen by Sara Soueidan. Horizontal Portfolio Layout with CSS3 Animations and jQuery - Demo for my blog post: http://blog.sarasoueidan.com/horizontal-portfolio-layout
<header>
<a href="http://blog.sarasoueidan.com/horizontal-portfolio-layout">Read Tutorial</a>
</header>
<div class="demo-wrapper">
<h1>Horizontal Portfolio Layout With CSS3 Animations and jQuery</h1>
<ul class="portfolio-items">
<li class="item">
@SaraSoueidan
SaraSoueidan / snippet
Created June 8, 2013 02:17
Typing + Highlighting Animation (Demo: Typewriter and highlighter effects with CSS3 transitions: http://jsbin.com/ogevob/1/edit)
$.fn.animateText = function(delay, klass) {
var text = this.text();
var letters = text.split('');
return this.each(function(){
var $this = $(this);
$this.html(text.replace(/./g, '<span class="letter">$&</span>'));
$this.find('span.letter').each(function(i, el){
setTimeout(function(){ $(el).addClass(klass); }, delay * i);
@SaraSoueidan
SaraSoueidan / h5bp
Created June 8, 2013 02:20
HTML5 Boilerplate (markup)
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
@SaraSoueidan
SaraSoueidan / conditional
Created June 8, 2013 02:23
Conditional Markup with IE Conditional Comments
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
@SaraSoueidan
SaraSoueidan / latest-tweet
Created June 8, 2013 02:24
Display Latest Tweet
$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
//put this anywhere and wrap it in a div called #twitter or anything
@SaraSoueidan
SaraSoueidan / js
Created June 8, 2013 02:25
Play Audio on :hover
//http://css-tricks.com/examples/SoundOnHover/
@SaraSoueidan
SaraSoueidan / js
Created June 8, 2013 02:28
Scroll-to-top Button
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
@SaraSoueidan
SaraSoueidan / snippet
Created June 8, 2013 02:29
Scroll to Section in page with easing
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
@SaraSoueidan
SaraSoueidan / styles
Created June 8, 2013 02:31
CRoss-browser vertical type
h2{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipV flipH;
position:absolute; left:-100px;
}