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
Related
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
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*/
}
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.
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; }