Basically this is a negation of the following, god damnit my head hurts

Oh well new day, new learned things. God Bless Amerika

After a week of work, I finished the modifications to the this theme, based on the Inanis Theme MOD. This theme is used on both my blogs and so far it works good. I havent encountered any issues so i decided to release the files. Compared to V1.3 which can be found here, this version has a shitload of improvements such as: (taken from readme)

• Version 2.0
  • a) New Image Preloader Via CSS 2.0
  • b) Since dropping support for IE6, trying to make the most with the newest technologies, added rounded borders for firefox/safari/chrome while keeping the old img based solution for IE7/8. People using those 3 aforementioned browsers will get a small boost in speed since also the divs that took care of the entire img fest are not loaded anymore.
  • c) Fixed a small issue with the wp_smilies class + added support for the default wordpress alignleft/aligncenter/alignright classes which didnt existed in the CSS previous versions
  • d) For IE6 added a small download link for newer browsers ( update you bastards )
  • e) Small optimization done to the start menu. When you click a new theme it activates the theme and automatically closes the menu behind.
  • f) Decided to drop all those extra clear divs and started to use the clearfix method, so lots of divs have been sliced and diced.
  • g) For the index, i modified the file so now the excerpts of the posts will show instead of the full post. The user can access the full post by clicking on the more link. Very easily.
  • h) More minor fixes for the css so everything fits.
• Version 1.4 Image Preloader + NoScript functionality.
  • a) Added an image preloader.
  • b) Small no script stuff.
  • c) fixed some footer issues with the links
• Version 1.31 Small Bugfix
  • a) Fixed a CSS issue with pingbacks

The files can be found inanisMod_v2.0 also please put the comment-template.php from this zip in the wp-includes folder since the xhtml structure is modified. comment-template

After working on the google shortcuts for a while, i decided to open up IE 8 and see if the application works or not. I was surprised and started to do the old alert("hax") thing every dozen lines. The problem is with the $(window).keypress(function(e){}). It seems that IE doesnt understand at all the $(window) property at all when it comes with keypress/keydown/keyup events.

After some research, this is a known issue from IE5 days, which is quite weird that jQuery didnt fix it in a way so it works with $(window)

However i did check the width/height properties and both values return different values.

jQuery

I did look over this issue over Google but I couldnt find any information about it. Really sad you know.

In this post I will elaborate and add more functionality to a previous post of mine found here here. Basically i have added more functionality to the page, such as left / right key navigation, number key functionality, enter/escape key functionality, and of course the entire suite of conditions needed so the code works properly.

I have tried to build each functionality as a module, which you can add and remove, however in order to have the search function work well with the tab functionality and switching, then some interdependence was needed.

the XHTML

The XHTML is not different from the last version, the only thing different is a few bits and pieces of additions, and more importantly a couple of new lists so we can have a tab functionality. Other than that, there were no major changes.

the CSS

As with the first version this CSS is very basic however you can style it as you wish, probably in the future i may add some nicer styles to the project but for now, since it’s just a tutorial thingy, i think what we have is quite enough.

the JS

The JS suffered major changes, (of course right, we’re building a JS application here). It is kinda hard to explain everything in the post, but all the lines (almost all the lines) are heavily commented within the JS file itself, so please refer to that file for exact instructions and explanations.

The files can also be found online Here and a zip file can be downloaded from here

In part 3 of the series i will try to enlarge the search possiblity to include more than 1 letter

Did it happen that when you use an animation such as fadeIn()/fadeOut() on a LCD screen, that has windows cleratype on (this happens automatically in windows vista+ but can be set on and off in windows XP), on IE (all versions), the text is not antialised anymore. This is due to the filter attribute IE browsers use to make the cleartype/stuff.

The solution is relatively simple, like putting a function callback on the fade in()/fadeOut() such as:

JQuery Code

It’s not a perfect solution, and it may be a bit laggy and you can still SEE THE TEXT BEING CLEARTYPED, but at least it wont stay without cleartype and look like shit. Also this is the only way to do it until jQuery incorporates it’s own fix to counter IE‘s behavior.

