1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with adding gif to launch on 'submit'

Discussion in 'PHP' started by chrisj, Aug 3, 2018.

  1. #1
    I'd like to add a 'gif to launch upon submit, so the submitter knows something is happening until the page redirects. Can you help me add some code to do that? I believe the 'submit button is on line 90. Thanks.

    <div class="wo_about_wrapper_parent">
        <div class="wo_about_wrapper">
            <div class="hero hero-overlay" style="background-color: #d84c47;">
                <div class="container">
                    <h1 class="text-center">{{LANG upload_new_video}}</h1>
                </div>
            </div>
            <svg id="wave" viewBox="0 0 100 15"><path fill="#d84c47" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path><path fill="#d84c47" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path></svg>
        </div>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-8 pt_page_margin">
        <div class="content pt_shadow">
            <div class="col-md-12 pt_upload_vdo">
                <?php if ($pt->user->admin == 1) { ?>
                    <div class="alert alert-warning">
                        <h4>Just admins can see this message</h4>
                        <p>Note: Your server max upload size is: <?php echo ini_get('upload_max_filesize')?>, means you can't upload files that are larger than: <?php echo ini_get('upload_max_filesize')?><br><br> If you want to increase the limit or If you can't upload large files, go to Admin Settings > Settings > Site Settings > Max upload size and increase the value, if you still can't upload large files, please contact your host provider and let them increase the upload limit and max_execution_time.</p>
                    </div>
                <?php } ?>
                <div class="upload" onclick="PT_OpenUploadForm();" data-block="video-drop-zone">
                    <div>
                        <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-upload"><path d="M14,13V17H10V13H7L12,8L17,13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" /></svg>
                        <h4>{{LANG darg_drop_video}}</h4>
                        <p>{{LANG or}} {{LANG click_2choose_file}}</p>
                        <button class="btn btn-main">{{LANG upload}}</button>
                    </div>
                </div>
                <div class="progress hidden">
                    <span class="percent">0%</span>
                    <div class="progress_bar_parent">
                        <div class="bar upload-progress-bar progress-bar active"></div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-center pt_prcs_vdo"></div>
                </div>
           
                <form action="" method="POST" id="upload-video" class="hidden">
                    <input type="file" name="video" accept="video/*" class="upload-video-file">
                </form>
        
                <div class="col-md-12 hidden" id="upload-form">
                    <form action="" class="form-horizontal setting-panel pt_forms" method="POST">
                        <div class="form-group">
                            <label class="col-md-12" for="title">{{LANG video_title}}</label> 
                            <div class="col-md-12">
                                <input id="title" name="title" type="text" placeholder="" class="form-control input-md">
                                <span class="help-block">{{LANG video_title_help}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-12" for="description">{{LANG video_descritpion}}</label> 
                            <div class="col-md-12">
                                <textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-12" for="category_id">{{LANG category}}</label> 
                            <div class="col-md-12">
                                <select name="category_id" id="category_id" class="form-control">
                                    <?php foreach($pt->categories as $key => $category) {?>
                                    <option value="<?php echo $key?>"><?php echo $category?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-12" for="tags">{{LANG tags}}</label> 
                            <div class="col-md-12">
                                <input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">
                                <span class="help-block">{{LANG tags_help}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label> 
                            <div class="col-md-12">
                                <div class="upload-product-image pull-left" onclick="document.getElementById('thumbnail').click(); return false">
                                    <div class="upload-image-content">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                                    </div>
                                </div>
                                <div style="overflow-x: auto;width: calc(100% - 112px);">
                                    <div id="productimage-holder"></div>
                                </div>
                                <input id="thumbnail" name="thumbnail" type="file" class="hidden" accept="image/*">
                                <span class="help-block">jpg, png, gif</span>
                            </div>
                        </div>
                        <div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">
                            <button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>
                        </div>
                        <input type="hidden" name="video-location" id="video-location" value="">
                    </form>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="col-md-2"></div>
    <script>
    $(document).ready(function() {
        $("#thumbnail").on('change', function() {
        //Get count of selected files
        var product_countFiles = $(this)[0].files.length;
        var product_imgPath = $(this)[0].value;
        var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
        var product_image_holder = $("#productimage-holder");
        product_image_holder.empty();
        if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
            //loop for each file selected for uploaded.
            for (var i = 0; i < product_countFiles; i++)
            {
                var product_reader = new FileReader();
                product_reader.onload = function(e) {
                    $("<img />", {
                        "src": e.target.result,
                        "class": "thumb-image"
                      }).appendTo(product_image_holder);
                    }
                    product_image_holder.show();
                    product_reader.readAsDataURL($(this)[0].files[i]);
                  }
                } else {
                  product_image_holder.html("<p>This browser does not support FileReader.</p>");
                }
             }
        });
    });
    
    $(function () {
        $("#mySingleFieldTags").tagit({
            allowSpaces: true
        });
        var bar         = $('.bar');
       var percent     = $('.percent');
       var prcsvdo        = $('.pt_prcs_vdo');
       var is_uploaded = false;
    
       var video_drop_block = $("[data-block='video-drop-zone']");
    
       if (typeof(window.FileReader)){
          video_drop_block[0].ondragover = function() {
             video_drop_block.addClass('hover');
             return false;
          };
             
          video_drop_block[0].ondragleave = function() {
             video_drop_block.removeClass('hover');
             return false;
          };
    
          video_drop_block[0].ondrop = function(event) {
             event.preventDefault();
             video_drop_block.removeClass('hover');
             var file = event.dataTransfer.files;
             $('#upload-video').find('input').prop('files', file);
          };
       }
    
        $('#upload-video').submit(function(event) {
          let file_size = $(".upload-video-file").prop('files')[0].size;
          if (file_size > "{{CONFIG max_upload}}") {
             swal({
                title: '{{LANG error}}',
                text:  "{{LANG file_is_too_big}} <?php echo pt_size_format($pt->config->max_upload); ?>",
                type: 'error',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'OK',
                buttonsStyling: true,
                confirmButtonClass: 'btn btn-success',
             }).then(function(){
                swal.close();
                $('.upload-video-file').val('');
             },
             function() {
                swal.close();
                $('.upload-video-file').val('');
             });
             return false;
          }
          else{
             var filename = $('.upload').val().split('\\').pop();
             $('#title').val(filename);
             $('#upload-form').removeClass('hidden');
             $('.upload').addClass('hidden');
          }
       });
    
       $('#upload-video').ajaxForm({
            url: '{{LINK aj/upload-video}}?hash=' + $('.main_session').val(),
           dataType:'json',
            beforeSend: function() {
                   $('.progress').removeClass('hidden');
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                 if(percentComplete > 50) {
                    percent.addClass('white');
                 }
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
    
                if (percentComplete == 100) {
                   prcsvdo.html('<svg width="30" height="10" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#000"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg> {{LANG porcessing_video}}');
                   $('.progress').find('.bar').removeClass('upload-progress-bar');
                }
            },
            success: function(data) {
                   percentVal = '0%';
                   bar.width(percentVal);
                $('.progress').addClass('hidden');
                if (data.status == 200) {
                    $('#video-location').val(data.file_path);
                    Snackbar.show({text: '<i class="fa fa-check"></i> ' + data.file_name + ' {{LANG successfully_uplaoded}}'});
                    $('#submit-btn').attr('disabled', false);
                    $('.upload-video-file').val('');
                    $('#title').val(data.file_name);
                }
                else if(data.status == 401){
                   swal({
                      title: '{{LANG oops}}!',
                      text: "{{LANG upload_limit_reached}}!",
                      type: 'info',
                      showCancelButton: true,
                      confirmButtonColor: '#3085d6',
                      cancelButtonColor: '#d33',
                      confirmButtonText: '{{LANG upgrade_now}}',
                      cancelButtonText: '{{LANG cancel}}',
                      confirmButtonClass: 'btn btn-success margin-right',
                      cancelButtonClass: 'btn',
                      buttonsStyling: false
                   }).then(function(){
                      //Go pro
                      window.location.href = '{{LINK go_pro}}';
                   },
                   function() {
                      window.location.href = '{{LINK }}';
                   });
                }
                else if(data.status == 402){
                   swal({
                      title: '{{LANG error}}',
                      text: data.message,
                      type: 'error',
                      confirmButtonColor: '#3085d6',
                      cancelButtonColor: '#d33',
                      confirmButtonText: 'OK',
                      buttonsStyling: true,
                      confirmButtonClass: 'btn btn-success',
                   }).then(function(){
                      swal.close();
                      $('.upload-video-file').val('');
                   },
                   function() {
                      swal.close();
                      $('.upload-video-file').val('');
                   });
                }
                else {
                    Snackbar.show({showAction: false,backgroundColor: '#e22e40',text: '<div>'+ data.error +'</div>'});
                }
            }
        });
    
        $('#upload-form form').ajaxForm({
            url: '{{LINK aj/submit-video}}?hash=' + $('.main_session').val(),
            beforeSend: function() {
                $('#submit-btn').attr('disabled', true);
                $('#submit-btn').val("{{LANG please_wait}}");
            },
            success: function(data) {
                if (data.status == 200) {
                    window.location.href = data.link;
                }
             else if(data.status == 402){
                swal({
                   title: '{{LANG error}}',
                   text: data.message,
                   type: 'error',
                   confirmButtonColor: '#3085d6',
                   cancelButtonColor: '#d33',
                   confirmButtonText: 'OK',
                   buttonsStyling: true,
                   confirmButtonClass: 'btn btn-success',
                }).then(function(){
                   window.location.href = '{{LINK upload-video}}';
                },
                function() {
                   window.location.href = '{{LINK }}';
                });
             }
             else {
                    $('#submit-btn').attr('disabled', false);
                    $('#submit-btn').val('{{LANG publish}}');
                    Snackbar.show({text: '<div>'+ data.message +'</div>'});
                }
            }
        });
    
        $('.upload-video-file').on('change', function() {
           $('#upload-video').submit();
        });
    });
    
    function PT_OpenUploadForm() {
        $('#upload-video').find('input').trigger('click');
    }
    </script>
    <style>.upload-s3-progressing{background: #4c9dd3;}</style>
    PHP:

    SEMrush
     
    chrisj, Aug 3, 2018 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    25,403
    Likes Received:
    3,500
    Best Answers:
    101
    Trophy Points:
    665
    #2
    The approach would be more that you'd load an in-between page or that the results would be loaded via ajax once processed.

    I'd be more interested in why it's so slow you need to add a gimmick - are they uploading files?

    You could always submit the form via jquery and then it's got a handy little function that runs when any jquery process is running and you could use that to trigger the gif
     
    sarahk, Aug 3, 2018 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    602
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your reply.
    Just want to add in the gif. The page isn't necessarily slow. Any specific help will be welcomed
     
    chrisj, Aug 3, 2018 IP
  4. NetStar

    NetStar Notable Member

    Messages:
    2,332
    Likes Received:
    488
    Best Answers:
    21
    Trophy Points:
    215
    #4
    This has nothing to do with PHP...
     
    NetStar, Aug 5, 2018 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    602
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks for your reply.
    If not PHP, what?
     
    chrisj, Aug 5, 2018 IP
  6. NetStar

    NetStar Notable Member

    Messages:
    2,332
    Likes Received:
    488
    Best Answers:
    21
    Trophy Points:
    215
    #6
    What? This is the PHP forum. For PHP questions. Your question is in the realm of HTML/JavaScript...
     
    NetStar, Aug 6, 2018 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,051
    Likes Received:
    1,674
    Best Answers:
    236
    Trophy Points:
    515
    #7
    That could be explained by the lack of proper semantics, endless pointless DIV for nothing, endless pointless classes for nothing, static scripttardery in the markup, clearing div like it's still 2003, lack of graceful degradation... the hallmarks of the mental enfeeblement that is bootcrap and jQuery.... which of course also add their own bloat on top of the bad practices they dupe people into using. Dimes to dollars both the client-side and server-side are having to work ten times harder than they need to here, hence the desire for some silly gimmick over something that shouldn't even take a quarter of a second and the browser should already be providing visual queues for.

    ... another case where I'd say pitch that entire mess in the trash and start over WITHOUT the nube predator scam bait frameworks.
     
    deathshadow, Aug 6, 2018 IP
    sarahk likes this.