PDA

View Full Version : jquery text effect


tony09uk
05-09-2012, 12:27 AM
I am trying to rotate a link a small amount when a user hovers over the link and also have that link at the same angle when that page is active. firstly is this a simple request and secondly can someone advise what commands I need to use, an example would be very helpful as I have very little idea with jquery.

I have looked around quite a bit now and tried a couple of ideas that seemed to miss the mark

domedia
05-09-2012, 12:52 PM
Use CSS3 to tilt the text as much as you want.
http://css-tricks.com/snippets/css/text-rotation/

For your nav, set an ID on your active nav item, and apply the same style. No jQuery needed.

tony09uk
05-09-2012, 03:34 PM
i looked at that but didnt want to use css3 cause i wanted it to be the same accross all browsers

domedia
05-09-2012, 05:14 PM
There is no other way to skew text.. jQuery uses CSS to change the look of your content.

Just do it, and when someone makes a comment about their browser not being able to see it, just tell them that you web site is future proof, and that it will still work in their old browser, they just won;t see the cool effects :)

tony09uk
05-10-2012, 11:01 AM
Okay in that case i could set a message for the older browsers advising them to upgrade.

Just one more question the text i am looking to rotate is in a div called nav. That along with everything above it and a few lines below it are then included using php. I want to be able to angle the link foe whatever page the user is on. How would you do it?

I have googled it but most come back with adding a class to the body tag but I cant see how to make this work as I will be including that under the same file as nav

gentleone
05-16-2012, 07:42 PM
Tony... just paste your code if you're talking about code... it's speeds up getting an answer to your question (well, in most cases :) )

You can give the link a class, can't you? Or lets do cool, cause you don't support older browsers with CSS transform anyway and use a CSS attribute selector to hook a style to that link.

Something along the line like this:

#nav a[href="page.php"] {
transform: rotate(90deg);
}


I have to see the link in order to see which attribute selector you'll need. CSS3 has a few new handy ones too (http://www.ericfeminella.com/blog/2011/11/10/css3-attribute-selectors/).

I've only used the W3C standard one for transform, but you know that you need to add the prefix ones as well. If you're going to use a lot of CSS3 in your projects, then I recommend to use prefix-free (http://leaverou.github.com/prefixfree/). It will automatically add the prefixes to your CSS properties.

Two other tools I use for progressive enhancement are modernizr (http://modernizr.com/) and selectivzr (https://github.com/keithclark/selectivizr).

I also stand by what Dom said... for little things or effects, don't create fallbacks for older browsers unless it is something really important for functionality, accessibility or readability.

domedia
05-16-2012, 09:12 PM
gentleone, some of your answers are like mini-tutorials. I feel like posting this to the home page :-D

gentleone
05-16-2012, 09:41 PM
gentleone, some of your answers are like mini-tutorials. I feel like posting this to the home page :-D
Haha... well, before you do... it do need some proof reading :mrgreen: