Featured Content Slider Extended - UPD: FF+IE6&7 OK, IE8 need help

[layingback]

1) Script Title: Featured Content Slider 2.4 with separate button pause on mouseover extensions

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:

Using version 2.4, plus your separate next/previous button extension and the pause on mouseover extension.

But I wanted to use more than 4 or 5 slides, so I added:

- additional div to clip the long slider to keep it between the next/prev buttons
- simple scroll routine to scroll the slider left/right on mouseover of the next/prev buttons
- fastforward to first/last slide on mouseover of next/prev buttons with Shift key down.

All the above works absolutely fine in Firefox 3/3.5, and in Opera 10 and Safari 3 for PC. But fails on all Internet Explorers.

IE6 displays the main image, but none of the slider images, and also does not truncate the slider div.
IE7 displays the main image plus the slider images, but does not truncate the slider div.
IE8 displays the slider images and the truncated div correctly, but none of the main images.

What am I doing wrong? Or not doing? Studied it long and hard, but getting nowhere. Any help, suggestions and/or insight greatly appreciated.

URL: http://layingback.net/Pro_News/aid=71.html (FCS code starts at line 290)
Script: http://layingback.net/modules/Pro_Ne...des/scripts.js (my addition at bottom of page/file)
CSS: http://layingback.net/themes/lb_reDe...e/pro_news.css (FCS relevant css near bottom of page/file)

TIA!

[jscheuer1]

In your scripts.js file, make the following highlighted additions/changes (scroll code section to see all of the changes):

//** August 27th, 09 - additional code to separate next/prev buttons
var pn_prev=document.getElementById('pn_prev')
var pn_next=document.getElementById('pn_next')
var fcgetoffset=function(what, offsettype){
if(what){
	return (what.offsetParent)? what[offsettype]+fcgetoffset(what.offsetParent, offsettype) : what[offsettype]
}
}
var offx=fcgetoffset(document.getElementById('pn_slider2'), "offsetLeft")
var offy=fcgetoffset(document.getElementById('pn_slider2'), "offsetTop")
if(pn_prev){
pn_prev.style.left=offx+"px"
pn_prev.style.top=offy+100+"px"
}
if(pn_next){
pn_next.style.left=offx+400+"px"
pn_next.style.top=offy+100+"px"
}

//** Featured Content Dynamic Slider Control script- (c) 2009 layingback: http://www.layingback.net
//** This notice MUST stay intact for legal use
var scrolling = null;
function scroll_left(event) {
	document.previmg.src = "images/pro_news/left_scroll.gif";
	var d = document.getElementById('scroller');
	if (event.shiftKey == 1) {
		d.scrollLeft = d.scrollWidth - d.clientWidth
	}
	else if (d.scrollLeft <= d.scrollWidth) {
			d.scrollLeft = d.scrollLeft + 5;
		scrolling = window.setTimeout(function() {
			scroll_left({shiftKey: 0});
		}, 30);
	}
}
function scroll_right(event) {
	document.nextimg.src = "images/pro_news/right_scroll.gif";
	var d = document.getElementById('scroller');
	if (event.shiftKey == 1) {
		d.scrollLeft = 0
	}
	else if (d.scrollLeft <= d.scrollWidth - d.clientWidth) {
		d.scrollLeft = d.scrollLeft - 5;
		scrolling = window.setTimeout(function() {
			scroll_right({shiftKey: 0});
		}, 30);
	}
}

And for your scroller division:

<div id="scroller" class="pn_page-imgholder">

add position relative, either in your style sheet or inline (example inline):

<div style="position:relative;" id="scroller" class="pn_page-imgholder">

Make sure to clear your cache and refresh after these changes.

[layingback]

Thanks John, for the corrections, guidance, and quick response.

IE7 works beautifully now, thank you, and the what error is also gone from FF3's javascript console.

Unfortunately, getting the script running in IE7 hasn't helped the display problems in IE6 and IE8 any.

IE6 displays main image but no slider images at all, and IE8 displays the slider images but no main image. (Hard to believe IE6, 7 & 8 are SO different.)

[jscheuer1]

The problem in IE 6 is most likely one of the stacking of contained elements. This likely will not be easy to resolve, as it will require a reorganization of the elements in the markup, either by changing the markup or by having javascript move things around. IE 8 may be easier to deal with. This meta tag placed as the first meta tag in the document:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

will often 'fix' IE 8 when the page is already rendering well in IE 7.

As for the IE 6 business, when I have more time I will look into it further. But I'm pretty sure (as I've seen this sort of thing before) that it is as I say. That doesn't mean that it's hopeless, just that it may take some time to figure out.

[layingback]

I've got IE6 working!

Amended code as follows:

.pn_page-imgholder{
position: relative;
overflow: hidden;
width: 372px;
}

Unfortunately other browsers, eg FF3, need a width of 377px, or nothing at all, to look right. So I'll probably end up having to put this in an ie6-only version of the css.

For some reason the width: 100%; trick didn't work, as it popped the slider down below the next/prev buttons as it was too wide.

UPDATE: Found that centering masked the 6px difference4 across all browsers. So now update is:

.pn_page-imgholder{
position: relative;
overflow: hidden;
margin: 0 auto;
width: 372px;
}

So that leaves just IE8. I can't go the IE7 compat. mode route as I can't get anything posted to the head that early.

[jscheuer1]

That's great! Looks like I was too pessimistic on that one. With IE 8, the meta tag I mentioned doesn't necessarily have to be the exact first meta tag. If you are having a problem getting it to be, it can come as the first thing you are able to make it to be in the head and may still work.

Edit: Oddly enough though, the page works fine here in IE 8 standards mode. So you may actually want to use this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

[layingback]

It's working in IE8? Execllent!

I don't have IE8 - (still need to set up another VM to test with) but I did find a boring old HTML error earlier - missing close on an a href ;-) so I wondered...

If so I'll package it up and uploaded here, in case some else wants it. Then release it to DragonflyCMS.

I'll also have to leave IE8 to figure out its own settings - I can really only put stuff in the body section, which is definitely too late! But if it's working in IE8 and IE7 that should be OK.

Thanks again for all your help.

[jscheuer1]

Well, IE 8 will generally parse in its standards mode unless the server sends a directive to do otherwise, meta tags of the kind I was mentioning are used, the page has a quirky structure, or the user specifically sets IE to do differently.

However, since the page now works in IE 6 and 7, even if IE 8 renders in one of those modes, it should work out. And since it is working now in IE 8 standards mode, all bases would appear to be covered. The only related caveat here would be (and this would affect a number of browsers probably, not just IE browsers) is that the DOCTYPE for the page should be one that sets standards mode. You currently have such a DOCTYPE and most CMS use such a DOCTYPE by default, so this is probably also nothing to worry about, but is something to be aware of.

[layingback]

Yep, we're in agreement. And I think it adds quite a lot of flexibility to FCS. E.g. presenting actual slideshows.

DragonflyCMS enforces a DOCTYPE - we're being dragged kicking and screaming towards xHTML ;-)

Only minor issue I found was Opera 10 - at least on Ubuntu - in which the prev button in mouseover mode undoes the scroll left when you move the mouse off. Discovered that I wasn't passing event onmouseout:

<a id="pn_prev" href="#" class="prev"><img name="previmg" src="images/pro_news/left_scrollb.gif" onmouseover="javascript:scroll_left(event);" onmouseout="javascript:stop_scroll(event);" alt="" /></a>

<a id="pn_next" href="#" class="next"><img name="nextimg" src="images/pro_news/right_scrollb.gif" onmouseover="javascript:scroll_right(event);" onmouseout="javascript:stop_scroll(event);" alt="" /></a>

All things considered it's pretty amazing that FF3 worked at all!!! Must be pretty near clairvoyant :-)