I'm working on a website that uses not just frames, but frames within frames (ew, I know, but I don't get to choose). It actually works OK most of the time, but I'm running into a problem with some of the frames within frames in Safari (only).
Some of the two-deep frames render in Safari with a small space on the right-hand side of the frame - I think it's just the ones with scroll set to "no", but fiddling with the scroll settings hasn't fixed it yet. It basically looks like there should be a scroll bar there, but there isn't.
I've been working on this awhile and tried a lot of things: changing the heights of the rows, changing the scroll settings, adding a colls='100%' tag, changing the heights of the contents of the frames, as well as checking to make sure widths are set to 100% throughout. Nothing's fixed it so far.
Does any one know what's happening here?
Here's the basic gist of the code and some screenshots - please forgive the lack of proper quotes; it still renders and fixing them all in this codebase would be a losing battle:
<html>
<frameset id=fset frameborder=0 border=0 framespacing=0 onbeforeunload="onAppClosing()" onload="onAppInit()" rows="125px,*,0">
<frame src="navFrame.html" name=ControlPanel marginwidth=0 marginheight=0 frameborder=0 scrolling=no noresize>
<frame src="contentFrame.html" name=C marginwidth=0 marginheight=0 frameborder=0 scrolling=no>
<frame src="invisiFrame.html" name=PING marginwidth=0 marginheight=0 frameborder=0 noresize>
<noframes><body>Tough luck.</center></body></noframes>
</frameset></html>
Inside that second frame (named "C" and with src of "contentFrame") is this:
<HTML>
<HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></head>
<frameset rows="48px,*,28px" border=0 frameborder=0 framespacing=0>
<frame src="pageTitle.html" name=Title marginwidth=0 marginheight=0 noresize scrolling=no frameborder=0>
<frame src="content.html" name=ScreenBody marginwidth=0 marginheight=0 frameborder=0>
<frame src="submitBar.html" name=ContextPanel marginwidth=0 marginheight=0 frameborder=0 scrolling=no noresize>
</FRAMESET>
</HTML>
The frames that are troublesome are the first frame (named "Title" with src of "pageTitle.html") and the last frame (named "ContextPanel" with src of "submitBar.html") both have their widths set to 100% and heights are either 100%, not set, or a value less than or equal to their row height.
Here is an image of the problem:
What you're seeing is how Safari draws scrollbars when there is not enough space to draw the entire scrollbar widget set. You should set overflow: hidden in the CSS for the body of any frame/page you don't want to scroll. Note that Safari doesn't entirely obey these rules (or scroll="no" on the element) in that you can actually scroll the element by drag-selecting its contents, if there is in fact content beyond the visible area.
The title and submit frames showing scroll bars can have the html body tag scroll="no"
<body scroll="no">
so irrespective of a frame or normal rendering, there would be no scrollbar.
Related
The layout i want to make
I dont know how to get the frames to layout in the right position I want, so I could use help.
That is done using frameset. I have added frameborder="1"which will show the border, you can set it to "0" or remove the borders. You can change the border size by adding border="1px". And add bordercolor:#000; for adding colors to the border. And for scrolling you can use scrolling="Yes/No/Auto" in the frameset beggining tag.The code given below will not work on Stack Overflow, Codepen,or JSFiddle as <frameset> is no longer supported in HTML5. But you can save the file locally or try it on W3Schools by pasting the following code, and it will work.Edit the frame sources, else it will not work (as I have given invald pages).
<html>
<frameset frameborder="1" rows="20%, 80%"><!--set frameborder value "0" for hiding the borders -->
<frame src="https://via.placeholder.com/1000X150/181818/FFFFFF/?text=20%">
<frameset cols="25%, 75%">
<frame src="https://via.placeholder.com/150X500/181818/FFFFFF/?text=25%">
<frameset rows="50%, 50%">
<frame src="https://via.placeholder.com/700X250/181818/FFFFFF/?text=75%">
<frameset cols="75%, 25%">
<frame src="https://via.placeholder.com/600X200/181818/FFFFFF/?text=50%">
<frame src="https://via.placeholder.com/200/181818/FFFFFF/?text=25%">
</frameset>
</html>
When I use frame tag like this,
<frameset rows="425,*" noresize frameborder=0>
<frame name="top" src="./top.html" scrolling="no">
<frame name="bottom" src="./bottom.html">
</frameset>
if I scroll, then top.html stays at the top and just bottom.html gets scrolled.
I want to implement the scroll to top.html as well just like I would scroll any other div.
Is it possible? I must use frame tag because there is a music player at top so need to preserve that. ,even page change. Any help is appreciated.
I've got a page with a toolbar in the top frame. I want borders between every other frame except between the toolbar and the two frames it borders.
<html><head><title>Test</title></head>
<frame src="toolbar.html" name="toolbar">
<frameset rows="44%,*">
<frameset cols="50%,50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
<frameset rows="28%,28%" cols="50%,50%">
<frame src="frame3.html" name="frame3">
<frame src="frame4.html" name="frame4">
<frame src="frame5.html" name="frame5">
<frame src="frame6.html" name="frame6">
</frameset></frameset></html>
So, how would I remove the boarder between "toolbar" and "frame1"/"frame2" while leaving all the other boarders in place (including the one between frame1 and frame2)? I'm open to using iframes if that would do it, but I would need to see a code example because I have never used them.
I don't think you can gain sufficient control over the frameborders to do what you want. Best would be to not use framesets at all, but if you really want to, your best hope is to hide all the frameborders and have 1px of dark margin or padding around the edge of the html in each frame to stand in for the frame borders, except in the places where you want the borders not present.
I'm using a using this jquery dropdown menu in my banner frame (mail_frame.html). when it drops down it gets covered by another frame that's below it. even though i set the z-index of the drop down to 999 in it's css, it's still behind the other frame
frameset.jsp
</head>
<frameset id="frameMain" rows="84,*" framespacing="0">
<frame src="mail_frame.html" id="mail" name="mail" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
<frameset id="frameSet" cols="126,*" framespacing="0">
<frame src="leftNavigation.do?loadWelcome=true<%= currentURL %>" id="leftnav" name="leftnav" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
<frame src="empty.htm" id="main" name="main" frameborder="0" border="0" noresize="noresize" scrolling="yes"/>
</frameset>
</frameset>
</html>
how can i make it drop down on top of everything
Classic frames (what you're using) are completely independent windows. You can't have an element in one frame that then extends over the content of another frame. You can do that with iframes, but not with the kind you're using.
It may be time to consider moving to a frameless layout, as that's the direction the technology seems to be going. For instance, neither frame nor frameset is part of HTML5. As an alternative, you can use ajax (an increasingly outdated name, as I suspect most people are using it with JSON instead of XML now) to update individual elements within a page.
I have a web page with lots of framesets and frames (don't ask), and I want to be able to show frame borders where the red borders appear in the mockup below (The vertical borders must be scrollable).
If I set frameborder="0" to the #outer frameset (i don't want any border to appear there), this prevents me from overriding it in the #middle frameset. Please not that there should not be a border in the #innerXXX framesets.
So, how can I show frame borders on the #innerXXX framesets? (only where the red lines are visible in the mockup)
Thanks.
P.S. Don't ask.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Frame desperation</title>
</head>
<frameset id="outer" rows="23, *" frameborder="0" border="0">
<frame noresize="noresize" scrolling="no" src="http://www.bing.com">
<frameset id="middle" cols="20,30%,35%,35%" frameborder="5" border="5" bordercolor="red" id="sizingControl">
<frame name="minimizeBar" noresize="noresize" id="minimizeBar" scrolling="no" src="http://www.bing.com">
<frameset id="inner1" rows="146,*,20" border-top="0" border-bottom="0" id="treePanel">
<frame id="treeToolbar" name="treeToolbar" scrolling="no" src="http://www.bing.com">
<frame id="treeContent" name="treeContent" src="http://www.bing.com">
<frame id="treeStatus" name="treeStatus" scrolling="no" src="http://www.bing.com">
</frameset>
<frameset id="inner2 rows="146,*,20" frameborder="0" border="0" >
<frame id="leftToolbar" name="leftToolbar" scrolling="no" src="http://www.bing.com">
<frame id="leftDocumentContent" name="leftDocumentContent" src="http://www.bing.com">
<frame id="leftStatus" name="leftStatus" scrolling="no" src="http://www.bing.com">
</frameset>
<frameset id="inner3 rows="146,*,20" frameborder="0" border="0" >
<frame id="rightToolbar" name="rightToolbar" scrolling="no" src="http://www.bing.com">
<frame id="rightDocumentContent" name="rightDocumentContent" src="http://www.bing.com">
<frame id="rightStatus" name="rightStatus" scrolling="no" src="http://www.bing.com">
</frameset>
</frameset>
</frameset>
<noframes></noframes>
I don't think you can have frameborders on framesets, just on frames themselves, so the best way to do this would probably to have a single frameset containing five frames - one at the top, one at the far left and three in the middle. You give the ones in the middle a frameborder. Then each middle frame points to an separate file which has a single frameset containing three frames - top, middle bottom. In other words:
Frameset
Frame (top)
Frame (left)
Frame (inner1) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Frame (inner2) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Frame (inner3) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Incidentally, regarding the code itself, there are missing quotation marks after inner2 and inner3. Also, you shouldn't have two IDs in a single element as this could mess up any JavaScript or CSS you write. Good luck with all those frames - you have my sympathy!