Here is some Javascript:
// remap jQuery to $
(function ($) {

	/* trigger when page is ready */
	$(document).ready(function (){

	// your functions go here
        ////jQuery( "#indextabs" ).tabs();
	//
	$("#home-cookie").click(function () { jQuery('#home-cookietext').load('cookies/Fortune.php', {cache:false}); })

	jQuery("#showcookie").click(function () { jQuery('#fortunecookie').load('/class-html/examples/Fortune.php',
																																					{cache:false}); })
	jQuery("#showajaxlink").click(function () { $('#showajax').load('/class-html/examples/ajaxload.html'); })
  //
  //  Automagically add target=_blank to all http: links in #content-wrapper....
  jQuery("#content-wrapper a[href^='http://']").attr("target","_blank");
  jQuery("#footer a[href^='http://']").attr("target","_blank");
  //
  var $upwards = jQuery('<p class="viewport-upwards" />');
  jQuery('html').append($upwards);
	$upwards.css({
			'position': 'fixed',
			'top': 0,
			'left': 0,
			'padding': 1,
			'border-radius': '0 0 16px 0',
			'border-right': '4px solid #b40000',
			'border-bottom': '4px solid #b40000',
			'background': '#606060',
			'opacity': '0.4',
			'font-family': 'sans-serif',
			'margin': 0,
			'box-shadow': 'rgba(0, 0, 0, 0.6) 1px 1px 0',
			'color': '#e0f0ff',
			'z-index': 9999
			});
	$upwards.html('<a href="#0" class="up-link" title="Jump back one page.">&uArr;</a>');
	//
  var $downwards = jQuery('<p class="viewport-downwards" />');
  jQuery('html').append($downwards);
	$downwards.css({
			'position': 'fixed',
			'bottom': 0,
			'left': 0,
			'padding': 1,
			'border-radius': '0 16px 0 0',
			'border-right': '4px solid #b40000',
			'border-top': '4px solid #b40000',
			'color': '#e0f0ff',
			'background': '#606060',
			'opacity': '0.4',
			'font-family': 'sans-serif',
			'margin': 0,
			'box-shadow': 'rgba(0, 0, 0, 0.6) 1px 1px 0',
			'z-index': 9999
			});
	$downwards.html('<a href="#0" class="down-link" title="Jump down one page.">&dArr;</a>');
	//
  // add and remove the page scrollers.
  var drt_btt_offset = 220;
  var drt_btt_duration = 500;
  jQuery(window).scroll(function() {
	  if (jQuery(this).scrollTop() > drt_btt_offset) {
		  jQuery('.viewport-upwards').fadeIn(drt_btt_duration);
	  } else {
		  jQuery('.viewport-upwards').fadeOut(drt_btt_duration);
	  }
	  if ( (jQuery(this).scrollTop() + jQuery(window).height()) < jQuery(document).height() ) {
		  jQuery('.viewport-downwards').fadeIn(drt_btt_duration);
	  } else {
		  jQuery('.viewport-downwards').fadeOut(drt_btt_duration);
	  }
  });
	//var viewHeight    = $(window).height();
	//var pageHeight    = $(document).height();
	//var numberOfPages = pageHeight/viewHeight;
	//
	function go_up_page (args) {
		var newposn = window.pageYOffset - jQuery(window).height();  // offset of current page minus page height
		newposn = ( newposn < 0 ) ? 0 : newposn;  // can't go back before 0
		window.scrollTo(0, newposn);
	}
	function go_down_page (args) {
		var newposn = window.pageYOffset + jQuery(window).height();  // offset of current page plus page height
		var docht = jQuery(document).height();  // height of entire document
		newposn = ( newposn >  docht ) ? docht : newposn;
		window.scrollTo(0, newposn);
	}
	// initial check to expose the downward pager.
	if ( (jQuery(this).scrollTop() + jQuery(window).height()) < jQuery(document).height() ) {
		jQuery('.viewport-downwards').fadeIn(drt_btt_duration);
		}
	// .on tells (document) to keep looking for selector matches in incoming content.
	jQuery(document).on('click', '.up-link', go_up_page);
	jQuery(document).on('click', '.down-link', go_down_page);
	});

}(window.jQuery || window.$));
Here is some PHP:
function embed_breadcrumb($attr, $url) {
   extract(shortcode_atts(array(
       'extraclass' => null
   ), $attr));
	 $classlist = ( $extraclass ) ? 'breadcrumb ' . $extraclass : 'breadcrumb';
	 $crumb = '<span class="' . $classlist . '">';
	 $crumb .= $url;
	 $crumb .= '</span>';
   return $crumb;
}
add_shortcode('crumb', 'embed_breadcrumb');
Here is some HTML:
<p>I have been a fan of the <a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/">
SimpleDrop dropdown menu from JavaScript Array</a> for a while. Basically, once I found it, it became 
my standard dropdown menu package. The simplicity is what originally drew me&mdash;it has a tiny 
footprint beyond jQuery. Of course, the name SimpleDrop was well-chosen. It has no frills, but it works 
on all major browsers, including Internet Explorer 6. IE6 is almost extinct, but I have a client that 
doesn't have the money to update their infrastructure, and are therefore limited to IE6.</p>

