According to https://developers.google.com/glass/v1/reference/timeline#html
one can use HTML.
Are there any restrictions for using HTML tags in "html" field?
We will update the documentation regarding this shortly but in the meantime, here are the restrictions:
Allowed HTML elements: Use these elements in your timeline cards.
Headers: h1, h2, h3, h4, h5, h6
Images: img
Lists: li, ol, ul
HTML5 semantic: article, aside, details, figure,
figcaption, footer, header, nav, section, summary, time
Structural: blockquote, br, div, hr, p, span
Style: b, big, center, em, i, u, s, small, strike,
strong, style, sub, sup
Tables: table, tbody, td, tfoot, th, thead, tr
Blocked HTML elements: These elements, and their contents, are removed from
html payloads.
Document headers: head, title
Embeds: audio, embed, object, source, video
Frames: frame, frameset
Scripting: applet, script
Other elements: Any elements not listed above are removed, but their
contents are preserved.
Related
I have a problem not solved yet:
A page allow users to create post (editor is markdown format). In detail of this post, we have a sidebar which contains anchors for post title h1, h2, h3 link to correspondence position of titles.
How to do that? Please support or give me a keywords :<
Thank you !
I have successfully put a large first letter on the first paragraph on blog posts. But if there are other first paragraphs in the post (examples: the first paragraph of a blockquote, the first paragraph in an embedded podcast player) they are also displaying the large first letter.
I have tried some examples from this post but I'm not sure if this article is covering my situation or not. I'm new to the idea of adjacent sibling selectors. I'll share the code I tried to implement by (assumedly) telling any other p:first-of-type::first-letter incidents after my first incident to not have the styling...
.single .post .entry-content p:first-of-type::first-letter {
float: left;
width: 0.75em;
font-size: 600%;
font-family: alice, serif;
line-height: 78%;
}
.single .post .entry-content p:first-of-type::first-letter ~ p {
float: none;
width: 0;
font-size: 100%;
font-family: lora, serif;
line-height: 0%;
}
The large letters remain in block quotes and the embedded podcast player. How would I explain that first letters of first paragraphs inside of divs which are nested inside the .entry-content area should not have the first letter styling?
If your targeted paragraph is a direct child of .entry-content then you can use the direct children selector > :
.single .post .entry-content > p:first-of-type::first-letter {}
By using the direct children selector you don't select descendant elements that are nested deeper than direct children. And by adding :first-of-type or nth-of-type(n), you select only your paragraph within those childrens.
I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.
I must remove page break while generating pdf by visual force pdf, but whatever I try with css page-break-inside: avoid;, page-break-before: avoid; etc. is not working.
I want to remove all page breaks making it a continuous pdf page, but I cannot figure it out.
Instead of using CSS styling for the APEX component, try a div tag around the APEX components you want to not be broken apart with style="page-break-inside:avoid;"
//div style="width:100%;page-break-inside:avoid;"> APEX ///div>
This css page-break-inside: avoid;, page-break-before: avoid; works only when you need to iterate on components. If you are using inline pre-built css into page then you have to check following css related to body tag. like this:
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
Here I am using width and height with auto value.
Using sass, how do you style
#box1 img, #anotherbox img { height: 80px }
? Is using mixins the only way?
One way is to list your selectors just as you have done in CSS: but that's not the Sassy way to do it since these elements don't necessarily relate to each other, so why should they belong together? They just happen to share some common styles. Listing them together like this works fine, but is slightly harder to keep organized as you add more:
#box1 img, #anotherbox img
height: 80px
You could of course use a mixin for that if you want to generalize it:
=shorty
height: 80px
#box1 img, #anotherbox img
+shorty
But it's the same thing: #box1 and #anotherbox want to be in different parts of the file. You need them to share some common styles, but it makes more sense to keep them organized with the group of box rules to which they belong so you split them up:
=shorty
height: 80px
#box1
img
+shorty
#anotherbox
img
+shorty
Since that calls the mixin twice, it creates duplication in the output:
#box1 img { height: 80px }
#anotherbox img { height: 80px }
This is perfectly acceptable when the mixin just has a few rules in it, or when it's used in a limited number of places. (Mixins really come into their own when the mixin generates different style rules based on parameters.)
Ok, so that's the trip around the block with mixins.
Here's how you avoid that duplication using #extend:
The idea of #extend was originally proposed by Nicole Sullivan in her CSS Wish List blog post. This seemed like such a good idea that an implementation in current plain CSS was devised, and it was added to Sass shortly thereafter.
If your style rules describe a pattern that's intended to be used as a general class or a base style for a number of other items, you should consider #extend.
To understand the difference, we know a mixin will output the styles each time it's called, but extend will instead create a list of all the selectors where that style is used, and then attach them to one style block:
.thumb-size
height: 80px
#box1
img
#extend .thumb-size
#anotherbox
img
#extend .thumb-size
Produces:
.thumb-size, #box1 img, #anotherbox img { height: 80px }
It will print the base style class (.thumb-size) in the output, even if you strictly don't need it for anything else. But, I think this is preferable anyway since it defines the purpose of that list of selectors when it's sitting in front of them.