• Skip to main content
  • What We Do
  • Our Work
  • About
  • Contact

Mackey

Lab Notes

August 24, 2012 by Mackey

Sticky Navigation or Div

I found a pretty simple script from www.backslash.gr that essentially keeps the navigation or any div for that matter at the top of the page when scrolling.

Here is the JS:

[cc lang=”js”]

$(function() {

// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $(‘#sticky_navigation’).offset().top;

// our function that decides weather the navigation bar should have “fixed” css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we’ve scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$(‘#sticky_navigation’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘left’:0 });
} else {
$(‘#sticky_navigation’).css({ ‘position’: ‘relative’ });
}
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});

});
[/cc]

To see the full article go to https://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

Filed Under: Code Snippets

August 22, 2012 by Mackey

Adding Styles to WordPress TinyMCE Editor/ WYSIWYG Editor

This is a quick plugin from SpeckyGeek to add style options to your TinyMCE Editor for WordPress.

  1. Open up your functions.php file within your theme in your favorite text editor.
  2. Open up custom-styles.php
  3. Copy and paste the code from custom-styles.php into functions.php and then modify to your hearts content.

Download the file at https://maxwellrowe.com/custom-styles.zip

Here it is in its entirety:

[cc lang=”php”]

<?php

/*
Plugin Name: Custom Styles
Plugin URI: https://www.speckygeek.com
Description: Add custom styles in your posts and pages content using TinyMCE WYSIWYG editor. The plugin adds a Styles dropdown menu in the visual post editor.
Based on TinyMCE Kit plug-in for WordPress

https://plugins.svn.wordpress.org/tinymce-advanced/branches/tinymce-kit/tinymce-kit.php

*/
/**
* Apply styles to the visual editor
*/
add_filter(‘mce_css’, ‘tuts_mcekit_editor_style’);
function tuts_mcekit_editor_style($url) {

if ( !empty($url) )
$url .= ‘,’;

// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( get_stylesheet_directory_uri() ) . ‘/editor.css’;

return $url;
}

/**
* Add “Styles” drop-down
*/
add_filter( ‘mce_buttons_2’, ‘tuts_mce_editor_buttons’ );

function tuts_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, ‘styleselect’ );
return $buttons;
}

/**
* Add styles/classes to the “Styles” drop-down
*/
add_filter( ‘tiny_mce_before_init’, ‘tuts_mce_before_init’ );

function tuts_mce_before_init( $settings ) {

$style_formats = array(
array(
‘title’ => ‘Cambria 13’,
‘inline’ => ‘span’,
‘classes’ => ‘cambria’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-family’ => ‘Cambria, serif’
)
),
array(
‘title’ => ‘Cambria 13 Bold Drk Gry’,
‘inline’ => ‘span’,
‘classes’ => ‘cambria’,
‘styles’ => array(
‘color’ => ‘#333’,
‘fontWeight’ => ‘bold’,
‘font-family’ => ‘Cambria, serif’
)
),
array(
‘title’ => ‘Helvetica Neue H1’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica34’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’34px’,
‘line-height’ => ‘120%’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘margin-bottom’ => ‘1em’
)
),
array(
‘title’ => ‘Helvetica Neue Bold 15 Green’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica14bold’,
‘styles’ => array(
‘color’ => ‘#88b740’,
‘fontWeight’ => ‘bold’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘font-style’ => ‘italic’
)
),
array(
‘title’ => ‘Helvetica Neue Bold 15 BLK’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica14bold’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘bold’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘font-style’ => ‘italic’
)
),
array(
‘title’ => ‘Helvetica Small Drk Gry 13’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica13’,
‘styles’ => array(
‘color’ => ‘#333’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’13px’,
‘font-family’ => ‘Helvetica, sans-serif’
)
),
array(
‘title’ => ‘Courier’,
‘inline’ => ‘span’,
‘classes’ => ‘courier’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Courier, monospace’
)
),
array(
‘title’ => ‘Default P’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica10’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘400’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’
)
)

);

$settings[‘style_formats’] = json_encode( $style_formats );

return $settings;

}

/* Learn TinyMCE style format options at https://www.tinymce.com/wiki.php/Configuration:formats */

/*
* Add custom stylesheet to the website front-end with hook ‘wp_enqueue_scripts’
*/
add_action(‘wp_enqueue_scripts’, ‘tuts_mcekit_editor_enqueue’);

/*
* Enqueue stylesheet, if it exists.
*/
function tuts_mcekit_editor_enqueue() {
$StyleUrl = plugin_dir_url(__FILE__).’editor-styles.css’; // Customstyle.css is relative to the current file
wp_enqueue_style( ‘myCustomStyles’, $StyleUrl );
}
?>

[/cc]

Filed Under: Code Snippets, Wordpress

August 22, 2012 by Mackey

Science e-Card Experiment

While working with Pasadena City College, we put together this e-Card.  Needless to say it was not a hit, but we thought it was pretty cool.

Filed Under: Design, Experiments

August 22, 2012 by Mackey

Banners for Science Village at Pasadena City College

Just picked up the banners we had done for PCC’s Science Village.  The concept was to create banners to help direct students to various sections of the new Science Village.  We did the design and concept and had the banners printed at Print Efex in La Canada.

2′ X 5′ — 13 oz Premium Glossy Vinyl

Filed Under: Design

July 25, 2012 by Mackey

Monster Dash

Working on a logo for Monster Dash and came up with this little guy.

Filed Under: Design

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 9
  • Go to page 10
  • Go to page 11
Mackey Creative Lab
Web Design and Development, Branding, Graphic Design and Marketing Strategy
680 East Colorado Blvd., Suite 180 & Second Floor, Pasadena, CA 91101
info@mackeycreativelab.com // 626 214 5093
© 2014-2021 Mackey, LLC, All Rights Reserved