Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}
Related
My problem is that I have a huge fixed header so whenever I do the regular HTML id link the id content is covered by the header. Is there a way to navigate to a slightly higher position of an id section using css?
Yes, you can, if you use scroll-margin i.e.
h2{scroll-margin: 40px}
This will offset your content from the top of the browser when using an ID link, but there are some gotchas namely I.E and partial support in Safari.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
Is it possible to have a non-scrolling iFrame inside a scrolling div, and have anchor links inside the iFrame work correctly? The anchor links inside the iFrame should scroll to the spot inside the iFrame, I don't need/want them to point to elements on the parent page.
Here is my jsFiddle with a simple example:
http://jsfiddle.net/shopguy/WjmHG/
and the code for it:
<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>
I have no association with that hypergurl.com link used in my example, it was just the first example I could find of a page with an anchor by id/name syntax link in it.
If you load the JSFiddle and click the "Jump to Bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing with various pages it never works in FireFox, in Chrome it sometimes works the first time it is clicked, but then if you scroll up and click again it doesn't work. In IE8 it works (scrolls) most of the time.
Scrolling works correctly all of the time if I let the iFrame itself have the scrollbars (remove scrolling="no"). This isn't a practical solution for me though, as I have content outside of the frame that I want to scroll with it. In my real code I dynamically set the height of the iFrame to fill its content, this way it appears to be more like content on my page.
Additional info as to why I need to do this:
I'm creating a web-based email client and so far there seems to be the least amount of issues if I display the HTML body of emails inside an iframe, vs trying to display inside a table cell or div inside my page. I'd like for these type of links to work. I do have some control over the content, it comes from my server and I can modify it some (but don't want to hack it too much). For example, I already modify all links to open in a new window (but not links that start with #, so that isn't my issue).
I know GMail doesn't use iFrames, but my XFINITY (by Comcast cable) web-based email client does, and they managed to get these to work (but so far haven't figured out what all they are doing).
Check out this post: Jump Link Inside an iFrame
If your iframe has a different domain then you will be unable to use a javascript solution to solve this, but if it is then you can add the target="_parent" attribute to all the anchors within the iframe.
var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
anchors[i].target = '_parent';
I've recently added code to this library to sort out all the issue with Anchor Links inside an iFrame.
https://github.com/davidjbradshaw/iframe-resizer
It intercepts all requests for in page navigation and scrolls the parent page to the correct position. If it doesn't find the anchor in the iFrame, it bubbles it up to the parent page and looks for it there.
So,
I have a loop that outputs a bunch of stuff from an SQL database. It also outputs a form with some of those outputs.
that entire loop sequence is displayed through an iframe embedded into one column on my site.
I dont know that this is a proper approach but it seemed to work well.
However, when users click "submit" in the form. The link functions correctly, BUT the page it brings the users to is still displayed within the iframe.
I instead want them to be taken to the new page in full.
Any advice?
I should clarify: the purpose of the iframe was to create a scrollable window/box so that if the outpuot was more lines then my template it wouldnt be an issue. Maybe there is another solution thats simpler.
You don't need an iframe to make a scrollable box. Just specify size for an element and use the overflow style to make it scrollable.
Example:
.formContainer { width: 300px; height: 500px; overflow: auto; }
In the form specify a target attribute so it will load in the full window
<form target="_top">
I'm not really sure I'd use an IFrame for this simply because it acts on it's own. I'd suggest looking into using AJAX. W3schools has a pretty good article on this if you're not sure where to get started.
I'd like to be able to edit 3 different body css tags. I want one page to not include any overflow scrollbars but I need another page to use a vertical scroll only and the third to use a horizontal scroll only.
is it possible to do this? I read somewhere it can cause some browsers to choke but Im not sure how reliable that source was.
Also how would you call it in the CSS if it was a Class would it be written like any other CSS?
.body1{
}
.body2{
}
.body3{
}
I think you are actually asking "How can I style the body tag differently on each page of a website".
Similar to your original suggestion, I would add an id instead of a class to the body tag:
Page 1 HTML
<body id="firstPage">
Page 2 HTML
<body id="secondPage">
Page 3 HTML
<body id="thirdPage">
Then in the CSS you would target them like this:
#firstPage{
/*styling in here*/
}
#secondPage{
/*styling in here*/
}
#thirdPage{
/*styling in here*/
}
The answer to your question's title is that:
No, you can't use many body tags inside an HTML document.
However, to have many scrollbars, use CSS:
.scrollableContainer
{
overflow: auto;
}
You can simply have thee different div elements on your page.
Honestly you can have multiple body tags or even nested bodies in your website. Most of browsers will render your page as you expected. But it's not valid HTML to have multiple body tags in one page. If you want different overflows in your different pages and you only have one css file to do this you can add class or id to your body tag to target every specific page body tag in your CSS file. To add id to your body tag you can use server side scripts or JavaScript.
To add an ID to your page using JavaScript add this script tag in your page:
<script type="text/javascript>
document.body.setAttribute("id", "thePage1Id");
</script>
Then in your CSS file you can use those ID's to target your pages:
body#thePage1Id{overflow:auto;}
body#thePage2Id{overflow:scroll}
...
In reply to duri:
I had to reply you here becasue I need to sho you this image:
Just because webkit browsers ignore multiple body tag you can't say we can't have multiple bodies. Still you can have multiple bodies in a page but it's not valid HTML and maybe it don't work well.
No you cannont use more than 1 body tag in a page but you can apply a different style to the body tag on different pages as you suggest - yes of course.
You could have a different stylesheet to control the body tag for each page layout.
So:
page one pulls in page1.css (with accompanying body styles - no overflow scrollbars)
page two pulls in page2.css (with accompanying body styles - vertical scroll only)
page three pulls in page3.css (with accompanying body styles - horizontal scroll only)
(obviously without stupid file names)
I like this better than multiple style sets within a single file for readability and maintainability.
Every web page load from top to bottom means first my header will be loaded then content and finally footer. How can i make it to load from bottom to up.means first footer then content and then finally header content.
Are you getting what i am trying to say.??
OR
to make it load from right to left OR
left to right..
This is probably one of the more bizarre questions I've seen here...
You cannot change the order in which the browser loads the file, it will always start at the beginning and read to the end. However, if you change the order of the file such that the footer is first and the header is last, the browser will render it in that order. As long as the CSS places each element in the correct place, it should work.
This will probably have some strange side effects since the browser will have to rerender or move elements several times as it moves the footer down the page to make room for the elements above it.
Is there really a need for this? Web pages generally load fast enough that users won't notice what direction they load in, and if your page isn't loading that fast, then I would focus on finding out why instead of trying to render it in a different order.
A web page is HTML + additional files.
The HTML file is loaded and read start-to-finish. When it gets to a point in the file where it requests another file (such as CSS, .JS, an image, etc.) it then sends a request to get that image.
You have control over that in that you can rearrange your HTML any way you want to.
What you don't have control over is how long it takes to request and then retrieve each of the individual files.
If you want full control, then you pretty much need to load everything but keep it hidden, and then reveal the items in the order you want them to appear via javascript and CSS.
All that said, though, the better answer is "No. You can't. That's just how the web works".
If this is for some kind of cool effect on your page, you could check out Page Transitions. These only work in IE though. If that is the case, it looks like you want the Wipe effect.
If you want it to just look like its loading from bottom to top then you could hide everything with css in the header and then have javascript unhide them starting from the bottom of the page - but I really don't know why you'd want to do this. Can you give us some more information on the effect you're trying to create?
Visually, you could get the sort of effect where one would see the content before the header by putting the header after the content in the HTML output then use CSS to make the header appear first visually.
If you want to scroll your content in somehow, I'd check out jquery and animations.
Assumption 1: Load content before styles/javascript.
In this assumption you care about the page loading first THEN the css/javascript executing thus allowing the user to get the content before all scripts/styles load and thus speed up the usability of the page.
To accomplish this put the style/script tags as the last elements in your body.
Assumption 2: Bizarro-world loading.
In this assumption you want the footer loaded/displayed first, then content, then header in that exact order.
1) The html head element will load before the body. No way to change that. Header = page header in my wording.
2) Use the following html pseudocode
<html>
<head></head>
<body>
<div id="footer"></div>
<div id="content"></div>
<div id="header"></div>
</body>
</html>
And in your css float everything to the right having them take up 100% width. This will cause the page to load backwards but when it is displayed it will be displayed appropriately.
#header,#footer,#content { width: 100%; float: right; }