jQuery пользовательский номер слайда не скользит, чтобы исправить слайд - PullRequest
Новая
       11

jQuery пользовательский номер слайда не скользит, чтобы исправить слайд

0 голосов
/ 30 апреля 2020

При добавлении к javascript jQuery('#msform li').click(() => {ms_go_slide(this.slide)}); слайд будет пытаться перейти к выбранному в числе выше, но не будет отображать правильный слайд, вместо этого он смещается вправо и исчезает. Функция ms_go_slide имеет аргумент направления, но после попытки ввода влево или вправо она не устранилась, я не уверен, что это проблема с кешем, думаю, что так и было, я очистил кеш браузера и очистил Кэш WordPress, по-прежнему выглядит так же с и без этой строки кода. Это здесь - https://loancalc.000webhostapp.com/getleads / https://jsfiddle.net/Curnow93/6hrptwk4/33/ - однако я не могу заставить javascript работать в jsfiddle.

HTML

 <head></head>
 <body>
  <form id="msform" form="" action="https://loancalc.000webhostapp.com/wp-admin/admin-ajax.php" method="POST"> 
   <!-- progressbar --> 
   <ul id="progressbar"> 
    <li class="active" style="width:33.333333333333%"></li>
    <li style="width:33.333333333333%"></li>
    <li style="width:33.333333333333%"></li>
   </ul> 
   <!-- fieldsets -->
   <div class="fieldsets" style="height: 161px;">
    <fieldset class="section1" style="display: block;">
     <p class="inputfield ">How much money do you need?<br /> <select class="minimal required" name="loanamount" required=""> <option value="Select...">Select...</option> <option value="under $5000">under $5000</option> <option value=" under $10000"> under $10000</option> <option value=" under $20000"> under $20000</option> <option value=" under $50000 "> under $50000 </option> <option value="under $100000">under $100000</option> <option value=" over $100000"> over $100000</option> </select></p> 
     <div class="buttons">
      <input type="button" name="next" class="next action-button" value="Next" />
     </div>
     <div class="buttons_working"> 
      <p class="working_loading"></p>
     </div>
    </fieldset>
    <fieldset class="section2">
     <p class="inputfield ">What's your monthly revenue?<br /> <select class="minimal required" name="yourincome" required=""> <option value="Select...">Select...</option> <option value="under $5000">under $5000</option> <option value=" under $10000"> under $10000</option> <option value=" under $20000"> under $20000</option> <option value=" under $50000 "> under $50000 </option> <option value="under $100000">under $100000</option> <option value=" over $100000"> over $100000</option> </select></p> 
     <div class="buttons">
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
     </div>
     <div class="buttons_working"> 
      <p class="working_loading"></p>
     </div>
    </fieldset>
    <fieldset class="section3">
     <p class="inputfield ">Your name<br /> <input id="yourname" name="yourname" type="text" class="required" value="" /></p> 
     <p class="inputfield ">Email address<br /> <input id="youremail" name="youremail" type="text" class="required" value="" /></p> 
     <p class="inputfield ">Phone number<br /> <input id="yourphone" type="tel" name="yourphone" value="" placeholder="0123-456789" maxlength="11" /><script type="text/javascript">jQuery(document).ready(function() {jQuery("input[name=\"yourphone\"]").mask("0000-000000");});</script></p>
     <p class="inputfield ">Business name<br /> <input id="businessname" name="businessname" type="text" value="" /></p> 
     <div class="buttons">
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="submit" name="submit" id="ms_submit" class="submit action-button" value="Submit" />
     </div>
     <div class="buttons_working"> 
      <p class="working_loading"></p>
     </div>
    </fieldset>
    <fieldset class="section_success">
     <h2 class="section_success_title">Success</h2>
     <p class="section_success_blurb">You successfully submitted the form</p>
    </fieldset>
    <fieldset class="section_failure">
     <h2>Oops</h2>
     <p>The form didn't submit</p>
    </fieldset>
    <fieldset class="section_loading">
     <p class="loading"></p>
    </fieldset>
   </div>
  </form>
 </body>
</html>

Jquery

//jQuery time
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
var section = 1;

function ms_test_current_section() {

    var errors = 0;

    jQuery(".section"+section+" :input.required").map(function(){

        if (getleads_fields.hasOwnProperty(this.name)) {
            if( !getleads_fields[this.name].callback(this) ) {
                jQuery(this).parents('p').addClass('warning');
                errors++;
            } else if (jQuery(this).val()) {
                jQuery(this).parents('p').removeClass('warning');
            }
        }

    });

    if(errors > 0){
        ms_set_height(current_fs);
        current_fs.show();
        return true;
    } else {
        ms_set_height(current_fs);
        current_fs.show();
        return false;
    }

}

function ms_clear_errors() {
    jQuery('.warning').removeClass('warning');
}

function ms_set_height(element) {

    element.show();

    var w = element.width();
    var h = element.height() + 20;

    element.closest('.fieldsets').css('height',h);
    element.hide();

}

jQuery(document).ready(function($) {

    var globalFieldsets = 0;

    $('fieldset').each(function() {
        globalFieldsets++;
        $(this).data('slide_number',globalFieldsets);

        if (globalFieldsets == 1) {

            ms_set_height($(this));

            $(this).show();

        }

    });

    $('.conditional_hidden').hide();
    $('select[name=conditional]').change(function(e) {

        jQuery('fieldset').filter(':visible').attr('style','display: block; height: auto;');
        if (this.selectedIndex != 1) {
            if ($('.conditional_hidden').is(":visible"))
                $('.conditional_hidden').slideToggle('fast',function() {
                    ms_set_height(current_fs);
                    current_fs.show();
                    current_fs.css('position','absolute');
                });
        } else {
            if (!$('.conditional_hidden').is(":visible"))
                $('.conditional_hidden').slideToggle('fast',function() { 
                    ms_set_height(current_fs);
                    current_fs.show();
                    current_fs.css('position','absolute');
                });
        }
    });



    $('#msform input[type=range]').on('input',function() {
        var parent = jQuery(this).closest('p');

        parent.find('.rangeoutput').text(this.value);
    }).trigger('input');

    $('#msform :input').change(function() { 

        if (this.tagName.toLowerCase() == 'select' || this.tagName.toLowerCase() == 'checkbox') {
            var fieldset = $(this).closest('fieldset');
            var inputfields = fieldset.find('.inputfield :input');

            if ((inputfields.last()[0] == this) && getleads_auto_complete) {
                ms_go_next();
            }
        }

    });

    $('#msform').submit(function() {

        var nextSection = section + 1;
        var pass = ms_test_current_section();
        if (!pass) {
            if ($('.section'+nextSection).size()) {
                ms_go_next();
            } else {
                // Do Ajax Submission

                var data = {};
                var nd = $(this).serializeArray();
                for (i in nd) {
                    data[nd[i].name] = nd[i].value;
                }

                data['action'] = 'ajax_submit';

                /*
                    collect all the user submitted data
                */
                jQuery('fieldset').stop();

                jQuery('fieldset.section'+section).find('.buttons').hide();
                jQuery('fieldset.section'+section).find('.buttons_working').show();

                // jQuery('fieldset').find('[type=button],[type=submit]').prop('disabled',true);

                var previousSlide = section;
                jQuery.post(getleads_ajax_url, data, function(response) {

                    if (response.success == true) {

                        jQuery('.section_success_title').html(response.title);
                        jQuery('.section_success_blurb').html(response.message);

                        jQuery('#progressbar').hide();

                        ms_set_height(jQuery('fieldset.section_success'));

                        ms_go_slide('_success','ltr');

                    } else {
                        jQuery('fieldset.section'+section).find('.buttons').show();
                        jQuery('fieldset.section'+section).find('.buttons_working').hide();
                    }

                },'json');

            }

        }

        return false;

    });

    current_fs = jQuery('fieldset').filter(':visible');

    console.log('here', current_fs);
});

function ms_go_slide(slide,direction) {

    if(animating) return false;
    animating = true;

    var fs = jQuery('fieldset').filter(':visible');
    next_fs = jQuery('fieldset.section'+slide);

    ms_set_height(next_fs);

    //show the next fieldset

    next_fs.css({'left':((direction == 'ltr')? '-100%':'100%'),'top':0});
    next_fs.show(); 

    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {

            if (direction == 'ltr') {
                var a = (100 * now).toString() + '%';
                var b = '-'+(100 * (1 - now)).toString() + '%';
                current_fs.css({'left':b});
                next_fs.css({'left':a});
            } else {
                var a = '-'+(100 * now).toString() + '%';
                var b = (100 * (1 - now)).toString() + '%';
                current_fs.css({'left':b});
                next_fs.css({'left':a});
            }
            opacity = 1 - now;

            next_fs.css({'opacity':opacity});

        }, 
        duration: 800, 
        complete: function(){

            current_fs.hide();
            current_fs.attr('style','');
            current_fs = next_fs;
            console.log('setting:214', current_fs);
            current_fs.attr('style','');
            current_fs.show();

            animating = false;
        }
    });

}

function ms_go_next() {

    if (animating) return false;

    var fs = jQuery('fieldset.section'+section);
    next_fs = fs.next();

    var tested = ms_test_current_section();

    if (!tested && !next_fs.is('.section_success')) {

        section++;
        //activate next step on progressbar using the index of next_fs
        jQuery("#progressbar li").eq(jQuery("fieldset").index(next_fs)).addClass("active");
        ms_go_slide(section, 'ltr');

    }

}

jQuery('#msform li').click(() => {ms_go_slide(this.slide)});

jQuery(".next").click(ms_go_next);

jQuery(".previous").click(function(){

    if (animating) return false;

    current_fs = jQuery(this).closest('fieldset');
    console.log('setting:250',current_fs);

    previous_fs = current_fs.prev();

    //de-activate current step on progressbar
    jQuery("#progressbar li").eq(jQuery("fieldset").index(current_fs)).removeClass("active");

    section--;

    ms_clear_errors();
    ms_go_slide(section, 'rtl');

});

CSS

.gridcontent, #msform{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

/*homepage*/
.getleads_homepage {
    background: url(blue.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0;
    margin: 32px 0;
    color:#FFFFFF;
}

.getleads_homepage h1{
    text-align: center;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 2.4rem;
    line-height: 2.8rem;
}

.getleads_homepage h5{
    font-size: 1.05rem;
    line-height: 1.4rem;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
}

.getleads_checkbox { height: 30px; clear: both; }
.getleads_checkbox label { float: left !important; }

p.warning > label { color: red;}


/*stand alone form*/
.getleads_page {
    margin: 0 auto;
    color: #067398;
}

.gridcontent {
    margin: 0 auto 0;
    text-align: left;
    padding: 40px 0 20px 0;
}

/*form styles*/
#msform { position: relative; max-width:400px; overflow: hidden;text-align: center;margin: 0 auto;}

/*paragraphs*/
#msform p {margin:4px 0;padding:0;text-align: left; line-height: 1.3em;color: #067398;}
.getleads_homepage #msform p{color: #FFFFFF;}
#msform p.warning {color:red;}
#msform p.warning input, #msform p.warning select, #msform p.warning textarea  { border-color: red; }
#msform p.loading { background-image: url('805.gif'); width: 100%; height: 64px; display: block; background-position: center center; background-repeat: no-repeat; }

/*fieldsets*/
#msform div.fieldsets { width: 100%; position: relative; overflow: hidden;  -webkit-transition: height 1s; /* Safari prior 6.1 */ transition: height 1s;}
#msform div.fieldsets fieldset { width: 100%; display: none; position: absolute;  border: none; float: left; padding: 1px 0 50px 0;}
.buttons { height: 50px; }

h2.section_success_title {color:#FFF;}

/*inputs*/

#msform input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#msform span.select {
    position: relative !important;
    display: block !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
}
#msform input[type=text], #msform input[type=tel], #msform input[type=email], #msform select, #msform textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 3px 0 10px 0;
    width: 100%;
    box-sizing: border-box;
    color: #2C3E50;
    font-size: 16px;
}

#msform input[type=range] {
    background: none;
    border:none;
    padding:0;
}

#msform select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white;
    margin-right:6px;
}

#msform select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

#msform input[type="checkbox"] {display:none;}
#msform input[type="checkbox"] + label::before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#msform input[type="checkbox"].required+ label::before {border-color: #067398;}

#msform p.warning input[type="checkbox"] + label::before {border-color: red;}

#msform input[type="checkbox"]:checked+label::before {
    box-shadow: inset 0px 0px 0px 3px #fff;
    background-color: #067398;
}

/* arrows */
#msform select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

/*range*/
#msform input[type=range] {
    -webkit-appearance: none;
    -webkit-transition: .2s;
    width: 100%;
    height: 18px;
    background-color: transparent;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    cursor: pointer;
    margin:0;
    padding:0;
}

#msform input[type=range]:hover, #msform input[type=range]:focus, #msform input[type=range]:active {
    opacity: 1;
}

#msform input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ccc;
}

#msform input[type=range]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #067398;
    border: 1px solid #FFF;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px;

}

#msform input[type=range]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
}

#msform input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #067398;
    border: 1px solid #FFF;
    margin-top: 0;
}

#msform input[type=range]::-ms-track {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
}

#msform input[type=range]::-ms-fill-upper {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
}

#msform input[type=range]::-ms-fill-lower {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
}

#msform input[type=range]::-ms-thumb {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #067398;
    margin-top: 0;
}

/*required border*/
#msform .required {
    border: 1px solid #067398;
}

/*buttons*/
#msform .action-button {
    width: 100px;
    background: #067398;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0;
    bottom: 40px; 
}
#msform .action-button:hover, #msform .action-button:focus {
    background: #09233a;
}
#msform .next, #msform .submit {position:absolute;right:0;}
#msform .previous {position:absolute; left:0;}

/*progressbar*/
#progressbar {
    margin: 15px 0 15px 0;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    line-height: 30px;
}
#progressbar li {
    list-style-type: none;
    color: white;
    font-size: 16px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    font-weight: 600;
    width: 30px;
    line-height: 30px;
    display: block;
    color: #067398;
    background: #ccc;
    border-radius: 15px;
    margin: 0 auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 70%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: -50%;
    margin: 0 15px;
    top: 14px;
}
#progressbar li.active:first-child:after {
    /*connector not needed before the first step*/
    content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #067398;
    color: white;
}

/*cell phone*/
@media only screen and (max-width: 800px) {
    .getleads_homepage {
        display: block;
        padding: 20px;
    }
    .getleads_page {
    border: 3px solid #d9d9d9;
    border-radius: 15px;
    }
    #msform fieldset {
       padding: 5px 10px 50px 10px;
       box-sizing: border-box;
        border-radius: 10px;
       width: 100%;
    }
    .gridcontent {
    padding: 20px;
    }
    .gridcontent h1{
        font-size: 1.8rem;
        line-height: 2rem;
    }
}

/*
    Submitting Animation
*/
.working_loading {

    font: 300 4em/150% Impact;
    color: rgba(6, 115, 152, 1);
    text-align: right;
    position: relative;
    left: calc(100% - 30px);
    bottom: 18px;

}

.buttons_working { display: none; }

.working_loading:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
    color: rgba(6, 115, 152, 1);
}


@keyframes dots {
    0%, 20% {
        color: rgba(6, 115, 152, 0);
        text-shadow:
            -.25em 0 0 rgba(6, 115, 152, 0),
            -.5em 0 0 rgba(6, 115, 152, 0);
    }
    40% {
        color: rgba(6, 115, 152, 0);
        text-shadow:
            -.25em 0 0 rgba(6, 115, 152, 0),
            -.5em 0 0 rgba(6, 115, 152, 1);
    }
    60% {
        color: rgba(6, 115, 152, 0);
        text-shadow:
            -.25em 0 0 rgba(6, 115, 152, 1),
            -.5em 0 0 rgba(6, 115, 152, 1);
    }
    80%, 100% {
        color: rgba(6, 115, 152, 1);
        text-shadow:
            -.25em 0 0 rgba(6, 115, 152, 1),
            -.5em 0 0 rgba(6, 115, 152, 1);
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...