Jump Link Inside an iFrame - html

Inside an iframe (on page-A), I have a simple page (page-B) that has a few jump links (e.g. jump link) to different sections of the page (page-B). The iframe height is preset to be longer than page-B's height; this is a requirement.
For some reasons, the jump links didn't work on FF (I am on Mac/FF 10.0.2); however, it worked properly on Safari and IE8. This is the sample page.
Code of page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Code of iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 {
background-color: #f0f;
}
#box3 {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li>Box 1</li>
<li>Box 2</li>
<li>Box 3</li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
Note: If I set the iframe height < page-B's height, the problem will be solved. However, unfortunately this isn't an option given my situation because I have no access to page-A.

This is not possible with HTML only.
As you can read on the Firefox Bug Report Nr. 638598 this is mentioned long time ago! Also many people don't like that behavior, but Jonas Sicking says in his comment that this will never change. He sees that as a feature that firefox prevent this potential hacking functionality.
if you don't know him read here that he is the Tech Lead of the web-api project at mozilla as well as an editor for the indexeddb and file-api specifications at W3C.
Other people tried to find solutions like Matthew but this example didn't work in my short test case with your html structure. Some others say that it should work with JavaScript and the scrollTo() Function.
I'm sorry for saying that this is a limitation of FireFox only, but hope you are happy to be safe in the knowledge about that problem.

I already ran into this issue. In my case I could not use a javascript solution because my iframe was in a different domain and I had no access to the parent page.
But there is a HTML workaround.
Change your link from this:
jump link
To this:
<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>
And create a invisible <div id="my-id"></div> in your parent page and position it using CSS.

Mmm, just a thought, have you reset margins for the iframe? FF tends to do weird things when you don't explicitly specify margin attributes.

Related

IFrame wont go fullscreen

so i'm making a shell shockers site for my friends in school, and it wont go fullscreen
this is the code iv used. whats wrong??? (I'm sorry if its a simple fix but I used what I saw online to allow this and it doesn't work)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="https://playminigames.ru/en/embed/shell-shockers" style="width: 1200px; height: 700px;" frameborder="0" allow="fullscreen" object-fit:screen;></iframe>
</body>
</html>

class used to apply styling to muliple elements but using id also,we can apply styles.what is the difference?

<!DOCTYPE html>
<html>
<head>
<style>
#p01
{
color: blue;
}
</style>
</head>
<body>
<div id="p01">
<p>I am different.</p>
<p>Second Option</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.p01 {
color: blue;
}
</style>
</head>
<body>
<div class="p01">
<p>I am different.</p>
<p>Second Option</p>
</div>
</body>
</html>
Many websites mentioned id is used when the styling is unique to only a particular element but id can also be used to more than one element with the same id.
For the above two HTML codes I am getting the same output. Then what is the exact difference between them?
It's okay when you're doing an assignment (not sure if your tutor will be satisfied).
It's definitely not okay when you're working on a real project.
Not good for SEO, Google lighthouse will mark it as a bad practice and you may never know how Javascript will work on multiple ids in different browsers.
Read this for more information: Two HTML elements with same id attribute: How bad is it really?

Styles work differently based on if they're inside the html head tags or not?

I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.

<!DOCTYPE html> prevents relative css heights

(Everything is tested in the latest firefox.)
This html-code creates an almost screen-filling red box:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
But adding a doctype declaration disables relative heights and makes the div's height zero:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.
A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).
Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.
You can do it this way: http://cdpn.io/aHlCd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
You can also just set height on the div rather than min-height.
The above is the answer to why, if you were looking for a fix, setting the position to absolute and applying top,right,left and bottom should do the trick:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>

IE8 does not print an image in :before pseudo-element

I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}