I am using one of the SaaS for lead finding. I paste their code just like I paste google analytics code on top of my page (for example):
<script type="text/javascript">
var _lfuid = 'xxxxxxxxxxxxx';
(function (d) {
var w = d.createElement('script');
w.type = 'text/javascript';
w.asynch = true;
w.src = '//widget.website.come/widget/widget.js';
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(w, s);
})(document);
</script>
However, the widgets position that I am receiving from the call, is set in the css file that I get in response. All the classes have !important tag there, so I cannot overwrite it using css classes that I've defined in my static files.
My question is: how can I overwrite this ansych css?
You need to add an Event Listener to the load of the async script and after append to the HEAD your CSS with !important rule.
Example
var _lfuid = 'xxxxxxxxxxxxx';
(function (d) {
var w = d.createElement('script');
w.type = 'text/javascript';
w.asynch = true;
w.src = '//widget.website.come/widget/widget.js';
w.addEventListener('load', function (e) {
/* We wait the load of the async script and after we use jQuery to append our CSS to the HEAD of the document.
p.s.: you need jQuery to use the dollar sing selector ($) */
$('head').append('<style> #yourCSSgoHere { display: none !important; }</style>');
}, false);
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(w, s);
})(document);
Related
I'm trying to make an app that allows you a text editor. You can type anything in to a text block. You can do two things with said text block:
a) run the text as an html page in a new about:blank tab or
b) save the text as a .html
For some reason, though, when I tried to implement the save ability, neither function would load. If I go into the JS console, it shows me this error upon clicking on the save button:
"Uncaught ReferenceError: saveAsFile is not defined (temp.html,1)"
When I seperated them into two <script> blocks, I could get the save function to work. However, when I did that, the Run in New Tab function no longer worked. It was utterly confusing.
I have used multiple functions before, and I don't know why it's suddenly not working. Can someone help? This is my code:
<script>
function run() {
var codeTab = window.open("" _blank);
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
</script>
<script>
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>
On line 3, you have window.open("" _blank);. It should be window.open("_blank");.
I also cannot see anywhere saveAs() is being called (or defined). Is it possibly being called in codeRun? See below code which worked for me.
<textarea id="code">
</textarea>
<button onclick="run();">Run</button>
<button onclick="saveAsFile();">Save</button>
<script>
function run() {
var codeTab = window.open("_blank");
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>
In my case, I have color coded some tiles in the HTML client and I want to add a simple color code key. I have the PNG file I want to use.
I do not require the ability to upload or change the image.
This link seems to achieve what I am looking for, but I am not sure where to implement. Does all of this code go into the PostRender of the Image Control I created?
Add image to lightswitch using local property and file location
Here is what the PostRender of the simple Image data item I created as an Image Local Property, and then dragged into the Solution Designer. It was basically copied from the link above, but I did change the name of the image file to match mine, and I have already added the item to the Content\Images folder structure and it shows in the file view:
myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
// Write code here.
function GetImageProperty(operation) {
var image = new Image();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.
// unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch)
// still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var url = URL.createObjectURL(this.response);
image.onload = function () {
URL.revokeObjectURL(url);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var dataURL = canvas.toDataURL("image/png");
operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
};
image.src = url;
};
xhr.open('GET', this.imageSource, true);
xhr.responseType = 'blob';
xhr.send();
};
myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
// Write code here.
msls.promiseOperation
(
$.proxy(
GetImageProperty,
{ imageSource: "content/images/Key.png" }
)
).then(
function (result) {
contentItem.screen.ImageProperty = result;
}
);
};
}
Currently, the Image control does show on the screen in the browser, and is the custom size I choose, but it is just a light blue area that does not display my image file.
I am not sure if I have embedded the image? I am not sure if that is a missing step?
Thank you!!
The easiest method of testing this approach would be to change your postRender to the following (which embeds the helper function within the postRender function):
myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
function GetImageProperty(imageSource) {
return msls.promiseOperation(
function (operation) {
var image = new Image();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.
// unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch)
// still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var url = URL.createObjectURL(this.response);
image.onload = function () {
URL.revokeObjectURL(url);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var dataURL = canvas.toDataURL("image/png");
operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
};
image.onerror = function () {
operation.error("Image load error");
};
image.src = url;
};
xhr.open('GET', imageSource, true);
xhr.responseType = 'blob';
xhr.send();
}
);
};
GetImageProperty("content/images/Key.png").then(function onComplete(result) {
contentItem.screen.ImageProperty = result;
}, function onError(error) {
msls.showMessageBox(error);
});
};
This assumes that you named the local property ImageProperty as per my original post and the Image control on your screen is named ColorKey.
In the above example, I've also taken the opportunity to slightly simplify and improve the code from my original post. It also includes a simple error handler which may flag up if there is a problem with loading the image.
If this still doesn't work, you could test the process by changing the image source file-name to content/images/user-splash-screen.png (this png file should have been added as a matter of course when you created your LightSwitch HTML project).
As the GetImageProperty function is a helper routine, rather than embedding it within the postRender you'd normally place it within a JavaScript helper module. This will allow it to be easily reused without repeating the function's code. If you don't already have such a library and you're interested in implementing one, the following post covers some of details involved in doing this:
Lightswitch HTML global JS file to pass variable
For polymer performance optimization, I am trying to use window.Polymer = window.Polymer || {dom: 'shadow'};.
In chrome, when I use it I get Uncaught SyntaxError: Unexpected token ILLEGAL polymer.html:2 which is #license:
<!--
#license
Copyright (c) 2015 The Polymer Project Authors
Here is the script that I am using to load it:
var webComponentsSupported = ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template'));
function createScript(file) {
var script = document.createElement('script');
script.async = true;
script.src = file;
document.head.appendChild(script);
}
function createLink(file) {
var link = document.createElement('link');
link.async = true;
link.href = file;
link.rel = 'import';
document.head.appendChild(link);
}
if (!webComponentsSupported) {
//not chrome
createScript('../bower_components/polymer/polymer.html');
createScript('../bower_components/webcomponentsjs/webcomponents-lite.min.js');
createLink('../css/non-chrome-shadow.html');
} else {
//chrome
window.Polymer = window.Polymer || {dom: 'shadow'};
createScript('../bower_components/polymer/polymer.html');
createLink('../css/chrome-shadow.html');
}
I'm sure I'm doing it wrong. Also, since it is in the if condition of the chrome block, couldn't I do window.Polymer = {dom: 'shadow'}; instead since it's chrome?
Basically this
createScript('../bower_components/polymer/polymer.html');
You are importing an HTML file instead of a script file. A more proper way would be like this:
createLink('../bower_components/polymer/polymer.html');
P.S.: You should also check if shadow DOM is available. 😑
i have a script that changes the current image with the selected image but i need to insert an attribute so that it targets the image tag with only that class
CODE----
<script>
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").attr(".the_pre_prev").prop("src", target.result);// tried $("img").attr("CLASS NAME").prop("src", target.result)
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
If you want to target an image with an specific class, you can simply do (assuming you're using jQuery):
$("img.the-class").attr("src", target.result)
See the jQuery class selector for reference.
I am trying to load my google map asynchronously and it works but it is loading the map in twice. If I remove "box.onload = initialize;" this stops that problem but then the infobox doesn't show...how do I fix my code so it only loads the map once AND shows the infobox.
function loadScript() {
var map = document.createElement('script');
map.type = 'text/javascript';
map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
document.body.appendChild(map);
map.onload = function() {
var box = document.createElement('script');
box.type = 'text/javascript';
box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
document.body.appendChild(box);
box.onload = initialize;
};
}
window.onload = loadScript;
The map appears twice because you're calling initialize twice.
Before fixing that, let's simplify your code a bit. Never let yourself repeat blocks of code like that; instead make it into a common function.
Also, don't load infobox.js from googlecode.com; Google Code is not a CDN. Load your own copy.
So, the code may look like this:
function addScript( url, callback ) {
var script = document.createElement( 'script' );
if( callback ) script.onload = callback;
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
}
function loadMapsAPI() {
addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}
function mapsApiReady() {
addScript( 'infobox.js', initialize );
}
window.onload = loadMapsAPI;
I created this script. You can call this and add any callback function, so you have to just include this to your scripts and call
googleMapsLoadAsync(function(){ alert('google maps loaded'); });
script
var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };
function googleMapsLoadAsync(callback) {
if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }
if(!googleMapsAsyncLoaded) {
$.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');
} else {
googleMapsAsyncLoadedFunction();
}
}
function googleMapsAsyncLoadedFunction() {
googleMapsAsyncLoaded = true;
if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {
googleMapsAsyncCallback();
}
googleMapsAsyncCallback = function(){ };
}