Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Full-screen on all screen resolutions?

    I'm trying to code this to be full-screen on all screen resolutions. From what I know about this, the design needs to be liquid as opposed to fixed? I'm using a SlidingPanels plugin that seems to be working flawlessly. This is the css:

    Code:
     
    
    body {
    
    background: black;
    overflow-y: hidden;
    }
    
    #wrap {
    
    width:100%;
    height: auto;
    background-color: black;
    }
    
    .content1 {
    
    height: 100%; 
    float: left; 
    width: 100%; 
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 16px;
    font-family: Helvetica;
    
    }
    
    .SlidingPanels {
    	position: relative;
    	width: 100%;
    	height: 100%;
    	padding: 0px;
    	border: none;
    }
    
    
    hr, .clearAll {
    	clear: both;
    }
    
    .SlidingPanelsContent {
    	width: 1040px;
    	height: 1000px;
    }
    
    .SlidingPanelsContentGroup {
    	position: relative;
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    
    #example2.SlidingPanels {
    	float: left;
    }
    #example2 .SlidingPanelsContentGroup {
    	float: left;
    	width: 10000px;
    }
    #example2 .SlidingPanelsContent {
    	float: left;
    }
    
    
    .SlidingPanelsAnimating * {
    	overflow: hidden !important;
    }
    
    #ex2_p1 {
    background-color: #ccc;
    
    }
    
    
    #ex2_p2 {
    background-color: white;
    
    }
    
    #ex2_p3 {
    background-color: #ccc;
    
    }
    
    #ex2_p4 {
    background-color:white;
    
    }

    And this is the HTML:


    Code:
    <div id="wrap">
    
    
    <div id="example2" class="SlidingPanels" tabindex="0">
    
    
    
    <div class="SlidingPanelsContentGroup">
    	
    	
    		
    <div id="ex2_p1" class="SlidingPanelsContent p1">
    		
    <div id="navigationBox">
    <p>
    <a href="#" onclick="sp2.showPanel(0); return false;">1</a> |
    <a href="#" onclick="sp2.showPanel(1); return false;">2</a> |
    <a href="#" onclick="sp2.showPanel(2); return false;">3</a> |
    <a href="#" onclick="sp2.showPanel(3); return false;">4</a> |
    </p>
    </div>
    		
    <div class="content1">
    		
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in est nulla. Vestibulum egestas egestas iaculis. Vivamus id sapien ac diam egestas imperdiet ut eget metus. Suspendisse potenti. Integer nec erat sit amet tellus luctus sodales in a leo. Duis cursus faucibus sapien, in semper magna vehicula et. Curabitur vel diam urna, eu auctor felis.
    
    </div>
    </div>
    
    <div id="ex2_p2" class="SlidingPanelsContent p2">
    		
    <div class="content1">
    				
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in est nulla. Vestibulum egestas egestas iaculis. Vivamus id sapien ac diam egestas imperdiet ut eget metus. Suspendisse potenti. Integer nec erat sit amet tellus luctus sodales in a leo. Duis cursus faucibus sapien, in semper magna vehicula et. Curabitur vel diam urna, eu auctor felis.
    
    </div>
    </div>
    
    
    <div id="ex2_p3" class="SlidingPanelsContent p3">
    
    <div class="content1">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in est nulla. Vestibulum egestas egestas iaculis. Vivamus id sapien ac diam egestas imperdiet ut eget metus. Suspendisse potenti. Integer nec erat sit amet tellus luctus sodales in a leo. Duis cursus faucibus sapien, in semper magna vehicula et. Curabitur vel diam urna, eu auctor felis.
    
    </div>
    </div>
    </div>
    </div>

    So each slide is wrapped in the div class .content1 to get the vertical scroll bars for each slide. What I'm wondering is if there's any smooth way to make sure this is full-size no matter what size screen the end-user is on? It's supposed to be four horizontal slides that scrolls vertically, which is what I have now, the only thing I'm having issues with is how to make sure each slide is full-screen always. The whole site is dependent on this one thing.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Web pages display inside the browser viewport so the screen resolution is irrelevant.

    Fixed toolbars in the operating system and the toolbars and border of the browser itself will mean that even if the browser is maximised that the web page will still get less than the full screen. With extra wide screens these days and operating systems such as Windows 7 making it easy to place two applications side by site on the screen you will likely find that many people using computers will have their browser using half the width of the screen from which you then have to deduct the browser border and scrollbar to get the available width the web page can display in.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So are you suggesting not to go this route basically?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    What felgall is suggesting is that you can’t have fullscreen thingies in your browser. Everything in a website can only be as large as the browser window (or the viewport, respectively), and that’s totally independent of the users’ screen resolution. You just have to make the best out of it.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    It is possible to set up web sites that will always exactly fit the browser viewport but that can become unusable though at very large or very small viewport sizes.

    The best option is to define minimum and maximum viewport widths where the content will fill the viewport so that if the voewport becomes too small they get scrollbars and if it becomes too large they get empty space with the actual content still of an appropriate size to interact with.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay. Sorry for being slow. So the relevant statistic is browser window size, not screen resolution. So can I code it to always be 100% width no matter what browser window size? And just visually hide the vertical scrollbars?


  •  

    Posting Permissions

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