I know you can add CSS in an HTML code, but what I want to know is that is it possible to do the opposite? Because there's something I want to add a class to, but it only has a custom CSS box.
EDIT:
<div class="thing2"></div>
Fiddle - What I wanna try to do here is to make the ".thing2" appear by only putting codes on the css box and not adding the code above in the html box. Just wanted to see if it's even possible.
you can use a function (javascript) like
function myfunc()
{
var something = document.getElementById("ElementID");
something.className = something.className + " newclass";
}
then just call it
No, but you can do it using JavaScript:
var element = document.getElementById("elementId");
element.className = element.className + " newclass";
Hope this helps spark some ideas!
Related
i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:
<div class="message-sent">Your Message has been sent</div>
Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!
you can add a style display:none.
you can add the style after time out (3000ms) like so:
setTimeout(function(){
document.getElementsByClassName("message-sent")[0].style.display="none";
}, 3000);
note: it is better if you use an id instead of a class to identify your div.
You should try looking into the setTimeout function.
Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO.
Anyway, assuming you want to hide every member of the message-sent-class,
it goes something like this:
setTimeout(function(){
$('.message-sent').hide();
}, 2000)
In which the 2000is the variable that indicates the time (milliseconds)
You can try DOMNodeInserted,
$(document).bind('DOMNodeInserted', function(event) {
var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
var lastchild = element[element.length - 1]; // get the last one (others are hidden)
if(lastchild != null){
lastchild.style.visibility = 'hidden'; // set visibility to hidden
}
});
Working demo
Hope helps,
I am trying to add a custom element into a editable div using document.execCommand detailed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.
But when I try to add a custom polymer element using the execCommand, browser is unable to recognize the custom element even if it was already imported into scope.
var video-id='FnoL3d33U8o'//a youtube video Id
var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>';
document.execCommand('insertHTML', false, html);
But this doesn't help and the custom-video-element is not recognized by the browser. Please help if there is any alternate ways or if I am running after a mirage!
if you know what element you need to append, then you can use document.createElement.
There are multiple options how to achiev that, but In your case:
var p = document.createElement("p");
var div = document.createElement("div");
var custom = document.createElement("custom-video-element")
custom.setAttribute("video-id", videoUrl);
.. setting another attributes ..
div.appendChild(custom);
p.appendChild(div);
document.appendChild(p);
and that is it. This should work well.
Of course there might be better and easier solutions but in your case this isn't so bad.
if you create bigger html structure inside your JS, you will do something like:
var div = document.createElement("div");
var inner = "<div class="test"><div></div><p class="p"></p></div>;
div.innerHTML = inner;
div.querySelector(".p").appendChild(document.createElement("custom-video-element"));
I wish to change the color of certain words in the data-tooltip string.
<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page">Refresh page</a>
The words i wish to color a different way is "refresh" how can i target those words without having to edit the source link? Is it possible with CSS?
UPDATE:
After a more careful reading of your question I got inspired. You're asking to highlight text in the tooltip, not just the element itself, so here's a way to do just that with JS (jQuery is used heavily):
$("[data-toggle=popover]").popover({ trigger: 'hover', html: true })
.on('show.bs.popover', function() {
var ele = $(this);
ele.attr('data-original-content', ele.attr('data-content'));
var origContent = ele.attr('data-original-content');
var searchTerm = "refresh";
var searchRegex = new RegExp(searchTerm, 'gi');
var newContent = origContent.replace(searchRegex, function(match) {
return "<span class='green-text'>" + match + "</span>"
});
$(this).attr('data-content', newContent);
})
.on('hidden.bs.popover', function() {
$(this).attr('data-content', $(this).attr('data-original-content'));
});
And here's a bootply to show it working
Basically on the callback for show I pre-parse the content and add in the highlighting like I discussed above. Then on hide I restore it so it doesn't compound on each popover call.
You have to do it this way because the popover node is generated and destroyed dynamically with each show and hide.
That was a fun problem.
Original Answer
Short answer: No, you need JavaScript.
Longer answer: You'll need to use JavaScript to get the content of the link, parse it for the words you want, surround them with <span> elements with a class that CSS can act on to change their color.
The end result would look like this:
<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page"><span class="green-text">Refresh</span> page</a>
Rather than do this yourself, try a plugin. Like this one
This isn't exactly a duplicate, but the more detailed answer to your question can be found here: How to highlight text using javascript
In actionScript,am trying to change the text area using setSize()here is the code..please help me
var prbDesc_txt:TextArea = new TextArea();
prbDesc_txt.text = "Hello world!";
reportAProblemPopUp.addChild(prbDesc_txt);
reportAProblemPopUp.prbDesc_txt.setSize(100,100);
Here am trying to add the textarea to reportAProblemPopUpmc.
Instead of:
reportAProblemPopUp.prbDesc_txt.setSize(100,100);
remove the reportAProblemPopUp and just reference it directly:
prbDesc_txt.setSize(100,100);
Otherwise you need to use getChildByName() on your reportAProblemPopUp if you want to reference it the way you were thinking of.
Hallo all: I need to insert a html string in a iframe as shown below:
....
var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"
jQuery('#popolaIframe').click(function() {
parent.$("#indexIframe")[0].documentElement.innerHTML = html;
});
Is there a way to achieve this?
var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"
jQuery('#popolaIframe').click(function() {
var doc = parent.$("#indexIframe")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
});
Does that code you posted work? If not, it's probably because browsers disallow modification of iframe content for security reasons.
Looks like you can get a refrence to the body so I don't see why not:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
You have lost 1 level, you need modify innerHtml of body, but not document:
document.body.innerHTML = bla-bla
You cannot insert into an iframe unless you remove() the iframe and use 'append(html)'. You can insert it inside iframes body like
$('body',parent.$("#indexIframe")[0].contentWindow.document).html(html)
Alternitevely if not sure about the parent element you could do that:
var doc = $.find("#myIframe")[0].contentWindow.document; //that will look in the whole dom though
doc.open();
doc.write(html);
At least this did the job in my case :)