NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: obalení prvku...

Aktivity
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:23.7.2015 19:11

Někde dělám chybu a faktu už nevím kde...

Mám HTML stránku:

<div class="clanek">
       <img class="imgclanek" src="obrazek.jpg" title="popis" />
        <p>text... atd</p>
  </div>

Těch článků je tam x a já bych rád, obalil tag img divem pro vytvoření efektu. Ale ať to zkouším appendChild nebo insertBefore, nejde mi to zacílit přesně kolem těch tagů. Jak se správně v DOMu obaluje prvek?

Ten efekt je "transition: background-size 1s ease-in;" a ten funguje jen na pozadí, tedy musím obrázek nejdříve obalit divem, tomu předat hodnotu pozadí stejné jako je cesta k obrázku. Když ho tam natvrdo přidám div, tak to funguje, ale rád bych to zkusil celé přes javascript. Díky za nasměrování... :)

Odpovědět
23.7.2015 19:11
Čím víc vím, tím víc věcí nevím.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hynek
Honza Bittner:23.7.2015 19:16

Toto (jQuery) by tě mohlo navést http://www.itnetwork.cz/…adani-obsahu

Co máš v HTML při načtení, ten element .clanek (pak chceš vložení do), nebo obrázek a odstavec (pak chceš obalování - wrap)?

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
23.7.2015 19:16
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:23.7.2015 21:35

Honzo, děkuji za nasměrování, jQuery moc nemusím. Rád zjišťuji jak to funguje čistě v JavaScriptu. Wrap byl dobrý směr. Přikládám co jsem chtěl vytvořit a co se tedy i nakonec povedlo. Třebas se to bude hodit i někomu z vás.

Je to hodně zjednodušené, ale k ukázce to stačí :)

A ještě živá ukázka http://davidhynek.cz/test5.html :)

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
  <title></title>
  <style>
  .clanek {float: left; width: 51%; margin: 20px auto; clear: both;}
  .clanek p {}
  .divimgclanek {display: block; float: right;  background-size:100%; margin: 20px; transition: background-size 1s ease-in; -moz-transition: background-size 1s ease-in; -web-kit-transition: background-size 1s ease-in; background-position: 20% 20%;}
  .divimgclanek:hover {background-size:110%; background-position: 20% 20%;}
  </style>
  <script language="javascript">

  window.onload = function() { zabal_obrazky("imgclanek","divimgclanek");}


  function zabal_obrazky(co, cim)
  {
  x = document.getElementsByClassName(co);
  if(x.length > 0)
  {
  for(i=0;i<x.length;i++)
    {
    newDiv = document.createElement("div");
    newDiv.className = cim;
    newDiv.appendChild(x[i].parentNode.replaceChild(newDiv,x[i]));
    document.getElementsByClassName(cim)[i].style = "background-image: url('"+x[i].src+"'); width: "+x[i].offsetWidth+"px; height: "+x[i].offsetHeight+"px;";
    x[i].style = "display: none;";
    }
  }}

  </script>
  </head>
  <body>
  <div id="telo">
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_3.jpg" title="Hala" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_1.jpg" title="Regál" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
  </div>
  </body>
</html>
Nahoru Odpovědět
23.7.2015 21:35
Čím víc vím, tím víc věcí nevím.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.