Need to load a WordPress page conditionally? For example, perhaps you need a “special” page to appear for search results? Yes? This simple PHP/JavaScript solution may be just what the doctor ordered!

Simply replace “condition” with the required condition (or delete the if (condition) {} qualifier entirely), and then change the path and file names to suit your specific needs:

<?php
if (condition) {
   echo ("
   <script type=\"text/javascript\">
   <!--//--><![CDATA[//><!--

   parent.location=\"http://www.domain.com/path/to/file.html\"

   //--><!]]>
   </script>
   ");
} else {
   echo ("
   <script type=\"text/javascript\">
   <!--//--><![CDATA[//><!--

   parent.location=\"http://www.domain.com/path/to/other-file.html\"

   //--><!]]>
   </script>
   ");
}
?>

Specifically, I employ the following trickery in my Killer WordPress theme:

<?php endwhile; else: ?>
<?php echo ("
   <script type=\"text/javascript\">
   <!--//--><![CDATA[//><!--

   parent.location=\"http://perishablepress.com/press/?p=58\"

   //--><!]]>
   </script>
"); ?>
<?php endif; ?>

The previous code chunk returns a specially designed search results page that is specifically tailored to suit the Killer theme. Works wonders.

Here are a few sIFR Notes for Perishable Press. Just what are we looking at here? Well, first it is important to understand the sIFR variables and the order in which they should appear:

(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode)

The variable, sFlashVars consists of the following sub-variables (these should be seperated with an & sign:

# Align Flash text block
textalign=center
# Moves text any number of pixels to the right
offsetLeft=3
# Moves text any number of pixels down
offsetTop=3
# Adds underline links when hovered
underline=true

Then, inducing from the following code example, we should place a similar set of statements at the bottom of any pages requiring sIFR functionality:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement("h1", "http://domain.com/path/to/fonts/font1.swf", "#E1E1E1", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");

   sIFR.replaceElement("h2", "http://domain.com/path/to/fonts/font2.swf", "#CC6633", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");

   sIFR.replaceElement("h3", "http://domain.com/path/to/fonts/font3.swf", "#E1E1E1", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");
}

//--><!]]>
</script>

Arguments may also be stated by name rather than sequentially:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement("h1", named({sFlashSrc: "../path/to/font.swf", sColor: "#777", sCase: "upper"}));
};

//--><!]]>
</script>

Here is another example using the named arguments method:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement(named({nWidth:333,nHeight:33,sSelector:"h3.class-h3", sFlashSrc:"http://domain.com/fonts/font.swf", sColor:"#333", sLinkColor:"#777", sBgColor:"#FFF", sHoverColor:"#DDD", sWmode: "transparent", nPaddingTop:0, nPaddingBottom:0}));

//--><!]]>
</script>

Finally, here is the default CSS supplied with sIFR:

/* sIFR Print CSS | Hide Flash headlines from the browser */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
	display: none !important;
	position: absolute;
	overflow: hidden;
	height: 0px;
	width: 0px;
}
span.sIFR-alternate {
	visibility: visible !important;
	position: static !important;
	display: block !important;
	left: auto !important;
	top: auto !important;
}

/* sIFR Screen CSS | These are standard sIFR styles -- do not modify */

.sIFR-flash { 
	visibility: visible !important; 
	margin: 0px; 
}
.sIFR-replaced { 
	visibility: visible !important;
}
span.sIFR-alternate { 
	top: 0px;
	left: 0px; 
	width: 0px; 
	height: 0px; 
	display: block; 
	overflow: hidden;
	position: absolute;
}

/* Decoy styles used to hide the browser text before it is replaced */

.sIFR-hasFlash h1 { 
	letter-spacing: -2px;
	visibility: visible;
	font-size: 32px;
	height: 40px;
}
.sIFR-hasFlash h3 { 
	visibility: visible;
	font-size: 18px;
}

References

• sIFR Documentation at novemberborn

For those of us enjoying the stylish functionality of Lightbox or any of its many incarnations, images "magically" overlay the window and unfold, revealing navigational buttons, image count, and of course the image titles.

For those of us enjoying the stylish functionality of FancyTooltips or any of its many incarnations, title and alt attributes manifest as stylish displays of CSS brilliance.

However, for those of us employing both features, there is a potential JavaScript conflict. This conflict makes it impossible for Lightbox to display the contents of title attributes associated with images. Thus, if you are employing Lightbox (or one of its many variations) and FancyTooltips (or one of its many variations), image titles will be missing from your Lightbox-displayed images. If this is the case, everything else (nav buttons, number display, close button) will display properly, including the "fancy" tooltips. If this sounds like your situation — missing Lightbox titles — we have good news..

Fortunately, the "fix" for this "bug" is relatively simple. Before getting to that, it is important to explain two things: (1) cause of the conflict and (2) verification of the conflict. Keep in mind that we are attempting to extrapolate from several specific scenarios to many possible configurations. So, if this article fails to fix your specific setup, hopefully it will provide insight toward an individually deduced solution.

First, let's examine the cause of the conflict. Generally speaking, JavaScript-based tooltip enhancement involves replacing title and/or alt attributes with author-specified "hooks" that enable scripts to function. For example, the FancyTooltips script rewrites all title="" attributes as fancytooltip="", thereby enabling the FancyTooltips script to recognize and act upon such attributes exclusively.

The problem is that once all of the title="" attributes have been replaced with script-specific hooks, Lightbox no longer recognizes them, making it impossible to display their contents. Hence the mysteriously missing Lightbox titles. To verify this, use your browser's "Save Page As…" feature to save an offline copy¹ of a page that uses both Lightbox and FancyTooltips (or any other similarly conflicting scripts). Then, examine the source code of the offline copy and look for title="" attributes replaced by fancytooltip="". If you find that the title and/or alt attributes have indeed been rewritten, read on for the fix!

The Fix

Now that you hopefully understand the nature of the dilemma, it is time to completely eliminate the conflict.

Open your lightbox.js file and scroll down to around line #333, searching for the following:

// if image is NOT part of a set..
if((imageLink.getAttribute('rel') == 'lightbox')){
	// add single image to imageArray
	imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
} else {
// if image is part of a set..
	// loop through anchors, find other images in set, and add them to imageArray
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];
		if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
			imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
		}
	}
	imageArray.removeDuplicates();
	while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
}

Now, near the end of the fourth line, replace title with fancytooltip. Then, likewise, near the end of the eleventh line, replace title with fancytooltip. You're done. Upload the file and check tooltips and Lightbox images. You should now be enjoying titles in your image popups and titles in your fancy tooltips. Note that this easy fix may be generalized to any set of similarly conflicting scripts. Simply determine the rewritten attributes by saving an offline copy and then search for & replace the offending values in the corresponding scripts.

This article is a work in progress. Please contribute any helpful information by leaving a comment below or via the Contact form. God Bless.

Footnotes

• ¹ In general, offline copies are very useful troubleshooting tools, as they represent the code after scripts have acted upon it, thereby offering a more accurate view of what the browser actually interprets.

Ever imagine your website represented as a cluster graph? Well prepare your DOM and check out Sala’s Websites as Graphs project. Each map represents a single website page, each dot represents a different tag, and each color represents a different set of tags. Here is the graphical representation for Perishable Press:

Perishable Press DOM Graph

Welcome to Perishable Press! This article covers a plethora of useful JavaScript tips and tricks. For more excellent JavaScript information, check out the JavaScript tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Nifty JavaScript Design Tricks

Clickable divs

Standard design practice dictates that the site logo or banner located at the top of the page links to the home page of the site. There are several methods for including such functionality into a design, including this JavaScript trick that transforms an entire element (e.g., any div) into a link pointing to the site root:

<div id="banner" onclick="location.href='/';" style="cursor:pointer;">
   [ content goes here ]
</div>

Hide/Validate JavaScript Code

JavaScript Comments

Commenting your scripts is an excellent and highly recommended practice. Here are two methods of commenting within a block of JavaScript.

<script type="text/javascript">

// Use two forward slashes for single line comments

/* Use this method for
multi-line comments */

</script>

Link to an External JavaScript File

This is the preferred method of including JavaScript files. It is invisible to non-JavaScript browsers, and keeps the document from breaking during validation. Use if possible.

<script src="external.js" type="text/javascript"></script>

Hiding JavaScript

Hiding JavaScript code from non-compliant browsers is rather easy, just employ the following lines of code:

<script type="text/javascript">
<!--

JavaScript goes here
JavaScript goes here

//-->
</script>

Unfortunately, JavaScript code does not validate as XHTML. Fortunately, it is possible to present your code as invisible to the validators by enveloping it with the following lines of code:

<script type="text/javascript">
<![CDATA[

JavaScript goes here
JavaScript goes here

]]>
</script>

Combining these two methods produces a deadly weapon in the hellish JavaScript battle:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

JavaScript goes here
JavaScript goes here

//--><!]]>
</script>

And, an alternate method has been suggested, but sustains inconsistent consensus:

<script type="text/javascript">
/* <![CDATA[ */

JavaScript goes here
JavaScript goes here

/* ]]> */
</script>

Here is the same commenting method used for CSS:

<style type="text/css">
/* <![CDATA[ */

CSS goes here
CSS goes here

/* ]]> */
</style>

A slightly modified version of the previous method:

<style type="text/css">
/* //<![CDATA[ */
<!--

CSS goes here
CSS goes here

//-->
/* //]]> */
</style>

Here is yet another way to comment out CSS content:

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

CSS goes here
CSS goes here

/*]]>*/-->
</style>

Finally, although popular, avoiding this method has been recommended:

<script type="text/javascript">
//<![CDATA[
<!--

JavaScript goes here
JavaScript goes here

//-->
//]]>
</script>

Non-JavaScript Browser Support

Use the <noscript> tag to provide support for antiquated browsers and serve 'em some alternate content. The <noscript> tag operates according to the presence/absence of JavaScript. Consider the following:

<noscript>
 <p>This will not be displayed if JavaScript is enabled.</p>
</noscript>

Here is a specific example that would provide a user with the option to continue browsing without JavaScript:

<noscript>
 <p>
  It appears your browser doesn't support JavaScript.
  Please visit <a href="http://domain.tld/noscript.html">the no-script page</a>
  to see a non-JavaScript version of this page.
 </p>
</noscript>