Create a smart, cross browser floating menu using Javascript

I recently wrote a Javascript library to show a floating menu that works cross browser and displays the menu based on a set of co-ordinates that you pass it.

The floating menu is just an absolute div that is hidden from view.

The library is smart in the sense that it determines where best to display the menu. It works out where you have scrolled to on the page and figures out if there is space at the top or bottom and to the left or right of where ever your target co-ordinates are.

This is useful where you want to display a menu, or some div, but you don’t know (or care) where the menu is going to be needed on the page.
Weiterlesen „Create a smart, cross browser floating menu using Javascript“ →

JavaScript Tricks; URLEncode, Foreach and Remove last character

I have come across some neat (if not mind blowing) tricks with JavaScript recently.

Firstly, I needed JavaScript code that copied PHP’s urlencode().
This function returns an encoded string where all non-alphanumeric characters except – _ . are replaced with a percent (%) sign followed by two hex digits and spaces encoded as plus (+) signs.

JavaScript has 2 functions to emulate urlencode(), but both fall short…
The escape function encodes all non-alphanumeric characters except * @ / + – _ .
The encodeURIComponent function encodes all non-alphanumeric characters except spaces and ! ‚ ( ) * ~

The winner for me though is encodeURIComponent as it encodes all UTF-8 characters while escape only encodes ISO Latin characters.

With this in hand, mozilla help provide a neat function.
Weiterlesen „JavaScript Tricks; URLEncode, Foreach and Remove last character“ →

Post XML with HTTPS Authentication using PHP and cURL

Recently I needed to post XML to a particular API and this API required HTTPS authentication. So I needed to send a username / password with the request.

This was pretty straightforward in C#.NET ( at least from my foggy memory ). You needed to use NetworkCredentials. But it was a bit difficult to find a similar way of doing this in PHP… but eventually I found this gem.

This uses cURL which is just a library to send and receive data from remote sites. Now all I needed was a neat way of using cURL to post XML… and I found a neat implementation here.

Two plus two and you get …
Weiterlesen „Post XML with HTTPS Authentication using PHP and cURL“ →

Auto highlight text inside pre tags using jQuery

We use pre tags in the Polldaddy plugin to display the embed codes and short URLs. We use pre tags because it formats the text inside the tags as we insert it, which is ideal for displaying code in particular. The thing is, people like to copy this code and they have to go to the awful bother of selecting all the text manually if they wish to copy the code or URL.

The alternative is to use an text input or text area which will allow you to use a select method that you can call on a click event, but then you lose the neat formatting that pre tags offer.

So I had a look for a jQuery hack to auto select all the text inside the pre tags. The only complication with this appears to be a cross platform solution as each browser appears to have their own way of selecting text.
Weiterlesen „Auto highlight text inside pre tags using jQuery“ →

Regular Expressions

First off, regular expressions are great.

They are a handy quick way to validate or parse data and you can use them in almost all languages. But of all things, I forget neat regex’s and in fairness they are a pita to recall as the syntax is plain nutty.

This is where it ends. I am going to reference all the neat regex’s in this blog as I come across them rather than rely on mother Google.
Weiterlesen „Regular Expressions“ →

Odd or Even Number

I love gems like this. I come across them from time to time but they never stick… then I do a search to find them again.

Anyway a simple way to determine if a number is odd or even, use the following code.

[source language=“javascript“]
function is_odd( $number ) {
return $number & 1;
}
[/source]

Quick explanation
& is a binary AND.

If you have a binary value, and you AND with another binary value, then the result will be the bitwise AND of the two.

Binary values are a series of bits or 1’s and 0’s. However we are only concerned with the rightmost one ( the least significant bit ) as when a binary value ends with a 1, it is odd… when it ends with a 0 it is even.

Now, if I pass that function say the number 13, the binary value will look like 1101.
When you AND with a 1, or binary value 0001, it looks like this…

1101 & 0001 = 0001

We look to the least significant bit, which is a 1, which means the number is odd.

A simple explanation of binary can be found here.

WordPress Polls and Rating Plugin

I am developing ( not from scratch, thanks mdawaffe for the leg up! ) a plugin for polls and ratings on WordPress.org, available here. It basically uses the core code used on WordPress.com with a few extra’s necessary for that platform.

The plugin allows you to create and manage polls and ratings from within your WordPress dashboard. All polls and ratings are fully customizable. I have added the style editor to allow you to create your own custom style for a poll. You can collect unlimited votes and create unlimited polls and ratings. The ratings menu allows you to embed ratings into your pages, comments and posts, including posts on the front page.

I’ve recently added the ‚Top Rated‘ widget that will allow you to place the widget in your sidebar. This widget will show you the top rated posts, pages and comments today, this week and this month.

I have added a template tag so you can now add a rating where you like. Just place the following line into your theme where you want the rating to be displayed.
[code]<?php echo polldaddy_get_rating_html(); ?>[/code]

You can also use the Polldaddy shortcodes in a text widget, similar to on WordPress.com, to embed a survey, poll and a rating into the sidebar.
Polls short code

Surveys short code

Ratings short code

More blog posts about these latest updates here and here.

Javascript encoding

We encode our polls in UTF8 so all sites will be able to render them. But there was an issue with our polls at one stage, when the poll dynamically loaded content into the site, like after a vote, the text in the poll would render all screwed up.

For people unfamiliar with how widgets work, I’ll briefly explain. We give you an embed code (javascript) that you will place in your site HTML (where you want to display the widget). When this page loads, the javascript is enabled and calls a URL from our site to retrieve HTML. The code then places this HTML into a div container in your sites HTML using the DOM and innerHTML. Hey presto, the widget is rendered into your site.

The encoding problem occurred due to a site using another character encoding type other than UTF8. The HTML we send is encoded in UTF8 and the first time the poll widget loaded, it renders and looks fine. But it appeared that after a vote, so another request for HTML, the HTML seemed to adopt the sites encoding, causing the text in the poll to look a mess.

This bugged the hell out of us and like all the best solutions it was a simple one. You simply need to add a charset attribute to the script tag that references or encloses your javascript code.

So something like…

[source language=“javascript“]
<script type="text/javascript" language="javascript" charset="utf-8" src="http://static.polldaddy.com/p/2064343.js"></script>
[/source]

Here’s a decent description of the problem.