Databases
StackOverflow2013
Postsdbo
PODifference in KendoUI upload dialog when hosted on live linux server vs on OSX dev machine
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifference in KendoUI upload dialog when hosted on live linux server vs on OSX dev machine
    text
    copied!<p>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.</p> <p><img src="https://i.stack.imgur.com/Sd3gA.png" alt="nice on dev machine"> vs <img src="https://i.stack.imgur.com/1PFpe.png" alt="borked after upload"></p> <p>My code is as follows...</p> <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test | Animation Tool&lt;/title&gt; &lt;link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/&gt; &lt;link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/&gt; &lt;script src="./jquery.js"&gt;&lt;/script&gt; &lt;script src="./kendo/js/kendo.all.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(function(){ var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150}; var addTestFile = function(filename){ $('#test-files').append( $('&lt;button /&gt;').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 } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="sidebar"&gt; &lt;h2&gt;Animation Tool&lt;/h2&gt; &lt;div id='one' class='step'&gt; &lt;span class='step-id'&gt;1&lt;/span&gt; &lt;p class="first"&gt;Get the specification image&lt;/p&gt; &lt;p&gt;&lt;a href="getspec.php" class='t-button'&gt;Download image...&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id='two' class='step'&gt; &lt;span class='step-id'&gt;2&lt;/span&gt; &lt;p class="first"&gt;Edit the downloaded image file&lt;/p&gt; &lt;/div&gt; &lt;div id='three' class='step'&gt; &lt;span class='step-id'&gt;3&lt;/span&gt; &lt;p class="first"&gt;Upload your edited file&lt;/p&gt; &lt;input name="files" id="files" type="file" /&gt; &lt;/div&gt; &lt;div id='two' class='step'&gt; &lt;span class='step-id'&gt;4&lt;/span&gt; &lt;p class='first'&gt;Test you animation&lt;/p&gt; &lt;span id='test-files'&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="main"&gt; &lt;div id="anim"&gt;&lt;/div&gt; &lt;div id="phone"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload