21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
« 1 2 »
Autor Zpráva
michal454454
Profil
Chtel bych poprosit jestli by mi někdo neporadil jak udělat slider..? ono se jeste musi neco predtim nez zacnu programovat v javascript a php neco nainstalovat...? diky moc :)
Tomáš123
Profil
michal454454:
ono se jeste musi neco predtim nez zacnu programovat v javascript a php neco nainstalovat...?
Pri programovaní v PHP musíš pracovať na serveri, takže musíš inštalovať minimálne WAMP balíček...Pri JavaScripte môžeš začať hneď.
michal454454
Profil
Tomáš123:
a ten slider udelam pres javascript teda? :)


Tomáš123:
a kdyz uz mam web spustitelny na serveru webzdarma.. tak uz muzu pracovat s php rovnou? :) dik
Micruss
Profil
michal454454:
1) Ano
2) Ano
- pomocí nějakého klienta FTP nahraješ soubory a web běží.
michal454454
Profil
Micruss:
a to php nebo javascript musi byt nejak propojene s html jako treba css...? diky :)
jenikkozak
Profil
Michale, výuka dvou skriptovacích jazyků jen pomocí diskuse je nemožná. Poohlédni se po nějaké učebnici. K PHP ti mohu doporučit web PéHáPko.cz.
michal454454
Profil
jenikkozak:
Vysvetli mi prosimte jenom jak to teda je :) tam se pise ze php kod pisu rovnou do html ale dale tam pisou ze se uklada jako index.php a ne index.html... tak nevim
Micruss
Profil
michal454454:
pokud děláš stránky, kde je čistě HTML kód tak stránka může být "index.html", pokud se v kódu vyskytuje php kód, tak stránka musí mít koncovku .php jinak ti ty skripty nepojedou a mrkni se nějaký základy ;)
michal454454
Profil
Micruss:
A jaký je prosím rozdíl mezi tím když píšu php kód dohromady s html kódem nebo píšu php zvlášť? To pak mám 2 soubory? Jeden index.html a druhý index.php? Díky :)
Kubo2
Profil
michal454454:
To pak mám 2 soubory? Jeden index.html a druhý index.php?
Nie.

A jaký je prosím rozdíl mezi tím když píšu php kód dohromady s html kódem nebo píšu php zvlášť?
Dohromady je to takzvaná šablóna, oddelene to máš aplikačnú logiku + šablónu. V tom druhom prípade aplikačná logika pracuje s dátami, ktoré vykresluje do šablóny. V prvom sa to nazýva špagetový kód, kde máš HTML šablónu zmiešanú s aplikačnou logikou.
juriad
Profil
michal454454:
Jsi asi zvyklý používat HTML. PHP je jakési dynamické HTML, je to něco co vytváří konkrétní HTML podle požadavku.
Abys mohl používat HTML, musíš změnit všechny koncovky z .html na .php (raději všechny, aby se to nepletlo) a změnit odkazy, aby směřovaly na přejmenované soubory.

Každý HTML soubor je zároveň platným PHP souborem, opačně to platí také, ale jen dokud nenapíšeš někam do souboru pět písmen <?php. Do té doby, byť to je PHP soubor, možnosti PHP nevyužíváš.

Za značku <?php (a před koncovou značku ?>) můžeš napsat nějaké PHP příkazy. Například:
<?php echo date("d. m. Y H:i:s"); ?>
způsobí, že v místě této značky server doplní aktuálni datum a čas. Prohlížeč nikdy značku <?php neuvidí, dozví se jen výsledek.
Nebo třeba:
echo "<ul>";
for ($i = 1; $i <= 10; $i++) {
  echo "<li>" . $i . " na druhou je " . ($i * $i);
}
echo "</ul>";
Vypíše seznam prvních deseti mocnin přirozených čísel.

A jak se píšou větší a větší kusy kódu v PHP, tím méně se používá přímé HTML. Pořád však platí, že PHP kód vypíše HTML. Skončí to tím, že každý soubor začíná značkou <?php, která nikdy neskončí a veškerý obsah stránky vypíše PHP skrze funkci echo.
michal454454
Profil
juriad:
A je server WEBZDARMA dobry k tomu abych v nem spoustel PHP ? zatím jsem si procet o php něco ze stranek pehapko je to dobra k uceni php nebo ne? diky :)
michal454454
Profil
juriad:
Ahoj Udelal jsem tohle a nahral na server webzdarma a pojmenoval index.php a nic to nedela...
tady je zdrojak:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  Dnesni datum a cas
  <?php 
  echo date("d. m. Y H:i:s"); 
  ?>

  </body>
</html>



Ne počkej tak uz to tam zobrazi... dobry
juriad
Profil
michal454454:
Webzdarma není ani nejlepší ani úplně nejhorší. Prostě je takový, jaký můžeš čekat zadarmo. Má své problémy, ale z počátku na ně asi nenarazíš.
Ano, pehapko tvoří zdejší zkušení uživatelé, je mnoha uživateli revidovaný a tedy by tam chyby být neměly.

