Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to distinguish multiple <object> / Safari doesn't work

    I'm using divs and hiding / displaying them in order to switch content / "pages" on my site.

    In two of these div "pages," I have <object>s of type text/html. These <object> calls reference external sites that I want to house within my site framework. Nevermind the reason for this, it's the way I would like to handle it. They are two sites that I have an account with, and their content cannot be handled or hosted on my own site, but I want the user to access them through the framework of my main site instead of a new window or a re-direct link.

    In IE, Firefox, Chrome, this works fine. But in Safari, it's somehow confusing the two object calls. Sometimes when you click to go to one, the other shows up instead, and vice versa. Does anyone know why this happens in Safari, or if there's something I'm missing that Safari needs to distinguish clearly between the two objects?

    I'm validating to XHTML 1.0 Strict. Within the two divs is my object call:

    Code:
    <object id="EACH-ONE-HAS-UNIQUE-ID" type="text/html" width="945" height="572" data="URL">
    <param name="src" value="SAME URL AGAIN"/>
    </object>

  • #2
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I don't know what the rules are on bumping, but does anyone have any ideas? Do you need more information?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    A link or at least your full source code might be more inviting for people to help you since it’s hard to imagine what the reason for your problem is.

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I'm hoping someone will be able to help. Here is the entire code.

    And, you can view this in action here:

    http://www.brandonklassen.com/objectproblem

    In Safari, it will mix up the objects and not load the correct one. Each button will not go where it's supposed to go. In order to make this happen, try it once, and it may work normally. Go to Google page and stop. Refresh the page. Then click on Gmail page. It may not happen right away, but sooner or later it will not behave properly.

    In Firefox, it will work without any problem.

    In IE, it will tell you not to use IE, because I haven't yet made all versions of IE work at all using the object tags.

    Please note that Gmail and Google are not the sites I'll actually be containing, they are only for the example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    <script type="text/javascript">
    
    var current = "6";
    
    function pageSwitch(id) {
    	if(!document.getElementById) {return false;}
    	var newDiv = document.getElementById("page"+id);
    	var curDiv = document.getElementById("page"+current);
    	curDiv.style.display = "none";
    	newDiv.style.display = "block";
            current = id;
    }
    
    </script>
    
    
    <style type="text/css">
    
    * { padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        border-width: 0px;
        border-style: none;
        vertical-align: top;
        }
    
      a {outline: none;}
    
      img {border-width: 0; display: block;}
      
      img.floated {border-width: 0; display: inline;}
      
      body {
        background-color: #231F20;
        text-align:center;
        color: #FFFFFF; }
     
      a:link {color: #FF2341; }
      a:visited {color: #FF2341; }
      a:hover {color: #FFFFFF; }
      a:active {color: #FF2341; }
      
      div.nogo {
        width: 993px;
        height: 572px;
        font-family: Verdana, Arial, Helvetica, Sans-Serif;
        font-size: 13px;
        text-align: left; } 
            
      div.integrate {
        font-family: Verdana, Arial, Helvetica, Sans-Serif;
        font-size: 13px;
        text-align: left;
        margin-top: 0px;
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 0px;
        padding-bottom: 0px; }
    
      html {
        overflow-y: scroll; }
      
    </style>
    
    
    </head><body>
    
    <div style="margin: 0px auto; width: 993px;">
    
    
    <div style="display: inline;"><a href="#" onclick="pageSwitch('6'); return false;"><img id="button6" class="floated" src="gmail.jpg" alt="gmail"/></a><a href="#" onclick="pageSwitch('7'); return false;"><img id="button7" class="floated" src="google.jpg" alt="google"/></a></div>
    
    
    
    <div id="page6" style="display: none;">
    
    <!--[if IE]>
    <div class="nogo">
    
    <div style="padding-left: 74px; padding-top: 68px;">
    
    Please <a href="http://www.gmail.com" onclick="window.open(this.href); return false;">click here</a> to go to gmail.<br/><br/>
    
    <div style="width: 260px; float: left; vertical-align: top; margin-right: 50px;">Our website is a W3C XHTML 1.0 Strict standards-compliant site that Internet Explorer does not fully support.<br/><br/>
    
    <img src="valid-xhtml10.png" alt="Our site is compliant to W3C XHTML 1.0 Strict."/></div>
    
    <div style="width: 260px; vertical-align: top;">For a fuller experience on our site and others, we recommend that you consider using Firefox.<br/><br/>
    
    <a href="http://www.mozilla.com" onclick="window.open(this.href); return false;"><img src="firefox.jpg" alt="Firefox"/></a></br></br></div>
    
    </div>
    
    </div>
    <![endif]-->
    
    
    <!--[if !IE]> -->
    <div class="integrate">
    
    <object id="gmaildiv" type="text/html" width="945" height="572" data="http://www.gmail.com"><param name="src" value="http://www.gmail.com"/></object>
    <!--<![endif]-->
    
    </div>
    
    </div>
    
    
    
    
    <div id="page7" style="display: none;">
    
    <!--[if IE]>
    <div class="nogo">
    
    <div style="padding-left: 74px; padding-top: 68px;">
    
    Please <a href="http://www.google.com" onclick="window.open(this.href); return false;">click here</a> to go to google.<br/><br/>
    
    <div style="width: 260px; float: left; vertical-align: top; margin-right: 50px;">Our website is a W3C XHTML 1.0 Strict standards-compliant site that Internet Explorer does not fully support.<br/><br/>
    
    <img src="valid-xhtml10.png" alt="Our site is compliant to W3C XHTML 1.0 Strict."/></div>
    
    <div style="width: 260px; vertical-align: top;">For a fuller experience on our site and others, we recommend that you consider using Firefox.<br/><br/>
    
    <a href="http://www.mozilla.com" onclick="window.open(this.href); return false;"><img src="firefox.jpg" alt="Firefox"/></a></br></br></div>
    
    </div>
    
    </div>
    <![endif]-->
    
    
    <!--[if !IE]> -->
    <div class="integrate">
    
    <object id="googlediv" type="text/html" width="945" height="572" data="http://www.google.com"><param name="src" value="http://www.google.com"/></object>
    <!--<![endif]-->
    
    </div>
    
    </div>
    
    
    
    </div>
    
    </body></html>

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Whatever problem this was has seemingly been solved in Safari 4, and digging out 3 will take ages: I hope someone else will be able to diagnose it.


  •  

    Posting Permissions

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