We Keep Coding

Seperate a long html page into smaller 'chunks' with jquery

I'm very new to jquery, and I want to know if I can use it to turn a long html text into shorter 'chunks', like pages of an ebook. Every time the user press a 'next' button, the next 'chunk' of text is load out on the screen.
If such thing is possible with jquery, what should I read up to code it?
Here is an illustration, hope it will make things easier to understand: http://postimg.org/image/hiydc2ggn/

Yes, you can use .load() to load a portion of an page. You may have to create separate HTML tags though, so you can target their selector. You might consider loading it all at the same time and just use CSS, making sure you have the overflow:hidden; and use .scroll(). Personally, I would break up your HTML Server Side and use AJAX to get the portions you seek.

You could have the style of a div for the sections set to display:none on each section, when the button is pressed you can use something like:
$("#button").click(function(){
$("#section2").css({'display':'block'});
});
This is obviously just for one extra section, but you can extend it pretty easily for multiple.

Using javascript to remove div class

I was wondering if it is possible to remove the contents of a specific div class using javascript?
I would like to be able to access this div's content occasionally, so I don't want to remove it entirely but I'm worried that it will still take up page loading time, even if it has
'display: none' applied to it in the CSS. Is this correct?
Is there any JavaScript that will remove the page contents of a specific "div class" so that it does not slow down page loading time?

JavaScript works in the client, specifically, manipulating the DOM generated from the document loaded, that means, that if JS can see the object, it already took some time to be loaded.
If you don't want it to be loaded, the best way is to do is not to send it to the client, for instance, using server languages like perl, php, asp. etc.
Other way, is to have a frame in the page, with an empty src, and request that div after the document is loaded, that way, the effect is that the client doesn't have the load of that content in the firs place but will be available for your process later.
Bye

Removing elements with JavaScript won't affect your page's loading time. This is because the page is downloaded, and then the code removes the element after the page was loaded. It might even make it slower (slightly), since the browser has to execute such code to remove the element.
If you want to make the page loading time shorter, remove the element from your file, and then upload it again to your server.
You could then create this <div> dynamically by requesting it through AJAX (as Dr.Molle suggested), either using a library or plain JS.

Javascript event after the dom is ready but not rendered

Is it possible to do something after the dom is ready but it is not rendered(White screen)
I would like to hide the contents from user and after some operations i would like to show the final picture.
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
Thanks

Here is how?
document.onload = function() {
//your codes
}
Unlike, window.onload this function runs after the DOM is loaded, so the manipulation is possible, but it does not require all the elements to be rendered.

Is it possible to do something after the dom is ready but it is not rendered
Browsers render the DOM incrementally as they parse the HTML into it. The state you describe will not happen naturally.
You can fake it such…
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
If you don't want to change every page because it is too much work, then too bad. Go and set up an external stylesheet that every page uses.
If you don't want to change every page because you only want the changes to appear on certain pages, then use a more specific selector.
That said, preventing content from displaying and giving users a white screen (or even a loading screen) is just going to turn people off and drive lots of them to another site. I wouldn't recommend doing this.

if you could use JQuery this one is called when the dom is ready but the page not loaded
$(document).ready(function(){
)};

I'll contribute my own 2 cents here.
With jquery, the $("document").ready() event fires after the DOM has been fully loaded(without images, that is) to your browser, but not displayed. So I think to achieve what you want, you'll have to input some handler function inside the ".ready()" method to handle whatsoever you desire to achieve.
Is that what you were looking for?

Trigger an Event in javascript before objects finish to load

I was trying to write a global JavaScriptfunction which overrides any HTML object (img, iframe, links and so on) before it being loaded by the page. The purpose of the overiding action was to to change the SRC and HREF of these objects using the DOM to any other link.
Unfortunately I didn't find any solution to that without firstly loading the object and only then changing it by the onload event.
My second option was to change the SRC and HREF by matching these attributes with a regular expression and replacing the resultant values. I prefer not to do so because it's slow and consumes a lot of time.
I would be glad if someone can share with his/her experience and help me solve this out.

JavaScript only works within the DOM.
You could however, load the page via AJAX, get the content and do any string manipulation on it.

If you are trying to modify items that exist in the static HTML of the page, you cannot modify them with javascript until they are successfully loaded by the browser. There is no way to modify them before that. They may or may not be visible to the viewer before you have a chance to modify them.
To solve this issue, there are a couple of options.
Put CSS style rules in the page that causes all items that you want to modify to initially be hidden and then your javascript can modify them and then show them so they will not be seen before your modification.
Don't put the items that you want to modify in the static part of your HTML page. You can either create them programmatically with javascript and insert them into the page or you can load them via ajax, modify them after loading them via ajax and then insert them into the page.
For both of these scenarios, you will have to devise a fallback plan if javascript is not enabled.

Selectively display different parts of a HTML file without SSI/Server side scripting

Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page.
(The length of each section is unknown and expected to vary greatly).
Communicating with the server is unfortunately not an option.
And as you might expect i am new to CSS,PHP and JS

you will want to wrap each section with an ID tag, and control the visibility with javascript. There are several methods of controlling visibility in JavaScript.
The CSS elements that control visibility are visibility and display.
Visibility shows or hides text using the attributes in the above reply, and display allows you to actually remove that block from the DOM by using "block" and "none" as the attributes. You'll want to choose whichever element works best for your application.
Javascript libraries such as Prototype/script.aculo.us or J-Query, MooTools, etc are fantastic for this kind of control.
If you want to learn this kind of scripting from scratch, the book "DOM Scripting" by Jeremy Keith is a fantastic book that can be completed in a couple of days.

Sounds like CSS property visibility set to hidden | visible | collapse.

You should use display none to hide things and display block to show them again (or display inline)