Stack is warning me this is a subjective question, and will likely be close, but I'm going to try this anyway.
I have a set of control buttons attached to pictures in a gallery. These are to be initially hidden, and toggle visible when the mouse hovers over the image. The question I have is this:
Should these buttons be set to hidden in the stylesheet or stay visible and be hidden by jQuery when they load? I want graceful degradation, so it seems like initializing this in the CSS is a bad idea if I want these to be visible if javascript isn't enabled.
On top of this, I'm using Ajax to load pages of these images. If I do this using the jQuery hide, it doesn't affect those that load from an ajax request, since it only triggers on $(document).ready()
. I've tried using live('ready')
, but learned that that event isn't supported in live()
.
So what is the best practice for something like this? It seems like there's a lot of pros and cons for doing this either way (css vs. document.ready), and if they're hidden by the default CSS, the buttons will toggle fine with ajax pagination. But if javascript isn't enabled, the functionality of the buttons will be lost. Does anyone have advice for this?
Note: I didn't mention it originally, but it is significant. I'm currently using fadeToggle()
to accomplish my transition, which may be what's complicating this whole issue. The solutions so far all appear to work, but not so much when fading is introduced.