Skip to content

Instantly share code, notes, and snippets.

@omurphy27
omurphy27 / check to see if animated.js
Created February 25, 2013 01:14
JQUERY - check to see if animated
if ( $test2.is(':not(:animated)') ) { // fires if the element is not animated
$test2.animate({
'width': '100%'
}, 3000);
}
@omurphy27
omurphy27 / Fixed header gets transparent when scrolling down.js
Created February 25, 2013 01:15
JQUERY - Fixed header gets tranparent when scrolling down
// Jquery make a fixed header become transparent as you scroll down
// and revert to not transparent when you scroll back up
// here is a url with more details: http://stackoverflow.com/questions/2921186/scroll-function-jquery
(function() {
var $header = $('#navbar');
$(window).scroll(function () {
@omurphy27
omurphy27 / flyout when scrolling down.js
Created February 25, 2013 01:16
JQUERY Flyout when scrolling down
// basically, the core of the function is do something once you reach a certain Y Offset relative to the browser window
$(document).ready(function () {
var $navPosTop = $('#navigation').position().top - 56;
var $flyout = $('.flyout');
if (!$.browser.msie || parseInt($.browser.version) > 8) { // this checks to see if the user is using IE8 or below and doesn't run the function if they are
$(window).scroll(function () {
@omurphy27
omurphy27 / randomnumber.js
Created February 25, 2013 01:18
JQUERY - Create a random number
// to create a random number you do like so
var $aplus = Math.floor(Math.random()*356) + 4;
// more details on that syntax here: http://stackoverflow.com/questions/8002820/why-would-i-combine-math-floor-with-math-random
// here's a practical use below:
$('#mb_pattern div').on('hover', function() {
var $aplus = Math.floor(Math.random()*356) + 4;
@omurphy27
omurphy27 / rolling link.js
Created February 25, 2013 01:31
JQUERY and CSS - Rolling Link
@omurphy27
omurphy27 / CSS transition.css
Created February 25, 2013 01:32
CSS transition all w browser prefixes
/* CSS transition all with ease example */
.container:hover {
box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.3);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-o-transition: all 800ms ease;
@omurphy27
omurphy27 / 3d box shadow effect.css
Created February 25, 2013 02:24
CSS - Simple 3D Box Shadow Effect
/* simple 3d box-shadow effect taken from the http://www.webdesignerdepot.com/ Twitter sidebar */
.container {
box-shadow: #F6E128 6px 6px 0px;
background: #191919;
color: #fff;
}
@omurphy27
omurphy27 / Jquery smooth-scrolling.js
Created February 25, 2013 03:48
JQUERY - Simple smooth scrolling effect
// Simple smooth-scrolling effect in Jquery
$('#links li').click(function(){
var liIndex = $(this).index();
var contentPosTop = $('.content').eq(liIndex).position().top;
$('html, body').stop().animate({
scrollTop: contentPosTop // can add subtract numbers here for the exact position I want
}, 1500);
});
@omurphy27
omurphy27 / traversing-up-the-dom.js
Last active December 14, 2015 05:29
JQUERY JS - Traversing up the DOM
// see here for details: http://stackoverflow.com/questions/8305595/jquery-traversing-dom-to-get-to-an-element
// I have mark up as follows:
<div class="sub-category-heading" >
<h3 class="arrow-styling" >Samsung News</h3>
</div>
<div class="main-category-page" >
<div class="blogpost small-format" >
<div class="image" >
@omurphy27
omurphy27 / Wordpress PHP Featured Images.php
Created February 27, 2013 04:14
Wordpress PHP Featured Image