What's the best way to frame external webpages under a banner? - html

Google Images is the best example. Once you follow an image, a frame remains at the top of the page, always reminding you to return to Google. Does this technique have a special name and what is the most efficient way to do this?
I have this so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Framed content</title>
<style type="text/css">
#bar {
width:100%;
height:10%;
}
iframe {
width:100%;
height:90%;
}
</style>
</head>
<body>
<div id="bar"><!-- PUT THE CONTENTS OF THE BAR HERE --></div>
<iframe src="{LOCATION OF THE HTML PAGE}"></iframe>
</body>
</html>
How can I adapt the above so that #bar can read 100px high rather than 10% high? How does that affect the code? This is the crux of my question.
Many thanks. Patrick

I think it's still just called 'framing' even if it's more advanced than the old frameset style popular in the late '90s and early 2000s. Other examples you could study include Facebook and Stumbleupon.

You could do what google does, and remove your doctype tag. your markup will pretty much work right away with this one modification, and you'll be able to set the bar's height to 100px, and the iFrame's height to 100% -- producing the desired results.

I've seen it called a "topbar"...
Personally, though, I find them really annoying unless they're serving a very useful purpose. I don't need to be reminded to go back to your website. You might as well just open the link in a new window at that point.

After a bit of investigation, I came across this, which doesn't use iframes at all. I know some people won't touch framesets with a bargepole, but I'd be interested to know what people think could be potential problems, other than the obvious "frames not supported".
<html>
<frameset rows="100,*" frameborder="no" framespacing="0">
<frame name="h" src="top_source" scrolling="no" noresize >
<frame name="t" src="main_source" scrolling="auto" noresize >
</frameset>
</html>
This makes use of the wildcard " * ", which div height attributes don't have.

Related

Embedding websites inside a shell application using Angular 2.0.0

In the project, I'm working on we have 4 individual websites and one shell to host all. The team is using Angular 2.0.0. Their approach they choose is embedding each website inside shell application (Using object tag). So that the Dom in high level look like
<html>
<head>
</head>
<body>
<object type="text/html" data="http://website1.com/#/" style="width:100%; height:100%">
<html>
<head>
</head>
<body>
Content of the Website 1
</body>
</html>
</object>
</body>
<html>
I am working as a FE dev and to me, this sounds so wrong! why? because I have html { with: 100%, width: 100% } and because we have 2 html tag nested it ruins the style. I believe there must be a better to just embed the content of the websites1.
Would you please give me your thoughts about the best way to do this and potentially not having 2 html and body tags nested.
I'd appreciate

Frames not working in HTML5

I have a task to do and I know that I should not be using frames but I have to. I tried to load 3 html pages into 3 frames on the main page but it's showing absolutely nothing at all. This is the code:
<body>
<h4>BGJUG - Bulgarian Java User Group</h4>
<div class="menu">
ABOUT EVENTS CONTACTS SEARCH
<hr width="90%" />
</div>
<frameset cols="25%,50%,25%">
<frame src="a.html">
<frame src="b.html">
<frame src="c.html">
</frameset>
</body>
The <frameset> tag is not supported in HTML5. You will need to change your DOCTYPE to one that supports frames. Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Also, see the comment by t.niese about framesets being direct children of <html>.
Alternatively, if you need the HTML5 features, you can accomplish the same thing with <iframe>. inside CSS boxes. Scrolling of <iframe> is also not supported in HTML5 but you can probably put the <iframe> tags in CSS boxes with overflow: scroll;. See the other comment by t.niese below this answer.

Prevent frame scrolling when screen is too small

I'm using frames. My logo frame contains 2 pictures. One is 150px and other 600px making the whole logo size of 750px. Now, when user is making the window smaller than whole number then my second picture is being scrolled down without ability to see the picture.
The easiest possible way would be to connect 2 pictures into one 750px one, but is there a way to avoid this?
All I have as a code on my logo frame is...
<body class="logo_background">
<img src="assets/logo.png">
<img src="assets/logo_name.png">
</body>
my index.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="logo.html" name="logo" scrolling="no">
<frameset rows="*" cols="150,100%">
<frame src="menu.html" name="menu" scrolling="no">
<frame src="main_page.html" name="page" scrolling="no">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
use min-width on the container of the images to 750px.It'll solve the problem.. and i agree with #elclanrs .. use div's to achieve this.. frames might not be the best way..
.logo_background{
min-width:760px;/* just to be sure adding an extra 10px */
}
Now,the container will have 760px no matter what size the window takes,so your pictures dont lose their location -- dont go out of view , you can still scroll right to see the logo's - both of them.. :)
Here's a fiddle for your problem -- http://jsfiddle.net/mvivekc/h4gVe/
Just style the logo frame to be a width of no less than 750 px. I would think that would work.

Facebook Likebox "allowTransparency" gives invalid XHTML in W3C validator

What I did: I embedded Facebook Like Box on my otherwise "XHTML 1.0 Transitional" webpage. The source code of Facebook Like Box is as given by Facebook:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;"
allowTransparency="true">
</iframe>
What W3C validator says: When I check the webpage in W3C validator, it gives following error:
Line 600, Column 421: there is no attribute "allowTransparency"
But, IE needs allowTransparency="true"> to work.
Expected Solution: What should I do to make it validate as XHTML 1.0 Transitional while keeping Facebook like box on my webpage.
You can write two codes for it. One with allowTransparency with if statement for IE and another without it. This way, it can be done. So, use this embed code with conditional HTML comments:
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;"
allowTransparency="true">
</iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;">
</iframe>
<!--<![endif]-->
This will validate the XHTML since the iframe code is commented out and you can use allowTransparency too.
EDIT: Closed the iframe as pointed out by staticbeast in a comment.
If IE truly needs allowTransparency="true" to work, then you're not going to be able to create 100% valid XHTML 1.0 Transitional markup.
...but why does IE need that attribute? What happens when it's omitted?
If you're really that concerned about W3C validation (I don't think it's worth it, but that's just me), then you could apply the same iframe attribute using JavaScript. I'm not recommending this,* but you could do it:
document.getElementById('theIFrameID').allowTransparency = true;
*because I don't think that the goal of creating 100% validated markup justifies using JavaScript to accomplish something that's otherwise-identical to the static markup.
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_es=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px; allowTransparency:true;">
</iframe>
I don't know why they used styles to do everything except allow transparency.So just throw it in with the rest of the styles and it should validate.
I've not tested it recently, but I think you're allowed to have comments within HTML tags, so just wrap the allowTransparency in an IE conditional comment:
<!--[if ie]> allowTransparency="true" <![end if]-->
To have IE see it, and everything else ignore it. This should also be valid XHTML, since comments are ignored by browsers, and conditional comments parses only by IE.
For me is the best way use a jQuery like this:
For facebook like button. I set class="likebtn" and then in .js file:
$(document).ready(function () {
$(".likebtn").attr('allowTransparency', 'true');
});
Thats all ;-)
Leave it as is. "allowTransparency" only means something to IE, and it will be ignored otherwise. Validation is a tool for checking your document against the standard, not an end in itself. You are knowingly writing something outside of the HTML standard for a particular case; acknowledge that rather than trying to hide it.

unique id value in html

This is a question more out of curiosity rather than being stuck. I know in html id needs to be unique and I can see the error in html validation. Yet the browsers happily apply style sheets to both elements. Is it because they are more relaxed in parsing or what. Does that mean I can use this for styling etc or does it have side effects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#abc { color: red; }
</style>
</head>
<body>
<div id="abc">Hello Div 1</div>
<div id="abc">Hello Div 2</div>
</body>
</html>
Output in browsers.
If your browser died every time it loaded an HTML page with errors, it'd be dying all the time. And you wouldn't think very much of the browser.
It's important for a browser to be as forgiving as possible and work as best it can with what it has. For this reason, all browsers tend to be very lenient in how they handle markup.
Of course, that doesn't mean you shouldn't write valid HTML.
I would not rely on that behaviour. Having two elements with the same ID is just wrong as you already know.
And yes, the tolerate errors in HTML to some extend and try to compensate. For example missing closing tags. This works more or less good, depending on the error.
Styling several elements should be done with CSS classes.
use "class" for adjusting css.
side effect: you'll feel less comfortable when you want use getElementById and add dynamic functionality. from design perspective doesn't matter.