I'm trying to create two frames and make them scroll together,
for instance in the case of a page with a changing menu bar at the top -
I'm using a carousel - or a footer at the bottom,
that must appear as part of the page.
I want a page to look like one page that is also capable of scrolling,
but the page is actually composed of two frames.
Using this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Info from: http://www.webxpertz.net/forums/showthread.php?t=257 -->
<!-- Using this... -->
<meta NAME="Description" content="Outer frame(OneBaredFrame) used to wrap the header and body frames" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<frameset rows="1,*" border="0" frameborder="no">
<frame src="javascript:<HTML></HTML>" name="dummy" id="dummy"
frameborder="no" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<frame src="index_inner.html" name="OneBaredFrame"
id="OneBaredFrame" frameborder="no" marginheight="0" marginwidth="0" noresize="noresize" scrolling="yes"></frame>
<!-- the bottom frame above if scrolling="yes" doesn't show a scrollbar for me? -->
<!-- the top frame above if scrolling="yes" does show a scrollbar for me if rows="100,*" say? -->
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Frames for within a scrollable frame">
<meta HTTP-EQUIV="Cache-Control" content="no-cache">
<meta HTTP-EQUIV="pragma" content="no-cache">
<title></title>
</head>
<!-- My header and body frames need to scroll together,
so I am using another frameset (the one above) to enclose these frames -->
<frameset rows="215,*" border="0" frameborder="no">
<frame src="Header.html" id="header" name="header" frameborder="no"
marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<frame src="index_body.html" id ="body" name="body" frameborder="no"
marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<!-- when the above are set to scrolling="yes" scrollbars appear for me for each -->
</frameset>
</html>
When using frames, each will get its own scroll bars.
You can't have a single scroll bar for two frames, precisely because the are two frames.
Update:
You can workaround this by making both frames non scrolling and wrapping both them within a third scrolling frame (whose only reason to exist is to provide a single scroll bar). The parent frame will handle scrolling of both inner frames together.
You need to add a new page with a frameset like the following, making sure the second one points to your frameset (and set SCROLLING="NO" on both framesets:
<FRAMESET ROWS="0%,100%"
BORDER="0"
FRAMEBORDER="NO">
<FRAME SRC=""
NAME="dummy"
FRAMEBORDER="NO"
MARGINHEIGHT="0"
MARGINWIDTH="0"
NORESIZE
SCROLLING="NO">
</FRAME>
<FRAME SRC="*url to your frameset*"
NAME="myframes"
FRAMEBORDER="NO"
MARGINHEIGHT="0"
MARGINWIDTH="0"
NORESIZE
SCROLLING="YES">
</FRAME>
</FRAMESET>
I got what you are looking for using IFRAME.
It's even more flexible than FRAME, since it doesn't require you to split the window from edge to edge, and each frame boundary doesn't need to be aligned with another one.
I used this for a webpage I just deployed and it works like a charm.
There is one drawback: the height of the principal frame must be fixed beforehands, and you need to overestimate it in order to avoid an inner scrollbar.
<BODY>
<CENTER>
<DIV style="display:table-cell; width:800; ">
<iframe WIDTH=800 HEIGHT=220 src="menu.html" name="topframe" frameBorder=0 SCROLLING=NO></iframe>
<iframe WIDTH=800 HEIGHT=380 src="home.html" name="contentframe" frameBorder=0 SCROLLING=AUTO></iframe>
<iframe WIDTH=800 HEIGHT=220 src="menu.html" name="bottomframe" frameBorder=0 SCROLLING=NO></iframe>
</DIV>
<CENTER>
</BODY>
Links in menu.html with TARGET="contentframe" do what you want it to do.
Related
How to load a page from server in <iframe> / <frame> in Chrome? Do we have set any specific headers to load?
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<TITLE>TEST</TITLE>
</HEAD>
<FRAMESET ROWS="3%, 97%">
<FRAME SRC="HTTPS://WWW.YAHOO.COM" BORDER="0" />
<FRAME SRC="HTTPS://WWW.GOOGLE.COM" BORDER="0" />
</FRAMESET>
</HTML>
This will help you.
<iframe src="https://www.w3schools.com" height="100%" width="100%"></iframe>
Here's the code that works fine in Mozilla but do not works in Internet Explorer. Any idea. Urgency is high.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<FRAMESET rows="15%,81%,4%">
<FRAMESET>
<FRAME src="header.html" frameborder="0" scrolling="no"></FRAME>
</FRAMESET>
<FRAMESET cols="40%,60%">
<FRAME name="login_menu_frame" src="login_box.html" frameborder="0" scrolling="no"></FRAME>
<FRAME name="login_body_frame" src="login_page_body.html" frameborder="0" scrolling="no"></FRAME>
</FRAMESET>
<FRAMESET>
<FRAME name="login_footer_frame" src="footer.html" frameborder="0" scrolling="no"></FRAME>
</FRAMESET>
</FRAMESET>
</html>
Well, I found the answer. The problem lies in the
IE is only recoznising the first . So, whatever is placed after that is not being loaded in the page.
The solution is to put every other frameset in the first [any other frameset] .
The code that worked is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<FRAMESET rows="15%,81%,4%">
<FRAMESET>
<FRAME src="header.html" frameborder="0" scrolling="no"></FRAME>
<FRAMESET cols="40%,60%">
<FRAME name="login_menu_frame" src="login_box.html" frameborder="0" scrolling="no"></FRAME>
<FRAME name="login_body_frame" src="login_page_body.html" frameborder="0" scrolling="no"></FRAME>
</FRAMESET>
<FRAMESET>
<FRAME name="login_footer_frame" src="footer.html" frameborder="0" scrolling="no"></FRAME>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</head>
</html>
What's up with the CAPS, copy-pasted this from actual -96 sources found on a floppy? ;-P
Also, try and apply consistent indentation for the tags. Your main frameset tag is directly followed by another (rouge) frameset tag, which missing closing tag..
Example usage that clearly indicates which elements are contained inside each other for quick mismatch spotting:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
<h1>Your browser does not support frames.</h1>
</body>
</noframes>
</frameset>
</html>
I am creating a web site include navigation bar using only front end code...html ,css and script. but I want to add nav bar in each page by an already created html file.
I am using HTML5 that deprecated frameset tag. So which technique could I use without other backend code to add that html file to another one? Thanks.
<frameset rows="200,*" frameborder="no" border="0" id="container" scrolling="yes">
<frame src="nav.html" name="leftframe" scrolling="no" noresize="noresize" id="nav" />
<frame src="slider.html" name="rightframe" scrolling="no" noresize="noresize" id="slider" />
<frame src="text.html" name="bottomframe" scrolling="no" noresize="noresize" id="text" />
<frame src="copy.html" name="bottomframe" scrolling="no" noresize="noresize" id="text" />
</frameset>
You can switch <frame> for the <iframe> element and get the same results with some CSS.
using jQuery:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$("#navbar").load("navbar.html");
});
</script>
</head>
<body>
<div id="navbar"></div>
</body>
</html>
I have the following html code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<frameset id="mainFrameset" bordercolor="#000000" border="2" framespacing="2" frameborder="1" rows="55,*" name="mainFrameset">
<frame scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" src="title.jsp" name="titleFrame">
<frameset id="innerFrameset" framespacing="0" border="0" frameborder="0" cols="20.0%,*" name="innerFrameset">
<frame scrolling="auto" target="mainFrame" noresize="noresize" marginwidth="0" marginheight="0" src="dynamicContents.jsp" name="contentFrame">
<frame scrolling="auto" marginwidth="0" marginheight="0" src="Welcome.jsp" name="mainFrame">
<html>
<head>
<title>retailJava Home</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
</head>
<frameset id="mainFrameset" bordercolor="#000000" border="0" framespacing="0" frameborder="no" rows="*,*">
<frame scrolling="auto" marginwidth="0" marginheight="0" src="WelcomeMain.jsp" name="welcomeMain">
<html>
<head>
<title>Welcome to retail-j</title>
<link type="text/css" href="/rjBackOffice/stylesheets/maintenance.classic.css" rel="stylesheet">
<base target="_self">
</head>
<body text="#000000" leftmargin="0" topmargin="0">
<div id="WelcomeContainer">
<div id="HeaderLogo">
<div id="WelcomeMessages">
<span id="WelcomeMessage">Welcome to retail-j</span>
<span id="LoginInformation">You are currently logged in as BOB</span>
</div>
</div>
</body>
</html>
</frame>
<frame scrolling="auto" marginwidth="0" marginheight="0" src="SystemManagement/InScreenApplicationAlertViewerServlet" name="alertFrame">
<html>
</frame>
</frameset>
<noframes> <body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0"> Sorry your browser does not support framesets. </body> </noframes>
</html>
</frame>
</frameset>
<noframes> <body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0"> Sorry your browser does not support framesets. </body> </noframes>
</frameset>
</html>
I am trying to locate the the span element with id WelcomeMessage from the above html code. I tried the following to locate
driver.switchTo().frame("welcomeMain");
WebElement element=driver.findElement(By.xpath(".//*[#id='WelcomeMessage']");
Kindly let me know how to switch between framesets/frames [in case of a complex html with convoluted frames as shown above]and locate the elements inside them.
I get the error " unable to locate element welcomeMain......"
Kindly reply to sort this , thanks in advance.
It might be the issue because of your webdriver control may already inside the default frame, and you may need to take the control out of all frame first before taking it to another frame.
Check whether you are able to switch to all the frames available in that page by using below code and this should be working fine.
for (WebElement e :driver.findElements(By.tagName("frame")))
{
driver.switchTo().defaultContent();
driver.switchTo().frame(e);
if(driver.findElement(By.xpath("yourElement")).isDisplayed())
{
driver.findElement(By.xpath("yourElement")).click();
break;
}
else
continue;
}
Ok so I've NEVER worked with frames before but a higher power has forced my hand this time.
What I need to be able to do is resize the 'footer.html' frame within this template.
<html>
<head>
<title>Store Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="*,1034,*" frameborder="NO" border="0" framespacing="0">
<frame name="sideblanks" scrolling="NO" src="blank_left.html">
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
<frame name="top" scrolling="NO" noresize src="top_nav.html" >
<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">
<frame name="meny" noresize scrolling="NO" src="menu_1.html">
<frame name="content" src="content.html">
</frameset>
<frame name="chart" scrolling="NO" noresize src="footer.html">
</frameset>
<frame name="sideblanks" scrolling="NO" src="blank_right.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
I feel like a complete novice again. I don't like it, I'm scared.
Any help would be great.
Adjust the numeric values here:
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
you have used "rows" and "columns" you can set the height of the frame with rows or with CSS.
if you need to dynamically alter the height of the frame you might be able to do this with javascript or JQuery but you have to reference it as parent. to make sure you are in the right window.
when are you wanting the height of the frame to change?