Home >Web Front-end >HTML Tutorial >Web pages always have a top margin, and JS scripts can only be used in IE_html/css_WEB-ITnose
Web pages always have a top margin, and JS scripts can only be used in IE_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:571196browse
Recently, I need to create an effect. Click the button (picture) to hide the left menu and the Banner bar above
I copied a very simple example and modified it. I am basically satisfied, but there are the following problems:
1) Hide The Banner buttons (pictures) are not fully displayed because the showtop.html cannot always remove the top margin;
2) The JS that controls the image transformation and FrameSet size can only be applied under IE;
I hope you can give me some advice
(There are eight pages, a formal interface effect, the code is relatively simple, and it has an AR package, but the upload size is too small)
(1)index. html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Test</title> <style> html,body { margin-left:0; margin-top:0; } </style> </head> <frameset id="mainFrame" rows="70,14,25,*,25" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="top.html" name="top" id="top" title="top" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="showtop.html" name="showtop" id="showtop" title="showtop" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="userinfo.html" name="userinfo" id="userinfo" title="userinfo" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frameset id="main" cols="200,9,*" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="left.html" name="leftmain" id="leftmain" title="leftmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="middle.html" name="middlemain" id="middlemain" title="middlemain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="right.html" name="rightmain" id="rightmain" title="rightmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> </frameset> <frame src="bottom.html" name="bottom" id="bottom" title="bottom" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/></frameset> <noframes> <body> </body> </noframes></html> (2)top.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#004600; } </style> </head> <body> </body> </html> (3)showtop.html
<html> <head> <title>Frame Middle</title><style type="text/css"><!--/*body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}-->*/</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <table border="0" align="center"><tr valign="top"><td valign="bottom"><img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" /></td></tr></table> </body> </html> (4)userinfo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00CA00; } </style> </head> <body> </body> </html> (5)left.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00FF00; } </style> </head> <body> </body> </html> (6)middle.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Middle</title> <style> html,body { margin-left:0; } img { margin-top:200px; } </style> <script language="javascript"> function isShowleft() { if(window.parent.main.cols == "200,9,*") { window.parent.main.cols = "0,9,*"; document.images['imghiddetop'].src='showleft.gif'; } else { window.parent.main.cols = "200,9,*"; document.images['imghiddetop'].src='hiddeleft.gif'; } } </script> </head> <body> <img id="imghiddetop" src="hiddeleft.gif" onclick="isShowleft()" /> </body> </html> (7)right.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Right</title> <style> body{ background-color:#0000FF; } </style> </head> <body> </body> </html> (8)bottom.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#AC0000; } </style> </head> <body> </body> </html> Reply to discussion (solution)
showtop.html is wrong
It is a modified version………………
Original version The CSS is not commented, there is no Tabletrtd in the Body, only a1f02c36ba31691bcfe87b2722de723b
<html> <head> <title>Frame Middle</title><style type="text/css">body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" /> </body> </html> 1. What is the top margin that the poster is referring to?
2. Modify two JSs
middle.html
<script type="text/javascript"> function isShowleft() { if (window.parent.window.document.getElementById("main").cols == "200,9,*") { window.parent.window.document.getElementById("main").cols = "0,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } else { window.parent.window.document.getElementById("main").cols = "200,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } } </script> --------------- ------------------------------------------
showtop.html
70,9,25,*,25 ==>70,14,25,*,25
<script type="text/javascript"> function isShowtop() { if (window.parent.window.document.getElementById("mainFrame").rows == "70,14,25,*,25") { window.parent.window.document.getElementById("mainFrame").rows = "0,9,0,*,0"; document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } else { window.parent.window.document.getElementById("mainFrame").rows = "70,14,25,*,25"; document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } } </script> PS:
The poster’s flowers Many
I admire you
………………
showtop.html does not have a top margin under Firefox, but under IE there is
…………… …
showtop.html does not have a top margin under Firefox, but it does under IE.
There is a default margin under IE.
Generally use the following to clear margins and eliminate differences, and then set all CSS:
* {margin:0;padding:0}
Quoting the reply from ccs02287 on the 7th floor:
… ……………
showtop.html does not have a top margin under Firefox, but it does under IE
There is a default margin under IE.
Generally use the following to clear margins and eliminate differences, and then set all CSS:
* {margin:0;padding:0}
Thank you very much!
Actually, the so-called multi-browser operation is nothing more than doing some tricks on the frameset, it is just a grammatical issue.
Variable = window.parent.document.getElementById ('your frameset name');
Variable.cols="frame width change"; just write a judgment like this, it is very cheating...need If so, I can pass some JS for everyone to try. . .