I tried $localstorage to store the file path locally and preview the file using iframe but I am getting error.
$scope.getResume = function() {
var resumeJson = {
"json":{
"request":{
"candidateid":$rootScope.globals.currentUser.userId,
"type":2
}
}
};
var getresume = "http://MyServerURL?request=" + JSON.stringify(resumeJson);
$scope.resume = $localStorage.$default({x: getresume});
}
HTML:
<iframe id="resume" src="{{resume.x}}" style="margin-top: 2em; height: 100%; width: 100%;"></iframe>
But I am getting error and its showing error message inside frame as:
Cannot GET /%7B%22json%22:%7B%22request%22:%7B%22candidateid%22:44,%22type%22:2%7D%7D%7D
When I tried to inspect the page I found iframe src = "{"json":{"request":{"candidateid":44,"type":2}}}" instead of my URL.
Look, I've wrote a Plunker for you. It's 100% working solution to dynamically set iFrame src.
https://plnkr.co/edit/tpl:CR2TtS1zz9wFGgsl5z2c?p=preview
Maybe you should just change src to ng-src.
<iFrame ng-src="{{mc.resume}}"></iFrame>
Related
I am working on a mandala art generator, and want to repeat the same free-drawing path at different angles.
On mouse:move, able to render it on the upper canvas. After mouse:up, it doesn't retain on lower canvas, read tried a few methods from here and on GitHub issues but none worked.
Got one possible solution, cloning the path and adding it to canvas, it's working with vanilla JS, but in react, it just modifies the existing path :(
Any help?
JavaScript solution, Fiddle (by Curtis Rock).
React solution I tried using the fiddle, Replit
var canvas = window._canvas = new fabric.Canvas('c');
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
canvas.isDrawingMode = true;
canvas.on({
'path:created': pathHandler
});
function pathHandler(opt) {
var path = opt.path;
path.clone(function(clone) {
canvas.add(clone.set({
left: path.left + 10,
top: path.top + 10,
angle: 90
}));
});
canvas.requestRenderAll();
}
canvas {
border: 1px solid #999;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
Need to add an iframe into the fotorama gallery.
Tab image can be fixed.
Src should be a parameter to pass in.
Note this is on Magento 2.0
First get access to the dom element and the api object.
// Get the Dom Element.
var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
// Get the API object.
var fotorama = $fotorama.data('fotorama');
Listen for the fotorama:load event and replace the contents with an iframe.
// On load handler for fotorama.
$fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
if (extra.frame.type === 'iframe') {
// Replace the contents with the iframe.
extra.frame.$stageFrame.html('<iframe type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
}
});
Next up you can push new data for an iframe in like this.
fotorama.push({ img: 'iframe.png', thumb: 'iframe.png', 'src': 'http://someurlforiframe', type: 'iframe' });
Note: You want to have iframe.png or some other image that is thumbnailed sized ready to load in.
I used an 80x80 one.
I was able to successfully embed 3dvieweronline into the gallery using this code from a template in a custom module with working full screen functionality.
I am completely new to angular js and am trying to build a google map widget in Service Portal within ServiceNow that dynamically shows the user's job location. I have a server script that pulls and formats the location:
var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}
loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");
data.src = loc2;
And my HTML looks like this:
<div class = "map-container">
<iframe ng-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>
</div>
The iframe and {{data.src}} do not work together. If I take away the iframe portion of the code and replace it with {{data.src}}, the address loads correctly. Also, if I replace {{data.src}} with a real address (i.e. washington+dc), the map shows Washington DC correctly.
Can someone help me troubleshoot this issue?
Thanks!
You can have a function defined in the controller and pass the url to it,
routerApp.controller('AppCtrl', ['$scope','$sce', function($scope,$sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
HTML
<iframe ng-src="{{trustSrc(https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}})}}'></iframe>
demo
This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}
I've just started learning AngularJS and I'm approaching directives. I'd need to create a directive named f.e. "thumbnail" which takes as input a "src" (the image) and create a thumbnail of it.
So far I've coded the javascript function to create the thumbnail which does its job correctly:
function readURL(input) {
var imageSize = 50;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var blah = $('#myimage');
blah.attr('src', e.target.result);
var height = blah.height();
var width = blah.width();
if (height < imageSize && width < imageSize) {
if (width > height) {
blah.width(imageSize);
}
else {
blah.height(imageSize)
}
}
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body onload="readURL(this);">
<img id="myimage" src="../picture.gif" width="50" alt="your image" />
However I have not been able to find a simple example which produces (in AngularJS) an Element, based on a JS function. Any help ?
Thanks!
It depends on what you want to achieve. If your purpose of creating a thumbnail at client-side is to:
Upload in a smaller size in a web application: perhaps you can make use of a library like http://www.plupload.com.
Display only: you should just use CSS resizing with width and height properties.
<img src="/original/320x320.jpg" style="width: 100px; height: 100px">
Reading/storing in an Ionic/PhoneGap app: try make use of angular-thumbnail (disclaimer: I wrote it)
Doing image manipulation of this kind on the client side is not a very good idea , because, as of now there isn't a good support for Filereader in IE.
You can delegate this either to server(you will find lot of node module for image manipulation) or you can use external services like cloudinay