Contents of glidecontent div in Featured Content Glider overlapping in print view

[cybergirl]

1) Script Title: Featured Content Glider

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

3) Describe problem: I am using your script on this page: http://www.berezanmanagement.net/calgaryNE.htm

The problem I have encountered is that when someone tries to print information about any property other than the topmost one (while using Internet Explorer) the information about ALL properties overlaps so that nothing can be read - you can see what I mean in print preview with IE. This issue does not occur with any other browser. Is there some code I can add perhaps to the css so that only the information visible in the selected glidecontent div is printed and the rest hidden from print view?

[jscheuer1]

You could have that problem in any browser if the user sets their browser to not print the background images and colors*. I believe that's the default in IE, others perhaps not, or you might have changed it. I almost never print in IE. I do in others and often need the background in order to get it to print right.

Anyways, without background, there's nothing to prevent previously glided in content from bleeding through because it's now behind the one you see in the browser.

I've modified the featuredcontentglider.js script you are currently using (in case it already had any custom modifications) so that previously glided in content is moved out of position after the current content is glided in. That seems to take care of it (right click and 'Save As'):

featuredcontentglider.js

Use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.


*Some browsers, even when not printing the background, will use it in layout. Chrome and Firefox do that so there would be no problem in them. Opera does not, so would be like IE.

[cybergirl]

Thanks, John. That cleared up the overlap issue from the first page but IE creates a second page that still has all the divs overlapping each other. I myself hardly ever print webpages but obviously visitors to this website do and although all pertinent information is usually on the first page, the second page of overlapped content seems to bother them(!). I am an absolute novice at this but perhaps we could somehow curtail the printing to just one page - that would probably take care of the problem?

[jscheuer1]

Yuk. That didn't happen in the local mock up I made from your previous page (the one I sent you some time back as glidermap.zip) remember it?

Anyways, one difference is in the css for the glidecontentwrapper class. On the current page it's set to 1150px. Try changing that to 850px. That's in the featuredcontentglider.css file.

The browser cache may need to be cleared and/or the page refreshed to see changes.

It might be something else, or that and something else. Give that a shot:

@charset "utf-8";
/* CSS Document */

.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 100%;
height: 850px; /* Set height to be able to contain height of largest content shown*/
border: 0;
overflow: hidden;
}
/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapp . . .

No it's just that. I since tested it and that fixes it. I also noticed that there's no cache busting on the import of the external calgaryNEcontent.htm file. That means that if you change that file, in some browsers a returning visitor will still see the old version.

You can fix that by adding to the on page init:

 <script type="text/javascript">

featuredcontentglider.init({
	gliderid: "calgaryneproperties", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "calgaryNEcontent.htm?bust="+new Date().getTime(), //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

[cybergirl]

Wow, you remembered glidermap.zip. That's impressive considering you must help hundreds of people and that was months ago!

Thanks for the new suggestions especially the cache busting tip. I tried changing the height to 850px and while that resolves the print issue, it creates another problem. Some of the content in the glidecontent divs is now being truncated -- try the properties in http://berezanmanagement.net/calgarySW.htm and you'll see what I mean. The last few lines of information are being cut off. It's all fine if the printout is one page but the overlap happens as soon as it runs into a second page.

[jscheuer1]

I remembered working on it. I found it by searching for your previous posts.

OK, I've made another update to the .js file. This one automatically gets a fresh copy of the external page, so you no longer have to add the ?bust=, etc. to each init for the various pages. It also makes the unseen contents visibility hidden. So they don't show up, even on a two page view. This also allows you to make the glidecontwarapper as tall as you like. I'd suggest perhaps 900px though. The shorter you can make it without contents getting cut off, the better the pages will look. At least that's my theory. 1150px will work though, any height will work. The higher it is though, the more space there will be after the content and before the information on the offices:

featuredcontentglider.js

[cybergirl]

Genius! That works perfectly. And thanks for the advice re height of div. I'll experiment and will use the shortest height that works. Unfortunately, the contents of that page are constantly being modified by the client so I have to try and provide adequate space for all possible content and 1150px seemed to meet all possible requirements.

Thanks a million for your help with this. I could never have resolved it without your expert input! Can't thank you enough.