Cool jQuery plugin…Spritely

March 10th, 2010

Spritely jQuery pluginHaven’t tried it yet, but I will. I am generally not a fan of plugins, mostly because I am still learning, and want to know how to do things myself. But this is still freakin’ cool. It animates objects using sprites, html, and javascript. Best thing about this is that it is NOT flash. Here is a link to the plugin.

The crows that are flying around, plus the background, are all done using this plugin. The crows are 3 images on 1 sprite, animated in order. Really digging this, and I can already think of a few sites that I’ve done for work that I could have used this on.

Tags: ,
Posted in Cool Links, Javascript | No Comments »

Changing the color of text when they highlight with CSS

March 9th, 2010

I wrote this little tid-bit down a while ago, and I snagged it from Chris over at css-tricks.com. He has no idea who I am, but I’d like to think if he did, we would be on a first name basis.

Anyway, you can change the color of the highlight that shows when people select text on your site with this little bit of CSS:

::selection {
        background: #ffb7b7; /* Safari */
        }
::-moz-selection {
        background: #ffb7b7; /* Firefox */
}

If you wanted different colors depending on the paragraph they were selecting in, you would add a class to the tag and write the style like this:

p.className1::selection {
	background: #ff0000;
}
p.className2::-moz-selection {
	background: #ff0000;
}

Nice little bit of customization. Unfortunately it only works in Safari and Firefox, but try it out anyway. Its cool.

Tags:
Posted in CSS, Web Design | No Comments »

CSS Selectors – a real world example

March 5th, 2010

Today a co-worker of mine had a simple problem that he wanted some help with. He needed to find all the “a” tags within a specific div, and if its href attribute ended in .pdf, then add a background image to it. I am going to guess that most people would just go and add a class to all the “a” tags that needed the image. That just puts more html on the page, when you can effectively do this with just some css.

Take into account, this example that we used today, works in all modern browsers, but not IE6-. Worked in IE7, so that was a good plus.

Here is the css:

#divId a[href$=".pdf"] {
     background-image: url(../images/imageName.gif);
}

This says get the div with whatever id you are looking for, with an “a” tag, that has an “href” attribute that ends with exatly “.pdf”, and add the background-image to it.

I then did the same thing but for all links that got to “.docs”, and displayed a different image. So the second style was:

#divId a[href$=".doc"] {
     background-image: url(../images/imageName2.gif);
}

If you actually wanted to hit ALL the “a” tags within the site like that, just remove the #divId from the style.

Tags:
Posted in CSS, Web Design | No Comments »

New Wordpress theme installed!

March 3rd, 2010

Woo-hoo! My new Wordpress theme is now installed. I obviously still have some tweak to do…such as a nav, style the footer, and some other minor stuff, but all-in-all, a success! I learned a lot by doing this re-theme. Mainly because I did it the correct way this time, instead of my quick and dirty method. Let me know what you think!

Tags: ,
Posted in Web Design, WordPress | No Comments »

Almost done!

March 2nd, 2010

Check the link in the previous post! I am almost done with the new theme. I may even install it here tonight! There was a lot of trickiness involved, and some CSS even I haven’t seen before. Such as this:

.entry ul li:before, #sidebar ul ul li:before {
      content: "0BB 020";
}

You know what that does in the default theme in Wordpress? It adss >> in front of all the sidebar list items. REALLY damn annoying. I searched the code for about 20 minutes and googled my rear off. Finally got the right search terms to bring up a forum post of someone trying to do the same thing.

Apparently you can use the content property to add things to the html…such as this example:

a:after {
     content: " (" attr(href) ")";
}

That adds the URL in parenthesis after each link. Interesting bit of css right there. Can’t think of a reason why I would use it off the top of my head, but still cool.

Posted in Uncategorized | No Comments »

Redesign progress, and a link

February 26th, 2010

So, I thought I would post a link so anyone interested can see the changes as they happen for my redesign. If you check it out and you see a totally different theme up there, don’t worry, I’m just using it to check something out. I kept working on my jQuery slider last night, by adding a list that can also control the slider’s movement. Was actually quite easy…here is snippet for the list javascript.

$('#controlList li').click(function() {
	currentPosition = ($(this).index());
	$('#slideWrap').animate({'marginLeft' :
        slideWidth*(-currentPosition)});
});

What does this do? GREAT question. The first line is to get all the list items in a div with an id of controlList, and put a click function on them. The second line is to set the current position of the slider equal to the li that was clicked. So if you click the third list item, currentPosition is = to 2. Why 2 you ask? Because the index of something starts at 0, which is good, because here, currentPosition is set to 0 at the start also.

The third and fourth line move the slider the width of an individual slide times the negative position. Why negative? Because we are always adjust the left margin of the slider, and it starts at 0. To get to slide 2, the margin left is going to be -1 x the slide width, to get to slide 3 it will be -2 x the slide width, and so on.

Posted in Javascript, Web Design | No Comments »

AWESOME read if you use jQuery

February 23rd, 2010

I haven’t finished reading this thread, but seriously, it is extremely entertaining. I can’t begin to understand any of the technical garbage these guys are going on about, but if you use jQuery or are a javascript writer at all, you will find this interesting.

Posted in Javascript, Web Design | No Comments »

Write Javascript and preview it easily!

February 22nd, 2010

Found this awesome link browsing through something or watching a video. Sorry, can’t remember specifics, but now that I have it, I use it all the time. Check out JS Bin.

Type your javascript on the left, paste in your html/css on the right, select what javascript library you would like to use, and finally click preview!

Special note – do NOT click the Revert button unless you REALLY want to clear everything. Otherwise, it deletes out what you just put in. Found that out the hard way. I thought it was a refresh button at first, and it took out everything I had just typed. Sucked.

Also, if you are using a library that it does not have in the include drop down box (Ext. for example), no problem. Just paste in a script tag that links to it in the html head on the right. And bingo!

Make use of it, I am!

Posted in Javascript, Web Design | No Comments »

CSS Borders trick to make a triangle

February 19th, 2010

Menu imageSo I am working on a project. A Wordpress theme that I want to try and sell on Themeforest.net, and I ran into a problem. I’m using jQuery to do a drop down menu, and I want the submenu to fly out and have a triangle on the left side showing where it came from. Look at the image and you will see what I mean. I was having a terrible time getting that to do what I wanted it to. Which was look like it does in the image you see. I spent about an hour and a half trying to get the stupid thing to work.

Today, I’m browsing my favorite sites, and I come along Jon Rohan’s website. That isn’t anything special, you say. Well, I disagree, because on his site is EXACTLY what I am looking for.

First though, here is the link to the specific page on his site, dinnermint.org.

This CSS trick basically changes a border on something into a shape do to the div having its width and height set to 0. You also give the border a thickness of like 20. You can make all sorts of crazy shapes using a div and its border styles.

Anyway, this fixes my issue nicely, and hopefully you can find some use for it to.

Posted in CSS, Web Design | No Comments »

@font-face made easy with FontSquirrel.com

February 17th, 2010

I used to be afraid of @font-face css. Why, well, because I didn’t know how to use it. Well last night I tried it out on a contest I entered over at css-tricks.com. The CSS-Off. Basically, they give you a psd and you have to build it. Well, I didn’t have one of the fonts they used.

So I went over to this site I saw in a video tutorial over at nettuts. Check the link out if you find my short tutorial not to your liking. You should get the hang of this though, since it really is quite simple.

Font SquirrelOnce you are over at FontSquirrel.com, click on @font-face kits, choose a kit, and click on its Get Kit link. This will then download the kit to your desktop.

After you unzip the file, copy the font files (you will need the .eot, and the .ttf) to your website folder, and put them in new folder called fonts… or whatever you want to call it. It doesn’t really matter. Open the stylesheet that comes with the kit, copy the @font-face style, which will look like this:

@font-face {
	font-family: 'CloisterBlackLight';
	src: url('CloisterBlack.eot');
	src: local('Cloister Black Light'),
local('CloisterBlack-Light'), url('CloisterBlack.ttf')
format('truetype');
}

See that font-family: there in the style? Change it to whatever you want. Doesn’t matter…could be called font-family: ‘Awesome’;. Then change the src: url to the correct path on your server. So it would possibly be this: src: url(‘../fonts/CloisterBlack.eot’);.

Do that for the second src url as well. The first one is for IE, because Internet Explorer hates true-type for some reason and needs its own font file. The second src is for all the other browsers.

Then, if you want to use that font family, say on an h1 tag you do this:

h1 {
font-family: Awesome;
}

I would add default familys onto the end of that just in case, but this works in most browsers: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+,
EOT fonts for Internet Explorer 4+.

Have fun with it, and aren’t you ticked it was easier than you thought? You could have been using this for ages!

Posted in CSS, Web Design | No Comments »

« Older Entries