I know this is easy using polymer but I want to do this using JavaScript
Shadow root > Shadow root > shadow root
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-shadow-multiple discusses multiple shadow roots.
<div id="example1">Light DOM</div>
<script>
var container = document.querySelector('#example1');
var root1 = container.createShadowRoot();
var root2 = container.createShadowRoot();
root1.innerHTML = '<div>Root 1 FTW</div>';
root2.innerHTML = '<div>Root 2 FTW</div>';
</script>
Use the same principle used to build a single shadow root to build a nested shadow-root:
<div id="shadow-host">
</div>
<script>
var shadow = document.querySelector('#shadow-host').attachShadow({mode: 'open'});
shadow.innerHTML = '<div id=shadow-content><p>Shadow Root</p><div id="nested-shadow-host"></div></div>';
var nestedShadow = shadow.querySelector('#nested-shadow-host').attachShadow({mode: 'open'});
nestedShadow.innerHTML = '<div id="nested-shadow-content"><p>Nested Shadow Root</p></div>';
</script>
Related
When dynamically creating polymer elements in js, how to initialize attributes before ready() event?
my code below:
var el = document.createElement("my-elem");
el.setAttribute("myAttr", 123); // or el.myAttr = 123.
the ready() event is fired before myAttr is set. actually I want it works like it does in HTML way:
var div = document.createElement("DIV");
div.innerHTML('<my-elem myAttr="123"></my-elem>');
var el = div.children[0];
in this way, myAttr is set when ready() event working, but the code is kinda ugly. is there a way like this:
var el = document.createElement("my-elem", { myAttr: 123});
I have created a custom polymer component that is a chat component. When a message is posted, a fake answer is published. Nothing very complicated.
Besides, when I instantiate two instances of my component, when I click on the enter button to post a message, the instance of the textfield used to get the text is not the good one.
I don't know if it is a problem of my code or the way I code the component or the regular behavior with polymer.
Please, let me know what is going wrong.
Best regads,
here the code:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<!-- css import --> <!-- ... -->
<polymer-element name="chat-element">
<template>
<div class="chatview containerwindow" >
<div class="containertitle">
<span>CHAT VIEW</span>
</div>
<div class="chatcomponent">
<div id="messagecontainer" class="messagecontainer" >
</div>
<div class="footer">
<input type="text" class="inputtext" id="inputtextfield" />
<div class="insertchatbutton" id="insertchatbutton" >Enter</div>
</div>
</div>
</div>
</template>
<script>
Polymer('chat-element', {
myself: "",
inputextfiled: "",
insertchatbutton: "",
messagecontainer: "",
domReady: function() {
myself = this;
inputextfiled = this.$.inputtextfield;
inputextfiled.onkeyup = function(event) {
if (event.which == 13) {
myself.insertMessage(this);
}
};
insertchatbutton = this.$.insertchatbutton;
insertchatbutton.onclick = function() {
myself.insertMessage(inputextfiled);
};
messagecontainer = this.$.messagecontainer;
},
insertMessage : function (textview) {
var div = document.createElement('div');
div.classList.add('chatpushed');
var span = document.createElement('span');
span.innerHTML = textview.value;
div.appendChild(span);
messagecontainer.appendChild(div);
//scroll to the bottom
messagecontainer.scrollTop = messagecontainer.scrollHeight;
textview.value = "";
setTimeout(self.reply, 1000);
},
reply : function() {
var div = document.createElement('div');
div.classList.add('chatreceived');
var span = document.createElement('span');
span.innerHTML = "Message received";
div.appendChild(span);
messagecontainer.appendChild(div);
}
});
</script>
First off, here is a working version using more Polymer idioms:
http://jsbin.com/xokar/9/edit
Now, about some of the problems you are having. When you write
inputextfiled = this.$.inputtextfield
because you didn't use var you created a global variable. That means there is only one value of inputextfiled (sic) for the entire application.
You have to use this keyword to create and access instance variables, e.g., this.inputextfield.
You have a related problem here: setTimeout(self.reply, 1000);, because you instructed the timeout to call the self.reply function with window as this. You really want something like setTimeout(self.reply.bind(self)).
Here is some general information about this: http://www.quirksmode.org/js/this.html.
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 have created a button dynamically in HTML5 + Javascript. I have assigned a click event to that button. When i clicked it, it's content & background color should change. Content is changing fine, but bgcolor is not changing.
my code is;
<style>
.selectBtn{ height:60px;width:80px;background-color:yellow; }
</style>
<script>
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function()
{
this.innerHTML='voted';
this.style.backgroundColor:'blue';
}
dx();
</script>
<body><div id='abc'></div></body>
Use = instead of colon. Use this:-
this.style.backgroundColor = "#f47121";
You will wan't to change some things
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function() {
this.innerHTML='voted';
this.style.backgroundColor = 'blue';
}
}
I'm not sure if Btn.type = 'button'; is valid but it sure is pointless
and on the style you want to change : to = you only use : in objects
Also you might wan't to use textContent instead of innerHTML
I could not resist to show how I would have done this, just for fun, and its educational purposes.
window.onload = function(){
(function(){
var doc = document;
var get = function(id){return doc.getElementById(id);};
var inject = function(el,str){el.innerHTML = str;return el;};
inject(get('content'),'<button type="button" id="btn-select">SUBMIT</button>');
get('btn-select').onclick = function(){inject(this,'Voted!').className = 'voted';};
})();
};
DEMO: http://jsfiddle.net/ZNfBe/
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.