zmena polohy buttonov a zmena z butov na konkretne ikonky
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...
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ší.
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č
- 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.
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.
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.
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">
<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....
Nové příspěvky
Soubor .env
Nevykonává se PHP
QR knihovna v PHP?
Aktivace PHP
samovolně se mi z kodu odmazává \
Chyba stránky
dolovani dat z html tabulky
kontaktní formulář
Aktualizace PHO
rozšíření přílohy
CRON
Ppocitadlo
NGINX
Drupal
Chyba po nahrání PHPBB
verze PHP
Nedefinováno __DIR__
PHP error NotCallableException
Nefungující funkce
htaccess 500 error
Nefunkční json_decode(...)
Zobrazení chyb v php
Oprávnění v phpMyAdmin
PHP a háže error 500
WooCommerce
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami