[jQuery] Re: BlockUI: Strange flickering behavior.
Mike, thanks for your suggestion. I'll give that a shot and let report back.
:o)
Chris
On Tue, May 20, 2008 at 9:11 PM, Mike [EMAIL PROTECTED] wrote:
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Just hover over some of the stone samples to see what it's doing. It's
driving me crazy. It's almost as if the mouseover even fires constantly
while the mouse is hovered over the element, rather than just firing
once.
Any thoughts?
Thanks,
Chris
Hey Chris,
You mouseout handler is definitely getting called. Maybe moving the
calls around like this would help:
$(.thumb).bind(mouseover, function(){
$(this).block({
message: $(this).attr(alt),
// other options here
}).bind(mouseout,function(){
$(this).unblock().unbind('mouseout');
});
});
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
That didn't fix the flickering problem. :o(
Can anyone help?
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Chris
On Wed, May 21, 2008 at 11:10 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Mike, thanks for your suggestion. I'll give that a shot and let report
back. :o)
Chris
On Tue, May 20, 2008 at 9:11 PM, Mike [EMAIL PROTECTED] wrote:
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Just hover over some of the stone samples to see what it's doing. It's
driving me crazy. It's almost as if the mouseover even fires constantly
while the mouse is hovered over the element, rather than just firing
once.
Any thoughts?
Thanks,
Chris
Hey Chris,
You mouseout handler is definitely getting called. Maybe moving the
calls around like this would help:
$(.thumb).bind(mouseover, function(){
$(this).block({
message: $(this).attr(alt),
// other options here
}).bind(mouseout,function(){
$(this).unblock().unbind('mouseout');
});
});
--
http://cjordan.us
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
Just to clarify, in order to see the problem (especially in FF -- it looks a
little different in IE) mouse over one of the thumbnails in the center of
the page, and then leave the mouse there. You don't have to do any further
movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Chris
On Wed, May 21, 2008 at 11:15 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
That didn't fix the flickering problem. :o(
Can anyone help?
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Chris
On Wed, May 21, 2008 at 11:10 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Mike, thanks for your suggestion. I'll give that a shot and let report
back. :o)
Chris
On Tue, May 20, 2008 at 9:11 PM, Mike [EMAIL PROTECTED] wrote:
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Just hover over some of the stone samples to see what it's doing. It's
driving me crazy. It's almost as if the mouseover even fires constantly
while the mouse is hovered over the element, rather than just firing
once.
Any thoughts?
Thanks,
Chris
Hey Chris,
You mouseout handler is definitely getting called. Maybe moving the
calls around like this would help:
$(.thumb).bind(mouseover, function(){
$(this).block({
message: $(this).attr(alt),
// other options here
}).bind(mouseout,function(){
$(this).unblock().unbind('mouseout');
});
});
--
http://cjordan.us
--
http://cjordan.us
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
Chris Jordan wrote:
Just to clarify, in order to see the problem (especially in FF -- it
looks a little different in IE) mouse over one of the thumbnails in the
center of the page, and then leave the mouse there. You don't have to do
any further movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Downloaded a copy of the page via Firefox and tried changing your
bindings to use the hover function - seemed to work OK but I'm still
getting the eggtimer over the images for some reason:
$(.thumb).hover(function() {
// MOUSEOVER HERE
},function() {
// MOUSEOUT HERE
});
Regards,
Michael Price
[jQuery] Re: BlockUI: Strange flickering behavior.
Michael, I'll try this. Thanks so much.
On Wed, May 21, 2008 at 11:21 AM, Michael Price [EMAIL PROTECTED]
wrote:
Chris Jordan wrote:
Just to clarify, in order to see the problem (especially in FF -- it looks
a little different in IE) mouse over one of the thumbnails in the center of
the page, and then leave the mouse there. You don't have to do any further
movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Downloaded a copy of the page via Firefox and tried changing your bindings
to use the hover function - seemed to work OK but I'm still getting the
eggtimer over the images for some reason:
$(.thumb).hover(function() {
// MOUSEOVER HERE
},function() {
// MOUSEOUT HERE
});
Regards,
Michael Price
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
Hey, that's progress! I'm still getting the hour glass too, but the flicker
is gone. It seemed before like the constantly being blocked and unblocked in
rapid succession. Now, it looks just right, except that I don't like the
hour glass. But I think I can show it to my client like this.
Any further assistance would be much appreciated. If anyone can figure out
how to get rid of the hour glass, that'd be great.
Here's what the code looks like now:
// change message border
$.blockUI.defaults.css.border = '0px solid red';
$.blockUI.defaults.css.cursor = 'default'; // I'm just assuming that this
will work.
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 400;
$(.thumb).hover(function() {
// MOUSEOVER HERE
$(this).block({
message: $(this).attr(alt),
css: {
padding:0,
margin: 0,
width: '100%',
top:'40%',
left: '35%',
textAlign: 'center',
color: '#FF',
cursor: 'default', // but just in case it didn't work
above, i set it here too...
backgroundColor:'transparent',
fontWeight:'bold'
},
overlayCSS: {
backgroundColor:'#F2F2F2',
opacity:'0.6'
}
})
},function() {
// MOUSEOUT HERE
$(this).unblock();
});
On Wed, May 21, 2008 at 11:31 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Michael, I'll try this. Thanks so much.
On Wed, May 21, 2008 at 11:21 AM, Michael Price
[EMAIL PROTECTED] wrote:
Chris Jordan wrote:
Just to clarify, in order to see the problem (especially in FF -- it
looks a little different in IE) mouse over one of the thumbnails in the
center of the page, and then leave the mouse there. You don't have to do any
further movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Downloaded a copy of the page via Firefox and tried changing your bindings
to use the hover function - seemed to work OK but I'm still getting the
eggtimer over the images for some reason:
$(.thumb).hover(function() {
// MOUSEOVER HERE
},function() {
// MOUSEOUT HERE
});
Regards,
Michael Price
--
http://cjordan.us
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
I figured out what the hour glass is all about. I'm throwing up an overlay,
and that puts up the hour glass automatically. if you hover over just the
text in the middle, then there's no hour glass there.
Thanks for everyone's help!
Chris
On Wed, May 21, 2008 at 11:45 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Hey, that's progress! I'm still getting the hour glass too, but the flicker
is gone. It seemed before like the constantly being blocked and unblocked in
rapid succession. Now, it looks just right, except that I don't like the
hour glass. But I think I can show it to my client like this.
Any further assistance would be much appreciated. If anyone can figure out
how to get rid of the hour glass, that'd be great.
Here's what the code looks like now:
// change message border
$.blockUI.defaults.css.border = '0px solid red';
$.blockUI.defaults.css.cursor = 'default'; // I'm just assuming that this
will work.
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 400;
$(.thumb).hover(function() {
// MOUSEOVER HERE
$(this).block({
message: $(this).attr(alt),
css: {
padding:0,
margin: 0,
width: '100%',
top:'40%',
left: '35%',
textAlign: 'center',
color: '#FF',
cursor: 'default', // but just in case it didn't work
above, i set it here too...
backgroundColor:'transparent',
fontWeight:'bold'
},
overlayCSS: {
backgroundColor:'#F2F2F2',
opacity:'0.6'
}
})
},function() {
// MOUSEOUT HERE
$(this).unblock();
});
On Wed, May 21, 2008 at 11:31 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Michael, I'll try this. Thanks so much.
On Wed, May 21, 2008 at 11:21 AM, Michael Price
[EMAIL PROTECTED] wrote:
Chris Jordan wrote:
Just to clarify, in order to see the problem (especially in FF -- it
looks a little different in IE) mouse over one of the thumbnails in the
center of the page, and then leave the mouse there. You don't have to do
any
further movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Downloaded a copy of the page via Firefox and tried changing your
bindings to use the hover function - seemed to work OK but I'm still getting
the eggtimer over the images for some reason:
$(.thumb).hover(function() {
// MOUSEOVER HERE
},function() {
// MOUSEOUT HERE
});
Regards,
Michael Price
--
http://cjordan.us
--
http://cjordan.us
--
http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
I have to point out that the blockUI plugin is overkill if all you
want to do is fade the image and display a caption over it. If you
gave each thumbnail a javascript created div inside the link and set
to a 0 opacity with a white bg and then simply increased the opacity
on hover-over, and decreased it on hover-out you wouldn't have to deal
with the overhead of blocking the ui and intercepting click events etc
that the plugin has to do.
IE on the ready event loop over all the links by classname, append a
div to each link, set the css style for the div ( pos absolute inside
relative links, height and width set to the parent size and insert a
span based on the rel attr. opacity 0 ) and then attach a hover
function to each of the same classname links that grabs the interior
div and sets the opacity to what you like. On the hover out simply
revert the div back to the original style rules ( you could even
create a single style object for the div and simply reuse it )
I hope I was clear, since I am at work I don't have the time to write
any enlightening code for you.
Is there some particular reason I might be missing that would make you
want to use the blockUI plugin?
Abba
On May 21, 10:31 am, Chris Jordan [EMAIL PROTECTED] wrote:
I figured out what the hour glass is all about. I'm throwing up an overlay,
and that puts up the hour glass automatically. if you hover over just the
text in the middle, then there's no hour glass there.
Thanks for everyone's help!
Chris
On Wed, May 21, 2008 at 11:45 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Hey, that's progress! I'm still getting the hour glass too, but the flicker
is gone. It seemed before like the constantly being blocked and unblocked in
rapid succession. Now, it looks just right, except that I don't like the
hour glass. But I think I can show it to my client like this.
Any further assistance would be much appreciated. If anyone can figure out
how to get rid of the hour glass, that'd be great.
Here's what the code looks like now:
// change message border
$.blockUI.defaults.css.border = '0px solid red';
$.blockUI.defaults.css.cursor = 'default'; // I'm just assuming that this
will work.
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 400;
$(.thumb).hover(function() {
// MOUSEOVER HERE
$(this).block({
message: $(this).attr(alt),
css: {
padding:0,
margin: 0,
width: '100%',
top:'40%',
left: '35%',
textAlign: 'center',
color: '#FF',
cursor: 'default', // but just in case it didn't work
above, i set it here too...
backgroundColor:'transparent',
fontWeight:'bold'
},
overlayCSS: {
backgroundColor:'#F2F2F2',
opacity:'0.6'
}
})
},function() {
// MOUSEOUT HERE
$(this).unblock();
});
On Wed, May 21, 2008 at 11:31 AM, Chris Jordan [EMAIL PROTECTED]
wrote:
Michael, I'll try this. Thanks so much.
On Wed, May 21, 2008 at 11:21 AM, Michael Price
[EMAIL PROTECTED] wrote:
Chris Jordan wrote:
Just to clarify, in order to see the problem (especially in FF -- it
looks a little different in IE) mouse over one of the thumbnails in the
center of the page, and then leave the mouse there. You don't have to do
any
further movement of the mouse to see the problem happening.
Thanks everyone. I really, really need help on this. :o(
Downloaded a copy of the page via Firefox and tried changing your
bindings to use the hover function - seemed to work OK but I'm still
getting
the eggtimer over the images for some reason:
$(.thumb).hover(function() {
// MOUSEOVER HERE
},function() {
// MOUSEOUT HERE
});
Regards,
Michael Price
--
http://cjordan.us
--
http://cjordan.us
--http://cjordan.us
[jQuery] Re: BlockUI: Strange flickering behavior.
http://rock-itnaturalstone.com/dev/ThinVeneer.php
Just hover over some of the stone samples to see what it's doing. It's
driving me crazy. It's almost as if the mouseover even fires constantly
while the mouse is hovered over the element, rather than just firing once.
Any thoughts?
Thanks,
Chris
Hey Chris,
You mouseout handler is definitely getting called. Maybe moving the
calls around like this would help:
$(.thumb).bind(mouseover, function(){
$(this).block({
message: $(this).attr(alt),
// other options here
}).bind(mouseout,function(){
$(this).unblock().unbind('mouseout');
});
});
