Posts Tagged ‘Javascript’

Adding Scripts, CSS, And Extras – When Is It Too Much?

Thursday, September 9th, 2010
Adding Scripts, CSS, And Extras – When Is It Too Much?

Let’s stick that in there too!

Ok, I will admit that this topic just popped into my head, mainly because of what I was doing at work, and then thinking of the HTML5 Boilerplate. I’m using that as a starting point to illustrate what I am talking about, not bashing it. I think the template is awesome and I am using it in my personal projects.

Let’s say we are using it to start a new site. It has a lot of awesome things in it to compensate for a ton of stuff. It has jQuery, a ready to go script page for your js, a nicely organized style sheet, dd-belatedpng.js for png support in IE6, Google Analytics code, Modernizer 1.5 js for HTML5 tag support in browsers that don’t actually support HTML5…and a few other things I can’t remember at the moment. For argument’s sake though, let’s just pretend that is it.

(more…)

Creating a simple jQuery Gallery

Thursday, August 12th, 2010
Creating a simple jQuery Gallery

Thinking it through

I can’t claim anything new with this, but I would like to show you how to use jQuery to build a very simple image gallery. This one really hit home on how important it is to think your way through what you want jQuery to do BEFORE you start writing the code. You will find that you get into trouble if you don’t.

Click here to see the demo.

Binary Solo!

Ten points if you can comment and tell me what HBO show that heading is from. Anyway, on to the code! I will leave out the css because it is really irrelevant. You can style your gallery however you want. This is just for demo purposes.

(more…)

Using jQuery’s hover() event to the fullest

Tuesday, July 20th, 2010
Using jQuery’s hover() event to the fullest

The problem

Today at work I was given the task of using jQuery to create a very specific effect. I have an unordered list with three list items. When the user rolls over one of them, the item gets a class which sets the background to a new color, while any other item that has that class, has it removed. On top of that, if the container the list is in loses focus (meaning the cursor leaves the container), the last list item hovered on should retain the background changing class. On top of THAT, whenever one of those said list items is hovered over, one of three content divs below it should go from hidden to visible. Oh, and I have to have the second item started off as looking like the hover state. This one took me a while to figure out. I could get the normal rollover, but the keeping the class thing when the list item lost focus through me for a loop.

Click here to take a look at the final working jQuery. You’ll see what I was trying to do if you roll over and out and what not.

(more…)

Real example of jQuery’s replaceWith()…and Ext’s method

Wednesday, July 14th, 2010

What the hell is Ext?

That is what you are asking yourself, right? It’s another javacsript library, which I have gotten into many an argument over why one would use it over another library. Personally, I find it to be more like writing straight javacsript (which I suck at). My point isn’t to get you to use it, because I don’t care. I love jQuery, and that is that. I’ll show you the difference in this post/article between how jQuery would do something versus how Ext would do it, because I HAD to do it in Ext. On to what I had to accomplish.

The Problem

Here is the set up: I have a hard-coded div with two links in it, I am not allowed to touch the actual HTML page itself (meaning the myPage.html), but I do have to change the href of the first link, and the text that displays in it.

For you jQuery newbies, I’m going to be using first() and replaceWith() to do this, and you will be amazed by the simplicity of it. Because I am not all that familiar with Ext Core javascript library, I actually had to write this in jQuery first and then translate it over. This though is much easier than when I tried doing that with my slider.

(more…)

Taking LESS.js for a spin, and how does it compare to Sass 3

Wednesday, July 7th, 2010

What the hell is LESS?

LESS logoIf you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

(more…)