dhtml layer scrolling cozunurluk sorunu ve php çözümü

uakyol · 24.04.2001

zoque.com'un basindaki gibi bir dhtml-layer destekli scrolling yapınca farkli cozunurlukler her zaman sorun olmuştur. Bunu önlemek için benim simdiye kadar bulabildigim iki yol vardi.

Ya framelerle sayfayi sabitlersiniz ve layer'in soldan pozisyonu onemli olmaz ve bu sekilde istediginiz cozunurlukte ayni sonucu elde edersiniz.( Bu yontemin kardesi her seyi sola yasli bir sayfa turudur. Bu durumda da layer,sayfadaki tum diger unsurlar gibi cozunurluk degisikliklerinde esit sekilde etkilenir.)

Ya da farklı çözünürlükler için farklı sayfalar hazırlarsınız. Fakat bu guncelleme acisindan iki sayfanizin olmasi gibidir. En azinda rahatsiz edicidir.

Simdi paylasmak istedigim 3. bir cozum yolunu bulmusum gibi geliyor. Tabi PHP cevresel degiskenleriyle ekran cozunurlugunu almak mumkunse.

Eger PHP ekran cozunurlugunu alip, layer'in sayfada nerede duracagini benim icin soyleyecek olsa, layer ile ilgili hicbir sorunum kalmaz. Asagadaki kod'da $coz degiskenini cozunurluk degiskeni gibi dusunursek sorunumuz biter. smdilik ben 1024-768'e sabitledim.

<?PHP

$coz="1024";
switch ($coz) {

case "800";
$solpiksel="523px;";
break;

case "1024";
$solpiksel="634px;";
break;
case "1152";
$solpiksel="680px;";
break;
case "1280";
$solpiksel="762px;";
break;
default:
$solpiksel="762px;";

}

?>

Burada $coz degiskenin ekran cozunurlugunu temsil ettigini dusunursek soyle yapaibliriz.

Biliyorsunuz, burada sorun bir layer'in sayfasının yukarisindan lan hizalanmasi degil, sayfanin solundan olan hizalanmasidir. 800-600'da tam yerinde olan bir layer, 1024-768 ve ustu cozunurluklerde solda kalir.

Kodlarin en basinda farkli cozunurluklerde bir layer in nerede durmasi gerektigini belirttim. Sonra en basta cozunurluk'ne oldugunu buldum,"$solpiksel" bu cozunurluklere gore layerin soldan ne kadar hizalanacagini belirleyecek.

Bunu da asagadaki kod yapacak:

echo "<div id=\"divDownControl\" style=\"left: $solpiksel top: 510px\">";

Calisan bir sekline, tabi ki ustteki haliyle http://www.ankara.edu.tr/hukuk/index_cozunurluk.php adresinden ulasabilirsiniz. Sagdaki kayidirilan yerdeki iki layer'in soldan hizalanmalari PHP tarafindan cozunurluge gore belirlenecek.

Tabi PHP'nin cozunurluk icin cevresel bir degiskeni varsa, Ben sanirim dogru yerlerde aramadigim icin bulamadim. bu degisken ve alabilecegi degerler nelerdir? iste benim de sorum bu.

Vakit ayirip okuyanlara tesekkur ederim.

stalker · 25.04.2001

PHP'nin ekran çözünürlüğü için bir çevresel değişkeni yok ancak çözünürlük değerlerini JavaScript ile bir hidden form elementine yazdırıp kullanabilirsin.

SiLueT · 29.04.2001

PHP hakkinda cok bilgim yok, hatta hic bilgim yok. olmasini da hic istemedim

herneyse diyecegim sudur;
PHP'de yapilabilir mi bilmiyorum ama, bunu JavaScript ile yapabilirsin.
once ekranin cozunurlugunu bulurun, sonra da bir matematiksel islem ile layer'in left'ini hesaplarsin. sonra bu degeri de yine JavaScript'le bu layerin style ozelliklerinde yerine yazdirirsin. denemedim ama yapilabilecegine eminim.

iyi calismalar..

SiLueT · 13.05.2001

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>

<title>ortalanmis layer</title>

<script language="JavaScript1.2">

function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) &&
(agent.indexOf('spoofer') == -1) &&
(agent.indexOf('compatible') == -1) &&
(agent.indexOf('opera') == -1) &&
(agent.indexOf('webtv') == -1));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major >= 4));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0") != -1));
this.ieX = (this.ie && !this.ie3 && !this.ie4);
}

var is = new Is();

function layerObject(id,left,top) {

if (is.ie5||is.ns6){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
} else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
} else if(is.ns4) {
this.obj = document.layers[id] ;
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
}

function init() {
if(is.ns4 ||is.ns6) {
available_width=innerWidth;
available_height=innerHeight;
layerSetup();
} else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}
}

function resizePage() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5) {
history.go(0);
}
}

function layerSetup() {
centerLyr = new layerObject('centerLayer', available_width/2-350,available_height/2-200);
}

</script>

</head>

<body onLoad="init()" onResize="resizePage()" leftmargin=0 topmargin=0>

<div id="centerLayer" style="position: absolute; width:700px; height:400px; background-color:#aaaaff; layer-backgroundcolor:#aaaaff;">
<table width="700" height="400" border="1">
<tr>
<td align=center><font size=3 face=arial>Bu, horizontal ve vertical olarak ortalanmis bir layer'dir

</td>
</tr>
</table>
</div>

</body>
</HTML>

* * * * * * * * * * * * * * * * * * * * *

gecenlerde soruna cevap verecek firsatim olmamisti.
bugun can sikintisindan oturup birseyler yapayim dedim.

bu kod sanirim senin ihtiyacini karsilayacaktir.
JavaScript ile browser'in kullanilabilir alanini hesapliyor once.. sonra layer'in genisligiyle bir islem yapilip layerin surekli sayfanin ortasinda kalmasi saglaniyor. body'in onResize ozelliginden de yararlanilarak browser resize edilse bile bu hareket gecerli kiliniyor.

kod netscape ve internet Explorer 4+'ta calisacak durumdadir.

iyi calismalar diliyorum.

ha unutmadan;
hazirladigin layerin ortalanmasi icin;
function layerSetup() {
centerLyr = new layerObject('centerLayer', available_width/2-350,available_height/2-200);
}

bu fonksiyonda bulunan;
available_width/2-350
available_height/2-200
alanlarında
350 ve 200 degerleri, hazirladigin layerin boyutlarinin yarisi kadar olmali..
yani 800x300 boyutunda bir layer hazirlamissan,
available_width/2-400
available_height/2-150
yazmalisin.

neyse cok uzattim..

SiLueT · 13.05.2001

bu arada indent'leri kaybettik...
basimiz sagolsun

uakyol · 14.05.2001

tesekkurler, cevabın icin. identler'i anlayamadim, ama.

Aslinda ikisinin ortasi bir cozun buldum, cozunurluk sorunu yok ve fakat netscape sorunu var; ama sorun icerikten yararlanama degil de, estetik olunca, netscape'i ihmal ettim.

SiLueT · 14.05.2001

rica ederim her zaman :)
indent dedigim sey, kodu yazarken (bence) dikkat edilmesi gereken birseydir. sonradan okumak kolay olsun diye..
yani;
funciton hedehodo(){
document.write("selam");
}

degil de;

funciton hedehodo(){
______document.write("selam");
}

(mesaji gönderdikten sonra farkettim. yeniden degistirdim.. burada birden fazla bosluk koyamiyorsun kelimeler arasina :)   denedim o da olmadi.. sen simdi ordaki _____ yazan yeri bosluk gibi gör tamam mi:))

yazmak cok daha sagliklidir. (bence)

fonksiyonalite acisindan degil de, kodun takibini kolaylastirir.

netscape'e gelince. problemlidir hep. ama profesyonellik icin sart bence..

neyse cok uzattim.
iyi calismalar...

25.04.2001	#2 (permalink)
stalker Üyelik Tarihi: 01.11.2000 Yer: İstanbul Yaş: 26 Mesaj: 713	Çözünürlük PHP'nin ekran çözünürlüğü için bir çevresel değişkeni yok ancak çözünürlük değerlerini JavaScript ile bir hidden form elementine yazdırıp kullanabilirsin. __________________ life is better without braces

13.05.2001	#4 (permalink)
SiLueT Üyelik Tarihi: 05.06.2000 Mesaj: 95	Centered Layer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <title>ortalanmis layer</title> <script language="JavaScript1.2"> function Is() { var agent = navigator.userAgent.toLowerCase(); this.major = parseInt(navigator.appVersion); this.minor = parseFloat(navigator.appVersion); this.ns = ((agent.indexOf('mozilla') != -1) && (agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1) && (agent.indexOf('opera') == -1) && (agent.indexOf('webtv') == -1)); this.ns4 = (this.ns && (this.major == 4)); this.ns6 = (this.ns && (this.major >= 5)); this.ie = (agent.indexOf("msie") != -1); this.ie3 = (this.ie && (this.major < 4)); this.ie4 = (this.ie && (this.major >= 4)); this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1)); this.ieX = (this.ie && !this.ie3 && !this.ie4); } var is = new Is(); function layerObject(id,left,top) { if (is.ie5\|\|is.ns6){ this.obj = document.getElementById(id).style; this.obj.left = left; this.obj.top = top; return this.obj; } else if(is.ie4) { this.obj = document.all[id].style; this.obj.left = left; this.obj.top = top; return this.obj; } else if(is.ns4) { this.obj = document.layers[id] ; this.obj.left = left; this.obj.top = top; return this.obj; } } function init() { if(is.ns4 \|\|is.ns6) { available_width=innerWidth; available_height=innerHeight; layerSetup(); } else if(is.ie4 \|\| is.ie5) { available_width=document.body.clientWidth; available_height=document.body.clientHeight; layerSetup(); } } function resizePage() { if(is.ns4 \|\|is.ns6\|\|is.ie4\|\|is.ie5) { history.go(0); } } function layerSetup() { centerLyr = new layerObject('centerLayer', available_width/2-350,available_height/2-200); } </script> </head> <body onLoad="init()" onResize="resizePage()" leftmargin=0 topmargin=0> <div id="centerLayer" style="position: absolute; width:700px; height:400px; background-color:#aaaaff; layer-backgroundcolor:#aaaaff;"> <table width="700" height="400" border="1"> <tr> <td align=center><font size=3 face=arial>Bu, horizontal ve vertical olarak ortalanmis bir layer'dir </td> </tr> </table> </div> </body> </HTML> * * * * * * * * * * * * * * * * * * * * * gecenlerde soruna cevap verecek firsatim olmamisti. bugun can sikintisindan oturup birseyler yapayim dedim. bu kod sanirim senin ihtiyacini karsilayacaktir. JavaScript ile browser'in kullanilabilir alanini hesapliyor once.. sonra layer'in genisligiyle bir islem yapilip layerin surekli sayfanin ortasinda kalmasi saglaniyor. body'in onResize ozelliginden de yararlanilarak browser resize edilse bile bu hareket gecerli kiliniyor. kod netscape ve internet Explorer 4+'ta calisacak durumdadir. iyi calismalar diliyorum. ha unutmadan; hazirladigin layerin ortalanmasi icin; function layerSetup() { centerLyr = new layerObject('centerLayer', available_width/2-350,available_height/2-200); } bu fonksiyonda bulunan; available_width/2-350 available_height/2-200 alanlarında 350 ve 200 degerleri, hazirladigin layerin boyutlarinin yarisi kadar olmali.. yani 800x300 boyutunda bir layer hazirlamissan, available_width/2-400 available_height/2-150 yazmalisin. neyse cok uzattim.. __________________ Sad had been here!..

24.04.2001	#1 (permalink)
uakyol Üyelik Tarihi: 30.05.2000 Yer: Ankara/Adana Yaş: 30 Mesaj: 436	zoque.com'un basindaki gibi bir dhtml-layer destekli scrolling yapınca farkli cozunurlukler her zaman sorun olmuştur. Bunu önlemek için benim simdiye kadar bulabildigim iki yol vardi. Ya framelerle sayfayi sabitlersiniz ve layer'in soldan pozisyonu onemli olmaz ve bu sekilde istediginiz cozunurlukte ayni sonucu elde edersiniz.( Bu yontemin kardesi her seyi sola yasli bir sayfa turudur. Bu durumda da layer,sayfadaki tum diger unsurlar gibi cozunurluk degisikliklerinde esit sekilde etkilenir.) Ya da farklı çözünürlükler için farklı sayfalar hazırlarsınız. Fakat bu guncelleme acisindan iki sayfanizin olmasi gibidir. En azinda rahatsiz edicidir. Simdi paylasmak istedigim 3. bir cozum yolunu bulmusum gibi geliyor. Tabi PHP cevresel degiskenleriyle ekran cozunurlugunu almak mumkunse. Eger PHP ekran cozunurlugunu alip, layer'in sayfada nerede duracagini benim icin soyleyecek olsa, layer ile ilgili hicbir sorunum kalmaz. Asagadaki kod'da $coz degiskenini cozunurluk degiskeni gibi dusunursek sorunumuz biter. smdilik ben 1024-768'e sabitledim. <?PHP $coz="1024"; switch ($coz) { case "800"; $solpiksel="523px;"; break; case "1024"; $solpiksel="634px;"; break; case "1152"; $solpiksel="680px;"; break; case "1280"; $solpiksel="762px;"; break; default: $solpiksel="762px;"; } ?> Burada $coz degiskenin ekran cozunurlugunu temsil ettigini dusunursek soyle yapaibliriz. Biliyorsunuz, burada sorun bir layer'in sayfasının yukarisindan lan hizalanmasi degil, sayfanin solundan olan hizalanmasidir. 800-600'da tam yerinde olan bir layer, 1024-768 ve ustu cozunurluklerde solda kalir. Kodlarin en basinda farkli cozunurluklerde bir layer in nerede durmasi gerektigini belirttim. Sonra en basta cozunurluk'ne oldugunu buldum,"$solpiksel" bu cozunurluklere gore layerin soldan ne kadar hizalanacagini belirleyecek. Bunu da asagadaki kod yapacak: echo "<div id=\"divDownControl\" style=\"left: $solpiksel top: 510px\">"; Calisan bir sekline, tabi ki ustteki haliyle http://www.ankara.edu.tr/hukuk/index_cozunurluk.php adresinden ulasabilirsiniz. Sagdaki kayidirilan yerdeki iki layer'in soldan hizalanmalari PHP tarafindan cozunurluge gore belirlenecek. Tabi PHP'nin cozunurluk icin cevresel bir degiskeni varsa, Ben sanirim dogru yerlerde aramadigim icin bulamadim. bu degisken ve alabilecegi degerler nelerdir? iste benim de sorum bu. Vakit ayirip okuyanlara tesekkur ederim.

29.04.2001	#3 (permalink)
SiLueT Üyelik Tarihi: 05.06.2000 Mesaj: 95	PHP hakkinda cok bilgim yok, hatta hic bilgim yok. olmasini da hic istemedim herneyse diyecegim sudur; PHP'de yapilabilir mi bilmiyorum ama, bunu JavaScript ile yapabilirsin. once ekranin cozunurlugunu bulurun, sonra da bir matematiksel islem ile layer'in left'ini hesaplarsin. sonra bu degeri de yine JavaScript'le bu layerin style ozelliklerinde yerine yazdirirsin. denemedim ama yapilabilecegine eminim. iyi calismalar..

13.05.2001	#5 (permalink)
SiLueT Üyelik Tarihi: 05.06.2000 Mesaj: 95	bu arada indent'leri kaybettik... basimiz sagolsun

14.05.2001	#6 (permalink)
uakyol Üyelik Tarihi: 30.05.2000 Yer: Ankara/Adana Yaş: 30 Mesaj: 436	tesekkurler, cevabın icin. identler'i anlayamadim, ama. Aslinda ikisinin ortasi bir cozun buldum, cozunurluk sorunu yok ve fakat netscape sorunu var; ama sorun icerikten yararlanama degil de, estetik olunca, netscape'i ihmal ettim.

14.05.2001	#7 (permalink)
SiLueT Üyelik Tarihi: 05.06.2000 Mesaj: 95	rica ederim her zaman :) indent dedigim sey, kodu yazarken (bence) dikkat edilmesi gereken birseydir. sonradan okumak kolay olsun diye.. yani; funciton hedehodo(){ document.write("selam"); } degil de; funciton hedehodo(){ ______document.write("selam"); } (mesaji gönderdikten sonra farkettim. yeniden degistirdim.. burada birden fazla bosluk koyamiyorsun kelimeler arasina :)   denedim o da olmadi.. sen simdi ordaki _____ yazan yeri bosluk gibi gör tamam mi:)) yazmak cok daha sagliklidir. (bence) fonksiyonalite acisindan degil de, kodun takibini kolaylastirir. netscape'e gelince. problemlidir hep. ama profesyonellik icin sart bence.. neyse cok uzattim. iyi calismalar...