jQuery for Fullscreen website design

I have been battling long time to create a full screen website. After experimenting and researching looks like using JQuery is the best way to design one.

Just to make sure. Is using JQuery really the best way?

If so is there any tutorials I can base my website? (I have been searching on Google but I can’t find any good tutorials)

Finally this tutorial for full screen website created using jQuery, as the user scrolls the web address changes. Many other websites has the same looks but the web address does not change. What are the pros and cons? (I don’t want my website to do that…)

[edit]for reference please see

http://www.sitepoint.com/forums/showthread.php?1184202-Getting-started-with-building-responsive-website
http://www.sitepoint.com/forums/showthread.php?1184827-Designing-a-fullscreen-website[/edit]

JavaScript or JQuery is use for behavior.
CSS is use for layout.

I think you are referring to CSS for layout for design?

OK… I am spiraling down… More and more I research and learn it seems more difficult…

Please explain in detail how to create a full screen website… (I have been trying to create one only using HTML and CSS but it does not seem very practical)

If it seems difficult, that’s because it is difficult (well, at least to do it right).

There are many facets at play with such a site and to learn how to get to the finished product you need to get a very good grasp at HTML, CSS and javascript, then jquery.

First I would create a very simple 2 content div HTML file (no css or javascript at this point) - then validate
Then add CSS to get it to look OK (would be a longer page that could be scrolled) - then validate
Then add javascript/jquery to hide/show the divs - then check for errors

After you get that working it would be fairly easy to add more content divs

Do have any development files you’re working on so far?

You really need to clarify what you actually want to do. What kind of content does the site really need to present and in what way? Why are you so attached to this idea, which will probably be more confusing for users and introduce unnecessary accessibility issues? Make sure you have reasoned answers to questions like this. Users don’t care how cool your site looks. Indeed, what seems cool to you is probably an annoyance to them, as it usually makes information harder to access—which is the reason they’ve come to your site.

Sorry I should have been more clear.

I am building the website to just have fun and learn and maybe use it as a public portfolio in the long distant future…
Basically I don’t expect people to visit. Haha

I made a basic 2 minutes mock up:

So, this is the basic full screen website I want to create. I will be refining the information (I just copied from wiki for now) and formatting.
Each images (only two for now) will take full screen on: around 16:9 desktop screens.

First question for you. How would you want to display the images on monitors with wider resolution? White space on the sides?

If I understand what you want correctly you should only need to set the page background as fixed using your images in CSS and have the content within it scrollable?

No, no white spaces. It has to be full screen meaning the image must take all the space on common widescreen screens with widescreen ratios.

Do you mean: I merge those two images into one image file and make the browsers to load one whole image?
If so that would increase the loading speed significantly…

This might help you understand my design. (Treat each image as a slide)
(But this way the browser is constantly requesting different webpage files. I don’t think this is a good idea)

I think I have set the goals to high but I seem to be getting somewhere!

There are no additional page requests. It’s simply a fragment identifier for an in page link.


<a href="#firstPage">First slide</a>

That normally just sends you to an id in that same page of firstPage. No additional page loads are required. The author is using that method so that the back button takes you back to the previous slide as you would if they were separate pages. In the documentation there are examples without using anchors.