I was working on a project and i was requested to do something ala Gmail shortcuts, aka you press a specific button and something happens, well, first off i looked on the web to see if there is any information, which of course it’s not at least from what i looked so i had to build it myself

First off we’ll start with a basic XHTML, containing an un-ordered list, styled a bit, the real secret is the JS itself, you can style the xhtml/css as you want, it doesnt really matter. To save space i’ll upload the complete final files at the end of this post, with instructions and comented css/xhtml/jquery

The XHTML

Okay what everything means is the p.tip is basically a tip, how to use the system, not important in the JS.

the div.helpBox is very important, because in JS, it will hold the letter the user typed, due to the JS used only 1 letter will be saved, the last one he typed.

the div.container ul holds the li elements that are the things we are interested in, and finally the li tags hold the names we wish to search through.

Please note that after you understand how this works, you can change the xhtml/css structure to anything that suits you, this is just a demo, to show a concept.

Regarding the JS it is commented extensively within the file so please read that. It is possible to make it work for how many letters you want, however the code gets exponentially bigger as conditions have to be added, i will make a post about how to get 2-3 letters to work together very very easily after we build in more functionality in this post, like left/right navigation, what happens if you have different things u want sorted, and of course a top navigation that can switch between the various lists you have stored

Please note that this system can be used for a very extensive part, i posted about what you can do with a li tag in This Post so you could read that also

Attached is a full functional demo, with the js file commented at every step of the way, so for js instructions please refer there