<p>I have made some improvements to what I now call <strong>SimpleMegaDrop</strong>, and it now offers these features:</p>
<ul>
<li><strong>Standard dropdown menus</strong> (single-level) in a navbar</li>
<li><strong>Mega-dropdown menus</strong> integrated with dropdown menus</li>
<li><strong>Free-standing Buttons</strong> that invoke dropdown or mega-dropdown menus.</li>
<li>All of the menu items use <strong>hoverIntent</strong> to reduce the overall twitchiness.</li>
</ul>

<div class="megabutton button" style="float:left; margin-right:12px;" >
<h2>DropButton</h2>
<div class="megadrop">
		<ul>
			<li><a href="#">Unique &amp; Specialty Shopping</a></li>
			<li><a href="#">Business Directory</a></li>
			<li><a href="#">Personal Health &amp; Fitness</a>
	      <ul>
  	    <li><a href="#">Massage</a></li>
    	  <li><a href="#">Personal Trainers</a></li>
    	  <li><a href="#">Fitness Centers</a></li>
    	  <li><a href="#">Jogging Locations</a></li>
      	</ul>
      </li>
			<li><a href="#">Wedding Events</a></li>
			<li><a href="#">Estate &amp; Yard Sales</a></li>
			<li><a href="#">Opportunities for Residents</a></li>
			<li><a href="#">Coupons &amp; Specials</a></li>
		</ul>
</div>
</div>
Here is some PHP with embedded HTML:
<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<div id="navbar" role="navigation">

<div id="navbar-holder">
<ul id="jsddm">
	<li class="first-button"><a href="/" id="nav-home">Home</a></li>
  <li><a href="/design" id="nav-design">Projects</a></li>
  <li><a href="/galleries/" id="nav-galleries">Galleries</a></li>
  <li><a href="/about/" id="nav-about">About</a></li>
  <li><a href="/about/contact" id="nav-contact">Contact</a></li>
  <li><?php get_search_form(); ?>
  </li>
</ul>
</div>

</div><!--   end of #navbar   -->
  
<div id="outerbox"><!--   this div is closed in #footer   -->

<div id="header" role="banner">

<a href="/" class="home-link"><img id="header-image" src="/images/ui/Monolith-Header.jpg" alt="Monolith Design, Site Header" title="Click here to return to the Home Page." /></a>

<h1><a href="<?php bloginfo('url'); ?>/" title="Web Design &bull; Graphic Design &bull; Photography &bull; Computer Consulting"><?php bloginfo('name'); ?></a></h1>
 
</div><!--   end of #header   -->
Here is some CSS:
@media screen and (max-width:870px) {
#content { padding:16px; margin:auto; width:84%; max-width:660px; min-width:320px; }
#content p { width:100%; margin-left:auto; margin-right:auto; }
#content ul { width:100%; margin-left:auto; margin-right:auto; list-style-position:inside; }
.headex { display:none !important; }
.headsel { display:inline-block !important; }
.text-404 { width:47%; margin-left:2%; padding:16px; font-size:115%; letter-spacing:1px; word-spacing:2px; }
h4 { width:80%; }
.contact-form-wrapper { width:90%; float:none;  }
.contact-blurb-wrapper { width:90%; float:none; margin-left:0;}

}

@media screen and (max-width:600px) {
#navbar { height:6em; text-align:center; }
#jsddm { padding-left:0 !important;}
#jsddm li a {	display:block; width:94px; }
#jsddm li #searchform {	display:block; width:172px; }
#header { margin:5.90em 0 0 0; }
#navbar-holder { }
#content { padding:12px; margin:auto; width:90%; max-width:660px; min-width:320px; }
#home-overview { float:none; width:90%; margin-left:auto; margin-right:auto; }
#home-announce { float:none; width:90%; margin-left:auto; margin-right:auto; }
#home-books { width:90%; margin-left:auto; margin-right:auto; }
}
Back to TOP Page UP Page DOWN