ugrás a tartalomhoz

Stíluslap "kikapcsolása" JavaScripttel

Nutec · 2008. Dec. 23. (K), 19.16
Üdv Mindenkinek!

Egy olyan problémám lenne, hogy készítettem a weboldalamhoz két stíluslapot. Az egyiket 1024x768-as, a másikat 1280x1024-es felbontásra optimalizáltam (a célom az lenne, hogy ugyanúgy nézzen ki a honlapom mindkét felbontáson, mert 1280-on már nagyon kicsi az 1024-es és elveszik a tartalom).
Mindkét stíluslapot belinkeltem a dokumentum head-jébe így:
<link href="style1280.css" rel="stylesheet" type="text/css" id="felbont1280" />
<link href="style.css" rel="stylesheet" type="text/css" id="felbont1024" />


Így ugyebár az alsó 1024-es stíluslapot használja.

Azt szeretném elérni, hogy ha nagyobb felbontású monitoron nézik az oldalt, akkor a felső css legyen aktív!
Ezt egy JavaScript függvénnyel gondoltam megoldani, amely 1280-as szélesség esetén eltávolítja az alsó stíluslapot:
window.onload=Load;

function Load() {

felbontas = window.screen.width;
elem = getElementById("felbont1024");
if (felbontas == 1280) removeChild("elem");
}



Valami ilyesmire gondoltam, de ez nem működik.:(
Ha valaki tud, légyszi segítsen hogyan írjam át a kódot, vagy milyen megoldást javasolna egy ilyen esetben (ez csak az én elképzelésem a megvalósításra) hogy szokták az ilyet megoldani általában?

Segítségeteket előre is köszönöm!
‹ spam védelem Internet Explorer Probléma - Kérlek segitsetek ›
 ■
1

CSS csere

Poetro · 2008. Dec. 23. (K), 19.41
Amit lehet, hogy magát a CSSt cseréled ki, azaz először csak az egyiket rakod be, utána JS-sel csereled ki a másikra. Pl:
<link href="style.css" rel="stylesheet" type="text/css" id="felbont1024" />
window.onload= function () {
  felbontas = window.screen.width;
  if (felbontas > 1280) {
    elem = getElementById("felbont1024");
    if (elem) {
      elem.href = 'style1280.css';
    }
  }
}
2

Css csere

Nutec · 2008. Dec. 23. (K), 20.03
Köszi, de sajnos nem működik!

A feltételben amúgy is 2 egyenlőségjelnek kell lennie nem? Mert a képernyő szélessége pont 1280px(bár sajnos így sem jó:().
Arra gondoltam nem lehetne-e egy új stíluslapot létrehozni a meglévő alá insertChild() vagy appendChild() tagfüggvénnyel? Mindjárt meg is próbálom, de még csak most tanulom a javascriptet így elég nehezen megy:).
4

Ez ie6 -tól felfele biztos működik (jquery)...

Ustak · 2008. Dec. 23. (K), 20.58
de lehet, valahogy így:

var rules=' #selector {width:10px;} /*balbalaba többi minden*/';
var css=$('<style type="text/css">'+rules+'</style>');
$(css).appendTo('head');
vagy ha van kész stíluslapod valahol:

var csatolando=document.createElement('link');
csatolando.type='text/css';
csatolando.href='http://itt.van.a.stiluslap.helye';
csatolando.rel='stylesheet';
csatolando.media='all';
$(csatolando).appendTo('head');
Jó kis vegyes példa, de biztos lesz olyan aki nem olyan lusta mint én, és leírja tiszta javascriptben:-)
Remélem azért segít.
3

CSS csere

Blintux · 2008. Dec. 23. (K), 20.53
En ugyan nem tudom a megoldast, csak egy eszrevetelt szeretnek kozolni:
Attol, hogy a monitor felbontasa 1280 meg nem biztos, hogy a bongeszo teljes kepernyon fut a felhasznalonak. Nekem 1680-as felbontasom van wide monitoron es 1200 pixelnel szerintem nem szoktam tulhuzni a bongeszo meretet, mivel igy kenyelmessen elfer mas is a bongeszo ablak mellet. Szoval en kapnek egy szeles weboldalt a kis bongeszo ablakomba ha ez a megoldas mukodne. Nem hinnem hogy orulnek neki ha scrollozni kellene vizszintessen.
5

window.innerWidth

solkprog · 2008. Dec. 23. (K), 21.09
Ezért javasolnám a window.innerWidth tulajdonságott a window.screen.width helyett.

üdv,
Balázs
6

Egyszerű

gabesz666 · 2008. Dec. 24. (Sze), 00.01
A megoldás: document.writeln() függvény. Kiértékeled a képernyőfelbontást, azután kiíratod eszerint a megfelelő css linkelést.

if(kepernyofelbontas == 1280) {
   document.writeln('<link href="style1280.css" rel="stylesheet" type="text/css" id="felbont1280" />');
   }
else {
   document.writeln('<link href="style1024.css" rel="stylesheet" type="text/css" id="felbont1024" />');   
   }
7

Még mindig nem...:(

Nutec · 2008. Dec. 24. (Sze), 10.37
Köszönöm a segítségeket/észrevételeket, de még mindig nem működik.
Ustak, ha lesz időd, meg kedved leírnád a második verziót tiszta js-ben? Mert ez sem működik, pedig én is valami ilyesmit képzeltem el, de valami nem jó.
Gabesz666: sajnos szerintem nem ilyen egyszerű, a document.writeln() függvény nem használható a head-ben, csak a bodyban és ott is szöveg kiíratásra, ha jól tudom.
Minden esetre köszi, kipróbáltam, de ez sem vált be.
Valahogy egy új link csomópontot kellene létrehozni a head-be, vagy a meglévőt lecseréltetni, mint Poetro megoldásában, de a kivitelezés még valamiért nem működik..:(

Addig is Boldog Karácsonyt mindenkinek és köszi mégegyszer!

Nu7ec
8

tiszta js:

solkprog · 2008. Dec. 24. (Sze), 11.24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
<link href="style1280.css" rel="stylesheet" type="text/css" id="felbont1280" />
<link href="style.css" rel="stylesheet" type="text/css" id="felbont1024" />
	</head>
	<body>
		<script language="javascript" type="text/javascript">
window.onload=function () {
	idName=(window.innerWidth>=1280 || document.documentElement.clientWidth>=1131) ? 'felbont1024' : 'felbont1280';
//Az IE nem ismeri a window.innerWidth-et. A clientWidth-et ismeri helyett, de abba meg nem számolja bele a böngésző ablakot. Ezért nálam 1131 lett.		
	document.getElementById(idName).disabled=true;
}
		</script>
		szoveg
	</body>
</html>
Boldog Karácsonyt mindenkinek!

üdv,
Balázs
12

Érdekes...

gabesz666 · 2008. Dec. 24. (Sze), 15.12
Nálam működik, úgyhogy nálad van a gebasz!

Boldog Karácsonyt! Üdv
9

Nem hiszem el...

Nutec · 2008. Dec. 24. (Sze), 11.54
Ez sem működik, pedig mindent úgy csináltam ahogy Balázs írta!
Nem gondoltam, hogy ekkora fejtörőt találtam ki magamnak:(..
Egyenlőre kitalálok valami más megoldást (az a baj fogalmam sincs, hogy oldják meg az ilyesmit a profi honlapoknál, esetleg nem javascriptes eszközzel), beteszem a tartalmat középre, hogy kevésbé vesszen el nagy felbontáson, ez ügyben meg kutakodok tovább!
Köszönöm a segítséget!

Nu7ec
10

Nálam jó.

solkprog · 2008. Dec. 24. (Sze), 12.38
Ha egy az egyben bemásolod és megnézed a böngészőben akkor nem jó? (Nálam FF3, IE alatt jó)
Stíluslapokat nem kavartad össze? Jó nevet adtál nekik? Megfelelő helyen vannak?
((ez a kód csak az első lefutásnál vizsgálja meg az böngésző méretét, ha utána átméretezzük azt akkor már nem fog semmit csinálni))
az a baj fogalmam sincs, hogy oldják meg az ilyesmit a profi honlapoknál

Egy stíluslapot szolgálnak ki minden böngészőnek. Abban a stíluslapban ha kell százalékos mértékegységeket adnak meg, és nem mindenhol pixeleznek. Vagy azt mondják hogy ekkora az oldal tartalma (szélessége) és kész (pl. itt a weblaboron). Az utóbbi se hülyeség mert bizonyos méret fölött már zavaró ha túl nagy egy oldal (olvashatatlan, már csak fejmozgatással lehet elolvasni a tartalmát)
Szóval szerintem esetek 99% ában nem használnék külön stíluslapot különböző mérető böngészőkhöz sem. (már csak azért sem mert a fenne akarna még plusz x stíluslapot karbantartani...)

üdv,
Balázs
11

Jesz!!!!:)

Nutec · 2008. Dec. 24. (Sze), 13.11
Köszi Balázs működik!

A probléma az lehetett, hogy én mindig csak frissítettem a böngészőt és nem indítottam újra:), de így tényleg működik!

Magyarázatként: a grafikus elemek miatt választottam ezt a megoldást, nem akartam, hogy az oldal szélessége 800px alatt legyen. A tényleges tartalom amúgy sem túl széles!
Van amit százalékban adtam meg, lehet, hogy ha többet játszok a százalékokkal,szerkezetileg meg tudtam volna oldani mindent, de a grafikai elemekben nem vagyok biztos, hogy jól néznének ki átméretezgetve.
Meg amúgy is rendkívül makacs vagyok:D! Kíváncsi is voltam, hogy működhet-e egy ilyen elképzelés!

Az oldal amúgy a saját honlapom lesz eléggé statikus tartalommal így elkészítés után nem hiszem, hogy szükségem lesz a css állandó karbantartására.
3 css-t akarok készíteni, egy 800x600-ast, egy 1024-est és egyet az 1280-as szélességhez!

Külön böngészőnként nem készítek stíluslapot, mert igyekeztem az oldalt úgy szerkeszteni, hogy IE-ben, FF-ban és Operán is megközelítőleg ugyanúgy nézzen ki!

A segítségedet (és a többiekét is) mégegyszer köszönöm! És most már tényleg Boldog Karácsonyt Mindenkinek!:)

Nu7ec