⇐
⇐
⇒
⇒
Here is some Javascript:
[code language=”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.">⇑</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.">⇓</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.$));
[/code]
Here is some PHP:
[code language=”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’);
[/code]
Here is some HTML:
[code language=”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—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 & Specialty Shopping</a></li>
<li><a href="#">Business Directory</a></li>
<li><a href="#">Personal Health & 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 & Yard Sales</a></li>
<li><a href="#">Opportunities for Residents</a></li>
<li><a href="#">Coupons & Specials</a></li>
</ul>
</div>
</div>
[/code]
Here is some PHP with embedded HTML:
[code language=”php” htmlscript=”true”]
<?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 • Graphic Design • Photography • Computer Consulting"><?php bloginfo(‘name’); ?></a></h1>
</div><!– end of #header –>
[/code]
Here is some CSS:
[code language=”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; }
}
[/code]