Image Handler 2 Conflict with Scrolling Side Boxes

[CraigW]

I have found the source of the scrolling problems in sideboxes when Image Handler 2(IH2) is installed. Only affects IE 6 & IE 7, Firefox is unaffected.

It's the fact that IH2 does a " style="position:relative" " on the images in those sideboxes. Remove this CSS style and the problem is fixed.

Have a look in includes/classes/bmz_image_handler.class.php, right at the end of the file.

You will see:
return $parameters . 'style="position:relative" onmouseover="showtrail(' . "'$products_image_zoom'...

Just remove the offending style so you end up with:
return $parameters . 'onmouseover="showtrail(' . "'$products_image_zoom'...

And scrolling in sideboxes will work again.

But this breaks image hover functionality offered with Image Handler for the entire site.

We need some way of testing for whether you are actually in a sidebox or not.

I've tested this with a few scrolling sidebox contributions, all with the same results.

Has anyone got a fix or workaround for this problem? Or any suggestions for working towards a solution. Thanks.

[crabdance]

I have found the source of the scrolling problems in sideboxes when Image Handler 2(IH2) is installed. Only affects IE 6 & IE 7, Firefox is unaffected.

It's the fact that IH2 does a " style="position:relative" " on the images in those sideboxes. Remove this CSS style and the problem is fixed.

Have a look in includes/classes/bmz_image_handler.class.php, right at the end of the file.

You will see:
return $parameters . 'style="position:relative" onmouseover="showtrail(' . "'$products_image_zoom'...

Just remove the offending style so you end up with:
return $parameters . 'onmouseover="showtrail(' . "'$products_image_zoom'...

And scrolling in sideboxes will work again.

But this breaks image hover functionality offered with Image Handler for the entire site.

We need some way of testing for whether you are actually in a sidebox or not.

I've tested this with a few scrolling sidebox contributions, all with the same results.

Has anyone got a fix or workaround for this problem? Or any suggestions for working towards a solution. Thanks.

Thanks for showing this fix. I just uploaded and have IH2 working and just now noticed that IE stopped working on the scroll box. Thanks for this fix!!... everything is working smooth now!

-cd-

[RedrikShuhart]

I have found a solution that makes both features, image hover and scrolling sidebox, work perfectly fine in IE6.

1. First of all, you keep the 'style="position:relative"' in includes/classes/bmz_image_handler.class.php intact.

2. Add style="position:relative" to the marquee tag in includes/templates/YOUR_TEMPLATE/sideboxes/tpl_whats_new.php .
So you will have something like $content .= '<MARQUEE style="position:relative" behavior= " ....

3. Add the following block to your stylesheet :

#whatsnewContent{
height: 150px;
overflow: hidden;
position: relative;
}

The block name, whatsnewContent, has to match the id name of the div that's holding the content of the sidebox.

Thats it. Have fun :)

[weezee]

I have found a solution that makes both features, image hover and scrolling sidebox, work perfectly fine in IE6.

1. First of all, you keep the 'style="position:relative"' in includes/classes/bmz_image_handler.class.php intact.

2. Add style="position:relative" to the marquee tag in includes/templates/YOUR_TEMPLATE/sideboxes/tpl_whats_new.php .
So you will have something like $content .= '<MARQUEE style="position:relative" behavior= " ....

3. Add the following block to your stylesheet :

#whatsnewContent{
height: 150px;
overflow: hidden;
position: relative;
}


The block name, whatsnewContent, has to match the id name of the div that's holding the content of the sidebox.

Thats it. Have fun :)

I've tried all of this, taking out the style, and adding the $content .=' <Marquee style= position:relative" behavior= " I'm not a php programer so I do know what goes next and all I get is a parse error. when I just take out the style it still don't work.
when I take out this: return $parameters . 'style="position:relative"

I get a parse error. I take out this: return $parameters . 'style="position:relative"onmouseover="showtrail
I still get a parse error.

If I take this all out the box still don't work.
return $parameters . 'style="position:relative"onmouseover="showtrail (' . "'$products_image_zoom','$alt',$width,$height,$zoomwidth,$zoomheight,this," . $this->zoom['startx'].','.$this->zoom['starty'].','.$this->zoom['width'].','.$this->zoom['height'].');" onmouseout="hidetrail();" ';

Could someone please help. I don't know any thing to do except remove the image handle.

http://www.weezeesgifts.com

[CraigW]

RedrikShuhart, you are a legend, that's done the trick. I now have IH2 Image Hover and scrolling Featured sidebox. Just did the same code changes to Misty's featured scrollbox mod, just changing id tag name from "whatsnewContent" -> "featuredContent".

One small problem is that IE6 starts scrolling the image slightly past the bottom of my sidebox, the text doesn't appear until the correct scrolling position. IE7 & firefox start scrolling in the correct position. But hey, I can live with that.

Thanks again.

[misty]

Confirm RedrikShuhart's fix works for my scrolling featured sidebox,
with small problem, mentioned by CraigW, when using IE6

[tfcharles]

Has the fix been incorporated into the download version at your site? Or does it require customizing my Zen install?

PS: It's not in the Zen downloads section....?

[misty]

Has the fix been incorporated into the download version at your site? Or does it require customizing my Zen install?
PS: It's not in the Zen downloads section....?

Download at my site is original..just need to alter code as per

2. Add style="position:relative" to the marquee tag in includes/templates/YOUR_TEMPLATE/sideboxes/tpl_featured.php .
So you will have something like $content .= '<MARQUEE style="position:relative" behavior= " ....

3. Add the following block to your stylesheet :

#featuredContent{
height: 150px;
overflow: hidden;
position: relative;
}

[tfcharles]

Just a thought to make things easier for end-user installation.... Maybe include those edits as CSS in the tpl_featured.php file itself? This is what I did:

Just after everything that's commented out, I added...

$ScrollBoxH = '300';
$ScrollBoxH2 = $ScrollBoxH - 10;

...then I made the change you indicated with the tweak of including the $ScrollBoxH2 value...

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') '" class="sideBoxContent centeredContent" style="height:' . $ScrollBoxH2 . 'px; overflow:hidden; position:relative;">';

...and then later on...

$content .= '<MARQUEE style="position:relative;" behavior="scroll" align="center" direction="up" height="' . $ScrollBoxH . '" scrollamount="2" scrolldelay="5" onmouseover=\'this.stop()\' onmouseout=\'this.start()\'>' . $rn .'</MARQUEE>';

That way it's ready to go "out of the box"!

I changed it from "160" to "300" because I want it to fill a larger space in the sidebar and with the $ScrollBoxH2 calculation it's one less value to have to remember to change if need be. Am I correct in assuming it's a 10 pixel difference, or is it a percentage?

[misty]

Does your updated code work when Image Handler is not installed /allows easy alteration
for end user having different sidebox widths as configured via admin?