Skip to content

Instantly share code, notes, and snippets.

View lutsen's full-sized avatar

Lútsen Stellingwerff lutsen

18 followers · 48 following
View GitHub Profile
@lutsen
lutsen / toggle_on_click.js
Last active December 27, 2015 06:49
This jQuery based script shows an element, and hides it again by clicking anywhere in the <body>You can use it to show popovers or modals for example.In the example, if you click on any element with the class "info", a child element with the class "info-tip" is shown.
// Shows an element, and hides it on clicking anywhere in the <body>
function toggleOnClick(target) {
// Show
$(target).fadeIn("fast", function() {
$('body').on('click', function() {
// Hide on click outside
$(target).fadeOut("fast");
});
});
}
@lutsen
lutsen / scaffolding.less
Last active December 27, 2015 06:49
My take on a 12 colum grid in css. The columns in this grid have a percentual width, but the gutter has a pixel width. This way the grid should work in a container of any width. It uses CSS calc().
// SCAFFOLDING
// Define gutter width
@gutter: 20px;
// Some mixins
// For clearing floats like a boss h5bp.com/q
.clearfix {
*zoom: 1;
@lutsen
lutsen / stick_to_top.js
Last active December 27, 2015 09:09
Stick a menu (or other element) to the top of the page when scrolling past it, using jQuery.
var element_start_offset = 0;
var element_sticks = false;
function stickToTop(element) {
// You may need to insert a placeholder to prevent other content from "jumping"
// Make sure it has the same height as "element"
placeholder = element.substr(1)+'_placeholder';
if ($(document).scrollTop() >= element_start_offset.top && !element_sticks) {
$('<div id="'+placeholder+'">&nbsp</div>').insertAfter(element); // Insert placeholder
@lutsen
lutsen / .htaccess
Created November 5, 2013 08:40
Clean URL's: Use .htaccess URL rewrite and PHP to get clean URL's.
#php_flag display_startup_errors on
#php_flag display_errors on
#php_flag html_errors on
# Just in case...
Options +FollowSymlinks
RewriteEngine on
@lutsen
lutsen / image_popover.js
Last active January 17, 2017 23:01
Super simple image popover with jQuery. Source: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
// Image popover
// http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
var flickr_link = $(this).data("flickr");
/*
@lutsen
lutsen / hilight_menuitem.js
Last active December 27, 2015 17:19
Hilight a menu item when scrolling past the #id anchor using jQuery. A.k.a. ScrollSpy.
// The menu should have the id #menu
// ID's that have to work with this should have the class .scroll-anchor
function highlightMenuItem(anchor) {
var menu_item = $('#menu a[href="#/'+anchor+'"]');
if (menu_item && !menu_item.hasClass('active')) {
$('#menu .active').removeClass('active');
menu_item.addClass('active');
}
}
@lutsen
lutsen / same_height.js
Last active December 28, 2015 02:39
Get highest element of a class of each containing parent element, and give all elements in this parent element this height. Uses jQuery.
function sameHeight(target) {
// Reset
$(target).each(function() {
$(this).parent().data('height', 0);
});
// Get highest element of each containing parent element
$(target).each(function() {
if ($(this).parent().data('height') < $(this).height()) {
$(this).parent().data('height', $(this).height());
}
@lutsen
lutsen / setup_carousel.js
Created November 13, 2013 21:40
A function to initiate a dynamically generated Bootstrap 3.0.2 carousel. The function adds an .active class to the first item, and adds carousel-indicators li elements for all carousel items. Handy if all carousel item code needs to be the same, or you don't know how many items your carousel will have.
@lutsen
lutsen / .htaccess
Last active May 13, 2018 21:19
Force “www.” in a generic way. (From http://stackoverflow.com/questions/4916222/htaccess-how-to-force-www-in-a-generic-way)
RewriteEngine On
# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /
# Force www
# - Exclude urls starting with loaclhost
@lutsen
lutsen / index.html
Created March 11, 2014 14:36
Make X-editable work with List.js in a Booststrap 3 styled table. The problem: X-editable will mess up the table layout when used on a <td> element. But List.js won't work if the table data is in another element inside the <td> element. The solution: create a <span> element every time the editable <td> is clicked, and remove it every time the X-…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>X-editable and List.js Datagrid</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">