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.
vs
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>
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.
The easiest way to validate everything is loading correctly is to use your browser developer tools (Firebug in Firefox, Developer Tools in Chrome/Safari).
On the network tab, you should be able to see if the Kendo UI CSS and JavaScript files are being properly loaded from your remote server. (This is also a good time to make sure you're not seeing a cached version of your page/resources. That's always an easy browser debugging gotcha.)
In general, since Kendo UI runs in the browser, your hosting environment and web server should have no impact. As long as the files reach the browser, the rendering and behavior should function properly.
Related
The HTML sidebar get user input and save it in sheet:
with sheet's owner, it works fine (the data from sidebar are
correctly saved in the sheet)
with others sheet editors the data from sidebar is NOT been saved in the sheet.
Owner and users at same domain
Apps Script Dashboard shows NO error
I would be very grateful for any help on how I can fix this issue.
SIDEBAR SOURCE:
<!DOCTYPE html>
<html>
<!-- Style should be in the head -->
<style>
.info {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 14px;
font-weight: bold;
}
.msg {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 13px;
}
.container,
.buttons {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 13px;
}
</style>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="msg">
<p align="justify">Marque todos os motivos que levaram ao indeferimento do requerimento</p>
</div>
<div class="info">
<p id="stdname"></p>
<p id="stamp"></p>
<p id="applied"></p>
<p id="eRange"></p>
</div>
<div class="container">
<?!=rngValid?>
</div>
<div class="buttons">
<p>
<button class="action" id="action" onclick="saveReasons();">Salvar motivos</button>
</p>
<br>
</div>
<!-- These should be in the head. They should be there prior to page loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script>
var stamp = <?= stamp ?>;
var to = <?= to ?>;
var subject = <?= subject ?>;
var stdName = <?= stdName ?>;
var apply = <?= apply ?>;
var eRange = <?= eRange ?>;
document.getElementById("stdname").innerHTML = stdName;
document.getElementById("stamp").innerHTML = stamp;
document.getElementById("applied").innerHTML = apply;
document.getElementById("eRange").innerHTML = eRange;
function saveReasons() {
var selected = [];
//get all checkboxes
var checkboxes = document.getElementsByClassName("ui.checkbox");
console.log("checkboxes length: "+ checkboxes.length);
console.log("checkboxes: "+ checkboxes);
$("input:checkbox[name=sel]:checked").each(function() {
selected.push($(this).val());
$(this).prop( "checked", false );
})
console.log("selected: "+ selected);
console.log("eRange: "+ eRange);
google.script.run
.withFailureHandler(() => {console.log("Error running script")})
.process(selected,stdName, apply, eRange);
}
</script>
</body>
</html>
DEV TOOLS CONSOLE:
Net state changed from IDLE to BUSY 386795301-warden_bin_i18n_warden.js:67
Net state changed from BUSY to IDLE userCodeAppPanel:36
Error running script
On your client-side code there is the following
google.script.run
.withFailureHandler(() => {console.log("Error running script")})
.process(selected,stdName, apply, eRange);
The problem with the above code is that it give very low help to debug the main problem.
To get a meaningful error message replace
.withFailureHandler(() => {console.log("Error running script")})
to
.withFailureHandler((error) => {console.log('%s, %s',error.message, error.stack)})
I have a fiddle that changes the contrast and brightness of an image.
When I try and add it as a .vue component onto my site the slider no longer effects the image. I know the issue is around my filter function. I just can't understand why my :style attribute isn't applying the change to me element.
What am I doing wrong/not getting?
fiddle that works - https://jsfiddle.net/BBMAN/fxtrtqpj/14/
code for my .vue component that does not work.
<template>
<div class="brightness-slider container">
<h1>{{ msg }}</h1>
<h2>Built using Vue.js</h2>
<div class="row">
<div class="col-md-10">
<img ref="img" class="img img-responsive" :style="filters" />
</div>
<div class="col-md-2">
<strong>Contrast ({{contrast}})</strong>
<input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
<strong>Brightness ({{brightness}})</strong>
</h4>
<input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImageBrightnessSlider',
data() {
return {
//sending data to view.
msg: 'Audience Republic Brightness Modifier',
brightness: 1,
contrast: 1
}
},computed: {
filters() {
const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
debugger;
return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
}
},
mounted() {
this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
input[type=range][orient=vertical]{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 3px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
"fiddle that works" = incorrect
you are trying to shove HTML CSS JavaScript into Javascript!!!
interpreter Javascript does not understand HTML CSS!
you code must be something like this
index.html
<div id="App">
<!-- HTML code -->
</div>
<script>
// js code
</script>
<style scoped>
/* css code */
</style>
you have many mistakes, please see official documentation
also, you can see my vue examples
UPDATED:
SFC example
I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.
I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable.
I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.
Here is the code I'm using:
FLEXSLIDER HTML
<div class="slider">
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
<ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">
<li style="float: left; display: block; width: 940px; ">
<img src="image1.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image2.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image3.jpg">
</ul>
</div>
FLEXSLIDER SCRIPT IN HTML HEAD
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
start: function(slider) {
slider.removeClass('loading');}
});
});
</script>
FLEXSLIDER.CSS
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
Any help is appreciated!
Instead of using the slider object from flexslider, try just making the slider element itself a jQuery object.
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
var target_flexslider = $('.flexslider');
target_flexslider.flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider",
start: function(slider) {
target_flexslider.removeClass('loading');
}
});
});
</script>
I tried for many time and for me it worked like this:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
And on flexslider.css
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}
Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like
<div class="flexslider loading">
I managed to get it working using the callback "before" instead of "start".
So the JS bit would be:
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
before: function(slider) {
slider.removeClass('loading');
}
});
});
</script>
Try adding for each li 'style="display: none;"', except the first li. It should work.
I was struggling with this too, and the answer is really simple in fact. The only thing that is wrong in your code is this:
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
And in your css you define for loading the class .loading
So you must change the clas for that div. Like this:
<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">
I have been fighting with getting the Dijit.form.DateTextBox working inside of a div. I have found that if I apply the "claro" class to the body tag that it will work just fine. Although, I don't want the claro class overwriting my other styles. Also, I don't have access to my body tag on all of my pages due to MVC.
Here is what I have:
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.layout.ContentPane");
</script>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
</head>
<body>
<table>
<tr>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date1" id="date1" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date2" id="date2" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
</tr>
</table>
</body>
</html>
Just had him implement the Calendar feature that comes with jQueryUI. It is much more straight forward. I see Dojo as more of an Application Framework instead of just using certain widgets for web pages.
This happens because, by default all dojo pop-ups are appended to the BODY (weird).
I found a work around. Just copy the tundra/calendar.css to calendarFix.css and remove all .tundra or .claro references from it. For example, consider this fragment:
:
.tundra .dijitCalendarDecrease {
background-position: top left;
}
.tundra .dijitCalendarIncrease {
background-position: -30px top;
}
.tundra .dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
:
to
:
.dijitCalendarDecrease {
background-position: top left;
}
.dijitCalendarIncrease {
background-position: -30px top;
}
.dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
: