bavotasan.com » var

Use jQuery to Replace a Word with a Link

c.bavota — Mon, 09 Aug 2010 20:54:46 +0000

If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.

If you don’t already have jQuery loaded into your page, include this before your closing .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing . (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, 'jQuery')); 
})(jQuery)
script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.

Easy Overlay Modal Window jQuery Plugin

c.bavota — Mon, 15 Feb 2010 17:04:24 +0000

I developed the following jQuery plugin for the Design options admin panel of Magazine Premium. All it needed to do is display an example of all of the @font-face kits that are available with the theme. It is pretty simple and just fades in a centered modal window containing an image when you click on a link.

There are just a few things you need to put in place in order to get it working. First, there is the plugin iteself.

Here is the jQuery code:

(function($) {
  $.fn.easyOverlay = function(){	
    $(this).click(function(e){
      if($("#easyOverlay")) { $("#easyOverlay").remove(); }
      $("body").append("X
");
      $("+ this.rel +"' alt='' />").appendTo('#easyOverlay').load(function() {
        var wide = ($(window).width() / 2) - ($(this).width() / 2);
        var high = ($(window).height() / 2) - ($(this).height() / 2);			
	var scrollTop = $(window).scrollTop();
        $("#easyOverlay").css({
          top: high + scrollTop + "px",
          left: wide + "px",
		  display: 'none',
          visibility: "visible"
        }).fadeIn();
      });
    });
    $("a.closeit").live("click", function(){
      $("#easyOverlay").fadeOut();
    });
  };
})(jQuery)

Here is the CSS you need:

#easyOverlay{
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  visibility: hidden;
  top: 0;
  color:#fff;
  z-index: 1000;
}
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
}

You can easily change some of the design CSS elements but a few thins need to stay in place to make it work. Don’t change the following styles:

#easyOverlay{
  position:absolute;
  visibility: hidden;
  top: 0;
  z-index: 1000;
  }
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
  }

Now comes the HTML markup:

<a href="javascript:void(0)" class="screenshot" rel="link-to-your-image.jpg">Name of Imagea>

To call the plugin all you need to do is this:

$(document).ready(function() {
  $(".screenshot").easyOverlay();
});

There aren’t any options so all you pretty much get is a centered modal window that fades in when you click the link, and fades out when you click the X.

Test it out below:

Adler | Chunkfive | Galatia | Riesling

All the images used were provided by Font Squirrel.

Using jQuery to make an Expandable Code Box for WP-Syntax

c.bavota — Mon, 02 Nov 2009 17:43:00 +0000

You may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary‘s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

We need to make a few minor changes to the plugin code to get this to work. After you have downloaded, installed and activated the plugin, open up wp-syntax.php and go to line #113:

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }

We need to add a table to the second output.

    if ($line)
    {
        $output .= "\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= " \"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
    }
    else
    {
        $output .= "";
        $output .= "\"code\">";
        $output .= $geshi->parse_code();
        $output .= "
";
        $output .= "
";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your tags.:


<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier

Adding a Simple Quicktag to the HTML Editor in WordPress

c.bavota — Wed, 14 Jan 2009 16:01:19 +0000

When you are editing a post or writing a new post in WordPress, you might have noticed those buttons above the editing box. They add WYSIWYG type functionality to the WordPress editor for common functions such as bolding, italics and linking. WordPress refers to these buttons as Quicktags.

They should look something like this if you use the HTML editor.

If you use the Visual editor they should look something like this.

If you have a function that you use often it is very simple to add it to the Quicktag bar. For this example, I am going to add a button that creates a span tag and asks for a class to the HTML editor Quicktag bar.

The file we need to work with is under wp-includes/js/quicktags.js.

First we need to create the button, so go to around line 36 and enter the following.

edButtons[edButtons.length] =
new edButton('ed_class'
,'span'
,''
,''
,'p'
); // special case

Then we need to add the part that actually makes it call the function that asks the user to enter a class name. Find this part around line 166.

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And make it this.

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else if (button.id == 'ed_class') {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('+ button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And it needs one last part, the actual function, to work properly, so go to the end of the file and add this.

function edInsertClass(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = '';
}
if (!edCheckOpenTags(i)) {
var CLASS = prompt('Enter the Image location' ,defaultValue);
if (CLASS) {
edButtons[i].tagStart = '+ CLASS + '">'; edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);v }
}

When it comes down to it, this might actually be a little bit more complicated of a Quicktag to create but there you go.

Making
and
Tags Work with htmlText in ActionScript 3.0

c.bavota — Mon, 27 Oct 2008 23:54:44 +0000

I had one hell of a time trying to figure out why my paragraph breaks (

) and line breaks (
) were not working when I was using htmlText in Flash CS3 with ActionScript 3.0. All of the other HTML tags that are allowed by Flash worked fine, but those two break tags just would do anything. I had created a TextField variable called “info” and all the code checked out but there was one very important thing that I needed to put in place before it would all work the way I needed it to.

Here is the code that wouldn’t work:

var info:TextField = new TextField();
info.htmlText = "First line. 
 Second line. 
 Third line.";
addChild(info);

Here is what is should have looked like:

var info:TextField = new TextField();
info.multiline = true;
info.htmlText = "First line. 
 Second line. 
 Third line.";
addChild(info);

Why wasn’t my original code working? Well, to make sure that the HTML tags for paragraph breaks and line breaks would function properly, I needed to set the TextField’s multiline parameter to “true”. Just one tiny line of code and then everything worked perfectly. I hate it when that happens!

How to Draw a Rectangle with ActionScript 3.0

c.bavota — Mon, 27 Oct 2008 20:48:07 +0000

I spent the last weekend working on a Flash animation for a client and I came across a few things that gave me a headache and other things that I thought I should share with the world that I thought were just intereting.

If you have ever messed around with ActionScript in Flash then you understand just how powerful scripting in Flash could be. I know they just released CS4 but the ActionScript version it uses is still 3.0, so whether you are using CS3 or CS4 this will still work for you.

Sure drawing a rectangle is no big feat but there are a few little things that make it a little bit complicated when trying to draw one entirely in ActionScript.

The following code is how you were draw a rectangle as a Shape object. It would also be the same if you were drawing it as a MovieClip.

var rectangle:Shape = new Shape; // initializing the variable named rectangle
rectangle.graphics.beginFill(0xFF0000); // choosing the colour for the fill, here it is red
rectangle.graphics.drawRect(0, 0, 100,100); // (x spacing, y spacing, width, height)
rectangle.graphics.endFill(); // not always needed but I like to put it in to end the fill
addChild(rectangle); // adds the rectangle to the stage