We're currently implementing google remarketing and have the following snippet..
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 12345;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
Sadly polymer build says no, and the CDATA comments are removed in the build process.
Is there any way to keep the comments when building?
Cheers
Related
I am using SciChart Library for showing Graphs.
I want to know, how can I use MouseWheelZoomModifier module of SciChart library in my pure HTML & CSS based website.
I know there is a documentation available related to React but I am not using it in my Website.
I have written the following Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Include SciChart.js -->
<script
src="https://cdn.jsdelivr.net/npm/scichart#2.1.2290/_wasm/scichart.browser.js"
crossorigin="anonymous"
></script>
<title>Hello, SciChart.js world!</title>
</head>
<body>
<h1>Hello, SciChart.js world!</h1>
<!-- Create the Div to host the SciChartSurface -->
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
<!-- The JavaScript to create a SciChartSurface -->
<script>
async function initSciChart() {
// In order to load data file from the CDN we need to set dataUrl
SciChart.SciChartSurface.configure({
dataUrl: `https://cdn.jsdelivr.net/npm/scichart#${SciChart.libraryVersion}/_wasm/scichart2d.data`,
wasmUrl: `https://cdn.jsdelivr.net/npm/scichart#${SciChart.libraryVersion}/_wasm/scichart2d.wasm`
});
// Create a SciChartSurface inside the div with id 'scichart-root'
const {
sciChartSurface,
wasmContext
} = await SciChart.SciChartSurface.create("scichart-root");
// Add an X and a Y Axis
const xAxis = new SciChart.NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new SciChart.NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
// Create 100 dataseries, each with 10k points
for (let seriesCount = 0; seriesCount < 100; seriesCount++) {
const xyDataSeries = new SciChart.XyDataSeries(wasmContext);
const opacity = (1 - ((seriesCount / 120))).toFixed(2);
// Populate with some data
for(let i = 0; i < 10000; i++) {
xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
}
// Add and create a line series with this data to the chart
// Create a line series
const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
dataSeries: xyDataSeries,
stroke: `rgba(176,196,222,${opacity})`,
strokeThickness:2
});
sciChartSurface.renderableSeries.add(lineSeries);
}
// BELOW ONE NOT WORKING
// Add zoom, pan behaviours to the chart. Mousewheel zoom, panning and double-click to
// zoom to fit
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
const zoomPanModifier = new ZoomPanModifier();
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
const zoomExtentsModifier = new ZoomExtentsModifier();
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
sciChartSurface.chartModifiers.add(zoomPanModifier);
sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
const inputEnablePan = document.getElementById("enable-pan");
const inputEnableZoom = document.getElementById("enable-zoom");
const inputEnableZoomToFit = document.getElementById("enable-zoom-to-fit");
const inputEnableMouseWheel = document.getElementById("enable-mouse-wheel-zoom");
inputEnablePan.addEventListener("input", (event) => {
zoomPanModifier.isEnabled = inputEnablePan.checked;
rubberBandZoomModifier.isEnabled = !inputEnablePan.checked;
inputEnableZoom.checked = !inputEnablePan.checked;
console.log(`Enabling Drag to Pan. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
});
inputEnableZoom.addEventListener("input", (event) => {
rubberBandZoomModifier.isEnabled = inputEnableZoom.checked;
zoomPanModifier.isEnabled = !inputEnableZoom.checked;
inputEnablePan.checked = !inputEnableZoom.checked;
console.log(`Enabling Drag to Zoom. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
});
inputEnableZoomToFit.addEventListener("input", (event) => {
zoomExtentsModifier.isEnabled = inputEnableZoomToFit.checked;
console.log("Enabling zoom extents");
});
inputEnableMouseWheel.addEventListener("input", (event) => {
mouseWheelZoomModifier.isEnabled = inputEnableMouseWheel.checked;
console.log("Enabling Mousewheel zoom");
});
}
initSciChart();
</script>
</body>
</html>
Output:
The MouseWheelZoomModifier is actually the module that is import using import keyword in React tutorial but how can I use it in HTML & CSS based Web Page.
Kindly Help.
Because you are using SciChart's Browser module (where the code is served from CDN and JS rather than npm/webpack) you need to use a slightly different way to declare objects in code.
Note the Tutorial for setting up SciChart.js with browser module says
Notice every API call is prefixed by SciChart. when using the browser bundle. This is the global namespace for all SciChart apis, functions and types.
Once you have added the script to include scichart.js (and version)
<script src="https://cdn.jsdelivr.net/npm/scichart#2.1.2290/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
You must now tell SciChart where to load the wasm files from. The easiest way to do this is to call SciChartSurface.useWasmFromCDN();
SciChart.SciChartSurface.useWasmFromCDN();
Next, when not using npm/webpack every type in the SciChart library is now prepended with the global variable SciChart.
For example in our npm/webpack docs this code:
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
must become this
const mouseWheelZoomModifier = new SciChart.MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
Alternatively you can pre-declare these types as follows:
// When using SciChart from CDN / browser bundle, there are no imports
// so either prepend every variable by global namespace SciChart.
// or use code like this to get the types out
const {
MouseWheelZoomModifier,
SciChartSurface,
NumericAxis
} = SciChart;
// static func. Call once. load wasm from CDN
SciChartSurface.useWasmFromCDN();
// Create a SciChartSurface in <div id="div-id"/>
const { sciChartSurface, wasmContext } = SciChartSurface.create("div-id");
// Add x,y axis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Add modifiers for zooming, panning
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
Try that and see if it works
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);
I want to get the FFT data from an <audio> tag, but it doesn't work without any syntax error. Looking at the Web Audio API document, I write a sample code, here is my code:
<audio id="aud" controls="controls" src="test.mp3"></audio>
<script type="text/javascript">
var audioElement = document.getElementById("aud");
var audioContext = new webkitAudioContext();
var streamingAudioSource = audioContext.createMediaElementSource(audioElement);
var jsProcessor = audioContext.createJavaScriptNode(4096,1,1);
jsProcessor.onaudioprocess = process;
var analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
//streaming:AudioSource->jsProcessor->analyser->destination
streamingAudioSource.connect(jsProcessor);
jsProcessor.connect(analyser);
analyser.connect(audioContext.destination);
//autoplay
audioElement.play();
function process(event){
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
document.getElementById("info").innerHTML=freqByteData[1];//show data in div
}
</script>
My Chrome version is 20.0.1096.1 dev-m and I think it works well. Through process(), I'm trying to write down freqByteData, but it shows 0, and all of them are always 0.
It must have something wrong of my code, and I want to know how to get frequency data from an audio tag.
It seems that createMediaSourceElement breaks if it's called before window.onload. There is a bug report about this issue: http://code.google.com/p/chromium/issues/detail?id=112368
There are currently two workarounds:
Wait the window load event before executing the whole javascript
window.addEventListener('load', function(){
// your code
}, false);
or
Create the MediaElementSource in a setTimeout with 0 delay
setTimeout(function (){
var streamingAudioSource = audioContext.createMediaElementSource(audioElement);
var jsProcessor = audioContext.createJavaScriptNode(4096,1,1);
// The rest of the code
}, 0);
I have the following Application tag code in my widget:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
width="100%" height="100%" minWidth="200" minHeight="200" layout="absolute"
creationComplete="init()"
defaultButton="{Send_btn}">
Input field is defined by
<mx:TextInput id="Input_txi" left="10" right="90" bottom="10"/>
Next I have the following at the end of init() method:
Input_txi.setFocus();
Input_txi.selectRange(0,0);
Nevertheless I can't enter any text just after the page is loaded. I see visually that Input_txi has focus, but keyprints do nothing. I need to click Input_txi before I can enter any text to it.
How to do so that I can start from the very beginning?
EDIT 1
Not worked, neither as in example, nor with jQuery:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "${application}";
attributes.name = "${application}";
attributes.align = "middle";
swfobject.embedSWF(
"${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes, function(){
/*
var swf = $("#" + attributes.id);
swf.attr("tabindex", 0);
swf.focus();
*/
var f = swfobject.getObjectById(attributes.id);
f.tabIndex = 0;
f.focus();
});
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
When the browser loads the page, the correct text input may have focus inside the SWF, but the SWF does not have focus inside the browser. There are a variety of different approaches for this, and I've provided a few links below.
Automatically setting swf object focus
Managing initial swf focus in all browsers
I'm using Google Maps API v3. I would like to create a text overlay on a map that does not move when the map is panned. Is the best approach to manipulate the DOM elements accessible from the MapPanes object or is it best to create a custom control even though it would not do much other than display text?
The simplest way that I found worked for me was a few lines of JavaScript added after I created a new map. So, after this:
map = new google.maps.Map('myMapDivId', mapOptions);
add this:
var myTitle = document.createElement('h1');
myTitle.style.color = 'white';
myTitle.innerHTML = 'Hello World';
var myTextDiv = document.createElement('div');
myTextDiv.appendChild(myTitle);
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv);
You will probably want to style the text to look nicer.
An alternative is to put the div in your HTML:
<div id="myTextDiv" style="color: white; position: absolute;">
<h1>Hello World</h1>
</div>
and then do this in your JavaScript:
var myControl = document.getElementById('myTextDiv');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);
NOTE an important difference: If you use the HTML route to define your div, you must set the position style to absolute in the HTML to avoid rendering problems.
From you're describing, the best approach would be a custom control. Docs for that are here. Custom controls can be as simple or a complicated as you want.
One reason why you would want to muck around with the map panes is if you wanted such a 'control' to lie underneath the markers / shadows / polylines etc. I'm doing this right now to show a crosshairs in the center of the map at all times. But because I keep it as an overlay, I choose the panes in such a way that the markers are above it, so they can continue to be clicked and interacted with - using the mapPane. Here's how I'm doing it:
var CrosshairOverlay = function(map){
this._holder = null;
this.setMap(map);
};
CrosshairOverlay.prototype = new google.maps.OverlayView();
CrosshairOverlay.prototype.onAdd = function(){
var map = this.getMap();
var holder = this._holder = $('<div>').attr('id', 'crosshair')[0];
var crosshairPaper = this._paper = R(holder, 150, 150);
// ... all your drawing and rendering code here.
var projection = this.getProjection();
var wrappedHolder = $(holder);
var updateCrosshairPosition = function(){
var center = projection.fromLatLngToDivPixel(map.getCenter());
wrappedHolder.css({left:center.x-75, top:center.y-75});
}
_.each(['drag','dragend','bounds_changed','center_changed','zoom_changed','idle','resize'], function(event){
google.maps.event.addListener(map, event, updateCrosshairPosition);
});
google.maps.event.addListener(map, 'maptypeid_changed', function(){
_.defer(updateCrosshairPosition);
});
this.getPanes().mapPane.appendChild(holder);
};
CrosshairOverlay.prototype.draw = function(){
};
CrosshairOverlay.prototype.onRemove = function(){
this._holder.parentNode.removeChild(this._holder);
this._holder = null;
};
The reason the maptypeid_changed has its own handler with a defer is because that event is fired before the map properly sets itself up when changing the type. Just run your function after the current event loop.