zmena polohy buttonov a zmena z butov na konkretne ikonky
14 příspěvků
Archiv diskusního fóra
Fórum je uzavřené a slouží pouze ke čtení. Některé informace mohou být zastaralé.
-
zdravim mam tu tento script this.easyscroll = function(){ // id of the container element var id = "myContent"; // navigation buttons text var nav = ["HORE", "DOLE", "RESET"]; // id for each navigation button (OPTIONAL) var navId = ["btnUp", "btnDown", "btnReset"]; // movement speed var speed = 5; // desired height of the container element (in pixels) var height = 200; // // END CONFIG // do not edit below this line (unless you want to of course :) ) // var obj = document.getElementById(id); obj.up = false; obj.down = false; obj.fast = false; var container = document.createElement("div"); var parent = obj.parentNode; container.id="easyscroll"; parent.insertBefore(container,obj); parent.removeChild(obj); container.style.position = "relative"; container.style.height = height + "px"; container.style.overflow = "hidden"; obj.style.position = "absolute"; obj.style.top = "0"; obj.style.left = "0"; container.appendChild(obj); var btns = new Array(); var ul = document.createElement("ul"); ul.id="easyscrollnav"; for (var i=0;i<nav.length;i++){ var li = document.createElement("li"); li.innerHTML = nav[i]; li.id = navId[i]; btns.push(li); ul.appendChild(li); }; parent.insertBefore(ul,container); btns[0].onmouseover = function(){ obj.up = true; this.className = "over"; }; btns[0].onmouseout = function(){ obj.up = false; this.className = ""; }; btns[1].onmouseover = function(){ obj.down = true; this.className = "over"; }; btns[1].onmouseout = function(){ obj.down = false; this.className = ""; }; btns[0].onmousedown = btns[1].onmousedown = function(){ obj.fast = true; }; btns[0].onmouseup = btns[1].onmouseup = function(){ obj.fast = false; }; btns[2].onmouseover = function(){ this.className = "over"; }; btns[2].onmouseout = function(){ this.className = ""; }; btns[2].onclick = function(){ obj.style.top = "0px"; }; this.start = function(){ var newTop; var objHeight = obj.offsetHeight; var top = obj.offsetTop; var fast = (obj.fast) ? 2 : 1; if(obj.down){ newTop = ((objHeight+top) > height) ? top-(speed*fast) : top; obj.style.top = newTop + "px"; }; if(obj.up){ newTop = (top < 0) ? top+(speed*fast) : top; obj.style.top = newTop + "px"; }; }; obj.interval = setInterval("start()",50); }; // // script initiates on page load. // this.addEvent = function(obj,type,fn){ if(obj.attachEvent){ obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn](window.event );} obj.attachEvent('on'+type, obj[type+fn]); } else { obj.addEventListener(type,fn,false); }; }; addEvent(window,"load",easyscroll); HORE,DOLE, a RESET su tlacitka ale ja ich chcem nahradit nejakymi ikonkami s tym ze HORE bude na vrchu a uplne dole bude DOLE aj RESET k tomu mam tento subor este <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <meta name="description" content="This script converts long content into short scrollable content"> <script type="text/javascript" src="easyscroll/easyscroll.js"></script> </meta> <style> body{ margin:0; padding:0; font:80% Arial, Helvetica, sans-serif; background:#fff; color:#333; line-height:180%; height:100%; overflow:visible; text-align:center; } #container{ margin:0 auto; text-align:left; width:200px; padding-top:2em; z-index:10; } h1{ font-size:250%; font-weight:normal; color:#000; margin-top:0; } h2{ font-size:200%; font-weight:normal; color:#000; } /* easyscroll */ #easyscroll{ background:#eee; margin:1em 0; /* add additional styling */ } /* easyscroll navigation buttons */ #easyscrollnav, #easyscrollnav li{ height:28px; line-height:28px; margin:0; padding:0; } #easyscrollnav{ margin:1em 0; } #easyscrollnav li{ list-style:none; float:left; background:#eee; margin-right:10px; padding:0 10px; color:#333; cursor:pointer; } #easyscrollnav li.over{ color:#999; text-decoration:underline; } /* // easyscroll navigation buttons */ /* // end easyscroll */ </style> </head> <body> <div id="container"> <div id="myContent"> <p><img src="1.jpg" width="100" height="40" alt="" /></P> <p><img src="2.jpg" width="100" height="40" alt="" /> </P> <p><img src="1.jpg" width="100" height="40" alt="" /> </P> <p><img src="2.jpg" width="100" height="40" alt="" /> </P> <p><img src="1.jpg" width="100" height="40" alt="" /> </P> <p><img src="2.jpg" width="100" height="40" alt="" /> </P> <p><img src="1.jpg" width="100" height="40" alt="" /> </P> </div> pls poradte niekto ako na to...
-
Celé se mi to číst nechce. Vím, že se opakuji, ale raději používám toto: http://wellstyled.com/css-nopreload-rollovers.html Je to kratší, rychlejší a elegantnější.
-
hmm kit si ma asi nepochopil...to je script o niecom inom.... tu to je ako to funguje... www.modell-models.com/test ja chcem len tie tlacitka prerobit na mnou definovane tlacitka a zmenit ich polohu ze hore bude nad ramcekom s obrazkami a dole bude dole pod ramcekom s obraskami .... pripadne aj vymazat reset.... ;)) dakujem za pomoc vsetkym
-
<HTML>Stejně nechápu, proč jsi nemohl ten svůj požadavek napsat rovnou v prvním příspěvku. Bylo by to užitečnější než dlouhý nepřehledný zdroják a "co vy s tím?".</HTML>
-
Tak dobrá: - nahraď odkaz na tlačítka odkazem na svá tlačítka - uprav jejich polohu tak, aby byla nad rámečkem - vymaž reset - postup najdeš na www.jakpsatweb.cz - není zač
-
no to sa lahko povie ale v js niesom zrovna priebojnik A tam su nejake standardne buttony ktore neobsahuju cestu aspon ja som to tam nenasiel ak to niekto vidite tak ukazte pls...pravdepod. som blind ;( ten prvy zdrojak je scriptovsky subor a druhy zdrojak je hthm subor....
-
a este ked len tak z var nav a var navId v js code len tak vymazem reset tak srcipt prestane bezat....
-
<img src="1.jpg" width="100" height="40" alt="" /> je jeden z řádků s obrázkem. Místo 1.jpg dej název nějakého svého souboru. Je až s podivem, kolik začátečníků, kteří stěží zvládají HTML se pouští do JavaScriptu. Přitom by možná stačilo to rolující menu uzavřít do dalšího DIVu pevné výšky a povolit rolovátko na boku. Všechno přes CSS bez kousku JavaScriptu. Navíc by se to chovalo standardně - žádná další tlačítka nejsou potřeba. Dokonce by fungovalo i rolovátko na myši.
-
no sorry az taky amater niesom......obrazky 1.jpg a 2.jpg su tie obrazky ktore tam scroluju..... dajme tomu ze sipky su arrup.jpg a arrdo.jpg ktore maju nahradit butony HORE a DOLE ,vymazat RESET a tlacitko dole dat pod priestor s obrazkami .... ;))
-
Musím souhlasit s Kitem. Neznalí si prostě myslí, že to nějak zvládnou a přitom si neuvědomí, že to ve skutečnosti nezvládnou. Mimoto javascript je dosti háklivý na chyby, takže stačí jeden chybný znak a už to nefunguje. Prostě JS není hračka. Ale zpět k tématu. Podíval jsem se na ten kód. Takže jediné místo, kde může uživatel zasahovat jsou první řádky. // id of the container element var id = "myContent"; - toto je tam správně. Obsahuje id toho divu, kde to aplikuje // navigation buttons text var nav = ["HORE", "DOLE", "RESET"]; // id for each navigation button (OPTIONAL) var navId = ["btnUp", "btnDown", "btnReset"]; - tato část má na starost právě ten obsah, který chceš. nav obsahuje obsah obalený tagem LI a navId jeho id. Oba MUSÍ být stejného počtu 3-3,2-2,1-1 atd jinak to selže. Takže "HORE" lze nahradit jiným textem nebo obsahem platné pro vnitřní obsah tagu LI. Takže klidně i obrázek. Obsahem je klasický html zápis. Ovšem pozor na uvozovky. Nesmí se křížit. Takže pokud je "", tak uvnitř musí být jednoduchý apostrof '. Nebo naopak. Takže: var nav = ["<img src='obr1.jpg'>", "<img src='obr2.jpg'>", "<img src='obr3.jpg'>"]; V navID musí být stejný počet jako u nav. Jeho hodnoty si vymysli. Jsou to ID. // movement speed var speed = 5; - ryhlost rolováni v ms // desired height of the container element (in pixels) var height = 200; - je výška toho divu v pixelech Ostatní jsou bezezměn.
-
ok tak dakujem za toto a ta poloha tlacidiek sa da teda tiez zmenit cez tagy li ci ?
-
Mrknul jsem se na příklad, takže menší úprava. nav[] obsahuje ty tlačítka. Ovšem není to tak jednoduché. Musí tam být všechny tři hodnoty. První je pro pohyb nahoru, druhý pro pohyb dolu a třetí pro reset. Jiný počet by způsobil chybu. Takže nav[] uprav jak jsem říkal. navId[] nechej tak, jak je. A var height = 200; představuje výšku myContent včetně těch tlačítek. Takže vlastně výška jednoho obrázku + tlačítka. Což je asi 60.
-
Bez zásahu JS je generovaná struktura takto: <ul> <li id="btmUp">HORE</li> <li id="btmDown">DOLE</li> <li id="btmReset">RESET</li> </ul> <div id="easyscroll"> <div id="myContent"> ..<p><img></p>.. </div> </div> Z toho vlastně také trochu pochopiš co a jak. Místo HOME daš <img src='up.jpg'>. A var height=200 je výška <div id="easyscroll">
-
ok dik....