asked on

Body align to second frame in javascript

Dear Expert,
I try to set two frame in my webpage, first frame is input box webpage and second frame is
re-direct URL web page based on the input product NO in the input box in the first frame
We call second frame wiht its id="Frame1"
I get two questions, hopeyou can hlep
Question-1 I would like to know how to change second iframe's body margin that will align to most top,left, right,
botton to its frame(I mean second frame), I try my code but it is failed, please view the code
I use Html-DOM to acces second frame body, but it fail like
document.getElementById("frame1").document.body.style.marginTop='0';
document.getElementById("frame1").document.body.style.marginLeft='0';

Question-2, Since the second frame will redirect to Excel's htm webpage
and its htm name is based on the product No in the input box, I could not get rid of the scroll bar
of the second frame even I try two way to fix this but fail. How to combine both
frame's scroll bar as one ?
1- <iframe height="700" marigin="0" width="1400" scrolling="no" border="0px" id="frame1" src="http://www.website.com/index.htm">
scrolling="NO" is not response at all
2_ ANd try this document.getElementById("frame1").document.body.style.overflow='hidden';
that is also no any response
Please view my image you will know my question2

It seems I do anything that is no any response , Please advise
Duncan

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
* {
font-size:15px;
font-family:Tahoma, Arial, 'Trebuchet MS', Verdana;
}

html,body {
background-color: #4169e1 ;
margin:1px;
padding:0;
height:100%;

}

</style>
<script type="text/javascript">

// e - event, el - element, fn- callback function
function checkEnter(e, el,fn) {
    var key=e.keyCode || e.which;
    if (key==13){
       fn();
el.value='';
document.getElementById("frame1").document.body.style.overflow='hidden';
document.getElementById("frame1").document.body.style.marginTop='0';
document.getElementById("frame1").document.body.style.marginLeft='0';
document.getElementById("frame1").document.body.style.marginBottom='0';
document.getElementById("frame1").document.body.style.marginRight='0';
return false;
    }
    return true;
}

function formSubmit() {

  var my_val = document.getElementById('text1').value;
  // check if value is empty
  if ( my_val.length > 0) { 
    document.getElementById("frame1").src="http://www.mywebiste.com/"+ my_val +".htm";
 
  }

}


</script>
</HEAD>
<body>

<input  style="width: 100px; height: 20px;font-size:16pt;" size="12" type="text" name="text1" id="text1" value=0 onclick="this.value=''; this.className='highlighted'" 
    onblur="if(this.value=='')this.value=this.defaultValue; this.className=''"
onkeydown="return checkEnter(event, this,formSubmit);"  >

<input type="button"  value="submit" onclick="formSubmit();" />

<iframe height="700" marigin="0" width="1400" scrolling="no"  border="0px" id="frame1" src="http://www.website.com/index.htm">
</body>
</HTML>

Open in new window

Snap16.jpg
Snap20.jpg

wmadrid1

Hi,
1.
document.getElementById("frame1").contentWindow.document.body.style.marginTop='0';
document.getElementById("frame1").contentWindow.document.body.style.marginLeft='0';

2.
Try
overflow:auto