Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓

Gerben van Dijk gerbenvandijk

🤓
  • Tech Lead Frontend @ Tui Spain
  • Amsterdam, The Netherlands
View GitHub Profile
@gerbenvandijk
gerbenvandijk / Mark parent navigation active when on custom post type single page
Last active Oct 21, 2022
Mark (highlight) custom post type parent as active item in Wordpress Navigation.When you visit a custom post type's single page, the parent menu item (the post type archive) isn't marked as active. This code solves it by comparing the slug of the current post type with the navigation items, and adds a class accordingly.
View Mark parent navigation active when on custom post type single page
<?php
function add_current_nav_class($classes, $item) {
// Getting the current post details
global $post;
// Get post ID, if nothing found set to NULL
$id = ( isset( $post->ID ) ? get_the_ID() : NULL );
@gerbenvandijk
gerbenvandijk / OldBrowser.js
Created Nov 19, 2013
Detect if the user has an old browser and if so, it inserts a friendly notification that not all features on the site will work, and that an upgrade is recommended.
View OldBrowser.js
// The code - first bit is all the UserAgent library.
(function(wndw) {
var Browsers, OS, Platform, Versions, browser_name, browser_version, os, platform;
Versions = {
Firefox: /firefox\/([\d\w\.\-]+)/i,
IE: /msie\s([\d\.]+[\d])/i,
Chrome: /chrome\/([\d\w\.\-]+)/i,
Safari: /version\/([\d\w\.\-]+)/i,
Ps3: /([\d\w\.\-]+)\)\s*$/i,
Psp: /([\d\w\.\-]+)\)?\s*$/i
@gerbenvandijk
gerbenvandijk / z-index-mixin.less
Last active Dec 13, 2019
Z-index mixin for LESS
View z-index-mixin.less
@z-index-order: 'contact', 'lightbox', 'nav';
.zindex(@elementName) {
.loop(@elementName, @counter) when (@counter > 0) {
.loop(@elementName, @counter - 1);
.pickIndex(@elementName, @counter);
}
@gerbenvandijk
gerbenvandijk / VimeoAPI.js
Created Nov 19, 2013
Vimeo API events - howto
View VimeoAPI.js
// First load in the Froogaloop library
// It is important to build up your embed like this: <iframe src="https://player.vimeo.com/video/44633289?api=1&amp;player_id=vimeo" width="990" height="558" id="vimeo" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
// The ID of the iframe should be included!
var player = document.getElementById('vimeo');
// We bind an event that fires when the player is ready
Froogaloop(player).addEvent('ready', ready);
// The function that is initiated when the player is ready
@gerbenvandijk
gerbenvandijk / dynamicvideo.js
Last active Jul 18, 2019
Dynamically loading a HTML5 video element with JavaScript
View dynamicvideo.js
function loadVid(){
var videourl = 'urltoyourvideo here'; // set the url to your video file here
var videocontainer = '#videocontainer'; // set the ID of the container that you want to insert the video in
var parameter = new Date().getMilliseconds(); // generate variable based on current date/time
var video = '<video width="1102" height="720" id="intro-video" autoplay loop src="' + videourl + '?t=' + parameter + '"></video>'; // setup the video element
$(videocontainer).append(video); // insert the video element into its container
@gerbenvandijk
gerbenvandijk / clickToggle.js
Created Nov 19, 2013
jQuery function to toggle a click and run custom code on them (.toggle() always shows or hides an element, so we can't use this anymore).
View clickToggle.js
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
View retinaimg.html
<img src="myimage.jpg" data-2x="myimage-2x.jpg">
@gerbenvandijk
gerbenvandijk / StickyScroll.js
Created Nov 19, 2013
Simple jQuery script to make part(s) of the site sticky when scrolled beyond a certain point.
View StickyScroll.js
// sticky scroll function
function ScrollNav() {
if ($(document).scrollTop() > 0) {
} else {
}
}
View RGBtoHEX.js
// Function to convert RGB Color to hex
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
@gerbenvandijk
gerbenvandijk / ValidImg.js
Created Sep 27, 2013
Check for a valid image in HREF.
View ValidImg.js
function IsValidImageUrl(url, callback) {
jQuery("<img>", {
src: url,
error: function() { callback(false); },
load: function() { callback(true); }
});