Blindsignals

Arrows, pointers, triangles, whatever you wish to call this technique you will end up making a pure CSS arrow; graphics are forbidden!

The process is actually extremely simple, the basic idea is that you you set a nice fat border then remove the side you wish the arrow to point to.

Example Code

Output

So that works fairly nice, but we want to actually do something useful with the arrow like pointing to a link; using a div just complicates the job as we now have to deal with floating. If we change the first example's tag from div to span and remove the font-size property, or set a width to it you will notice we get a trapezoid shape. Let's try and get this fix0red!

Example Code

Output

follow me on twitter!

The possibilities are fairly large with this technique and it almost certainly shuts out any previous requirement of an image to get the same functionality. With positioning properties we can move our arrow anywhere within a block element to make beautiful pointers on menu items, we can make pointing list items, link pointers, and even faux element wrapping!

Go and make peace with your GIFs and PNGs, they are going to hate you after this.

Regurgitating old web techniques seems to be somewhat of a trend I've fallen into recently, but as I see questions and non-existent usage of these important and basic techniques I feel obligated to help spread the word once again.

Here are a couple of great articles explaining what CSS sprites are, their purpose, makeup, and why no site has a reason to NOT be using this technique aside from laziness ( which is why my blog doesn't use them, <3 Wordpress ).

- http://www.alistapart.com/articles/sprites
- http://css-tricks.com/css-sprites/

Save the Pandas, take the bus, stick to w3 standards! Ah, who am I kidding.

I've been coding web pages and applications for quite a few years using quite a few different languages. When I learn something so basic and fundamental I often wonder how much of a noob I really am, and then how many other developers are in my same shoes.

The problem I had was converting HTML character codes such as & # 35 ( apostrophe ) to its ascii equivalent. I've done this many times before, but have always been too lazy to find a different method. After searching through various blogs for a solution I finally came across a beauty.

A basic explanation of the code goes a little something like this; now this is a story all about how my life got flipped-turned upside down, and I liked to take a minute just sit right there, I'll tell ya how I became the prince of a town called Bel Air *record scratch*, err no wait.

Back on track, this function call does a couple of different things; first we are will search the entire string for every instance of our matches, and secondly we try to make our two matches ( yes two! ). The first match for our regular expression is looking for "&#"; this is our entry point into the search and should nab us every instance of those dang character codes. The second part of our match is the (\d+) sub expression, this is really what we are after and will give us the correct end result.

Once our expression has found a good match we will pass it to our callback function.

The first thing you should notice are the m and n parameters that are being passed, these are tied directly to the matches and follow the order they were matched in, or in other words m = "&#", and n = [ our numerical match ]. These could really be variable name you wish, I stuck with the original example because that's how I rock out.

On the inside of our function we simply ignore the m parameter as we are only interested in the digits baby. We pass the n parameter to our Javascript function and BAM, straight up ascii conversion, what, WHAT.

As always, hope this helps someone :]

- If you are a web developer raise your hand. *raises hand*
- If you have ever referenced Javascript for a link address raise your hand. *raises hand*

I'm sure there are many guilty developers out in the wild who use the age old classic

A basic explanation is this little call tells the browser to call the function provided after "javascript:" when the link is clicked. Great, so we have an easy way to call a function using a link! What if I wanted the user to click the link and have the page do nothing? Easy!

Awesome! Now when the user clicks the link the browser interprets void(0) as stop right there, don't do a thing. The problem is "javascript:" wasn't exactly meant for this sort of use and some quirky stuff can happen ( obviously the keyword is there for a reason, but that does not make it a good one).

So what is the solution? Our trusty old pound sign, an onclick trigger, and of course a tiny bit of Javascript.

This will give the same end result as using void(0) and it is the correct way supported by all major browsers; hell some browsers specifically state to avoid "javascript:" in any link addresses, but this is the web, who sticks to standards?

If you really want to be anal about the whole thing and want to argue about Javascript being enabled on the browser ( which you should be sniffing for anyways if you really care that much ) you could do the following.

This will take the user to the page set by the href if and only if Javascript is disabled, but then I ask myself why not just push them to that page as the default?

Anyway, here is an example showing the bad and better ways of doing this for those that might need a side by side.

<script type="text/javascript">
  function Testing(){ alert('hio'); }
</script>

//BAD
<a href="javascript:Testing();">Click Here</a>

//Better
<a href="#" onclick="Testing(); return false;">Click Here</a>


//BAD
<a href="javascript:void(0);">Click Here</a>

//Better
<a href="#" onclick="return false;">Click Here</a>

Hope everyone had a good 4th of July weekend!