...

View Full Version : Full-screen on all screen resolutions?



Cim
05-28-2012, 08:26 PM
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:




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:





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

felgall
05-28-2012, 09:58 PM
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.

Cim
05-28-2012, 10:10 PM
So are you suggesting not to go this route basically?

VIPStephan
05-28-2012, 10:31 PM
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.

felgall
05-28-2012, 10:47 PM
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.

Cim
05-28-2012, 10:51 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum