Mackey Lab Notes - All things web, branding, design and creative

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

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

Open up your functions.php file within your theme in your favorite text editor.
Open up custom-styles.php
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]

Sticky Navigation or Div

Adding Styles to WordPress TinyMCE Editor/ WYSIWYG Editor

Science e-Card Experiment

Banners for Science Village at Pasadena City College

Monster Dash