#Vanilla JavaScript useful variables (almost jQuery)
Tests: JSBin
Test 1: 1 element (ID)
$('#hola').style.color = 'red';
Test 2: 2 elements (selector)
juanbrujo
/ getFromTwInsta.js
Created
October 28, 2014 19:57
Get Image from Twitter & Instagram : bookmarklet that get's the image shown on certain post on Twitter or Instagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The Code: | |
| var url = window.location.host; | |
| if (url.indexOf('twitter.com') != -1){ | |
| // is Twitter | |
| var pic = $('.cards-media-container .media').attr('data-url'); | |
| if(pic){ | |
| window.open(pic,'_self'); | |
| } else { | |
| alert('There\'s no photo.'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Single: | |
| <div class="desktop-only">desktop-only</div> | |
| <div class="tablet-only">tablet-only</div> | |
| <div class="mobile-only">mobile-only</div> | |
| Combined: | |
| <div class="desktop-only tablet-only">.desktop-only.tablet-only</div> | |
| <div class="tablet-only mobile-only">.tablet-only.mobile-only</div> |
juanbrujo
/ simple-background-parallax.html
Created
January 1, 2015 23:13
Ridiculously simple background-parallax with CSS/jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| .bgParallax { | |
| background-image: url('image/background-jpg'); | |
| background-position: 50% 0; | |
| background-repeat: repeat; | |
| background-attachment: fixed; | |
| } | |
| </style> |
juanbrujo
/ simpleAccordion.html
Created
January 9, 2015 03:18
simpleAccordion: jQuery function for very simple accordions using <dl>/<dt>/<dd>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <dl class="accordion"> | |
| <dt><a href="#">Pellentesque fermentum dolor.</a></dt> | |
| <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> | |
| <dt><a href="#">Donec nec justo eget felis facilisis fermentum.</a></dt> | |
| <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> | |
| <dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></dt> | |
| <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd> | |
| </dl> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .focus, | |
| .blur { | |
| transition: 1s; | |
| } | |
| .focus #focus, | |
| .blur #blur { | |
| display: inline-block; | |
| } | |
| .focus #blur, | |
| .blur #focus { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The Mixin: | |
| @mixin bp($type) { | |
| @if $type == small { | |
| @media (min-width: 24em) { @content; } | |
| } | |
| @else if $type == medium { | |
| @media (min-width: 46.8em) { @content; } | |
| } | |
| @else if $type == large { | |
| @media (min-width: 50em) { @content; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
juanbrujo
/ fireonceonscroll.js
Created
June 8, 2015 19:18
fire once while listening to the scroll event
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elem = document.querySelector('#video'); | |
| var fired = false; | |
| window.addEventListener('scroll', function(e){ | |
| if (document.body.scrollTop >= 300 && fired === false) { | |
| console.log('fire!'); | |
| fired = true; | |
| } | |
| }, true); |
#createElement(element,attribute,inner);
use:
createElement("tag","[attr:val][attr:val]",[element1,"some text",element2,element3,"or some text again :)"]);
basic: