I have a problem using both cropper and caman together.
I copied the code provided by fengyanchen, and modified it a bit for Meteor. The Caman works, but the cropper doesn't initiate.
Code:
http://codepen.io/chenfengyuan/pen/wMrVQY
HTML
<template name="Test">
{{ > index }}
<div class="container">
<h1 class="page-header">Use Cropper with CamanJS</h1>
<p id="upload">
<input id="file" type="file">
</p>
<p id="handle" style="display:none">
<button class="btn btn-primary" id="brightness">Brightness</button>
<button class="btn btn-primary" id="contrast">Contrast</button>
</p>
<p>
<canvas id="canvas" style="max-width:100%;"></canvas>
</p>
</div>
My events handler:
...(functions copied as provided in link)
Template.Test.events({
'change #file':function(event,template){
if (URL) {
var files = event.target.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
startCaman(URL.createObjectURL(file));
} else {
window.alert('Please choose an image file.');
}
}
} else {
$file.prop('disabled', true);
}
}
})
It worked when I did the following:
giving the canvas a width & height
removing var $canvas at the topmost level and replacing it with the real canvas selector everywhere
Related
I have a Vue project in which I'm displaying information about all projects hosted on a GitLab instance, e.g. name, ID, ... and most importantly, associated pipelines and their schedules.
I know how to display all projects (1 project = 1 card) and change their CSS behavior depending on their properties. For instance, the grey cards below correspond to projects with no scheduled pipelines and the blue ones have some pipelines scheduled:
Now I'd like to offer an alternative option to the user by letting them clicking a checkbox for displaying the projects with scheduled pipelines only.
On the page displaying the cards, I added the checkbox:
<template>
<input
type="checkbox"
name="showOnlyScheduled"
value="false"
id="checkbox-style"
v-model="checked"
>
Show only projects that have scheduled pipelines
<div class="row">
<div
class="col-sm-12 col-md-4 col-lg-3"
id="card-grid"
v-for="project in projects"
:key="project.id"
>
<Schedules
:projectName="project.name"
:projectId="project.id"
:projectUrl="project.web_url"
:checkBoxChecked="checked"
></Schedules>
</div>
</div>
</template>
And in the file handling card displaying:
<template>
<div>
<div
class="card card-block"
id="card-style"
:class="{ 'has-no-pipelines': !hasPipelines(), 'has-pipelines': hasPipelines(), 'disable-card': !hasPipelines() && checkBoxChecked}"
>
<div class="card-block">
<h5 class="card-title">
<a
id="title-link"
:href="projectUrl"
target="_blank"
rel="noopener noreferrer"
>{{ projectName }}</a>
</h5>
<div class="card-text">
<div v-if="this.schedules.pipelines.length > 0">
<div v-for="(pipeline,index) in schedules.pipelines" :key="index" id="schedules">
<p>
<a
:href="projectUrl + '/pipeline_schedules'"
id="link-schedules"
target="_blank"
rel="noopener noreferrer"
>Pipeline #{{ pipeline.id }}</a>
- {{ pipeline.description }}
</p>
</div>
</div>
<div v-else id="no-schedules">
<div>
<div>No scheduled pipelines yet.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Schedules",
props: {
projectName: String,
projectId: Number,
projectUrl: String,
checkBoxChecked: {
type: Boolean,
default: false
}
},
data() {
return {
schedules: {}
};
},
mounted() {
this.GitLabAPI.get(
"/projects/" + this.projectId + "/pipeline_schedules",
{},
[this.schedules, "pipelines"]
);
},
methods: {
hasPipelines() {
if (this.schedules.pipelines.length > 0) return true;
else return false;
}
}
};
</script>
<style scoped>
.has-pipelines {
background-color: #1565c0 !important; /* blue */
}
.has-no-pipelines {
background-color: #424242 !important; /* grey */
}
.disable-card {
visibility: hidden;
display: none;
opacity: 0;
}
</style>
This code indeed makes the cards with no scheduled pipelines disappear ... but the cards do not reorganize so to be next to one another:
I guess the cards don't realign because even though I disable some CSS properties, it doesn't make the containers disappear from the DOM.
How can I make the cards realign after I made some of them disappear?
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn{
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function () {
$('#submitForm').on('click', function (e) {
e.preventDefault();
if($("#submitForm").hasClass('disabled')){
return;
}
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data = {
name: name,
phonenumber: phonenumber
};
$.ajax({
url: 'addNew',
data: data,
method: 'post',
success: function (data) {
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function () {
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
});
},
})
})
})();
</script>
First of all you should make .btn { position: static; }. So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.
<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
I have done one webcam project which will supports view live webcam images.I am using "ENTER USB 2.0" locally its working fine..when i upload it to the webserver and test with client browser..Its not working..its getting errors as "No devices Found"..is there any server settings to detect the webcams?..
How can we detect any type of webcams in asp.net..?Or is there any activeX plug-ins for detecting the webcam on client browsers..
Its very important to me..please share with me..if you have any ideas?
thanks in advance..
I used jpegcam once to upload photo from webcam. Hope this helps. Basic code is like (using jquery):
<script type="text/javascript" src="<path to webcam.js (inside jpegcam)>"></script>
<script type="text/javascript">
$(function () {
webcam.set_swf_url('path to webcam.swf(inside jpegcam)');
webcam.set_api_url(document.URL);
webcam.set_quality(90); // JPEG quality (1 - 100)
webcam.set_shutter_sound(false);
$("#imgWrapper").css({ height: "262px",
width: "215px",
border: "solid 1px #aaa"
});
var pb = $("#tp");
pb.addClass("spbtn");
pb.click(function () {
$("#fc").html(webcam.get_html(215, 262));
viewCam(true);
});
});
function viewCam(show) {
if (show) {
$("#sc").hide();
$("#iUploadFrame").fadeIn();
}
else {
$("#iUploadFrame").hide();
$("#sc").fadeIn();
}
}
function camReset() {
webcam.reset();
setCamInstruction("Adjust, snap, then upload", "#666");
}
function setCamInstruction(msg, c) {
$("#upStatus").html(msg).css("color", c);
}
function handleUpload() {
var gi = $("#ghimg");
gi.css("visibility", "visible")
webcam.upload(document.URL, function () {
gi.css("visibility", "hidden")
setCamInstruction("Upload complete!", "green");
});
}
</script>
html:
<div id="sc" style="width: 218px">
<div id="imgWrapper">
<img src="<path to a placeholder image>" alt="no photo" id="imgPhoto"
runat="server" height="262" width="215" />
</div>
<br />
<div style="text-align: center">
<span id="tp">Open Webcam</span>
</div>
<br />
</div>
<div id="iUploadFrame" style="display: none;">
<div id="fc">
-- Cam Content --
</div>
<div id="upStatus" style="padding: 5px 0; color: #666;">
Adjust, snap, then upload</div>
<input type="button" value="Snap" onclick="webcam.freeze()" />
<input type="button" value="Reset" onclick="camReset();" />
<input type="button" value="Upload" onclick="handleUpload()" />
<div class="progress_beside_inline" id="ghimg">
</div>
</div>