| Autor | Zpráva | ||
|---|---|---|---|
| michal454454 Profil |
#1 · Zasláno: 9. 7. 2014, 20:13:10
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 |
#2 · Zasláno: 9. 7. 2014, 20:18:00
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 |
#3 · Zasláno: 9. 7. 2014, 20:20:17 · Upravil/a: michal454454
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 |
#4 · Zasláno: 9. 7. 2014, 20:27:13
michal454454:
1) Ano 2) Ano - pomocí nějakého klienta FTP nahraješ soubory a web běží. |
||
| michal454454 Profil |
#5 · Zasláno: 9. 7. 2014, 21:18:56
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 |
#7 · Zasláno: 9. 7. 2014, 21:30:20
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 |
#9 · Zasláno: 10. 7. 2014, 00:03:16
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 |
#10 · Zasláno: 10. 7. 2014, 14:05:17
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 |
#11 · Zasláno: 10. 7. 2014, 14:20:49
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:
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: 1echo "<ul>"; echo "<ul>";
for ($i = 1; $i <= 10; $i++) {
echo "<li>" . $i . " na druhou je " . ($i * $i);
}
echo "</ul>";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 |
#12 · Zasláno: 10. 7. 2014, 15:05:20
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 |
#13 · Zasláno: 10. 7. 2014, 19:59:49 · Upravil/a: michal454454
juriad:
Ahoj Udelal jsem tohle a nahral na server webzdarma a pojmenoval index.php a nic to nedela... tady je zdrojak: 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!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 |
#14 · Zasláno: 10. 7. 2014, 20:04:21
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 |
#16 · Zasláno: 10. 7. 2014, 23:31:09
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á).
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 |
#17 · Zasláno: 10. 7. 2014, 23:42:48
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 |
#18 · Zasláno: 11. 7. 2014, 08:55:46
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 |
#19 · Zasláno: 11. 7. 2014, 10:55:02
juriad:
Tak jsem si to tam zkopiroval a nevím proc nefunguje... pomocte prosim někdo.. diky :) HTML: 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!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>1@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); @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;
}1jQuery(document).ready(function ($) { 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 |
#20 · Zasláno: 11. 7. 2014, 11:01:16
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><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 |
#21 · Zasláno: 11. 7. 2014, 11:08:12 · Upravil/a: michal454454
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 |
#22 · Zasláno: 11. 7. 2014, 11:22:10
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 |
#23 · Zasláno: 11. 7. 2014, 11:24:36
Na chromu to taky nejde
Pridal jsem tam tu knihovnu dobře? :) 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!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 |
#25 · Zasláno: 11. 7. 2014, 11:28:11 · Upravil/a: michal454454
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:
To tam pak můžeš nechat, jde jen o vynucení konkrétního protokolu. |
||
| michal454454 Profil |
#27 · Zasláno: 11. 7. 2014, 11:41:17 · Upravil/a: michal454454
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 :/ 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!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 |
#28 · Zasláno: 11. 7. 2014, 12:01:49
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 |
#29 · Zasláno: 11. 7. 2014, 12:05:56 · Upravil/a: michal454454
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 |
#30 · Zasláno: 11. 7. 2014, 13:12:30
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: 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!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>1@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); @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;
}1jQuery(document).ready(function ($) { 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();
});
}); |
||
|
Téma pokračuje na další straně.
|
|||
0