SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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...)

    Last edited by Mittineague; Jan 5, 2014 at 16:23.

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    JavaScript or JQuery is use for behavior.
    CSS is use for layout.

    I think you are referring to CSS for layout for design?
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,269
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    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?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    mockup.jpg

    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by successfulfail View Post
    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?

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jordan Windebank View Post
    First question for you. How would you want to display the images on monitors with wider resolution? White space on the sides?
    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.


    Quote Originally Posted by Jordan Windebank View Post
    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?
    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!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by successfulfail View Post
    (But this way the browser is constantly requesting different webpage files. I don't think this is a good idea)
    There are no additional page requests. It's simply a fragment identifier for an in page link.
    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •