Advanced Search

Results 1 to 9 of 9

Thread: Ajax Side Panel script works in everything but IE

  1. #1
    Join Date
    Nov 2012
    Location
    Wisconsin
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Ajax Side Panel script works in everything but IE

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

    Code:
    <?php $name = $_REQUEST["name"]; ?>
    It's not used and it's throwing IE into quirks mode, which is what's causing the problem.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dennisg (11-02-2012)

  4. #3
    Join Date
    Nov 2012
    Location
    Wisconsin
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Thank you!

    Thanks John, that worked!

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

    Muchly appreciated!

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dennisg (11-03-2012)

  7. #5
    Join Date
    Nov 2012
    Location
    Wisconsin
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default A couple more things...

    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

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 11-03-2012 at 04:19 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dennisg (11-03-2012)

  10. #7
    Join Date
    Nov 2012
    Location
    Wisconsin
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by dennisg; 11-03-2012 at 04:28 AM.

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

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

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

    Code:
     . . . /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:

    Code:
    <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.
    Last edited by jscheuer1; 11-03-2012 at 03:19 PM. Reason: English usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dennisg (11-03-2012)

  13. #9
    Join Date
    Nov 2012
    Location
    Wisconsin
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Ajax Side Panel script not working properly on my site with IE 9
    By KSRichard in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-11-2012, 07:36 PM
  2. how api works client side
    By morplug in forum JavaScript
    Replies: 3
    Last Post: 10-03-2011, 02:39 AM
  3. AJAX Client-side Get Code Of Another Site
    By kirkus84 in forum JavaScript
    Replies: 2
    Last Post: 10-04-2010, 05:41 PM
  4. Resolved DD Drop Down Panel combined with Dynamic Ajax Content
    By poopcake in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-16-2010, 06:31 PM
  5. Replies: 2
    Last Post: 01-07-2010, 06:55 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •