| | |
| Stránka: 1 z 1
| [ Príspevkov: 3 ] | |
Autor | Správa |
---|
Registrovaný: 03.01.14 Prihlásený: 09.04.20 Príspevky: 205 Témy: 59 Bydlisko: Martin | Napísal FJanči: 17.09.2015 17:51 | |
|
Zdravím, som začiatočník v programovaní stránok a pri jednom kóde som narazil na problém. Skript totižto nefunguje, akoby tam vôbec ani nebol a nerozumiem kde mám chybu. Kód: Kód: <!DOCTYPE html> <html>
<!-- multistep form --> <head title="Registration"> <link rel="stylesheet" href="design.css"> </head> <form id="msform"> <!-- progressbar --> <ul id="progressbar"> <li class="active">Account Setup</li> <li>Social Profiles</li> <li>Personal Details</li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Create your account</h2> <h3 class="fs-subtitle">This is step 1</h3> <input type="text" name="email" placeholder="Email" /> <input type="password" name="pass" placeholder="Password" /> <input type="password" name="cpass" placeholder="Confirm Password" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Social Profiles</h2> <h3 class="fs-subtitle">Your presence on the social network</h3> <input type="text" name="twitter" placeholder="Twitter" /> <input type="text" name="facebook" placeholder="Facebook" /> <input type="text" name="gplus" placeholder="Google Plus" /> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Personal Details</h2> <h3 class="fs-subtitle">We will never sell it</h3> <input type="text" name="fname" placeholder="First Name" /> <input type="text" name="lname" placeholder="Last Name" /> <input type="text" name="phone" placeholder="Phone" /> <textarea name="address" placeholder="Address"></textarea> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="submit" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form>
<script type="text/javascript">
var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); });
$(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); });
$(".submit").click(function(){ return false; })</script>
</html>
<!-- jQuery --> <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script> <!-- jQuery easing plugin --> <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
Kód nie je môj, je zo stránky http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar , no tam je len popísaný postup a kód, ale nerozumiem, kde mám ten JS súbor umiestniť.
|
|
Registrovaný: 08.08.09 Príspevky: 12449 Témy: 39 | Napísal killer: 17.09.2015 18:32 | |
|
V prvom rade si daj odkazy na jQ knižnicu (posledné štyri riadky uvedeného kódu) pred ten blok kódu, kde samotnú knižnicu využívaš (všetok javascript predtým). V druhom rade, odporúčam ako preventívne opatrenie obaliť celý javascript kód do funkcie .ready()Kód: $( document ).ready(function() { // sem tvoj js kód (bez odkazov na knižnicu) }); Viac info https://api.jquery.com/ready/Keď to aj potom nebude fungovať, daj odkaz na živú ukážku - tam kde si to zobral to evidentne funguje v poriadku.
_________________ always is always wrong |
|
Registrovaný: 03.01.14 Prihlásený: 09.04.20 Príspevky: 205 Témy: 59 Bydlisko: Martin | Napísal autor témy FJanči: 17.09.2015 20:39 | |
|
Už to funguje, diki moc
|
|
| Stránka: 1 z 1
| [ Príspevkov: 3 ] | |
Podobné témy | Témy | Odpovede | Zobrazenia | Posledný príspevok |
---|
| SMS skript nefunguje v PHP, ASP | 11 | 706 | 28.12.2008 13:59 dadmtb | | skript na vypočet nefunguje v JavaScript, VBScript, Ajax | 2 | 291 | 29.10.2011 12:16 Pablo Montero | | Jednoduchy skript a nefunguje v PHP, ASP | 7 | 894 | 29.12.2006 10:15 Codik | | Chyba v kode ? v PHP, ASP | 1 | 385 | 03.06.2010 22:25 Blackshadow | | Chyba v kode v PHP, ASP | 2 | 355 | 17.07.2014 21:01 majky358 | | chybicka v kode v Redakčné systémy | 4 | 500 | 25.02.2007 15:25 Tom@S | | Asi chyba v kode v Redakčné systémy | 9 | 504 | 27.01.2007 14:10 Leachim | | C - problem v kode v Assembler, C, C++, Pascal, Java | 13 | 817 | 23.03.2011 18:28 zdeniatqo | | premenne v kode PHP v PHP, ASP | 1 | 340 | 10.02.2015 15:36 killer | | Pascal - chyba v kode v Assembler, C, C++, Pascal, Java | 17 | 790 | 18.02.2012 23:06 fubu | | JRidilla.net - V kode v HTML, XHTML, XML, CSS | 7 | 590 | 28.08.2008 13:19 ridilla | | vyhladanie slova v zdrojovom kode v JavaScript, VBScript, Ajax | 2 | 564 | 30.03.2016 15:29 neopagan | | Co je zle v tomto kode ? v HTML, XHTML, XML, CSS | 2 | 689 | 01.05.2007 9:24 mokus | | Co je zle v tomto kode v Assembler, C, C++, Pascal, Java | 3 | 423 | 21.03.2015 12:32 faraon | | Textový súbor v kóde UTF-16LE v Delphi, Visual Basic | 2 | 643 | 10.09.2010 13:54 jasug | | [C++] Pomoc s upravou chyby v kode v Assembler, C, C++, Pascal, Java | 1 | 433 | 26.02.2010 22:51 chrono |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|