In the next post i will show you how you can have left/right arrow keys functions, and in part 3 a top navigation bar, if you have multiple lists, and updated and enhanced left/right arrow key functionality to work with the new lists (this actually took me a while to figure out) AND in finally part 4 the ability to sort via 2 and 3 letters, each part being build on the code that is here ((this i havent done yet, so it will take some trial and error to do so this post may not come as soon as the other 2 parts

Here is the attached file How To Do Quick Shortcuts ala Google Mail Part 1 and a demo can be viewed online HERE

Did you knew that Google Chrome does not understand keypress() on special keys like arrow keys/esc/enter/etc ?

Me neither

I was trying to get the following code to work and it didnt work in Google Chrome at all

The first function works, the second works in Firefox but not in Chrome. After much headbanging around the room i tried to replace keypress() with keydown() and surprise suprise, now it works. I really dont know what to say about this bug, works with any normal key but not with special keys. Do take notice of this bug so you dont waste 30+mins trying to figure out why this happens

Cheers

This is a post about the 3 properties in javascript, keypress, keyup and keydown. There are some small differences in the means to extract the data of the pressed key.

First off to explain the 3 properties:

• keypress – this is both a keyup and keydown, it triggers when the key is pressed
• keyup – this triggers when you lift your finger from a key
• keydown -> this triggers when you drop your finger on a key

And now the mind-bongling differences start to creep up. We have 2 properties that take the info stored charCode and keyCode

First off in a keypress event the key is stored in EITHER keyCode or charCode, but never both, . If the key pressed generates a character (e.g. ‘a’), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode. So basically means that if the key is a character is stored in the charCode property, else it’s stored in the keyCode property

To complicate the problems even further, charCode is never registered in keypress and keyup events, so keyCode is used there

So the solution is a system that checks for both options, .which property checks both keyCode and charCode but this doesnt always work with special keys (F1-F12/ESC/etc) so the solution used in a keypress event is

The above first checks for e.keyCode, if that is not used, then check for e.which which checks both keyCode and charCode properties. I dont know how it actually works, however through experimentation i have saw that .which doesnt always work, so i was forced to use the .keyCode property

Hopefully this can shed some light on this situation

I just found out something very very interesting when i was working on a project. Basically it required me to put a div inside a a tag and that div also had some links. I managed to do that however the code is not valid. Will post source code with examples and explanations tomorrow.

Okay so basically what I was trying to create was something like this (simplified for good reasons)

My version also had a hover JS element over the entire box, so when the user hovers over it, it gets highlighted. So far nothing went bad, everything fits together nicely

Attached is an image of said file

The Challenge came when my client asked to encompass the entire div into an a tag so he could use it for redirecting to something else. Unfortunately as we know, <a href="#"><div ></div></a> does not work, so i had to come up with a solution to this matter

The situation was quite easily done, since those boxes had to be floated, i could replace them with a <li> tag. However this was close but no cigar, since i still ended up with the old <li><a href="#"><div></div></a> situation. Then i thought about the span tag and since the span and div tags are both MEANINGLESS and Almost identical in behavior i could simply replace the div with the span and just make sure to put the display: block; property on the span so it will replicate the div. and the span tag works inside a <a> tag

So my code at the end looked something like this:

However then i had a problem, the encompassing a tag reduced my 2 inner a tags useless. Given this situation I had to create another div outside the encompassing a tag and absolute-position that div in the same place so it will look the same but behave totally different, now all links are working properly, and the user wont even notice the difference. The only thing not quite correct is that the code is not valid, but meh, sometime you have to cut some corners.

This is the almost the final draft with the code

I was always wondering what jQuery can do to help me give more power to my CSS stylesheets so one day after some time spent on the web i discovered a very very simple solution that was so easy to install that i was baffled that i couldnt figure it out a lot sooner. So without further comments here is the rundown of the stuff.

the XHTML

It’s very straightforward very easy to implement

You may wonder why i didnt use the href tag instead, well if the user has javascript turned off, then it means that he will be redirected to the CSS file in question rather than just changing the file which is very very bad so thats why we are using the rel attribute.

The jQuery

What did we do here? Simple, everytime a user clicks one of the links in the nav id, the rel attribute we specified is given to the LINK element in the head section of the page. the link element is the tag which inserts external CSS files, so by changing that we CHANGE how the site looks.

Now since we did that and it works, users may be annoyed to do this everytime they enter your site, so it’s a good thing we have the cookie jquery plugin which sorts all our issues. so with some small tweaks to the jquery code we get something like this

Now everything is AOK, only that the user sheets a small shutter everytime they load the page, since javascript is loaded after the HTML and CSS is loaded. to prevent that we can put the if statement ABOVE the document ready function. This is not recommended most of the times but since we know exactly WHAT to manipulate we can do this on this occasion.

In case people didnt know this is the order you need to put link the scripts/CSS in order for this technique to work.

And that is all, nice nifty webpage that does the trick and helps you out enormously when you try to make larger font sizes and stuff like that, even for skinning purposes.

Questions in comments, will answer all of them.

Everyone loved valign=”middle” on tables… well life just got better with jQuery. This plugin works flawlessly however make sure that both the element itself and the parent element do not have any top/bottom paddings, else please modify it using the .outerHeight() property that takes into consideration the padding/border of those elements. Tweak and use as necessary.

the JQuery

You can get the benefits of valign=middle no problem.

So just put the jQuery framework script then this script above and call the elements you want to be valigned=middle by using this

Also another VERY NIFTY thing to do is, in order to prevent the user from seeing the javascript process (since first HTML is loaded, then CSS file is loaded, then any images are loaded, then JS is processed) you can do this.

First you need an .outerBox that encompasses the Box element, and then you need to have the box element with a declared height, like #box { height: 300px;}. This workaround is only good for IE 6 since that sucks donkey balls, and has a JS rendering engine from 1000AD. however depending on the amount of content being displayed (like entire columns) IE7 which appeared in 2000AD may require this fix also. Other browsers are OK so this is BS

CSS:

Javascript:

End of story.

And for the other more compatible browsers you can put this in another JS file. The previous one was inserted in the HTML using conditional comments <!--[if IE lte 7]> <script src="./../js/biteMe.js" type="text/javascript"/><![endif]-->

$("#box").vAlign(); and just use Conditional comments to put the IE specific things in so they wont see them, and since you are linking 2 different JS files, (again with conditional comments) you script WONT JAM.

Complex solution for an ancient problem.

Cheers