I have a simple directive that replaces the directive tag with some template HTML. The HTML includes a <div> with a Bootstrap class of "clearfix" (i.e., <div class="clearfix">). When the <div> is part of the template HTML everything works fine; however, when the <div> surrounds the directive tag the template HTML is not rendered.
THIS WORKS:
<div class="panel-body">
<pr-details pr="selectedPr"></pr-details>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='clearfix'>\n" +
" <div class='pull-right'>\n" +
" <!-- floated content -->\n" +
" </div>\n" +
" <div>\n" +
" <!-- non-floated content -->\n" +
" </div>\n" +
"</div>\n"
};
THIS DOESN"T WORK:
<div class="panel-body">
<div class="clearfix">
<pr-details pr="selectedPr"></pr-details>
</div>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='pull-right'>\n" +
" <!-- floated content -->\n" +
"</div>\n" +
"<div>\n" +
" <!-- non-floated content -->\n" +
"</div>\n" +
};
The only thing I can figure out is that having the <pr-details> tag between the parent "clearfix" <div> and the the child "pull-right" <div> interferes with the parent-child relationship for the Bootstrap "clearfix" implementation.
Can anyone shed any light on this? Is there a way to get these two things to work together? I can make this work by refactoring the HTML a bit, but I'm curious about to do this for future use.
Related
Sample HTML Element
<div data-testid="Custom Data Test">
The above div does not have a class inside.
How do I access, "data-testid" (which selector should I use)
You can use querySelector() or querySelectorAll() and select by attribute like this:
const div = document.querySelector('div[data-testid="Custom Data Test"]');
div.textContent = "blah";
const divs = document.querySelectorAll('div[data-testid]');
divs.forEach( (e,i) => e.textContent = e.textContent + " this is div number " + i + " and data-testid attribute is " + e.dataset.testid);
Sample HTML Element
<div data-testid="Custom Data Test"></div>
<div data-testid="Custom Data Test 2"></div>
<div data-testid="Custom Data Test 3"></div>
Below, the <h3> tag creates a space, and the code gets formatted weirdly. How do you get rid of the space between the 80 and the + sign? The counter-up module that I used is from this link: https://www.jqueryscript.net/animation/Animating-Numbers-Counting-Up-with-jQuery-Counter-Up-Plugin.html
<section id = "cta" class = "wrapper style3">
<div class = "row uniform">
<div class = "4u 6u$(2) 12u$(3)">
<h2><u>Students</u></h2>
</div>
<div class = "4u 6u(2) 12u$(3)">
<h3 class = "counter">80</h3><h3>+</h3>
</div>
</div>
<script>
jQuery(document).ready(function( $ ) {
$('.counter').counterUp({
delay: 30,
time: 1500
});
});
</script>
</section>
Headings are block-level elements meaning two adjacent headings will be rendered on two separate lines (as long as you haven't tinkered with their presentation via CSS).
You can use CSS to append the "+" to the H3 content instead of using another adjacent H3 element:
h3.counter:after {
content: "+";
display: "inline";
}
<h2>Without CSS:</h2>
<h3>80</h3><h3>+</h3>
<h2>With CSS:</h2>
<h3 class="counter">80</h3>
I have a requirement of getting the text below of "ELECTRONIC ARTS" (this can change according to data) using class title "Offered By" (this class will be same for all) using Xpath. I tried various xpath coding, but couldn't get the results I want. I'm really looking for someone's help on this.
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div> </div>
This is one possible XPath expression to starts with, which then you can simplify or add more criteria as needed (XPath formatted to be more readable) :
//div[
#class='meta-info'
and
div[#class='title' and normalize-space()='Offered By']
]/div[#class='content']
explanation :
//div[#class='meta-info' and ... : find div element where class attribute value equals "meta-info" and ...
div[#class='title' and normalize-space()='Offered By']] : ... has child element div where class attribute value equals "title" and content equals "Offered By"
/div[#class='content'] : from such div (the <div class="meta-info"> to be clear), return child element div where class attribute value equals "content"
Using the examples on Mozilla:
var xpath = document.evaluate("//div[#class='content']", document, null, XPathResult.STRING_TYPE, null);
document.write('The text found is: "' + xpath.stringValue + '".');
console.log(xpath);
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div>
</div>
By the way, I think document.querySelector or document.querySelectorAll are much more convenient in this situation:
var content = document.querySelector('.meta-info .content').innerText;
document.write('The text found is: "' + content + '".');
console.log(content);
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div>
</div>
Basically I'm using bootstrap CSS with the panels / headers
I have an API going from Twitch.tv's Kraken that grabs 3 streams
My problem is it shows the 3 streams in the one box
http://jsfiddle.net/82wNq/28/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><div id="content1"></div> - <div id="content2"></div></h3>
</div>
<div class="panel-body">
<div id="content3"></div>
</div>
</div>
If anyone could give me any pointers I'd be really greatful
You are adding all elements together in loop.
Re-Create elements & add separately.
DEMO:
http://jsfiddle.net/82wNq/30/show/
CODE:
http://jsfiddle.net/82wNq/30/
function (data) {
var temp = "";
$.each(data.streams, function (index, item) {
temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'><img src='" + item.preview.medium + "'/></div></div>";
});
$("#content").html(temp); }
Here's the part of the HTML (simplified for the question):
<a href="/auctions?id=4672" class="auction sec">
<div class="progress">
<div class="guarantee">
<img src="/img/ico/2.png" />
</div>
</div> </a>
<a href="/auctions?id=4670" class="auction">
<div class="progress">
<div class="guarantee">
<img src="/img/ico/1.png" />
</div>
</div> </a>
What I want to get is the vector containing the ids of the auctions, for which the 2.png image is displayed (id=4672 in this case). How to construct the Selector query in order to obtain this?
http://jsoup.org/apidocs/org/jsoup/select/Selector.html - Here I can only find how to select the children, not the parents...
Any help appreciated, including the usage of other libraries. I've tried Jsoup because it seemed to be the most popular.
You can use parent() method:
final String html = "<a href=\"/auctions?id=4672\" class=\"auction sec\"> \n"
+ " <div class=\"progress\"> \n"
+ " <div class=\"guarantee\"> \n"
+ " <img src=\"/img/ico/2.png\" /> \n"
+ " </div> \n"
+ " </div> </a>\n"
+ "<a href=\"/auctions?id=4670\" class=\"auction\"> \n"
+ " <div class=\"progress\"> \n"
+ " <div class=\"guarantee\"> \n"
+ " <img src=\"/img/ico/1.png\" /> \n"
+ " </div> \n"
+ " </div> </a>";
Document doc = Jsoup.parse(html);
for( Element element : doc.select("img") ) // Select all 'img' tags
{
Element divGuarantee = element.parent(); // Get parent element of 'img'
Element divProgress = divGuarantee.parent(); // Get parent of parent etc.
// ...
}