I played around with Polymer's local dom selector $$. I want to know if an element with a certain attribute exists. I wrote below example.
Is it by intention, that I cannot reach elements within other custom elements with the $$ selector?
How can I check for the existence of elements inside anothers element?
Is it good to go with document.querySelector?
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/polymer/polymer.html">
<dom-module id="my-moduleone">
<style>
:host {
height: 100%;
width: 100%;
display: block;
}
</style>
<template>
<div class="content-wrapper">
<content select="*" />
</div>
Counter 1: <span counter1>0</span>
<input type="button" value="Increment counter" on-click="_incrementCounter"/>
</template>
<script>
(function () {
Polymer({
is: 'my-moduleone',
_incrementCounter: function() {
this.$$('[counter1]').innerHTML++;
this.querySelector('[counter2]').innerHTML++;
this.$$('[counter3]').innerHTML++;
}
});
})();
</script>
</dom-module>
<dom-module id="my-moduletwo">
<style>
:host {
width: 100%;
display: inline-block;
}
.counter {
float: left;
height: 100px;
width: 100px;
display: block;
}
.blue {
background-color: lightblue;
}
.magenta {
background-color: magenta;
}
</style>
<template>
<content select="*" />
<span class="counter blue">
Counter 2: <span counter2>0</span>
</span>
<span class="counter magenta">
Counter 3: <span counter3>0</span>
</span>
</template>
<script>
(function () {
Polymer({
is: 'my-moduletwo'
});
})();
</script>
</dom-module>
<my-moduleone>
<my-moduletwo>
</my-moduletwo>
</my-moduleone>
You've said it yourself: this.$$ is a local dom selector. That means you cannot access elements that are added in the light dom. If you are going to access elements in the light dom (or access elements that aren't added in the local dom at registration time), use Polymer.dom instead. This is Polymer's suggested way of manipulating elements, be it in the light dom or the local dom. You also should not use document.querySelector in accessing elements that are inside the local dom of the element since this method cannot (by default) access the shadow dom.
Here is an example of using Polymer.dom:
<!doctype html>
<html>
<head>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="my-component-one">
<template>
<div class="content-wrapper">
<content select="*" />
</div>
Counter 1: <span counter1>0</span>
<input type="button" value="Increment counter" on-click="_incrementCounter" />
</template>
</dom-module>
<dom-module id="my-component-two">
<template>
<content select="*" />
<span class="counter blue">
Counter 2: <span counter2>0</span>
</span>
<span class="counter magenta">
Counter 3: <span counter3>0</span>
</span>
</template>
</dom-module>
<my-component-one>
<my-component-two></my-component-two>
</my-component-one>
<script>
(function() {
Polymer({
is: 'my-component-one',
_incrementCounter: function() {
// Note: Polymer.dom(this) accesses the light dom. Use Polymer.dom(this.root)
// to access the element's local dom
var componentTwo = Polymer.dom(this).querySelector('my-component-two');
if (!componentTwo) return; // don't do anything when there is no my-component-two
// access element's local dom by getting it's root property
var c2_counter2 = Polymer.dom(componentTwo.root).querySelector('[counter2]');
var c2_counter3 = Polymer.dom(componentTwo.root).querySelector('[counter3]');
var c1_counter1 = Polymer.dom(this.root).querySelector('[counter1]'); // this can be shortened to this.$$
var c1c1 = parseInt(c1_counter1.innerHTML);
var c2c2 = parseInt(c2_counter2.innerHTML);
var c2c3 = parseInt(c2_counter3.innerHTML);
c1_counter1.innerHTML = c1c1 + 1;
c2_counter2.innerHTML = c2c2 + 1;
c2_counter3.innerHTML = c2c3 + 1;
}
});
Polymer({
is: 'my-component-two'
});
})();
</script>
</body>
</html>
Related
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
Working Sample, jsFiddle
Please find it here.
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Content_text = $(".name").text();
$("#titlebar").text(Content_text);
});
});
</script>
</head>
<body>
<button>Copy</button>
<div class="name">Content-text</div>
<div id="titlebar">copy here</div>
</body>
</html>
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from the HTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() {
var div1Data= document.getElementById('div1');
var div2Data= document.getElementById('div2');
div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
Content in div 1
</div>
<div id="div2">
</div>
<button onClick="copyContent()">Click to copy</button>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(document).ready(function(){
var Content_text = $(".name").text();
//alert(Content_text);
$(function() {
$(window).mousewheel(function(turn, scroll) {
if (scroll > 0) $('#titlebar').text('Content_text');
else $('#titlebar').text('Copy here');
return false;
});
});
//$("#titlebar").text(Content_text);
});
</script>
</head>
<body>
<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>
</body>
</html>
I use these flashcards quite regularly. Lately, I have been using pictures as answers. However -I cannot hide the pictures. I would like for the pictures to be hidden upon webpage startup.
function myShowText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'black';
}
function myHideText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Flashcards VBA </title>
<rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/scripts.js"></script>
<h3> Flashcards </h3>
<p class="question">
The first question
</p>
<div id="bash_start">
<p class="answer">
<img src="image.jpg">
</p>
</div>
</body>
</html>
Just add the following CSS class:
.hidden {
display: none;
}
and add the class .hidden to your answer:
<p class="answer hidden">
<img src="image.jpg">
</p>
Then remove this .hidden class whenever your want to show the answer:
document.querySelector('.answer').classList.remove('hidden');
Here is a working example:
var button = document.querySelector('button');
var answer = document.querySelector('.answer');
button.addEventListener('click', function() {
answer.classList.remove('hidden');
});
.hidden {
display: none;
}
<button type="button">Show answer</button>
<p class="answer hidden">This is the answer</p>
If I understand correctly you just want your image to be hidden when the user load the page ? In that case juste put somme css on your image(s) visibility: hidden; or display: none;
Then Javascript/Jquery side you do whatever event you want to fire it and change visibility: visible; or display: block/inline-block;.
<img class="flashCards" src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png">
<button id="validate_btn" onclick="validate()">Validate</button>
<style>
img.flashCards { width: 150px; visibility: hidden; }
</style>
<script>
function validate() {
var flashCards = document.getElementsByClassName('flashCards');
//Need a for loop for each image element
//If only one image use getElementById directly with the style
for(i=0;i<flashCards.length;i++) {
flashCards[i].style.visibility = 'visible';
flashCards[i].style.backgroundColor = 'green';
}
}
</script>
I'm trying to work with just ShadowDOM v1 (no Polymer or other web components) but I can't get the styling to work with a polyfill.
The special :host and ::slotted CSS selectors are not working.
I've tried with various polyfills, but TBH, I'm a bit lost. I have seen this question, but it's using custom elements and templates. My scenario is without these.
Can anyone help me make this code work in Firefox or Edge? - specifically, you should see three colors: blue, red and yellow, but only red works.
const shadowHtml =
`<style>
:host {
background: yellow;
}
.inside {
background: red;
margin: 10px;
}
::slotted(div[slot="content"]) {
background: blue;
color: white;
}
</style>
<div>
<p>i am yellow</p>
<div class=inside>i am red</div>
<slot name="content"></slot>
</div>`;
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow DOM v1 Test</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/v1/webcomponents-lite.js"></script>
</head>
<body>
<div id=root>
<div slot="content">
<p>I am blue</p>
</div>
</div>
</body>
</html>
webcomponents-lite.js "v1" now embeds a Shadow DOM v1 polyfill:
the ShadyDOM shim which provides attachShadow()
the ShadyCSS object which simulates :host and ::slotted().
Note that to use it you'll have to put your template string inside a <template> element in order to call ShadyCSS.prepareTemplate()
const makeTemplate = function (strings) {
const template = document.createElement('template');
template.innerHTML = strings[0];
return template;
}
const shadowHtml =
makeTemplate`<style>
:host {
background: yellow;
}
.inside {
background: red;
margin: 10px;
}
::slotted(div[slot="content"]) {
background: blue;
color: white;
}
</style>
<div>
<p>i am yellow</p>
<div class=inside>i am red</div>
<slot name="content"></slot>
</div>`
ShadyCSS.prepareTemplate(shadowHtml, 'div');
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml.innerHTML;
<script src="https://cdn.rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/shadycss/master/scoping-shim.min.js"></script>
<div id=root>
<div slot="content">
<p>I am blue</p>
</div>
</div>
I'm new to Polymer , I have a dom-repat custom element that contains a simple-overlay ,I want when clicking close button this overlay should close
this is the custom element
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../overlay-layer/simple-overlay.html">
<dom-module is="feed-bdy">
<template items="{{items}}">
<style include="iron-flex iron-flex-alignment" >
:host{
--paper-button-ink-color: var(--paper-pink-a200);
--paper-button{
background-color: red !important;
color: red;
}
}
.custom{
color: red;
}
.content-bdy{
min-height: 120px;
}
.scrollable{
#apply(--layout-scroll);
max-width: 75%;
}
</style>
<div class="card-content">
<div class="ar-header">
<h3> [[items.fields.title]]</h3>
</div>
<div class="content-bdy"></div>
</div>
[[_renderHTML(items)]]
<div class="card-actions">
<paper-button class="custom" id="ar-[[items.fields.articleId]]" on-click="_openOverlay">إقراء المزيد !</paper-button>
<simple-overlay id="backdrop-[[items.fields.articleId]]" data-ar="backdrop-[[items.fields.articleId]]" with-backdrop class="layout scrollable">
[[_renderFullArticle(items)]]
<button id="dd">Close</button>
</simple-overlay>
<paper-button>
شارك
<iron-icon icon="reply"></iron-icon>
</paper-button>
</div>
</template>
<script>
Polymer({
is: 'feed-bdy',
listeners :{
'dd.click':'_closeOverlay'
},
_renderHTML: function(items) {
// firstp to get only the first pargarph to put in the home page
var ss= items.fields.body;
//console.log(this.$$(".card-content"));
var firstp = ss.substring(0,ss.search("</p>")+4);
this.$$(".content-bdy").innerHTML += firstp;
},
_renderFullArticle : function(items){
this.$$("simple-overlay").innerHTML +=items.fields.body;
},
_toggle : function(e){
var id = Polymer.dom(e).localTarget.title;
//console.log(id);
var moreInfo = document.getElementById(id);
// console.log(moreInfo);
var iconButton = Polymer.dom(e).localTarget;
iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
: 'hardware:keyboard-arrow-down';
moreInfo.toggle();
},
_openOverlay : function(e){
//console.log('calling _openOverlay');
var id = Polymer.dom(e).localTarget.id.split('ar-')[1];
var dd = document.getElementById('backdrop-'+id);
dd.open();
},
_closeOverlay : function(e){
console.log(Polymer.dom(e));
console.log('calling _openOverlay');
var id = Polymer.dom(e).localTarget.id.split('ar-')[1];
// var dd = document.getElementById('backdrop-'+id);
/// dd.close();
}
});
</script>
</dom-module>
and in the index.html
<div class="video layout horizontal around-justified wrap" >
<template is="dom-repeat" items="[[ajaxResponse]]" >
<paper-card image="[[item.fields.image]]" class="flex-auto" wide-layout$="{{wide}}">
<feed-bdy items="[[item]]"></feed-bdy>
</paper-card>
</template>
</div>
so when clicking the close button the _closeOverlay should be fired and I tried to console messages as you can see , but no event was fired any advice
You only show part of your index.html file, but is the content you did show inside a <template is="dom-bind"> ?
Polymer doesn't work with databinding and events etc unless that stuff is.
These days (following Google I/O 2016) and the discussions about lazy loading etc I have stopped using the dom-bind approach and instead have a single custom element that then has all the functionality inside, including styling.
<div class="blah">
<div id="hi">Hi</div>
<div id="hi2">
<p id="hi3">Hi3</p>
</div>
</div>
How to test with JavaScript if an element is child (or grandchild, or grandgrandchild, etc.) of an element of class blah? (said in another way : if an element is contained in an element of class blah).
Note: After some tests, .contains(...) seems not to be the solution.
Use matches:
elt.matches('.blah *')
See https://developer.mozilla.org/en-US/docs/Web/API/Element.matches. Check browser compatibility.
See also Test if a selector matches a given element.
Modernizr can help if the browser you are targeting requires a prefix:
var ms = Modernizr.prefixed("matchesSelector", HTMLElement.prototype, elt)
ms('.blah *')
See http://modernizr.com/docs/#prefixeddom.
Loop through parents, check each one.
function isContainedByClass(src,cls) {
while(src && src.tagName) {
if( src.classList.contains(cls)) return true;
// apply old-browser compatibility as needed
src = src.parentNode;
}
return false;
}
**check this out**
============================================================================
<!DOCTYPE html>
<html>
<head>
<style>
.a *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//for checking if span with class c1 is children of class a element
if($('.a').children('span.c1').length > 0) {
console.log("Found");
}
//for checking if span with class c1 has parent element with class a
if($('.c1').parents('.a').length > 0) {
console.log("Found");
}
});
</script>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="b1">b1</div>
<div class="b2">b2</div>
<span class="b3">b3</span>
</div>
<div class="c">c</div>
<span class="c1">c1</span>
<p class="c2">c2</p>
</div>
</body>
</html>