sorvirág

Az oldalon található tartalom nem a képszerkesztés témakörébe tartozik, de mindenképpen meg szeretném osztani Veletek ezt a leírást.


Weblap készítőknek szóló információról van szó, aki saját maguk készítik honlapjaikat és nem előre gyártott sablonokat használnak ingyenes tárhelyeken. Amennyiben lehetőséged van a sablonba belenyúlni, akkor azt nagy odafigyeléssel, de tudod módosítani.


Nemrégiben egy kedves ismerősömmel szóba került a böngészők scrollozása. Gondolom, mindenki tudja, hogy arról a tekerőről van szó, ami a képernyő jobb oldalán található, és aminek a segítségével tudjuk megtekinteni a lapok tartalmát, ha az hosszabb, mint ami a képernyőnkbe belefér. Aki nem azzal viszi a lapot lefele, hanem csak az egér görgőjét használja, az is azt jelenti, csak egy beépített segédeszközzel ez így is megvalósítható (body scroll bar).


Ez a görgetősáv az Internet Explorerben eddig is színezhető volt és az internet fejlődésével több böngészőben is megvalósíthatóvá vált már (Opera, Safari). Viszont a Mozilla Firefox görgetősávja nem volt változtatható, csupán a lapon belüli görgetősáv színezésére volt/van lehetőség.
Elgondolkodtam a témán és egy eddig is ismert script segítségével, amellyel az oldalon belüli scrollozás volt megoldható, elkészítettem az alább bemutatásra kerülő trükköcskét, beállítást, mellyel a képernyőnk görgetősávja is megváltoztatható, lecserélhető MINDEN BÖNGÉSZŐBEN.
Úgy gondolom, sokak kívánságát sikerült teljesítenem a megoldással.


A script programilag csak fix szélesség és magasság értékekkel működik. Az Internet Explorer 6 saját szabvánnyal bír, ezért külön kellett "megmondani neki", hogy a tartalom 100% minden irányba.
Ez a cross-browser módszer egyszerű, mivel csak egy javasript fájl-t kell futtatni a rendszerben, a CSS beállításait pedig a saját stíluslapodba is beágyazhatod. Így már megvalósul a Firefox scroll bar (body scroll) színezése is. Ezzel a beállítással minden böngésző görgetősávja módosítható, színezhető vagy képpel lecserélhető.


A scroll színezhetőségének megvalósításáért Köszönet a script készítőjének !

Flexcroll


Az oldalról töltsd le a csomagot. Állítsd be az oldalba…


<html>
<head>
<script type="text/javascript" src=" flexcroll.js"></script>
<link href=" flexcrollstyles.css" rel="stylesheet" type="text/css">

És itt jön a trükk !


Minden oldalba külön-külön írd be a következő sort…..

<style type="text/css">
<!--
* { margin: 0; padding: 0;} html,body { height:100%; width:100%;} html,body { overflow:auto;} * html { height:100%; width:100%; }
-->
</style>

</head>

Indítsd a lapod tartalmát.

<body>

És itt jön a trükk másik fele, eltérés az eredti leírástól!


Mivel az egész oldalt akarjuk scrollozni, ezért már a body megkezdésekor alkalmazni kell az owerflow tulajdonságot. Egy látszólagos <div> elembe helyezzük a lapot, aminek a paramétereit más a stílusban beállítottuk (szélesség, magasság és eltolás a végtelenbe..). Egy görgethető tartalom megjelenítésénél egyértelműen be kell állítani a görgethető tartalom szélesség és magasság értékeit. Ezt itt is meg kell tenni. Ahhoz, hogy a lap mindenkor a megfelelő helyen (bal széltől kezdve) jelenjen meg egy kis lebegtetést alkalmazunk balra ( float:left ), és a végtelenbe toljuk a jobb oldalát ( margin-right:-999em ), hogy minden monitoron a megfelelő helyre (a lap jobb szélére) kerüljön a görgetősáv.


<div class="flexcroll" style="overflow:auto; float:left; margin-right:-999em; height:100%;width:100%; ">

<div conainer>......innentől a saját lapod....
Ide kerül a tényleges tartalom. Ide kerül a tényleges tartalom.
Ide kerül a tényleges tartalom. Ide kerül a tényleges tartalom. Ide kerül a tényleges tartalom.
</div>container lezárás
</div> flexcroll lezárás
</body>
</html>


A görgetősáv színezése vagy képpel történő lecserélése a CSS-ben megoldható.
A flexcroll alkalmazása csak hibátlanul kódolt weboldalakon működik megfelelően. Amennyiben egy hibás + </div> elem vagy kevesebb van az oldalon, a megjelenés módosulhat.


Ebben az esetben Ne engem keress, nézd át a weblap kódolását és javítsd ki.


A képes oldalak gyorsabb betöltődése érdekében a </body> elé írd be a következő sort.

<div id='flexcroll-init'></div>

Layout-os oldalaknál mindenképp figyelj oda, mert BE KELL állítani az optimális magasságot. A Réteget kezelő script a 100%os megjelenítést alkalmazza, ami a belső tartalmaknál eltérő lehet. Amennyiben ezt elfelejted , akkor arra vigyázz, hogy a tartalom azonos magasságot érjen el, különben elcsúszik az oldal.

Ezt a megoldást láthatod ezen a weblapon is, ahol a jobb oldali scroll más színű, mint a "gyári" beállítás.

Jó szórakozást!