I am parsing the html from a site and I encountered this tag: <div data-alert class="alert-box success radius">
What attribute does 'data-alert' represent?
These are custom attributes new in HTML 5. See http://www.w3schools.com/tags/att_global_data.asp
Seems like the page you are talking about uses Foundation CSS framework:
http://foundation.zurb.com/docs/components/alert_boxes.html
See this page:
http://foundation.zurb.com/docs/components/alert_boxes.html
It's a div container that, according to the site, conforms to 100% of the container width you put them in.
Related
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
<p> </p>
Check this snippet :
<p> </p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>
I am using this template : http://technext.github.io/humanity/
in the Blog News section the Read more button does not work on mobile.the only difference is that in the html code i have add an tag
<div class="button-main bg-fio-point">read more</div>
moreover the image also does not work as a link too on a mobile phone..
Any idea?
Please, make a coherent HTML. Turn the html like this:
<div class="button-main bg-fio-point">read more</div>
Your code is for special cases and for expert layouters. You must to use the normal and valid code like this purpose.
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)
I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.
If you're using Apache web server, you could try using server side includes.
You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...
Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)
<body>
<h1>This is original page</h1>
<p>Some content on original page.</p>
<iframe src="sample.html" width="600" height="300"></iframe>
</body>
You can adjust the width and height and you can also remove the border if you want the page to be more seamless.
Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.
Additional note: Avoid frameset solutions also, as they aren't valid markup.
See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).
You could use JavaScript to load some HTML from one document into another. This task is fairly simple using the jQuery toolkit:
$("The ID of a container (a div element for instance) in which you want to load
the contents of a HTML file").load("path to html file you want to load");
<div id="inserthere" />
$(function ()
{
$("#inserthere").load("loadme.html"); // Load the contents of loadme.html
// and stuff it in the div with the
// ID of "inserthere"
});