Image Handler 2 Conflict with Scrolling Side Boxes

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.

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.

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-

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 :)

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 :)

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

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.

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

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....?

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....?
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;
}

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?

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?

Image Handler is not installed and it looks okay on my Mac with Firefox...

http://www.fatboycookies.com/cookie_dough/

I couldn't tell you right now if it works in IE (my PC-proofer is asleep!)

The extra $ScrollBoxH and $ScrollBoxH2 values I put in are for the height of the box, and so shouldn't affect sidebox widths as configured via admin.

However it does "stutter" on the last special, blinks for a quick second and flips to the first one too quick to see what the last one was. I thought I saw someone ask this question while I was browsing the forums but now can't find the answer you gave them. Something about slowing the scroll speed?

And is there a way to randomize the scroll list from page to page, rather than scroll the same list each time?

However it does "stutter" on the last special, blinks for a quick second and flips to the first one too quick to see what the last one was. I thought I saw someone ask this question while I was browsing the forums but now can't find the answer you gave them. Something about slowing the scroll speed?

And is there a way to randomize the scroll list from page to page, rather than scroll the same list each time?
Query 1..yes, slow down scrolling speed.
Query 2..suggest adding scrolling sidebox/es for whats new/specials,
as at this time selective lists for scrolling featured not available.

Not everyone uses Image Handler..plus average zencart user does not
have great php/css knowledge, hence why sidebox, with fix,
is configured as easily as possible to understand.

**http://www.dezinashop.com/demo/**

Demo site above shows image handler/lightbox/scrolling featured
sidebox working perfectly..HTH
:smile:

misty:

Query 1..yes, slow down scrolling speed.

How? What variable?

misty:

Not everyone uses Image Handler..plus average zencart user does not
have great php/css knowledge, hence why sidebox, with fix,
is configured as easily as possible to understand.

Um, wouldn't not having to configure anything be even easier to install, regardless of whether Image Handler is installed or not...? ;)

If the extra variables at the beginning are what are throwing you off, this can easily be added for those that don't want to change the height....

$ScrollBoxH = '';
// add custom height of scrollbar above if you so choose
// otherwise default height is 160px

if(!$ScrollBoxH)
{ $ScrollBoxH = '160'; }

$ScrollBoxH2 = $ScrollBoxH - 10;

Actually opted to use a combination of sn0ut's original New Products sidebar and the scrolling script found at....

http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

Scrolls way smoother and no stuttering at the end!

http://www.fatboycookies.com/cookie_dough/

Still tweaking the design and am considering adding a random script so it displays the new items in different order on each page load.

Query 1..yes, slow down scrolling speed.
Experiment with

scrollamount= "2" scrolldelay= "5"

tfcharles:

Actually opted to use a combination of sn0ut's original New Products sidebar and the scrolling script found at....

http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

Scrolls way smoother and no stuttering at the end!

http://www.fatboycookies.com/cookie_dough/

Still tweaking the design and am considering adding a random script so it displays the new items in different order on each page load.

http://www.fatboycookies.com/cookie_dough/
Works fine via Firefox/Safari, but not via IE6 or IE7

misty:

http://www.fatboycookies.com/cookie_dough/
Works fine via Firefox/Safari, but not via IE6 or IE7

Thanks for the feedback! Could very well be the script or that I'm still messing with the design. The "Cross-browser scroller" script is supposed to be "FF1+ IE5+ Opr7+" compliant, but this will certainly put it to the test!

You're right, after checking on PC IE I realized that Dynamic Drive script wasn't going to work, so I used this one....

http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

Plus added a randomizer so it pulls the set in different order each page reload. How's it look now?

http://www.fatboycookies.com/cookie_dough/

How's it look now?

**http://www.fatboycookies.com/cookie\_dough/**
Same as original effort, via IE6 and IE7

Ughhh!! I'll keep slogging away once my PC-proofer is back in the land of the conscious... Any thoughts on what might be causing it to get cut-off like that? Maybe something in Zen CSS that makes the left column slide under the main content? I'd really like to get this working so I can release it as a mod, especially the randomizing part. I hear that'll be part of Zen 1.3.8, but I like a lot of people can't wait.

Speaking of proofing, my PC friend only has IE 7 on her machine. When she tries to install IE 6, it only gives her the option to replace v7. How did you get both on your machine? Any tips would be greatly appreciated!