Zmena divu z jedného na druhý – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Zmena divu z jedného na druhý – JavaScript, AJAX, jQuery – Fórum – Programujte.comZmena divu z jedného na druhý – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Onsi0
Stálý člen
22. 12. 2007   #1
-
0
-

mám napríklad 3 divy 2 mám zobrazené stále ale keď ukážem myšou na ten menší tak ten druhý sa zmení na iný (nejde mi len o zmenu farby ako je v príklade potrebujem úplne iný div čo bude mať len rovnaké umiestnenie a rozmery ako ten prvý).

<div onmouseover="TOTO_POTREBUJEM_PORADIŤ" id="divnaktorysapojdemysou"></div>


divnaktorysapojdemysou {

width: 100px;
height: 50px;
background-color: red;
}

normalnydiv {
width: 500px;
height: 100px;
background-color: blue;
}

zmenenydiv {
width: 500px;
height: 100px;
background-color: green;
display: none;
}


dúfam že ste pochopili a ak hej tak prosím pomôžte

Nahlásit jako SPAM
IP: 91.127.11.–
Onsi0
Stálý člen
23. 12. 2007   #2
-
0
-

našiel som na net takýto script:

function invisible(theDiv) {

var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}

function visible(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "block")?"":"block";
}

<div onmouseover="invisible('page');visible('page2');" onmouseout="visible('page');invisible('page2');" id="divnaktorysapojdemysou"></div>


len nedalo by sa to upraviť aby mi ho nezobrazilo hneď celý ale aby sa zobrazoval jednu sekundu pričom aby ho na začiatku bolo vydieť pri 0s 0%, 0,1s 10%, 0,2s 20%... 1s 100%

Nahlásit jako SPAM
IP: 91.127.11.–
Petroff0
Věrný člen
26. 12. 2007   #3
-
0
-

Dá se to udělat tak, že se ovládané bloky page a page2 vloží do obalových bloků, kterým se nastaví šířky.
Javascriptem se vnitřním blokům nastavuje šířka v procentech od 0% do 100% (a při skrývání od 100% do 0%)

Fungující ukázka (testováno pouze v IE a FF)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Over/Out javascript scroller</title>
<script type="text/javascript">
var pocet_kroku=20; /* dvacet kroků */
var trvani=500; /* 2x500 = 1000ms = 1s */

function nuluj(el) {
clearInterval(el.timer);
el.delta=null;
el.timer=null;
el.style.width = "";
}

function krok(id) {
var el = document.getElementById(id);
var act_w = parseInt("0"+el.style.width,10);
if ((el.delta>0)&&(act_w > 99)) {nuluj(el);return}
if ((el.delta<0)&&(act_w < 1)) {nuluj(el); el.style.display="none";return}
el.style.width = (act_w + el.delta * 100/pocet_kroku) +"%";
}

function skryj(theDiv) {
var elem = document.getElementById(theDiv);
if (elem.style.display=="none") return; /* Uz je skryty !!! */
elem.style.display = "block";
if (elem.style.width=="") { elem.style.width = "100%"; }
elem.delta = -1;
if (!elem.timer) elem.timer=setInterval("krok('"+theDiv+"')",trvani/pocet_kroku);
}
function zobraz(theDiv) {
var elem = document.getElementById(theDiv);
if (elem.style.display=="block") if (!elem.timer) return; /* Uz je zobrazeny !!! */
elem.style.display = "block";
if (elem.style.width=="") { elem.style.width = "0%" }
elem.delta = +1;
if (!elem.timer) elem.timer=setInterval("krok('"+theDiv+"')",trvani/pocet_kroku);
}
</script>
<style type="text/css">
* {margin:0;padding:0}
ul
{
letter-spacing: 5px;
font: 25px/1 "Lucida Console","Courier New",monospace;
list-style: none;
margin-top:1em;
}
li
{
position:relative; /****** nutné pokud použiješ position:absolute *******/
width:16ex; /****** nutné nastavit šířku *************************/
margin-left:1em;
height: 3ex;
}

#page,#page2
{
position:absolute;
left: 0px;
top: 0px;
color:red;
background: yellow;
border: 1px solid red;
padding-left: 2px;
overflow:hidden; /***** nutné (zkus to bez něj) *************/
}

#rizeni /*********** OVLÁDACÍ PRVEK *************/
{
width: 8em;
color: yellow;
background: black;
border: 1px double black;
margin:2em;
text-align: center;
cursor:pointer;
}
</style>
</head>
<body>

<ul>
<li><div id="page" style="display:block">0123456789</div></li>
<li><div id="page2" style="display:none">ABCDEFGHIJ</div></li>
</ul>

<div id="rizeni" onmouseover="skryj('page');zobraz('page2');" onmouseout="zobraz('page');skryj('page2');">
Zkus over/out
</div>

</body>
</html>

Totéž v připojeném souboru:

Nahlásit jako SPAM
IP: 89.102.96.–
Onsi0
Stálý člen
27. 12. 2007   #4
-
0
-

Dík aj toto sa zíde práve som to potreboval ale nepochopili sme sa. Ja som potreboval nech ide od 0 po 100 opacity nie width

Nahlásit jako SPAM
IP: 91.127.11.–
Petroff0
Věrný člen
27. 12. 2007   #5
-
0
-

Díky - tímhle jsi mě dostal. Ještě teď se směju. Ale jak říkáš - když to funguje pro width, snadno by to mělo jít předělat na opacity.
Problém je, že jsem ji ještě nikdy nepoužíval - ale mrknu se na ni.

Nahlásit jako SPAM
IP: 89.102.96.–
Petroff0
Věrný člen
28. 12. 2007   #6
-
0
-

Teď jsem to (po pozorném přečtení) teprve pochopil => jde ti o tzv. prolínačku obsahů v jednom bloku ....tak to jsem byl vedle jak ta jedle a je třeba to předělat (no problem) .
Zjistil jsem že průhlednost se v CSS standardech nevyskytuje, takže to řešení bude třeba "ušít na míru" podle typu obsahu těch bloků z tvého kódu => uveď příklad: a) původní blok b) blok, který ho překryje
[ Neboť jsou různé možnosti typů obsahu: text, text+pozadí, komplex=obsah složený z bloků či inline prvků, obrázek gif/jpg/bmp, obrázek png, flash/popř. scriptem vkládaná reklama ]

Nahlásit jako SPAM
IP: 89.102.96.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 2 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý