I want to know if we can write dynamically ALT & title attribute's value same as the img file name? I think it will possible by using css content property but dont know much about it.
like <img src="file_name.jpg" alt="File Name" title="File Name">
If it is possible then also I want both the attributes having the clean & formatted values like I dont want _ underscore. may be it can be remove as well from CSS?
$('img').attr({ //change multiple attributes
title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});
You can't use content because:
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.
This will put text in front or after an element, but does not change it's properties!
Related
I'm trying to replace the image source, but only if the image corresponds to the existing class "overview-icon--downtime". Then there's another class, "overview-icon--degraded", which I want to replace it with (or simply putting an image address, which might prove easier).
To be replaced:
<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>
To be replaced with:
<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>
I was thinking of this, but I'm not sure I'm heading in the right direction.
document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");
The image loads with the page, so I'll also need to use the AJAX at the end.
Any ideas here please? Thanks a lot in advance! :3
You are heading in the right direction.
Attributes are the things inside of the tags. In this instance, "class" and "src" are attributes of the img element.
document.querySelector will select the img element, you then need to call setAttribute('class', new class value), and setAttribute('src', new src value)
My goal is simple: I want to add extra attributes to an img tag in CKEditor; e.g.: <img src="path" data-attr="myattr">.
I built my Python connector; I added my upcast/downcast to CKE, but I still don't fully understand how to send the data-attr attribute from CKFinder to CKEditor.
Pipeline should be:
Click CKFinder
Select an image — this should contain an extra attribute: e.g.: data-attr
Add the image to CKEditor — the tag should contain the data-attr attribute
I can't figure how to do the last two steps. Any suggestions?
How do I apply css styles in a string with javascript? I try the following way:
var text = '<b>stylized text</b>';
Note: When I send this string via e-mail, the whole string appears, as (<b>stylized text</b>), without the style applied. How do I make the text with the applied style appear in the received email?
You don't need javascript for this. Just use the HTML style attribute, so:
<b style="font-size:24px;color:green">stylized text</b>
You can put most CSS styles in the style attribute. For more information, see this.
Note: some email applications support embedded HTML and some don't. From what I can tell from the results you describe in your question, yours does. But it's something to keep in mind.
I want to add Title Attribute to Anchor Tag (from my Resource file) that is getting generated by below mentioned code.
var hyperlinkopen = divTitleBar.children('a');
hyperlinkopen.removeClass("ui-dialog-titlebar-open ui-corner-all");
hyperlinkopen.addClass("ui-dialog-help-layer-titlebar-open");
Title should be like Title="Open". How can I add title to my anchor tag?
use jquery .attr() to set any attribute.
for yours it will be
divTitleBar.children('a').removeClass("ui-dialog-titlebar-open ui-corner-all").addClass("ui-dialog-help-layer-titlebar-open").attr('title','Open');
This is fairly straight forward, say which attribute you want to change and give it a value
hyperlinkopen.attr('title','open');
I have this HTML:
<span>Lies Hendriks</span>
How can I select the second word with CSS. I can not change the HTML of this document.
I want give "Hendriks" another style. Or can I do it with JavaScript?
You will need to split up into seperate entities to apply different styles to each word.
<span style="style1">Lies</span><span style="style2">Hendriks</span>
There is no way to selectively apply styles to a single word using JS or CSS without changing the HTML itself.
You can't do with CSS, but if you know your structure (for instance, that it's always the second word you need to style differently) you can do it with JavaScript (assuming that you can inject your JS into the page, of course).
This is an example that may be a bit convoluted, but if your HTML has:
<span>Lies Hendriks</span>
then you can do it like so (upon your DOM loading event):
var span1 = document.getElementById('span1');
span1.innerHTML = span1.innerHTML.replace(/(\s+)(.*)/, '$1<span class="red">$2</span>');
assuming you have
.red
{
color: red;
}
in your CSS
The above code allows me to make everything after the first word red. That should give you an idea how to do that, depending on your structure.