Jehzlau’s Resize Index Javascipt

Sa wakas, nakagawa na rin ako ng javascript for my site. Kasi kelangan ko mag iba yung design to fit in 800×600 screen resolution. Kaya gumawa me ng javascript function para mag load ng ibang CSS pag iba ang screen resolution. Pero actually di pa to perfect. Di ko alam paano e load yung CSS kaya buong index niload ko, tapos sa loob ng index na yun nalang nakalagay yung CSS. Sa CSS kasi lahat ng images ko kaya wala na problem sa pag resize. Kaya yun. Nag isip isip me paano ko gawin na ma view parin ng maganda sa 800×600 screen resolution. Ang base resolution ko kasi ay 1280×1024, and minimum resolution ay yung standard resolution na 1024×768.

Pero paano kung 800×600 na. Pangit din kasi kung mag base ka sa 800×600 unless liquid layout ang CSS mo, yung ma stretch siya. Maganda din naman yun, pero pag marami ka ng images, pwede mo din naman gamitin yung sa The Man in Blue na CSS dependent layout, cool to! check it out here, or yung sa A List Apart na technic nakalimutan ko na, yung pag e resize mo browser mo, mag ra wrap yung image at liliit din, I mean mag auto crop siya, pwede mo siyang ma view kahit sa anong resolution, kahit sa cellphone or sa PDA, astig diba?. update ko nalang tung post ko pag na alala ko. hehehe.

Pero, puro nalang ako pero. Gusto ko kasi gayahin yung sa yahoo.com. Try mo change ang resolution mo to 800×600, mag iiba yung page ng yahoo, mawawala yung scroll bar sa gilid ang lilipat na siya sa gitna. Tapos adjust mo ulit sa normal resolution mo na 1280 or 1024, mag iiba ulit yung page. Kaya yun ang gusto kong mangyari, ganda kasi. E sheshare ko lang yung javascript, alam ko makaluma na to na method, pero ok parin, pero hindi valid XHTML to ha, HTML 4.01 transitional lang siya, pero ok na rin, di naman to magiging index mo, ma reredirect ka sa ibang index na compatible sa resolution mo.

Okey, simulan ko na. Una gumawa ako ng function, nilagay ko nalang ay jehzlau, ehdi sa javascipt eto ang kalalabasan.

function jehzlau () {
//### Dito ang mga condition ng javascript }

Yan, tapos lagay mo sa loob yung condition mo sa function. First, dapat e define mo yung variable na gagamitin mo. So: var width tapos anong klaseng width, ehdi ganito na. var width = screen.width;

after nyan, ilalagay ko na yung condition ko na if screen with is lesser than this ganito ang mangyayari.

var width = screen.width;if (width<1024)location.replace('1/index.php');elselocation.replace('2/index.php');

yun nasa else, yun yung gagamitin mo na index pag ang resolution ay 1024 or higher than 1024. Tapos yung 1 at 2, yan yung folder na pinaglagyan ng image mo (for super duper newbie, hehe). Kaya pag ipag sama sama natin yung functions magiging ganito na:

function jehzlau(){ var width = screen.width;if (width<1024)location.replace('1/index.php');else style="color: rgb(51, 51, 0);">then lagay mo sa baba yun name ng function, para sa body, kaya magiging ganito na siya:

function jehzlau(){ var width = screen.width;if (width<1024)location.replace('1/index.php');else style="color: rgb(0, 0, 0);">Then, lagay mo sa body mo na. onLoad=”jehzlau();”, Para e execute niya yung function at e detect nya yung resolution mo, lalagyan ko pa to ng sample para makita niyo, para saka na kasi mahal na araw ngayon, at aalis na me, mag coclose na office eh. half day lang kami. Hehe… til next time. 🙂
P.S.: Don’t forget na ilagay mo sa loob ng script tags inside your header tags :), tapos kayo nalang mag indent ng script, sayang kasi space. For questions, leave me a comment. 🙂 Post ko nalang example pag maka lugar next week, or baka bukas. hehe. At edit ko nalang to, magulo kasi, walang code tag dito sa blogger. Amf! huhu