Ajax Side Panel script works in everything but IE

[dennisg]

1) Script Title: Ajax Side Panel script

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

3) Describe problem: I've installed the script on a test page. It works great in Chrome, Firefox, and Opera. In IE (9) the "close" graphic shows on the page on the left side at all times, not just when the page is opened. When the link is clicked the panel opens below the handle on the left side. When I had content on the page it didn't seem to be loading at all, but since I was expecting it to open over the page content it could have been opening at the end of the page.

The script works in IE9 on the Dynamic Drive page listed above, but not on my site. I've tried it with the scripts and css file kept in the same directory as the page, and with them kept in a separate directory as they are now.

My test page is here: http://www.i-webmaster.org/test.html

Any help would be appreciated.

Regards, Dennis

PS - I searched the forums and found one answer to someone having the same problem, but the answer talked about removing some parameters in the body tag. So, I'm guessing that was either specific to something that user was doing or it was an older version of the script that used code in the body tag.

[jscheuer1]

Get rid of this from the top of the page's source code:

<?php $name = $_REQUEST["name"]; ?>

It's not used and it's throwing IE into quirks mode, which is what's causing the problem.

[dennisg]

Thanks John, that worked!

I found if I change the .html to .php it works there too.

Muchly appreciated!

[jscheuer1]

Right. If IE sees anything before the DOCTYPE, it goes into quirks mode. By making the page a PHP page, the server hides that code from the browser. From the point of view of the browser, that's essentially the same as removing it.

This of course assumes you have a valid standards invoking DOCTYPE to bigin with, which in this case of course you do.

[dennisg]

Well, I thought I had clear sailing, but ran into a snag with IE again.

With a video on the page, the slide out covers all the underlying content except the video, which covers the slide out and prevents the slide out content from being in full view.

The slide out covers the video like it does the rest of the content on the originating page in Chrome, Opera and Firefox - as it's supposed to work, I assume.

Is there a way to have the slide out cover the video in IE as well?

One other minor issue... The content on the underlying page shifts to the right when the slide out opens, and shifts back when it closes. Is there a way to prevent that?

Thanks.

Dennis

[jscheuer1]

The test page is no longer there, let alone updated to show the problem. So I can pretty much only answer in general terms. The video needs to be given the attribute (if it's an embed) or the param (if it's an object) of wmode transparent. If it's both, then both. If it's two objects, then both need the param. If it's a YouTube iframe, then that can be passed in the query string. If it's script generated, then the script can be instructed to create that attribute/param. How that's done varies by script, but is done in the same way the script passes other params/attributes. In some cases that's not enough, css z-index and positioning may also need to be set in order to have the panel come out on top. And there might be other considerations. Generally though the wmode transparent param/attribute is all that's required.

If that information gets it for you, great! If not and you want more specific help I would need to see the page with the script and the video. Oh and it could also be important to know which version of IE you're talking about. So if you want more help, please include that information as well.

[dennisg]

Hi John - Thanks again! The wmode set to transparent did the trick.

Sorry about the page not being there. I changed the extension to .php to test of the script would work with the php name name call I had on the page (it does).

There's just that one last thing about the underlying page shifting. I can live with that, but I'd like it better if it didn't

The current tests page is here: http://www.i-webmaster.org/newsletter1.html

If you scroll to the heading that reads "Traffic Storm Continues!" the link is in that bullet point. It's the first thing under the table of contents, you won't have to scroll far.

That will demonstrate the content shifting. It does it in every browser. Somehow the main column where the link is at is picking up the CSS code from the slideout panel. Just so you know, I did modify the CSS a bit to change colors, and I changed the width in the javascript.

If you can clue me in that would be great, if not, I do appreciate all the help you've offered.

Much respect to you!

Dennis

[jscheuer1]

I see that the stylesheet and markup on the imported page (featured-product.html):

<style type="text/css">
body 
  {margin: 0;
   background-color: #fff;}
div.main
  {margin: 0 auto;
   width: 800px;
   border: 7px solid #000;
   border-top: 0;
   background-color: #fff;}
fieldset {border: 3px double #000000; font-size: 14px; font-family: Verdana; padding: 9px; margin: 44px 44px 0 44px;}
legend {color: #417443; font-size: 22px; font-weight: bold; font-style: italic; margin-bottom: 5px; margin-left: 17px;}
h1, h2 {color: #417443; text-align: center; margin-top: 35px;}
.shadow
{-webkit-box-shadow: #3E3E3E 5px 5px 12px;
 -moz-box-shadow: #3E3E3E 5px 5px 12px; 
 box-shadow: #909090 5px 5px 12px;}
.center {text-align: center; display: block; margin: 35px auto;}
</style>

</head>
<body>
<div class="main">

uses/addresses the same structure as used on the 'top' page (newsletter1.html):

 . . . /login.jpg" width="109" height="28" border="0" alt="Log in to the webmaster's member area."></a>
</td></tr></table>
<p>

<table width="100%" style="max-width: 1400px;"><tr>
<td width="70%" valign="top">
<div class="main">
<img src="images/aan2.jpg" width="408" . . .

but the styles are different. There could be other issues with this or in general, but the main issue that jumps out is this div.main style. What I would do is on the imported page use a different class:

<style type="text/css">
body 
  {margin: 0;
   background-color: #fff;}
div.main2
  {margin: 0 auto;
   width: 800px;
   border: 7px solid #000;
   border-top: 0;
   background-color: #fff;}
fieldset {border: 3px double #000000; font-size: 14px; font-family: Verdana; padding: 9px; margin: 44px 44px 0 44px;}
legend {color: #417443; font-size: 22px; font-weight: bold; font-style: italic; margin-bottom: 5px; margin-left: 17px;}
h1, h2 {color: #417443; text-align: center; margin-top: 35px;}
.shadow
{-webkit-box-shadow: #3E3E3E 5px 5px 12px;
 -moz-box-shadow: #3E3E3E 5px 5px 12px; 
 box-shadow: #909090 5px 5px 12px;}
.center {text-align: center; display: block; margin: 35px auto;}
</style>

</head>
<body>
<div class="main2">

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

[dennisg]

Of course! I don't know why I didn't think of that. Out of habit I use the same class names everywhere.

You are one smart cookie!

I haven't done much like this before. Mostly make static pages. I was thinking it was going to be something more complicated.

Thanks for all your time, John. You've been a blessing.

Best to you, Dennis