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; }
Related
We have a crawler that is crawling hundreds of thousands of pages per week. Currently to get the data from the crawled HTML we manually take a look at the HTML and see that "OK, Data A is within <div class=".info-list"> and Data B is inside <h1>", and then we use a parser to parse the data from those div's.
I guess this is the most common way to parse crawled HTML for most people, but it means that we have to know the HTML structure of all the pages and domains that we crawl. So it is not very scalable.
If we could just figure out what div the "main content" is, so that we can ignore other things such as "Relevant products" or "Relevant articles", or "Main menu" and so on, we could easily parse the data in the same way as we do now but without having to specify the exact div names and position of each data.
So... How do we figure out which is the "main div" of a page?
I'm pretty sure that Google does this. They definitely know position of elements on a page, and if something is positioned in the "main content" or in the footer for example. How can they know this?
The methods that I can see to do this in a large scale is:
Render the page and look for the largest div's and start from there. But to render millions or hundreds of thousands of pages is not really cheap and efficient.
Try to figure it out from the content of every div. For example, the div with most links inside of it is probably the menu. The div with most text inside of it is probably the main content. But this gets really tricky if the content is like:
<body>
<div class="maincontent">
<div class="post-header">
<h1>Header of post</h1>
</div>
<div class="short-description">
Hello World!
</div>
<div class="long-description">
Hello New World!
</div>
</div>
</body>
Obviously the div we want to identify as the "main content" is <div class="maincontent">. But if we look for the div that have "most text". It would be .long-description.
This is starting to become quite a long question. But my point is, it's really hard to figure out which part of a website that is the "main content". And I'm asking any smart people out there to help me come up with a decent way to find out what div or divs that is probably containing the most important content of the page.
EDIT: I guess one way of rendering it is not to render every single page. But to render the domain. For example. If the domain structure is http://example.com/post/1-post-name/ I can save a render of that, and next time I find a page that is http://example.com/post/2-post-name/ I know that it probably have the same HTML template as the first one, and the "largest div" is probably the same.
So what techinique to do this server side? I mean to render it and to save the sizes and position of all the elements. I guess this seems to be a pretty decent way of doing it on large scale.
I would try multiple approaches. For example start with the obvious - is there an id="content" or class="main_content" ? Use it! Look for ids and classes that are common for big content blocks and if they exist then use them. If not then move on to less certain tests.
Next try narrowing things down. is there a <header> or <nav> tag? ignore that and everything above it. Ignore a <footer> or a class="sidebar"
Make some rules, let them run, and then manually expect what comes back and look for patterns when you're pulling too much or things are being left out. Adjust your rules and write new ones based on that.
At that point you might even let the ones get past all your tests go to a short list where you check them by hand and create domain specific rules where you can point out the exact div you want to use. You can still be very efficient with some human intervention, and visually looking over 8 sites out of 50 is still a pretty good deal.
I didn't really find a great way to decide which div is the "main content" yet, however I found PhantomJS which lets you render the page you are crawling on server side, and be able to use Javascript and jQuery to get sizes and positions of elements on the page you are crawling.
So by using PhantomJS you can definitely get which div is the "largest", which div is on top or bottom or center, which is a long way already on solving this issue of finding out which div on a page that is the "main content".
Below is the HTML code
<div class="body-content" id="content"></div>
<%# include file="common/aside.jsp"%>
<%# include file="common/footer.jsp"%>
I have a navigation menu bar, from where I load the json data through ajax call inside the content div shown above. The json data is nothing but the array of array of objects which is displayed in jquery datatable. Then I have an aside, where i show my application's archives on right side of the page.
Everything works perfectly for maximized browser window but as i restore down, my archive aside comes below the datatable which looks weird.
Is there any way I could get over this ? Please help.
Thank you!
I know this is a little tardy, but it sounds like the main data element (the one inside the content, to the left of the aside) has an explicitly set width... or doesn't for that matter. I would suggest that you set the width of the 2 elements (the aside and the main data container) in % to try to prevent pop-down. If you care further, you might also go something like .body-content {min-width: X00px;} to keep it from getting to narrow.
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 am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Thanks in advance.
WWaldo
I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:
Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.
The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.
Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.
It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.
Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)
All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.
<div id="Tab1">Tab Numbah One </div><div id="Tab2">Tab Numbah Two </div><div id="Tab3">Tab Numbah Three </div>
Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.
Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.
Page 1
#Tab1 {
border-bottom:none;
background-color:white;
}
Page 2
#Tab2 {
border-bottom:none;
background-color:white;
}
Page 3
#Tab1 {
border-bottom:none;
background-color:white;
}
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?