using frame like div - 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.

Related

How to do this layout with iframes, in HTML

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>

How to Get Rid of a Single Border Between a Frame and a Frameset?

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.

Jquery dropdown menu is covered by a frame on a webpage

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.

HTML Frameset Query

I have the following code for framset display
<FRAMESET ROWS="18%,*" >
<FRAME SRC="./views/Title_Page.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1 noresize="noresize">
<FRAMESET COLS="20%,*">
<FRAME SRC="./views/Navigation_Page.jsp" NAME=SIDEBAR noresize="noresize" scrolling="no">
<FRAME SRC="./views/Welcome.html" NAME=MAIN noresize="noresize">
</FRAMESET>
<NOFRAMES>NOFRAMES stuff
</NOFRAMES>
</FRAMESET>
I want to add a logout link which logges out of the app ,when i add a link in Title_Page.html it logges out only that frame but not the others,how will handle it?i want to log out completly from all the frames
I must preface by saying that frames are pretty much frowned upon on the web these days. They're deprecated, they're not a good user experience, it's very difficult to link or bookmark a page, etc etc...
Add target="_top" to your logout link. It will target the "top" page (the one which defines all the frames). Also note that target is deprecated.
target="_top"
… same as anything else you want to hit the top window instead of the current frame.

Safari Frames Invisible Scrollbar

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.