I'm testing a foreignObject, containing a div with text, within an SVG, created using d3.js.
Why do attributes for a div created by css work but don't when applied using d3.js?
I've created a fiddle: http://jsfiddle.net/g6FXY/
Here's the js code:
var body = d3.select("body");
var svg = body.append("svg")
.attr("width", '100%')
.attr("height", '100%')
var html = svg.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 300)
.attr("height", 200)
.append("xhtml:div")
/*.attr set height doesn't. */
/*.attr("overflow-y", "scroll")
.attr("height", "150px") */
.html("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.</p>");
and the css:
div {
font: 14px Helvetica Neue;
overflow-y: scroll;
width: 200px;
/* CSS set height works. */
height: 150px;
}
I don't understand. Is this a namespace thing? Inspecting the object shows the same html code from the resulting page but with css the page pays attention to this value and with d3.js it picks another value.
What am I missing?
The goal is to understand what I can and can't link/drop into a foreignObject and why.
CSS properties are set with .style:
.append("xhtml:div")
.style("height", "250px")
will create
<div style="height: 250px;"></div>
instead of
<div height="250px"></div>
fixed fiddle
docs
Related
I am currently trying to clean up some ESLint warnings on my project, and I am stuck on a missing return type on the following function. I have tried to set the return type to React.ReactFragment, however that gives me an error on all areas where the function is called.
export const RightsTooltip = () =>
<>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet./p>
</>
Usage of the function:
<Group>
<b>Additional rights</b>
<Hint tooltip={<RightsTooltip/>}/>
</Group>
Error when return type is set to React.ReactFragment:
'RightsTooltip' cannot be used as a JSX component.
Its return type 'ReactFragment' is not a valid JSX element.
Type '{}' is missing the following properties from type 'ReactElement<any, any>': type, props, key
A React functional component should always return a JSX.Element. That's the type you want if you are requiring that all functional components have an explicit return type
export const RightsTooltip = (): JSX.Element =>
<>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
</>
Playground
I'm struggeling to align the sup tag in the right position within a centered flexbox
.card {
display: flex;
align-items: center;
padding: 2rem 1rem;
border: 1px solid blue;
sup {
color: red;
}
}
<div class="container">
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, nam reprehenderit eum assumenda illo voluptatibus fugit reiciendis impedit omnis provident dolorum quae itaque quaerat perferendis est? Exercitationem, quas. Blanditiis, dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, nam reprehenderit eum assumenda illo voluptatibus fugit reiciendis impedit omnis provident dolorum quae itaque quaerat perferendis est? Exercitationem, quas. Blanditiis, dignissimos.<sup>3</sup>
</div>
</div>
Here is my code on codepen:
https://codepen.io/Bizboss/pen/eYBNGVR
<sup>need to be in a <p> tag
.card {
display: flex;
align-items: center;
padding: 2rem 1rem;
border: 1px solid blue;
}
sup {
color: red;
}
<div class="container">
<div class="card">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, nam reprehenderit eum assumenda illo voluptatibus fugit reiciendis impedit omnis provident dolorum quae itaque quaerat perferendis est? Exercitationem, quas. Blanditiis, dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, nam reprehenderit eum assumenda illo voluptatibus fugit reiciendis impedit omnis provident dolorum quae itaque quaerat perferendis est? Exercitationem, quas. Blanditiis, dignissimos.<sup>3</sup></p>
</div>
</div>
I have a fully functioning prototype of an HTML5 news card, and I need to populate 50 or so cards with unique content. I am asking for suggestions for a more efficient way to add content to each card other than copying, cutting, and pasting from the Excel spreadsheet. The spreadsheet's columns contain each card's news category, date, title, and external URL. I have also just been asked to include the image from the news article that the card links to - I cannot imagine how that could be automated. This project uses Bootstrap styling, data-category attribute on a tag in each card, and is a Laravel website; it does not include Angular, Mustache, Handlebars, or a templating pattern. Is there a way I could create a custom template for these news cards without needing to install a framework or template engine? Could I use data attributes?
Here is the HTML for one card:
<div class="col-lg-4 col-md-6">
<section class="news-box" data-category="blog">
<figure>
<img src="/material-icons/ic_recent_actors_black_24dp/web/ic_recent_actors_black_24dp_2x.png" class="img-responsive opacity-3">
<figcaption>Blog</figcaption>
</figure>
<h3 class="h6">Title of Blog Post</h3>
<figure>
<img src="images/news/pic2.jpg" class="img-responsive">
</figure>
<p>luctus et ultrices posuere cubilia Curae; quam erat volutpat. Phasellus dignissim euismod luctus.In leo mauris, blandit quismalesuada lobortis, fringilla a ipsum.</p>
</section>
</div>
So this might not be the best answer, but these are my 2 cents.
You will first have to convert your Excel sheet to csv and then to a json object. I think this can be easily achieved with online converters like this: http://www.convertcsv.com/csv-to-json.htm (haven't tried that myself, just pasted the first google result). Your json object will then look like var foo = [{...},{...},...] (see snipet)
Create your "card template" with dummy placeholders like card_title card_img. Hide it.
In your js file, iterate over all the elements in your json object and use the template you just created to replace all the placeholders. (var newItem = myTemplate.replace('blog_title',val.blog_title)...)
Append the resulting html snippet to the cards container.
$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>
You could also try to do it with vanilla js, but it's up to you.
$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>
Is it possible to get text-overflow:ellipsis to work with MathJax?
Here is a (non-working) example (on JSFiddle)
The HTML:
<!doctype html>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div id="test">
\[
\text{2014-01-05} \quad
\begin{cases} \text{Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum} \\
\text{Lorem ipsum} \\
\text{Lorem ipsum} \\
\end{cases}
\]
</div>
<div id="test">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
And the CSS:
#test{
display: inline-block;
width: 20em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
As you can see, text-overflow:ellipsis works for the div without any MathJax content but not for the div with MathJax content. Is there any solution or workaround?
There is currently no way of making this work.
While the MathML spec provides two comparable values for overflow -- truncate and elide -- neither one is implemented in MathJax yet.
On the bright side, linebreaking is supported for display-style mathematics.
Addendum: some restrictions apply. Not all linebreaking methods are supported; in particular, linebreaking within token elements and some alignment options are not supported.
I am using CSS to generate a gradient on my text... The problem is my text is multi-lined so the gradient doesn't reset on each line... the whole paragraph becomes 1 huge gradient! Can I get an individual gradient effect for each line of text in my divider? Here is my code:
<html>
<head>
<style type='text/css'>p.p1 {
margin: 0.0px 0.0px 0.0px 50.0px;
font: 50.0px Helvitica;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif';
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body bgcolor='#FFFFFF'>
<div style='word-wrap: break-word;'>
<p class='p1'>
<font face='helvetica' color='#000000'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id vestibulum lectus. Maecenas facilisis orci vitae urna pulvinar cursus. Etiam id laoreet metus. Cras vitae elit ipsum. Donec a sagittis nisi. Sed nec nisi nibh, fringilla fermentum quam. Vestibulum lorem felis, gravida et faucibus ac, ultrices nec lectus.
</font>
</p>
</div>
</body>
</html>
I got rid of the deprecated tags and cleaned the code up for you..
p.p1 {
margin: 0 0 0 50px;
font-size: 50px;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif';
background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Demo