PDA

View Full Version : Change position of site depending on screen resolution?



NineTwoZero
05-01-2007, 07:06 PM
Havent been here for a long time, might as well give it a shot.

I need something that "changes" the top: 0px (1024) to top: 50px;(1280) is it possible? might've been a lil unclear..

mburt
05-01-2007, 07:20 PM
This may work:

<script type="text/javascript">
window.onload = function() {
if (window.screen.availWidth > 1024) {
document.getElementById("myelement").style.top = "50px";
}
};
</script>
Report back if there's any problems.

NineTwoZero
05-01-2007, 07:44 PM
This may work:

<script type="text/javascript">
window.onload = function() {
if (window.screen.availWidth > 1024) {
document.getElementById("myelement").style.top = "50px";
}
};
</script>
Report back if there's any problems.

u helped me last time i was here too :] ima try it.
i woulda showed the site if it was up.. ill up it right now so you can see it :D

-----------------------------------------------------

didnt work, put it right under the body tag (was prolly wrong)


----------------------------------

http://920.clan.pro

i think it woulda be a lot easier with 2 different styles depending on resolution..

boogyman
05-01-2007, 08:20 PM
you didn't follow his code... and I dont think he accounted for someone with a screen with of exactly 1024x800.



<script type="text/javascript">
// <![CDATA[
window.onload = function() {
if (window.screen.availWidth <= 1024) {
include "<link type='text/css' rel='stylesheet' href='1024.css' media='all' />"
}
else {
include "<link type='text/css' rel='stylesheet' href='1260.css' media='all' />" />
}
}
// ]]>
</script>


copy and paste that into your file, and be careful about the punctuation on the includes.... just change the file name for the two css script pages.

also I suggest getting rid of the frameset it really isn't doing anything with your page.

NineTwoZero
05-01-2007, 08:50 PM
you didn't follow his code... and I dont think he accounted for someone with a screen with of exactly 1024x800.



<script type="text/javascript">
// <![CDATA[
window.onload = function() {
if (window.screen.availWidth <= 1024) {
include "<link type='text/css' rel='stylesheet' href='1024.css' media='all' />"
}
else {
include "<link type='text/css' rel='stylesheet' href='1260.css' media='all' />" />
}
}
// ]]>
</script>


copy and paste that into your file, and be careful about the punctuation on the includes.... just change the file name for the two css script pages.

also I suggest getting rid of the frameset it really isn't doing anything with your page.

thanks.. gon try it out directly. frameset aint "mine", its the urls lol. check http://920.ninetwozero.com <-- original, just needed a catchy name for it lol


-----------------------------------------------------
didnt work. :/

mburt
05-02-2007, 12:43 AM
The style sheets have to exist, though. Make sure they are valid source (href) names.

djr33
05-02-2007, 01:27 AM
This should not have been posted in the PHP section. Moving to Javascript now.

NineTwoZero
05-02-2007, 05:50 AM
the styles do exist. but it aint loading none when i use the code..:o

NineTwoZero
05-02-2007, 09:29 AM
alright i created my own script, it doesnt switch though.. only loads the 1024 style. (i put a white background on the 1280 just to make sure that id notice if 1280 was loaded).


var mini = 1024;
var big = 1280;

if ('document.width == mini') {

document.write('<link rel="stylesheet" type="text/css" href="1024.css" />');

}
else {

document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
} im loadin it through <script src="SCRIPTNAME.js" />

-----------------------------------------------------------------------
any suggestions? :]

mburt
05-02-2007, 10:28 AM
document.width isn't a valid property:

var mini = 1024;
var big = 1280;

if (window.screen.availWidth == mini) {

document.write('<link rel="stylesheet" type="text/css" href="1024.css" />');

}
else {

document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
}
That should work.

NineTwoZero
05-02-2007, 10:43 AM
document.width isn't a valid property:

var mini = 1024;
var big = 1280;

if (window.screen.availWidth == mini) {

document.write('<link rel="stylesheet" type="text/css" href="1024.css" />');

}
else {

document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
}
That should work.

working! THANKS A LOT! :D javascript is a lil like php, only that its clientside. :]