Egy kész JavaScriptre lenne szükségem, ami az oldal méretétől függően más-más CSS-t tölt be. Fontos, hogy ha átméreteződik az oldal, akkor az ablak méretét újra megvizsgálja, és a megfelelő CSS-t rendelje hozzá.
Tudom, hogy tök triviális, de nem találok ilyent (biztos azért, mert programozáshoz hülye vagyok). Köszi előre is!
Még nincs értékelve
Hozzászólások
Mit szeretnél elérni a különböző CSS-ekkel? Lehet, hogy van egyszerűbb megoldás is.
Gondolom különböző felbontásokhoz belőtt (fix, nem liquid) css lapszerkezetet, vagy nem? :)
én nagyon régen csináltam egy ilyen scriptet ami elveszett mert rájöttem hogy hülyeség
én azt akkor úgy csináltam , hogy kerestem javascriptet ami képes látni , hogy milyen felbontásban nézik az oldalt , arra pedig már könnyű rátenni egy automatikus ugrást a változó szerint
Eddig már eljutottam:
<script type="text/javascript">if (window.innerHeight <= 800)
{
document.write("<link rel='stylesheet' href='<?php echo get_settings('home'); ?>/wp-content/themes/haldesign_v4/style_wh.css' type='text/css' media='screen' />");
}
if (window.innerWidth <= 999)
{
document.write("<link rel='stylesheet' href='<?php echo get_settings('home'); ?>/wp-content/themes/haldesign_v4/style_ww.css' type='text/css' media='screen' />");
}
</script>
Ezzel csak az a baj, hogy az oldal átméretezésekor nem vált automatikusan CSS-t, csak ha frissítesz.
A kód egy részét megeszi a Propono (egészségére!), de gondolom, érthető így is.
body onresize="valtson_kerem_csst()"
function valtson_kerem_csst(){//nehany vizsgálat...
document.getElementById('CSS_BEHUZO_TAG_ID-JE').href = 'new.css';
}
Gyors vagy, mint a villám. :)
Köszönöm, már csak azt nem tudom, hogy a 'CSS_BEHUZO_TAG_ID-JE' helyére mit írjak (mondtam, hogy ehhez hülye vagyok).
Köszi még egyszer.
Hát a head-ben olvasod be a css-t egy link-teggel:
http://www.blooberry.com/indexdot/html/tagpages/l/link.htm
ennek adsz egy ID-t
js:
var css = document.getElementById('cserelgetni');if( window.innerWidth ){
if( window.innerWidth (kisebbkacsacsőrbazzeg!!!!) x )
css.href = 'egyik.css';
if( window.innerWidth (nagyobbkacsacsőrbazzeg!!!!) x )
css.href = 'masik.css';
}
Bocs, de most jövök rá, hogy rosszul mondtam. Nem cserélgetni kell a CSS-eket, hanem az alap css mellé kell betölteni az újakat: egyiket a magasság függvényében, másikat a szélességtől függően.
GRRR... Na azt nem így kell :)
a, Szedd össze, hogy milyen elemeknek kell változtatni az értlkeit.
b, adsz mindegyiknek egy ID-t.
c, írsz egy ilyet a JS elejére function $(el){ return document.getElementById( el ); } ez csak egy kis rövidítés
d, $('állítandó_valami_id-e').style.width = '123px';
Itt van, hogy hogy éred el az elemeket DOM-ban: http://www.w3schools.com/htmldom/default.asp
Köszi, próbálkozom, és megírom majd, ha sikerült. :)
Nagyon köszönöm mégegyszer, egy hajszálra vagyok a végétől, már csak egyvalami nem akar működni. Ha az ablak mérete 999 px-nél kisebb, akkor a body background-jának a pozícióját kellene megváltoztatni, de ez a sor nem működik (a bodynak adtam egy bodyw id-t):
$('bodyw').style.background = '#f7f4eb url(../../../wp-content/themes/haldesign_v4/img/bg.gif) -1100px 0 repeat-y';Ebből egyébként csak a background-position a lényeg, de a kötőjel úgy tapasztaltam, hogy tiltva vagyon azon a helyen, ezért próbálkoztam simán a backgrounddal, de így sem működik.
ezeket külön állítgatsd be:
backgroundColor = '';
backgroundImage = '';
backgroundPosition = '';
backgroundRepeat = '';
Most már tényleg minden fasza, és nem győzöm hangsúlyozni, mennyire hálás vagyok érte :D
Már csak egyetlen megoldatlan problámám maradt: exploreren nem megy. Erre tudsz esetleg valami megoldást?
Csináld meg, hogy menjen firefoxban és majd rá kell nézni az oldalra, hogy mi a nyűgje IE alatt.
Ma megnéztem két különböző gépen két különböző IE 6-tal, és az egyiken teljesen szét volt esve az oldal. Úgy döntöttem, hogy azt csinálom, amint az IE az ajánlásokkal: szarok rá. A lényeg, hogy normális böngészőkkel működik, és ehhez még egyszer köszi a segítséget.
Az már csak hab lesz a tortán, ha esetleg az oldal publikálása után ránézel, és megpróbálod megfejteni az IE nyűgjét.
Ja és most nézem, hogy a kurva IE szarik az egészre!
Az a baj, hogy szarik az mindenre ami jo... fajdalom a seggben az egesz.
Bocsi az offert, de ezen most jot rohogtem:D
Pontosan úgy, ahogy Harder mondja.
Ehhez nem kell JS, nézz szét itt: http://blog.html.it/layoutgala/
Valamint ne pixel-ben add meg CCS szabályok méreteit, hanem EM-ben, ugyanis azok számított, relatív értékek.
Tudom, miért jó az „em”, csak azt nem értem, miért írtad? Az ablak méretét nem adhatom meg em-ben. Ha félreértettelek, akkor bocs.
Nekem a layoutok már készen vannak, erre már nincs szükségem, köszi.
Szerintem az általad leírt problémát a layoutban kell megoldani és nem másik CSS-t írni rá, ezzel kicsit megerőszakolod a logikát, de végülis működhet. Amúgy kíváncsi lennék az oldalra, meg lehet majd tekinteni?
Ami szép még, hogy ie-ben nincs min-width tulajdonság, így vagy hekkelni kell, vagy JS.
Egy fix szélességű layoutról van szó, ami három oszlopból áll, és ebből kettő fixen a helyén marad, amíg 800 pixelnél magasabb, illetve 999 px-nél szélesebb az ablak belső mérete. Ezekben az esetekben a fix oldalelemek is gördíthetővé válnak, ezért kell másik CSS.
Örömmel megmutatom majd ha kész lesz (04. 04-én), de most még nem szeretném – remélem, nem haragszol. :)
nekem így megy ie-ben a min-width, height
/* IE6 */
width: expression(document.body.clientWidth kisebb kacsacsőr 982? "980px": "auto" );
ie7 meg már tudja..
És itt van a 04. hó 04-e, meg lehet tekinteni: http://haldesign.hu/blog
Az explórert meg leszarom. :)
kis off:
szerintem magára vessen aki még mindig 800*600 ban néz egy oldalt
felesleges strapa miattuk ilyen trükköt bevetni, mert tuti nem azért nézik ilyen felbontásban mert csak 800*600 lenne a max a monitorukon
meg a szemorvosra:D
Egyetértek, de ennek ellenére még optimalizálva kell lennie arra is, mert vannak mondjuk 12 colos laptopok, kéziszámítógépek. A magyar piacra pedig pláne, hogy kell 800x600-ra figyelni...
Ha okosan csinálod meg, akkor mindegy a felbontás, szépen szétnyúlik az oldal.
A body háttérképét is meg lehet csinálni sztreccsesre :)
Mi mindannyian tudjuk, hogy az Explorer egy kalap szar, de mégis sokan használják. Nem szeretnék senkivel kibaszni csak azért mert olyan hülye a számítógépéhez, mint én a JavaScripthez. :)
[Egyébként most nézem a statisztikámat, az elmúlt héten 5.44 % volt 800x600-as. Ez számomra még nem elhanyagolható mennyiség.]