SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get rid of border and scrollbar from <object>

    I'm trying to embed some html into a page; after I tried a couple of different methods, I'm trying <object></object> like the following
    Code:
    <object 
        type="text/html" 
        data=http://www.mySite.com/someURL 
        width="120" 
        height="200">
    <object>
    However, I have not been able to get rid of border and scrollbar and this is just driving me crazy. How can I get rid of all these border and scrollbar?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have to use Javascript to remove the border unfortunately. Try this combo:
    Code:
    window.onload = function ()
    {
    //loop through all objects and remove borders
    var current;
    var o = document.getElementsByTagName("object");
    for (var i = 0; (current = o[i]); i++)
    {
      current.body.style.border = '0';
      current.body.style.padding = '0';
    }
    }

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this seems to have the right idea. I checked one of examples http://www.xml.com/2003/07/02/exampl...ct-demo-3.html and it basically uses the same method. However,
    Code:
    ...
    current.body.style.border = '0';
    current.body.style.padding = '0';
    ...
    (where current is the id of an object)
    does not seem to work when the object embeds an external html page; i.e., type="text/html" and data="[html document]". What am I doing wrong? What am I missing? Do I need to reference different attributes?

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok,

    I think I got it. Let's say that I have something like the following:
    Code:
    <object 
        id="myObject"
        type="text/html" 
        data="http://www.mySite.com/someURL" 
        width="120" 
        height="200">
    <object>
    The following has the right idea:
    Code:
    myObject.body.style.border = 'none';
    myObject.body.style.margin = '0';
    myObject.body.style.padding = '0';
    myObject.body.style.overflow = 'hidden';
    However, whenever I try to reference myObject in JavaScript, I get an error(in IE); I don't know why, but it just doesn't work. So what I need to do instead is to add the following css
    Code:
    body
    {
        border: 0px;
        padding: 0px;
        overflow: hidden;
        margin: 0px;
    }
    in http://www.mySite.com/someURL (in retrospect, this seems rather obvious given the information). This gets rid of border and scrollbar AND enables to embed an external html while the parent html stays in XHTML Strict compliant.

    (I still need to set target to "_top", but I'm almost there...)

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought this was working perfectly until I added ...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    For whatever reason, scrollbars show up again . What the ...? What can I do now? What am I doing wrong? Can I really get rid of these scrollbars?

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mean to make multiple posts by myself, but I think I found a solution(this time, finally).
    Code:
    html
    {
        border: 0px;
        margin: 0px;
        overflow: hidden;
        padding: 0px;
    }
    body
    {
        border: 0px;
        margin: 0px;
        overflow: hidden;
        padding: 0px;
    }
    html needs to set its overflow to hidden. This gets rid of scrollbars in IE and also Mozilla. Furthermore, doing this does not require JavaScript. I will test a little more, and if I don't find any problem, I will update the server ...

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)


    Also, about not being able to address "myObject" directly: did you set something up like this before setting its style properties?:
    Code:
    var myObject = document.getElementById("myObject");
    If not, the browser may now know exactly what "myObject" is.

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Corner seat
    Posts
    1,069
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Also, about not being able to address "myObject" directly: did you set something up like this before setting its style properties?
    No, I didn't try that. I guess there was a way to access the object using JavaScript, but it seemed a little too complex. Also as I checked other discussions on the web, most of them looked like they tried to resolve problems like this one just by using CSS, so I tried to do the same. I can't remember now, but there was this one discussion suggesting to set html tag's attributes, so that's what I did. Seems like this is working, and hopefully, I will be closing this thread. Thanks for the help.


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
  •