Ne počkej tak uz to tam zobrazi... dobry
Skvěle.
michal454454
Profil
A Ještě bych se chtěl zeptat na ten Javascript..
Javascript pisu normalne do body v index.html nebo ho pisu do samostatného souboru .jss
a jestli ho pisu do samostatného souboru .jss musim to mit nejak propojene jako je html a css?
Diky moc :)
Kubo2
Profil
michal454454:
Javascript pisu normalne do body v index.html nebo ho pisu do samostatného souboru .jss
Prístupné sú obe možnosti.

a jestli ho pisu do samostatného souboru .jss musim to mit nejak propojene jako je html a css?
Áno, je treba ho prilinkovať. Používa sa na to atribút src tagu <script> (pozor však, v prípade prilinkovávania musí byť obsah <script>u prázdny - resp. nemusí, ale skript vnútri sa nevykoná).
<script src="javascriptovy-subor.jss"></script>
Poznámka: Hoci na použitej prípone veľmi nezáleží, najčastejšie sa JavaScriptovým súborom udeľuje prípona .js.
michal454454
Profil
Kubo2:
A nevěděl bys prosím o nějakém tutorialu jak udělat slider pres javascript aby to jenom přesouvají obrázky automaticky a byly tam i šipky na manuální přesun? :)ddíky moc jestli víš
juriad
Profil
A zkoušel jsi hledat?
tutoriál:
https://coderwall.com/p/vsdrug

něco hotového, vypadá jednoduše:
http://codepen.io/zuraizm/pen/vGDHl

a další:
http://symmetrycode.com/super-easy-javascript-slider-tutorial/

vyhni se http://www.javascriptkit.com/howto/show.shtml, to už od pohledu vypadá hrozně.
michal454454
Profil
juriad:
Tak jsem si to tam zkopiroval a nevím proc nefunguje... pomocte prosim někdo.. diky :)
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="jssslider.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 



  </body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);    

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}
JAVASCRIPT:
jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    
juriad
Profil
Není to tam explicitně zmíněné, ale ten kód používá knihovny jQuery. Poznáš často podle toho, že používá funkci dollar ($).
Přidej před link svého js (před 4. řádek) ještě toto:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Časem může lepší si tu knihovnu stáhnout k sobě a nespoléhat na veřejnou verzi. Ale pro teď to neřeš.
michal454454
Profil
je to divny porad nic jenom mi to dole pise ze Internet Explorer zakazal prvky ActiveX


a vykresly mi to na starnku všechny ty SLIDE ale jsou tam všechny 4 jakoby vedle sebe..
juriad
Profil
michal454454:
Tak to nevím, mě to ve Firefoxu funguje. Internet Explorer nemám k dispozici.
Když to jQuery nepřidám ([#20]), tak to vypadá přesně tak, jak popisuješ ty.
michal454454
Profil
Na chromu to taky nejde
Pridal jsem tam tu knihovnu dobře? :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="jssslider.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 



  </body>
</html>
juriad
Profil
michal454454:
Jo jQuery je přidané správně.
A jmenuje se ten tvůj soubor opravdu jssslider.js? S těmi tremi s?
michal454454
Profil
jo jmenuje :/


a k tomu nepotrebuju mit to spusteny na serveru ne? to mi staci jen porhlizec ne? :)


k Javascriptu? :)
juriad
Profil
Jo stačí prohlížeč, ale v tom případě musíš změnit odkaz na jQuery: napiš před ta dvě lomítka http:, tedy:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
To tam pak můžeš nechat, jde jen o vynucení konkrétního protokolu.
michal454454
Profil
Uz to funguje asi ;)


A jak ještě prosimte zmenim aby tam místo background a ta barva byl mu obrazek? když tam dam background:url("obrazek.jpg");
tak to nefunguje a zustava tam ta seda barva jen :/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="jssslider.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 



  </body>
</html>
juriad
Profil
Když změním vlastnost background v pravidlu #slider ul li (řádek 44) na background: url(http://fakeimg.pl/500x300/abc/eae0d0/);, tak to funguje. Jmenuje se ten tvůj obrázek přesně obrazek.jpg?
michal454454
Profil
Mam to takhle ten obrazek se jmenuje limba.jpg... :)
<ul>
<li>SLIDE 1</li>
<li style="background:url("limba.jpg");">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>


jo tak uz to jde ono to chtelo smazat ty ""
michal454454
Profil
Ještě se chci prosimvas zeptat jak udelat to aby se ty obrazky prepinaly rovnou automaticky bez toho abych musel zaškrtnout ten checkbox a ten checkbox tam nebyl... ;) diky
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="jssslider.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background:url(limba.jpg);">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 



  </body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);    





#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  margin-top:100px;
  
}

#slider ul {

  position: relative;
  margin:0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 1000px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.1s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}
Javascript:
jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 10000);
  });
  
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    
« 1 2 »

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0