can't use it

I coded some javascript to emulate css transitions for older browsers. It works by parsing the CSS of the page, determining rules which also have a :hover state, then attaching itself to onmouseover/onmouseout events and animating according to the hovered definition in CSS.

Here’s the quirky proof of concept and you can read the source to look at the code as well. It’s quite a dirty solution:

• IE has different ways of accessing the stylesheet, didn’t implement that
• It’s probably very inefficient to iterate over all styles to get the hovered rules. Moreover, for each hovered rule, I search through the style rules again to find the un-hovered rule (O(n²) :)). Probably indexing all rules in a JS array would make things faster because of direct access? Another good idea if making the user provide all selectors which should be hover-animated.
• It goes wonky if attributes that can’t be animated are defined (like font-family). I should probably make a list of all “animatable” attributes and only work on them.
• It doesn’t account for default styles defined with a browser style-sheet (doesn’t restore them on mouseout)
• For some reason margin-left and margin-right aren’t read in Firefox?

Anyway here’s the thing: Automatic transition animation for CSS hovers with jQuery.

I found a great library that makes FBJS more similar to real javascript by adding functions like getElementsByClass and getElementsByName, while also borrowing some prototype/jQuery syntax and extending $(’..’).show() etc. syntax to objects. Map and collect as a bonus! :)

http://github.com/gdeglin/inigral-fbjs-library/tree/master

Normally in views you would use $this->helper(); to use a helper, and inside other view helpers, you can simply use $this->view->helper(); to access other view helpers.

This has continued for the last few weeks. Interesting… I wonder if this has anything to do with me using the Offline version too.

Application name in Swedish.

Timestamp in Finnish.

They are coming from the locale from the originator user. Strange.

A few weeks ago Google started using imageless buttons which are produced entirely with HTML/CSS. So they don’t use images and are apparently resizable.

The big problem about these buttons are, that in terms of semantical markup, they are a mess.

<div tabindex="0" act="7" class="goog-imageless-button
goog-inline-block goog-imageless-button goog-imageless-button-collapse-right
goog-imageless-button-primary" id="" role="button">
	<div class="goog-inline-block goog-imageless-button-outer-box">
		<div class="goog-inline-block goog-imageless-button-inner-box">
			<div class="goog-imageless-button-pos">
				<div class="goog-imageless-button-top-shadow"></div>

				<div class="goog-imageless-button-content">
					<b>Archive</b>
				</div>
			</div>
		</div>
	</div>
</div>

I personally see no point in using such a tag soup to implement buttons. In the longer run, loading a single image (assuming we’re using a CSS sprite) and using it over and over would consume less bandwidth than using 725 bytes for each button.

The article in StopDesign offers a better way of creating psuedo-rounded-corner buttons with not that much markup. By the clever use of a sprite, they obtain a horizontally and vertically resizable button.

<button class="btn" type="button">
	<span>
		<span>button</span>
	</span>
</button>

Also as they use an image, they have a much smoother gradient, as opposed to Google’s three-striped version.

There is also the jQuery UI approach to the problem, which I find elegant as well. They have a holistic solution to create toolbars and other UI elements.

<div class="fg-buttonset fg-buttonset-single ui-helper-clearfix">
        <button class="fg-button ui-state-default ui-state-active
ui-priority-primary ui-corner-left">Edit</button>
        <button class="fg-button ui-state-default ui-priority-primary
ui-corner-right">View</button>
</div>

Last fall jQuery announced with great fanfare that Nokia has decided to endorse their framework and ship it with the widgets for its phones.

It’s funny how nobody has noticed that very basic things in jQuery (like $(”item”).html(”something”); ) CRASH the S60 web browser of Nokia (which is supposed to be Webkit, by the way).

Yes, the browser doesn’t even emit errors, it just crashes.

Hasn’t anybody in Nokia actually tried using jQuery with their browser before deciding to endorse them?

We are using a common VirtualBox image for the development of our graduation project. The files reside in our own computer, so the virtual instance only runs the Apache, which pulls the files from our computer and executes them. So for Apache, the files it serves appear to be mounted with NFS (that’s the way virtual systems represent folder sharing)

While a brilliant idea, this led to very strange caching problems. For one, the CSS files I was writing weren’t getting updated. If I put a lot of stuff in a CSS file which is already cached, it would spit out other PHP code in our project!

A few days of confusion and a fellow blogger has the result. So go to the configuration file of your Apache instance in the virtual image and add these two bold lines.

<Directory “/var/www/public_html/”>
Options Indexes FollowSymLinks ExecCGI MultiViews
AllowOverride All
Order allow,deny
allow from all
EnableMMAP Off
EnableSendfile Off
</Directory>

This is a supposed to be a performance-improving default setting, but not very useful for development environments, and especially when the NFS-mounted files are actually on the same computer.

You remember Clippy from Office 97? Yes, we all hated it.

10 years later, Clippy made its comeback in web pages in the form of annoying embedded videos in the page, which appear spontaneously as you open a page. Some lady starts explaining what the site is about and how you navigate within the site.

So, instead of making their sites more usable and simple, they just slap some talking lady in the website. So nostalgic.

I am pretty sure the companies doing these will get very successful in the Turkish web market, where the web users are as clueless and ignorant as the clients getting these websites done. These gimmicks would especially appeal to the e-ignorant crowd that for example send chain e-mails. There are a lot of them, so why wouldn’t you?

One company implementing such system claims that it adds a sense of trust and professionalism to the website, but I think the exact opposite. I get the feeling that a shady company is trying to gain trust using a fake face. I mean, whenever somebody pops up in the screen and starts talking, they either are trying to sell something or get people in some ponzi scheme :)

It’s difficult to get Flash animations right, but let’s see a good example:

It doesn’t annoy you with sound, it’s well integrated in the layout of the site (thus doesn’t cry for attention), it is simple and to-the-point.

Should web designers/developers sacrifice good practice for the sake of clients’ requests? That’s an eternal question, I guess.