Mackey

Archives for August 2012

by

Add Class to Anchor Link for Scrolled To Element – jQuery

We were looking for a way to highlight navigation elements using scrollto.js, a jQuery snippet.  We have 5 anchor links and as a user either clicks on one of the anchor links or scrolls to that particular section we’d like to highlight the current anchor link by adding a class.  See below for a fairly simple and straight forward script to achieve this.

[cc lang=”js”]

$(function(){
var sections = {},
_height  = $(window).height(),
i        = 0;

// Grab positions of our sections
$(‘.section’).each(function(){
sections[this.name] = $(this).offset().top;
});

$(document).scroll(function(){
var pos = $(this).scrollTop();

// Look in the sections object and see if any section is viewable on the screen.
// If two are viewable, the lower one will be the active one.
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$(‘a’).removeClass(‘active’);
$(‘#nav_’ + i).addClass(‘active’);
}
}
});
});

[/cc]

by

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

by

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]

by

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