Archive for xHTML / CSS
August 23, 2006 at 12:02 pm · Filed under xHTML / CSS, Javascript
I was recently asked by a coworker if it's possible to create the left hand menu on the following page w/o using Flash.
My first impression and response was, "Oh hell yeah, you can definitely create that using javascript!"
Libraries such as Script.aculo.us, Yahoo UI and Moo.fx immediately came to mind. A few simple event handlers for mouseover and mouseout and simple animations would do the trick. well, nothing's ever simple.
I was able to get most of the funcationality of the Flash version of the menu, except for the part where the menu collapses when you move your mouse out of the menu region. For some reason, the onmouseout that I had attached to my DIV was being fired when the mouse pointer would go over a link within the DIV. I tried for many hours to avoid this, but finally gave up and put a "close" link on the bottom right corner of the menu to close it. I'm sure someone out there can fix this. I thought about using the mouse coordinates to detect whether the mouse pointer was outside the menu, but I really didn't feel like it 
Anyway, here is the final example.
And here is the source zipped up (includes scriptaculous 1.6.2)
May 6, 2005 at 11:26 pm · Filed under xHTML / CSS
Remember the days when your html and javascript skills were looked on as merely second rate skills compared to the hardcore back-end developers? Well, things are definitely changing. With a strong emphasis on usability, clean xhtml code, proper CSS usage and accessibility, it seems like us front-end guys are getting a little more respect.
I graduated with a computer science degree but always had an interest in design, usability and what the user sees on a website. My first choice was to go to a art school and study graphic design. I changed my mind after I found out how much the average graphic designer makes compared to a programmer.
I'm glad I didn't completely give up on the front-end world, because I believe it has given me an edge in web development. I can talk about data types and big-O notations with the programmer geeks on one day. Walk over and talk about hue, saturation and color compliments with the designer freaks on another; making me a geek and freak!
On my previous job I was hired as a front-end designer and producer. My job was to take photoshop mockups, cut them up into html and let them back-end guys insert their JSP code. This was WAY too easy, so half the time I would insert the JSP code myself. I eventually started creating my own custom tags to clean up the JSP/HTML pages (cause having scriptlets all over the place is just nasty.)
But the real reason for this post is because I am noticing more and more front-end positions available on job sites. A lot of them require that you code by hand, that you produce clean xhtml, use proper CSS and know the DOM inside out. The salaries have also gone up for the front-end positions. This really makes me wonder about my current job and how much I'm making.
So if you're a front-end developer and you feel like you should be making more for what you do, take a look at some of the jobs out there; you'll be surprised. A good example is to go to Dice.com, do a keyword search for CSS or XHTML and you'll see a lot of junior and senior level position available.
May 4, 2005 at 6:06 pm · Filed under Resources, xHTML / CSS, Javascript
Here is javascript component that allows you to dynamically insert tables into your page w/o actually putting any TABLE tags in your code. The technique uses the DOM and inserts the table using existing data on the page. This is a nice alternative to purely CSS driven layouts vs. table layouts.
Home of the author of TILT:
http://glazkov.com/blog/archive/2005/05/02/476.aspx
[via thejavascriptweblog]
April 14, 2005 at 10:06 pm · Filed under xHTML / CSS
Still having a hard time creating CSS based web pages? Before you get frustratd and resort back to TABLES, visit the Web Building: Style Templates. It has a collection of CSS templates created by many different authors. Not only fully functional templates and examples, there's even layout creators as well!
April 12, 2005 at 2:34 pm · Filed under xHTML / CSS, Javascript
A few weeks ago I found out about Nifty Corners, a javascript/css based technique of creating rounded corners without using any images at all. The library was pretty impressive and worked very nicely. It didn't require you to add any extra markup to your html either. All you had to do was define which elements you wanted to make rounded, specify the corner colors as well as the background color and it did the rest.
Well since then the original author of the library has been improving on it and adding new features. This new version is even more impressive than the previous one. It allows you to define exactly which corners you want rounded (tl, tr, bl, br or a combination). It also has a new feature that smoothes out the corners using some slight anti-aliasing. I haven't digged into the code to see how the aa'ing is done, but it works! Very nice.
http://pro.html.it/articoli/id_599/idcat_31/pro.html
Or for the impatient, links that go directly to the examples:
- Example one: a single div with antialias
- Example two: brothers divs
- Example three: transparent by nature
- Example four: with or without them
- Example five: color explosion
- Example six: elastic nifty
- Example seven: transparent, tabbed menu. Now with borders.
- Example eight: navigational leaves
- Example nine: a floated image gallery
- Example ten: Nifty layout
And here is the link to download the library: nifty2.zip
