I need to show an html block if the specific link is available without using javascript.
In other words I need to reverse behaviour of object tag with data attribute, for example:
<object data="error.src">My content</object>
Shows content if error.src is not available.
There's no way to do this without some JavaScript.
You can use some css like this to hide/display object with specific data attribute:
object{
display:none;
}
object[data="error.src"]{
display:block;
}
Related
when I create the pdf of my page with DOMPDF, I would like to exclude something not really important or needed into the pdf file, for example the links.
Is there a way to ignore the tags?
thanks!
You can use a sanitizer like DOMPurify and configure it to disallow a tags.
// leave all safe HTML as it is and add <a> elements to block-list
var clean = DOMPurify.sanitize(dirty, {FORBID_TAGS: ['a']});
You can make them disappear by using css properties
a { display:none; }
...
New to this, bare with me please.
I've started having fun with HTML code doing offline documents. I just found out that I could easily change my font, in the head, by adding this:
<style type=text/css>
mkf { font-family:'Courier'; color:red; }
</style>
Then, as I go to add code to , every time I want to change the font of a select group of word with the addition of the color red, I just need to type
<mkf>words here</mkf>
Wonderful! It saves me so much time. But then I got to wonder, what if I wanted to add a link to a word. For example, instead of typing all of this out:
<mkf>Example1</mkf>
I would simply be able to parse whatever text I inputted between, let's say,
<linkandfont>Example1</linkandfont>,
which would basically create a link to the file "to_do_list.pdf".
I've tried to find a name or term for this so that I can study and learn more, but I have not found it yet.
Thank you.
Why are you not using classes instead? These achieve the same thing. For example;
<style>
.mkf {
font-family:'Courier';
color:red;
}
</style>
<div class="mkf">test</div>
However, to properly answer your question, what you want is ABSOLUTELY possible in HTML5 and CSS3. And I've used such methods in certain projects of mine (just know this isn't entirely Kocher or conventional).
mkf {
font-family:'Courier';
color:red;
}
<mkf>this is working</mkf>
As for making <linkToSomething>Click Here</linkToSomething> not as easy. You would definitely need JavaScript etc to handle all that. You won't achieve it in CSS and HTML alone.
You cannot. Only way to create a link in HTML is by typing description. You could also shorten by using JavaScript but that's not HTML.
The way you changed the color in head is part of styling or CSS, so you could give a class to a tag like <a class='redlink' href='.. and define that class in head like you did with mkf : .redlink {color:red} or if you want all your links to be red then you could give color to a in head style: a {color:red;}
By typing <mkf> in body I guess you created custom tag which is not part of standard HTML tags, more proper way would be using class to a standard tag like div or p.
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
How to assign values or string to p tag through CSS?
I am trying like this, why I am doing like this because I come from Android programming.
HTML file:
<p> </p>
CSS file:
p{
text:"today"
}
result should= "today" in browser
So please help me.
Although I can't see a reason why you can't just add the text to the HTML file, I will still answer your question.
There is no way to add text inside of the HTML tag. The only way that you can add text around HTML is through pseudo elements like the following:
p:before{
content: "today";
color: black;
}
This is not recommended however, due to the fact that the text won't actually exist in the html and will need to be styled to display properly.
A much better solution would be to use javascript
<script>
document.getElementById('todayTag').innerHTML = "today";
</script>
The 'todayTag' refers to an ID that will be placed on the p tag.
1)It is not possible in css,
2)Use jQuery or
$("p").html("today");
3)Use JavaScript
document.getElementsByTagName("P")[0].innerHTML = "Today";
note [0] is the index
You cannot do that via css alone, use javascript for that instead.
document.getElementById("demo").innerHTML = "text";
<p id="demo">
</p>
<span name="tumme"><img ...
is not valid because "name" is not valid in "span".
But I need to use name="tumme" and I need to be able to use text and img inside the tag.
So what tag can I use together with "name" and on the same time follow w3c?
To answer the question directly, as per the spec the name attribute is allowed on the following HTML elements (very few of these will be useful to you):
BUTTON
TEXTAREA
SELECT
FORM
FRAME
IFRAME
IMG
A
INPUT
OBJECT
MAP
PARAM
META
Is there a reason you must use a "name" attribute rather than a class or an id? Since both class and id are valid for span elements, and since span appears to be the most appropriate element to use,I'd set one of those to "tumme" rather than bending another element into shape.
You could use the <a> tag with no href attribute.
As I said in response to your earlier question — use classes.
Basically, the only valid reason that I can think of where you would want to use the name attribute, is to have DOM access via document.getElementsByName()
or to use it as a FORM OUTPUT.
As a result, what you should be doing is using the HTML5 OUTPUT tag
and add the following in your HEAD tag for legacy browsers:
// Create a fake OUTPUT element, so IE can style it.
<script type="text/javascript> document.createElement("output");</script>
// Implement default style, so that it acts like a SPAN in other browsers:
<style type="text/css"> output { display:inline; border:0; outline:0; margin:0;padding:0; } </style>
http://html5doctor.com/the-output-element/
<output name="tumme"><img src="..." /></output>
If it is only for styling purposes or simple DOM query purposes
then you should use this as proposed earlier:
<span class="tumme"><img src="..." /></span>
or
<span id="tumme"><img src="..." /></span>
name is only valid in the <a> tag IIRC (and form elements as was pointed out by David in the comments) but I'm pretty sure that is not what you're after:
<a name="whatever"></a> would create an "anchor" on a page that could be linked to with Link text.
Why do you need to use the name attribute? Why couldn't you simply use id instead?