jQuery

Javascript / jQuery / Open Source / Programming — 9 Comments
9
Aug 09

A couple useful jQuery Snippets

For popups, just add class=”popup”

jQuery('a.popup').live('click', function(){
	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
	if (window.focus) {newwindow.focus()}
	return false;
});

To open in a new tab, add class=”newTab”

jQuery('a.newTab').live('click', function(){
	newwindow=window.open($(this).href);
	jQuery(this).target = "_blank";
	return false;
});

Check if something is in view

function in_view(elem){
	var docViewTop = jQuery(window).scrollTop();
	var docViewBottom = docViewTop + jQuery(window).height();
 
	var elemTop = jQuery(elem).offset().top;
	var elemBottom = elemTop + jQuery(elem).height();
 
	return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop));
}
Javascript / jQuery / Open Source / PHP / Programming / Wordpress — 2 Comments
1
Jul 09

A better way to use jQuery in WordPress Themes

Since a lot of people come to my blog looking for a way to add jQuery into their wordpress themes, it turns out that there is a better way to do it than the way that I previously blogged. You can include jQuery from the current WordPress install by calling:

wp_enqueue_script("jquery");

Followed by:

wp_head();

You can even use it to include the jQuery library that you are adding with your theme (so that it works after wordpress updates their library):

//First you have to get rid of the one that wordpress includes:
wp_deregister_script('jquery');
//Then you have to replace it with your own:
wp_register_script('jquery', (bloginfo("template_url")."/js/jquery.min-1.3.2.js"), false, '1.3.2');
//or you could use the one that google so kindly provides:
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
//Then enqueue it
wp_enqueue_script('jquery');
Javascript / jQuery / Linux / Mac / Microsoft / Open Source / Programming / Twitter — 4 Comments
14
Mar 09

jQuery bsod plugin

So I was checking up on my twitter feed yesterday and saw a tweet that direceted me to this: http://devthought.com/wp-content/projects/mootools/BSOD/:

The script BSOD.js provides an easy-to-use class to boost the error reporting user experience of your websites.

To fully understand the characteristics of this technique please refer to this external article

I thought to myself… I can do that. I will use jQuery. So I spent most of yesterday after work learning up on how to make a jQuery extension (I wanted to be able to call it the same way as the moo-tools one)

$.bsod();

I got a bit carried away. I didn’t want just a bsod, I wanted each user to feel like the error was specifically made for them, so I added in os detection and os specific styles. I liked the way that he incorporated Spyjax (ajax for evil!), so I added that by default (you can turn it off of course if you want, it will blame a random site that is in the list). I also liked the colour changing, so that is in there too (it works only for the windows bsod though because linux and mac have images). Here are the options:

  • color: the background colour (win only, others are all black)
  • font_color: the font colour
  • error: the error message you want to display
  • os: the os (default is to guess the user’s os)
  • blame_url: boolean – true = blame a specific url
  • url_array: an array of urls you are looking to blame
  • error_array: a bunch of errors that you would like to use (one is randomly choosen)

Dependencies

Right now, the images and jQuery (tested with 1.3.1).

There is also a style that is compressed using cssTidy and inserted with the bsod.

Without further ado:

The demo (click on a word to see the bsod)

bsod.1.0.zip (with the dependencies included so you can use it right away!)

And some screen shots:

screen1 screen2 screen3 screen4

Tested in:

  • IE 8, IE 7
  • Firefox 3
  • Opera 9.63
  • Chrome 1.0.154.48

In case you missed it:

The demo (click on a word to see the bsod)

bsod.1.0.zip (with the dependencies included so you can use it right away!)

Code Igniter / Javascript / jQuery / PHP / Programming — 3 Comments
16
Aug 08

Adding hints

Sometimes it is not totally obvious what you are looking for the user to enter into a text box.

Take this one here:

It is not obvious what we are looking for in this form, By email might is probably an email address. In person is probably an address. Online? That could also be an email address, a skype name, a msn messenger account name, a website…. you get the idea. Other, well, that could be anything, but what is that second box for? To be fair, the form has values in it telling what should be done, I removed those for the sake of the example. That is indeed one way of doing it, but that means that someone has to select all of the text and delete it when they get to that box. I don’t know about you, but I find it a little annoying when I have to do that… So, I started looking for a solution, and I found one that uses jQuery (my javascript library of choice). I could have written it myself of course, its not that hard really:

if(form.input is empty) {
   form.intpu.value = form.input.text
}
if(form.input is clicked){
   form.input.value = ""
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

I decided to modify that slightly, so that if the form was filled with the value found in text it would be lighter than normal, so:

if(form.input is empty) {
   form.intput.value = form.input.text
   form.css("color", "#999")
}
if(form.input is clicked){
   form.input.value = ""
   form.css("color", "#000")
}
if(form is unclicked and value = ""){
   form.input.value = form.input.text
   form.css("color", "#999")
}
if(when form is submitted and form.input.value == form.input.text){
   form.input.value == ""
}

Here is the final result:

Oh ya, a bonus is that when they hover over it and have javascript turned off it will show the hint as well, and it is screen reader friendly! Accessability is good!

If anyone wants the code I can post it.

Javascript / jQuery / Open Source / Programming / Wordpress — 9 Comments
22
Jun 08

JQuery and WordPress

Update: New Post – A better way to use jQuery in WordPress Themes

I was making a new template for my site. I was originally going to make it all curvy and web 2.0… but I figured, since I am not the best at the visual design of things I went with this. I like it.

While I was making it, I was looking at using jQuery to do the curvy web 2.0 things. Now, if you have not used jQuery before, you should check it out, it is simple and there are a million plugins for it. There is one for corners (which I was going to use), there is a lightbox one, so on and so forth. It is also really small, the version included with the latest wordpress install is 1.2.3 which is about 30 KB. The latest version is 1.2.6.

Since I was not going to make it all curvy I decided to add an easter egg to my blog using jQuery.

At first I kept getting the error:

Error: $ is not a function
Source File: http://localhost/blog/
Line: 22

That is apparently because WordPress uses a lot of different javascript libraries and apparently they have done a bit of rewritting. instead of using the $(“”) to start your jQuery javascript, you use jQuery(“”). This took a bit of searching and testing to find out, but in the end I got that figured out. It was then on to the code to make the easter egg work. Here it is:

jQuery(document).ready(function(){
 jQuery("h4").click(function(){
  jQuery(this).fadeOut("fast", function() {
      jQuery(this).html("π").fadeIn("fast");
      });
  });
});

Step by step:
1 -> Load this when the page loads
2 -> Whenever a h4 is clicked (there is only one here so its fine to do it this way)
3 -> Fade out what we clicked on fast
4 -> fade in pi

Nice and easy (and it looks cool too). This could be put to much more practical uses like translations or possibly a slide show of images (fadeIn pause fadeOut, fadeIn next image). For now it will just be a small easter egg that I added to my site.

Oh, and apparently the google syntax highliter has decided not to work in this version of wordpress so, I am now using wp-syntax instead.

Oh ya… and you have to have these lines in your code before you call any of the jQuery functions.

<script src="./wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script src="./wp-includes/js/jquery/jquery.corner.js" type="text/javascript"><!--mce:1--></script>

(PI is an inside-ish joke by the way)

Edit: You do not need the jquery.corner.js part… unless you want fancy corners.. you would also have to download it too… if not you will get an error.

Ok, I think there is a bug somewhere, if you click through using the page links, and do a search the pi thing will work. If you rely on the cache (go to the same page by clicking on the title link of a post/page) it does not work at all. (At least in FF3)

Newer Entries →