Skip to content

Instantly share code, notes, and snippets.

View danielhaim1's full-sized avatar

Daniel Haim danielhaim1

View GitHub Profile
@danielhaim1
danielhaim1 / scrollfade.js
Created June 7, 2013 18:08
Change opacity of element based on window scroll
$(document).ready(function() {
var fadeStart=1 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=500 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
@danielhaim1
danielhaim1 / ends.js
Last active March 19, 2023 22:08
The JavaScript function adds a scroll event listener to the window object, which checks if the user has scrolled down to a specific element with the ID "ends". If the user has scrolled down to the element, it displays elements with the class "myClass", otherwise it hides them and adds the classes "energize" and "fadeIn" to their class list.
window.addEventListener('DOMContentLoaded', () => {
const ends = document.querySelectorAll('#ends');
if (ends.length) {
window.addEventListener('scroll', () => {
const t = ends[0].getBoundingClientRect().top - window.innerHeight;
if (window.pageYOffset > t) {
const myClass = document.querySelectorAll('.myClass');
myClass.forEach(elem => elem.style.display = 'block');
} else {
const myClass = document.querySelectorAll('.myClass');
@danielhaim1
danielhaim1 / ampersands.js
Last active March 19, 2023 22:07
The JavaScript function replaces all occurrences of the "&" character in the text content of all elements in the document with the HTML entity "&".
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('*:contains("&")')).forEach((elem) => {
Array.from(elem.childNodes).forEach((node) => {
if (node.nodeType === Node.TEXT_NODE) {
const newNode = document.createElement('span');
newNode.className = 'amp';
newNode.textContent = node.textContent.replace(/&/g, '&');
node.parentNode.replaceChild(newNode, node);
}
});
@danielhaim1
danielhaim1 / index.html
Last active March 19, 2023 22:06
The adjustHeight function is a JavaScript function that adjusts the height of the elements with the class name starting with "breakit" to match the height of their child element with the class name starting with "brokeit".
<div class="breakit" style="position: relative;">
<div class="brokeit" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;">
<img src="..." style="height:375px;">
</div>
</div>
@danielhaim1
danielhaim1 / data-pullquote.js
Created June 7, 2013 18:52
If paragraph has data-pullquote="span", quote will pull the <span></span> from the paragraph and data-pullquote that span. the data-pullquote="attribute" can change to anything really, e.g. "strong", "em", "blockquote" etc.
(function( $ ){
var PULLQUOTE = 'data-pullquote';
$('[' + PULLQUOTE + ']').each(function(){
var $parent = $(this),
$quote = $parent.find( $parent.data('pullquote') );
if ( $quote.length > 0 )
@danielhaim1
danielhaim1 / relative-dates.php
Created June 7, 2013 19:07
Relative dates: - a moment ago - 1 min - 59 mins - 1 hour - 23 hours - 1 day - 7 days - 1 week - 5 weeks - 1 month - 11 months - 1 year - infinity years
<?php
if(!function_exists('how_long_ago')){
function how_long_ago($timestamp){
$difference = current_time('timestamp') - $timestamp;
if($difference >= 60*60*24*365){ // if more than a year ago
$int = intval($difference / (60*60*24*365));
$s = ($int > 1) ? 's' : '';
@danielhaim1
danielhaim1 / base.css
Created June 7, 2013 19:28
my base.css.
/***************************
notice how the puke cascades.
%%%%%%
%%%% = =
%%C >
_)' _( .'
__/ |_/\ " *. o
/` \_\ \/ %`= '_ .
/ ) \/| .^',*. ,
@danielhaim1
danielhaim1 / change-theme.js
Created June 7, 2013 19:35
Change Theme Color (.js button)
$(document).ready(function () {
swap();
});
var swap = function () {
$('.light').click(function () {
$(this).removeClass('light').addClass('dark').find('div').text('Darker');
$('body').removeClass('darker').addClass('lighter');
swap();
});
$('.dark').click(function () {
@danielhaim1
danielhaim1 / blockquote.css
Created June 7, 2013 22:17
blockquote.css
blockquote { background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before { color: #ccc;
content: open-quote;
font-size: 4em;
@danielhaim1
danielhaim1 / css-tabs.html
Created June 7, 2013 22:22
Pure CSS functional tabbed area
<style>
.tabs { position: relative;
clear: both;
margin: 25px 0;
min-height: 200px;
width: 300px;
font: 700 15px Arial;
}
.singleTab { float: left }