Ever been in a situation where you need to do something on click except if it’s already been done, in which case you undo it? Previously, I would do this by setting a class on the first click and then checking for that class to see if it’s already been clicked.
Turns out, there’s a function that makes it easier. Just sticking this here in hopes that someone else stumbles on it.
There’s a pretty common and nice looking that lets you fade to a different background image when you hover over a link, div, etc. For an example, see Dragon Interactive’s navigation. That method basically involves adding an empty span tag inside the link or div, and setting it to take up the full available space but be transparent. Then, on hover, you fade it into view (and you can set whatever background image you want on it so it looks nice and pretty).
However, that method doesn’t work on form submit button inputs since you can’t add HTML inside an <input> tag (since they’re self-closing). So you’re stuck trying to figure out another method. Here’s a simple one that worked for me.
Basically, instead of setting a span inside the element, you wrap the element in a div, so you’re basically doing the opposite. Then, you can set whatever background image you want on the div, and write a bit of jQuery that, on hover, fades the button to an opacity of 0.01 (so it’s transparent, showing the div’s background image instead of the button’s, but still clickable).
Here’s some code to illustrate:
The HTML for the submit button
The jQuery which wraps the submit button in a div and does the fading on hover/mouseout
The CSS to replace the button with an image (using a large negative text-indent which is just my preferred method) and to set the background image on the background div
Give me a shout if you try it out and have trouble.
A simple function to check whether a string is in valid HH:MM (or H:MM…the hours don’t have to be zero padded) format.
A really nice jQuery UI theme that doesn’t look terrible like the default ones do.
Ever needed to add pauses between iterations in a jQuery each() loop? Say, for example, you’re cycling through a list of images, displaying one at a time (i.e., a SLIDESHOW) and you want to wait 5 seconds on each image before moving on to the next one.
Here’s a little teeny beany doodle plugin that should help.
To use it, just replace your each() loops with slowEach() and add a millisecond number as the first param. Example:
NOTE: I didn’t write this…I’m just spreading the love. I found it way back when somewhere but I don’t know where, so I can’t give credit. If you know where it came from, leave it in the comments.
I had a pretty weird request the other day involving dynamically putting span tags around a certain phone number wherever it was found. Seems like it’d be easy, but everything I could find on search and replace with jQuery had to do with searching with selectors (i.e., you can find a span with a certain class but you can’t find the word “Roger”), and even when I was able to find it, I had a heck of a time replacing it.
Here’s what I ended up doing, hope it helps somebody else too. Beware, it’s pretty nasty, but whatever, it works and I can’t figure out a nicer way to do it.
So basically, you’re finding only paragraphs which contain “search term”, calling each() to make sure you get all of them, then replacing their content with their original content with the search term switched out for the replace term. Make sense? No? Too bad. Just copy and paste and move along.
If you have a better way, PLEASE tell me, cause that’s a fugly script.
