I am creating a leaflet-popup as set of html elements:
var popupBox = document.createElement('div');
$(popupBox)
.addClass('popup-box')
.attr("id", "mypopup");
var popupBoxContent = document.createElement('div');
$(popupBoxContent)
.addClass('some-class')
.html('foo')
.appendTo(popupBox);
myLeafletObject.bindPopup(popupBox);
Unfortunatly i am not able to access this elements later on. For example trying to do:
$('popup').append(someNewHTMLElement)
fails. Can somebody help?
Related
I am trying to add a custom element into a editable div using document.execCommand detailed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.
But when I try to add a custom polymer element using the execCommand, browser is unable to recognize the custom element even if it was already imported into scope.
var video-id='FnoL3d33U8o'//a youtube video Id
var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>';
document.execCommand('insertHTML', false, html);
But this doesn't help and the custom-video-element is not recognized by the browser. Please help if there is any alternate ways or if I am running after a mirage!
if you know what element you need to append, then you can use document.createElement.
There are multiple options how to achiev that, but In your case:
var p = document.createElement("p");
var div = document.createElement("div");
var custom = document.createElement("custom-video-element")
custom.setAttribute("video-id", videoUrl);
.. setting another attributes ..
div.appendChild(custom);
p.appendChild(div);
document.appendChild(p);
and that is it. This should work well.
Of course there might be better and easier solutions but in your case this isn't so bad.
if you create bigger html structure inside your JS, you will do something like:
var div = document.createElement("div");
var inner = "<div class="test"><div></div><p class="p"></p></div>;
div.innerHTML = inner;
div.querySelector(".p").appendChild(document.createElement("custom-video-element"));
I have seen a few examples on Google Groups which demonstrate how to modify the css of the infobox. In this particular example, javascript is used to append a css link to the head of the document:
https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI
var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
This, however, has not resulted in any changes to the style of my markup.
At best, I have been able to wrap the contents of the infobox by iterating through the entities in the .then function call subsequent to loading a geoJson dataset. When wrapping the contents, I can set style values which are readily apparent in the resulting markup.
var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];
if (entity.properties.hasOwnProperty("description")) {
entity.description = '<div style="height: 360px;">' + entity.properties.description
+ '</div>';
}
}
}
This is useful, but does not completely satisfy the requirements of my app.
Could someone provide additional insight into overriding the theme of the infobox, without having to iterate over entities to modify the value of their description properties?
The original solution here wasn't working, because the infoBox is an iframe that has not yet asynchronously loaded when you were trying to modify it.
Instead, you can add an load listener to the iframe, like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;
frame.addEventListener('load', function () {
var cssLink = frame.contentDocument.createElement('link');
cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
frame.contentDocument.head.appendChild(cssLink);
}, false);
This waits for the iframe to become ready to receive the modification, and then applies it.
For what it's worth, I've found success in modifying the theme of the infobox by simply importing my css files in the head of the document. I'm not sure why I wasn't able to modify it directly with stylesheets, as it wasn't previously affecting the infobox's appearance, and this issue was mirrored in the posts that I found in the cesium-dev Google Group. Regardless, it seems to be working just fine now.
Is it possible to change the text of a page of a tabPanel and/or to setVisible() in a UiApp using GAS?
EDIT-1
To clarify my question :
function doGet()
{
var app = UiApp.createApplication();
var tabPanel = app.createTabPanel().setId('AAA');
var horPanel = app.createHorizontalPanel().setId('XXX').setSize(500, 400);
tabPanel.add(horPanel, 'YYY');
app.add(tabPanel);
return app;
}
I want to change change the text 'YYY' into something else at any time after the user sees the panels.
The individual panels are not available as separate objects, you can't change their properties neither hide them individually so I'm afraid what you are trying won't be possible.
The only thing you can do is select one of them, that's about all.
To get the same functionality I use vertical panels and handlers like in this example... it is entirely composed of "normal" panels and I can do what I want with it...
EDIT : handlers to switch panels :
//Panel Handlers
var pHandler1 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[0]).setVisible(true)
.forTargets(mainPanel[1],mainPanel[2],mainPanel[3]).setVisible(false)
.forTargets(button[1],button[2],button[3]).setStyleAttribute('color','white')
button[0].addClickHandler(pHandler1)
var pHandler2 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[1]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[2],mainPanel[3]).setVisible(false)
.forTargets(button[0],button[2],button[3]).setStyleAttribute('color','white')
button[1].addClickHandler(pHandler2)
var pHandler3 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[2]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[1],mainPanel[3]).setVisible(false)
.forTargets(button[0],button[1],button[3]).setStyleAttribute('color','white')
button[2].addClickHandler(pHandler3)
var pHandler4 = app.createClientHandler()
.forEventSource().setStyleAttribute('color','blue')
.forTargets(mainPanel[3]).setVisible(true)
.forTargets(mainPanel[0],mainPanel[1],mainPanel[2]).setVisible(false)
.forTargets(button[0],button[1],button[2]).setStyleAttribute('color','white')
button[3].addClickHandler(pHandler4)
image of another app using this feature :
I accomplished this not by adding strings to the tab, but used a Label instead. I could use the id of the label later to tweak the content.
var horPanel = app.createHorizontalPanel().setId('XXX').setSize(500, 400);
var horLabel = app.createLabel('YYY').setStyleAttributes({fontWeight: 'bold', color: 'red'}).setId('xxxLabel');
tabPanel.add(horPanel, horLabel);
In the call back:
var callBackHorLabel = app.getElementById('xxxLabel');
callBackHorLabel.setText('ZZZ').setStyleAttributes({color: 'inherit'});
There may be better ways to deal with the CSS of created label to make it match the default label, but I was too lazy to research it. Hence, the fontWeight.
I would like to use my microphone input to control an image i have. I managed to edit this code by far and get my image affected. There was javascriptNode.onaudioprocess = function() and for some reason it disabled my microphone input checking.
You shouldn't need a Javascript node at all. You should just use a requestAnimationFrame handler to do the section of your code that does:
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var average = getAverageVolume(array);
var array2 = new Uint8Array(analyser2.frequencyBinCount);
analyser2.getByteFrequencyData(array2);
var average2 = getAverageVolume2(array2);
element.style.opacity = average/100;
element2.style.opacity = average2/100;
is there a simple way to reveal text within a webpage using a link without altering the web address or using an iframe? maybe with an 'onclick' function? im pretty new to new code so not sure where to start.. ive attached a picture of what exaclty im after, fairly simple. im already using an iframe as the main interface so another one would get messy in terms of a default menu. there must be a simple fix.. any help would be really appreciated.
thanks, Aaron
Put the text you want to hide until click inside hidden container, like this:
<div id="HiddenTextContainer" style="display: none;">
Hello, I will become visible when you click something else
</div>
Next step is add that JavaScript code to the page, for example inside the <head> section:
function ShowHiddenText() {
document.getElementById("HiddenTextContainer").style.display = "block";
}
And finally have such code:
<span onclick="ShowHiddenText();">click me to show hidden text</span>
Live test case.
Edit: in case you got more than one element to show, you can use the rel attribute:
<span rel="HiddenTextContainer2">click me to show second hidden text</span><br />
Then with pure JavaScript iterate over all elements with that attribute and assign their onclick programmatically:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
oToShow.style.display = "block";
};
}
}
};
When clicked, element with ID the same as the rel value will be displayed.
Updated fiddle.
Edit: to show it in one single container, first have such container:
<div id="HiddenTextContainer"></div>
No need to have it hidden since it's initially empty, then change the code to:
window.onload = function() {
var elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var id = element.getAttribute("rel") || "";
if (id.length > 0) {
element.onclick = function() {
var oToShow = document.getElementById(this.getAttribute("rel"));
if (oToShow)
document.getElementById("HiddenTextContainer").innerHTML = oToShow.innerHTML;
};
}
}
};
Instead of showing the related container, you copy its contents to the "main" container.
Updated jsFiddle.
You have 2 choices for this. The first is to preload everything on the page and then only set the visible property when you click the link. The second is to load it in using something like AJAX and then show it the same way as above.
To show these things look into JQuery: http://jquery.com/
A good tutorial for the second method is here: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/