I have a form that uses jQuery to show a ‘required’ pop-up bubble when
mousing over a text field. It works fine but in the absence of js I
would like the bubbles to be visible which currently they are not. I’ve
tried making the bubble initially visible then hiding it with CSS onload
but it’s not working.
Todd
$(function () {
$('#req_1').each(function () {
// options
var distance = 20;
var time = 250;
var hideDelay = 100;
var hideDelayTimer = null;
// tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.bubble_req', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the
popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or
already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({
top: 37,
left: 54,
display: 'block' // brings the popup back in to view
})
// (we're using chaining on the popup) now animate it's opacity
and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the
mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity
alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay);
});
});
});
When the page loads if JS is enabled the bubbles will get hidden automatically before the page content is displayed. If JS is switched off the .bubbles style won’t get written to the page and the bubbles should appear in the layout.
You could probably do this using JavaScript when the page loads but I’ve seen elements like this flicker as the page initially loads and then the script hides them from view.
Regards,
Tim.
Since you’re already in jQuery, why not put $(’.bubble’).hide(); right up in your initial code, right inside the ready() function. That way it will be hidden by JavaScript, just as Tim’s is, and you’ll avoid document.write, which doesn’t work (or is invalid, can’t remember which) in a Strict DOCTYPE.
Walter
On Jul 18, 2012, at 4:28 PM, Tim Plumb wrote:
Hi Todd,
My first thought would be to hide the bubbles using a default CSS style (display:none or opacity:0 maybe) written using JavaScript;
When the page loads if JS is enabled the bubbles will get hidden automatically before the page content is displayed. If JS is switched off the .bubbles style won’t get written to the page and the bubbles should appear in the layout.
You could probably do this using JavaScript when the page loads but I’ve seen elements like this flicker as the page initially loads and then the script hides them from view.
Regards,
Tim.
Since you’re already in jQuery, why not put $(’.bubble’).hide(); right up in your initial code, right inside the ready() function.
That was one of the first things I tried but for some reason it’s not
working, the bubbles are still hidden with js disabled. I don’t
understand why.
Do you have a demo posted? It sounds like they are being hidden by CSS, or maybe they don’t exist without JavaScript to pop them into place in the DOM. I didn’t read your code very closely, I don’t have a lot of experience with jQuery and prefer Prototype. What I have done for popups like this is to use the title attribute on the link as the donor for the styled popup, that way it degrades nicely back to the browser-drawn tooltip if you have disabled JS for some reason.
Walter
On Jul 18, 2012, at 4:44 PM, Todd wrote:
Walter Lee Davis wrote:
Since you’re already in jQuery, why not put $(’.bubble’).hide(); right up in your initial code, right inside the ready() function.
That was one of the first things I tried but for some reason it’s not working, the bubbles are still hidden with js disabled. I don’t understand why.
forms.css is your culprit. It’s saying that .bubble_print and .bubble_req are both display:none. Remove that declaration from .bubble_req, and then use jQuery to hide it.
forms.css is your culprit. It’s saying that .bubble_print and .bubble_req are both display:none. Remove that declaration from .bubble_req, and then use jQuery to hide it.
Ok, that’s embarrassing.
This is what I see if I disable js and switch off Display: none in the bubble_req style
Wow, I don’t see that at all in Safari (been having a lot of issues with
Safari recently). But I guess it does work. Thanks guys.
That seems like a lot of work to discover which items are required… though
I love the style and effect
Yeah, it is a lot of work all the way around: CSS, js. But I figured
since I put in the effort to get the whiz-bang effect with js then I
might as well have the nice bubbles be visible if js is off. I did this
a long time ago when I was cutting my javascript teeth so it’s probably
due for updating and streamlining anyway.
