tags:

views:

395

answers:

2
+1  Q: 

Can Javascript toggle frameborders?

I'm trying to use JS to toggle a frame's frameborder attribute. Here is my test case:

<html>
  <head>
  <script type="text/javascript">
    function off() {
      var f1 = document.getElementById("f1");
      var f2 = document.getElementById("f2");
      alert ("before, frame f1 had frameBorder=" + f1.frameBorder);
      f1.frameBorder = "0";
      alert ("after, frame f1 has frameBorder=" + f1.frameBorder);
      alert ("before, frame f2 had frameBorder=" + f2.frameBorder);
      f2.frameBorder = "0";
      alert ("after, frame f2 has frameBorder=" + f2.frameBorder);
    }
  </script>
  </head>

  <frameset cols="50%, 50%" name="fs">
    <frame frameborder="1" src="http://bikeshed.com" id="f1" name="f1" />
    <frame frameborder="1" src="http://bikeshed.com" id="f2" name="f2" />
  </frameset>
</html>

I load this up in Firefox, open up Firebug, and type "off()" into the console. It runs my function, which reports that both frameborders had been set to "1" and are now set to "0" .. however, the frame border fails to disappear.

Is what I'm trying to do possible? If so, how?

A: 

For some attributes, you need to use setAttribute. Try

f1.setAttribute('frameborder', 0);
outis  2009-05-27 00:11:58
That doesn't work in FF either...
Rex M  2009-05-27 00:17:58
+2  A: 

Using iframes instead of frames seems to work. You'll have to work on the CSS a bit to complete the illusion of a frameset. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html lang="en">
<head>
  <title>Frame Test</title>
  <script language="javascript">
    var off = function () {
      document.getElementById('frame1').style.borderWidth = 0;
      alert('off');
    }
  </script>


</head>
<body style="margin: 0; padding: 0">
<table style="width: 100%; height: 100%" cols="2">
<tr>
<td><iframe id="frame1" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
<td><iframe id="frame2" src="http://www.google.com" style="margin: 0; width: 100%;  height: 100%"></iframe></td>
</tr>
</table>

</body>
</html>
Patrick McElhaney  2009-05-27 00:39:10

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?