Archive for April, 2008

Interesting CSS Hack – Imageless arrows.

Monday, April 21st, 2008

While trying to sort out a problem with overflows and floats for work, I came up with am interesting CSS hack. I created right and left pointing, right triangles in pure css.

Yay CSS Arrow

So it is pretty simple. Those two arrow are just divs with float left or right, 1px width, and 1px solid red borders. By embedding these divs into each other over and over again, each one grows larger to accommodate the 1px border of the next child, creating a right triangle. Then I put each in a different div to position them. I have not put too much into this so far, but see some neat uses right away.
I have not tested this in anything but Firefox 3 Beta 4. My guess is IE will totally freak out, but who know, I do not actually care to test it.

Give me my right click back!

Thursday, April 17th, 2008

This bug, is really bugging me. Have you noticed that in FF3 you cannot get a right click menu on most form elements? I made a patch to add a user option to allow you to enable or disable this behavior and let you actually use the menus the way they where intended. Not based on some idiotic MS behavior model. The patch is in the bug report.

Exact content selector for jQuery

Wednesday, April 16th, 2008

I whipped up this selector after having the problem described in my last post with :contains(‘16F88′) returning 16F88, 16F883, 16F886, etc.


jQuery.extend(jQuery.expr[":"],
{
content: "(a.textContent||a.innerText||'') == m[3]"
});

This will add the :content selector, that will return only exact matches.

Fun with jQuery and bookmarklets

Wednesday, April 16th, 2008

So I pretty much use jQuery for everything. I have used it with Rhino and jetty to parse web pages in data mining. While doing CSS or design for work I regularly use jQuery and the Firebug console to make alterations before making changes to XSL or any other backend. Sometimes while on other sites, something will either just really bug me, like flash or bad element positioning. Firebug takes great care of this, inspect element, delete element. Done. But in a situation like doing a chip comparison on website for piklab. But they do not use jQuery.

The Bookmarklet.
The idea of a bookmarklet is too add the link to your favorites and when it is clicked the Javascript is executed in the pages scope. This script create a new script element, sets the src attribute to the latest version of jQuery and adds it to the current page. Now you can start choppin’ up anyones pages with jQuery.

The Problem.
So like I said. I was trying to look up info on piklabs website. They have headers on a really long data set and I am lazy. The chip I was looking at was near the bottom, and I cannot remember what those headers said by the time I got there, so those checks and x’s mean nothing. Inspect Element… We have some tr.headers (only at the top). tr.odd_row and tr.even_row for the zebra striping.

The Selector.
The chip I want is the 16F88 in the Midrange Family. First I get the row elements
$('tr.odd_row,tr.even_row')
This get all the non header row, now I want to remove all the element not containing 16F88, this is where jQuery really sets itself apart from other framework because of the way selectors can be stacked even within a single string.
$('tr.odd_row,tr_even_row').filter(':visible:not(:contains("16F88"))')
Because :not is a selector function that takes another selector, I can invert the :contains string removing all the other chips in the list. Yay. The one short coming here is that the :contains selector is a non-exact selector, so this match F88, F883, F886. This is not so much a problem of this selector, but that there is not an exact content selector in jQuery yet, unlike the attribute =, !=, ^=, $= (equal, not equal, starts with, ends with) selectors. And even with that, jQuery is still my favorite framework, and this is a nice little out of the normal use for it.