Home/ Questions/Q 6631477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:33:05+00:00

I set up a simple form to upload files using KendoUI, and looks and

  • 0

I set up a simple form to upload files using KendoUI, and looks and works great on my dev machine (OSX Apache), but uploaded to my server (Linux Apache) it looks bad as you can see in the images. I tested with same results in both firefox and chrome, and both are fine from local copy and bad from remote. I have tripple checked that all the files are the same on both local and remote servers.

nice on dev machine vs borked after upload

My code is as follows…

<!doctype html>
<html>
  <head>
    <title>Test | Animation Tool</title>
    <link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/>
    <link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/>
    <script src="./jquery.js"></script>

    <script src="./kendo/js/kendo.all.min.js"></script>

    <style type="text/css">
      body{
        background-Color: #f78049;
        background-image: url(stripe.png);
        background-repeat: repeat-y;
        margin:0;padding:0;
        font-family:sans-serif;
      }
      #sidebar{
        background-Color: #f78049;
        border: 3px solid #ef652a;
        margin:0;padding:0;
        width: 300px;
        float: left;
        height: 900px;
      }
      .step{
        border-top: 3px solid #ef652a;
      }
      .step p.first{
        display: inline;
      }
      .step-id{
        background-color: #ef652a;
        -moz-border-radius: 7px;
        font-size: 30px;
        margin: .2em .2em .2em 0;
        padding: .1em .2em;
      }
      .t-button{
        margin: 0 37px 0 37px;
        width:203px;
        top: 10px;
      }
      button.t-button{
        margin: .2em 37px .2em 37px;
        width:220px;
      }
      .t-upload-files{
        margin: 0.2em 2.6em 1em;
      }
      #main{
        float:left;
      }
      h1, h2{
        margin:0;padding:0 0 0.3em;
        text-align:center;
        color:#ffd;
      }
      #phone,#anim{
        width:401px;
        height:875px;
        background-image:url(phone.png);
        position: absolute;
        top:10px;
        left:350px;
      }
      #anim{
        background-image:url("files/spec.png");
        background-position:0 0;
        background-repeat:no-repeat;
        height:480px;
        left:391px;
        top:144px;
        width:320px;
      }
      a img{
        border:none;
      }
    </style>
      <script type="text/javascript">
        $(function(){

          var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150};

          var addTestFile = function(filename){
            $('#test-files').append(
              $('<button />').addClass('t-button custom').html(filename).click(function(){
                $anim = $('#anim').css({backgroundImage:'url("files/'+filename+'")'})
                  var loop = function(){
                    $anim.css({backgroundPosition:"0 0"}).animate({borderWidth:0},150,function(){
                      $anim.css({backgroundPosition:"-320px 0"}).animate({borderWidth:0},150,function(){
                        $anim.css({backgroundPosition:"-640px 0"}).animate({borderWidth:0},150,function(){
                          $anim.css({backgroundPosition:"-960px 0"}).animate({backgroundPosition:"-640px 0"},250,function(){

                          })
                        })
                      })
                    })
                  }
                  clearInterval(x.timer)
                  x.timer = setInterval(function(){
                  loop()
                  }, 950)
              })
            )
          }

          $.get('files.php',function(d){
            $.each(d, function(i,file){
              addTestFile(file)
            })
          })

          $("#files").kendoUpload({
            async: {
              saveUrl: "./save.php",
              // removeUrl: "./remove.php",
              autoUpload: true
            },
            showFileList: true,
            success: function(e){

              $('.t-file').last().siblings().remove()

              var filename = e.files[0].name.replace(/\s/g,'-')

              $('#test-files button').filter(function(){
                return $(this).text() == filename
              }).remove()

              addTestFile(filename)

              console.log('uploaded' + e.files[0].name);
              //              return true;
            },
            error: function(e){
              console.log("Error (" + e.operation + ")");
              e.preventDefault(); // Suppress error message
            }

          });
        });
      </script>
  </head>
  <body>
    <div id="sidebar">
      <h2>Animation Tool</h2>

      <div id='one' class='step'>
        <span class='step-id'>1</span>
        <p class="first">Get the specification image</p>
        <p><a href="getspec.php" class='t-button'>Download image...</a></p>
      </div>

      <div id='two' class='step'>
        <span class='step-id'>2</span>
        <p class="first">Edit the downloaded image file</p>

      </div>

      <div id='three' class='step'>
        <span class='step-id'>3</span>
        <p class="first">Upload your edited file</p>
        <input name="files" id="files" type="file" />
      </div>

      <div id='two' class='step'>
        <span class='step-id'>4</span>
        <p class='first'>Test you animation</p>
        <span id='test-files'></span>
      </div>

    </div>
    <div id="main">
      <div id="anim"></div>
      <div id="phone"></div>
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My guess is one of the css files is not getting pulled in. I created a fiddle here where I left out the kendo.common.min.css and the result is not exactly the same as yours, but too darn close.

    http://jsfiddle.net/B4dWB/

    Check your css references and make sure they are all correct and loaded in.

    • 0