Develop Reference

How would you make HTML text appear disabled?

I have a div containing a span (the span could be a paragraph, too; I don't care):
<div id="aDiv">
<span id="aQuestion">What's next?</span>
</div>
I would like to be able to toggle the span's text's appearance between disabled and enabled. I've tried stuff along the lines of
document.getElementById('aQuestion').setAttribute("disabled", "disabled");
but haven't had any luck: The text doesn't have that grayed-out "disabled" look. When I inspect the element, I can see the attribute has been added. In fact, even if my original code looks like this:
<div id="aDiv">
<span id="aQuestion" disabled>What's next?</span>
</div>
the text doesn't appear disabled.
It seems I'm going down the wrong path, but online searches haven't resulted in a solution. Is there any way to accomplish this? I realize the concept of text being disabled doesn't exactly make sense, since they don't involve user interaction, but I need that look.
The only thing I've come up with is to use CSS, something along these lines:
CSS:
<style type="text/css">
.disableMe {
color:darkgrey;
}
</style>
The HTML:
<span id="aQuestion" class="disableMe">What's next?</span>
The JS:
document.getElementById('aSpan').classList.remove('disableMe');
This kind of gets me around the problem with the text, but some of my text spans will have adjacent spans containing bootstrap icons, and I need these to appear disabled, as well. Am I overlooking something very obvious?
Thanks in advance.

It's a span element so it doesn't have a disabled modifier, just create a css class that gives the look you want and use that.

span includes only the global attributes. So you cannot disable it. More here

Script affecting all images instead of only images in div that contains certain text (jQuery)

I've tried editing this code a number of ways (using if statments and each statements) with nothing working. The idea is so simple; if a div contains this specific text, I want to change the src attribute of the image in that div only.
I can't seem to figure out what I'm missing. The code below changes all the images in all divs with that class rather than just the ones that contain the specific text. I've tried to work in 'this' but apparently don't understand how it affects the function.
$(document).ready(function(){
$('.my-content').filter(':contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
Could someone kindly point me in the right direction of what I need to change to make the script target only images in the div that contain the text instead of all div with that class because one of the div did contain that text (I think that's what triggers it; I may be off about that too).

Try this:
$(document).ready(function(){
$('.my-content:contains("Top")').find('img').attr("src", "http://www.samplestuff.com/kids/test.png");
});
See jQuery :contains docs
Edit
Actually I think your answer should work as well. Seems to work fine in this jsfiddle, can you post your markup?
$('div').filter(':contains("Top")').css("color", "red")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Top</div>
<div>Right</div>
<div>Bottom</div>
<div>Left</div>

Clear icon floating next to input text

I would like to know if there is a jquery function that would let me create a clear icon floating next to input text inside a search box like this:
I could not find any example anywhere, I doubt that this is possible but a confirmation would be appreciated.

$('#input').keyup(function(){
$('<span id="width">').append( $(this).val() ).appendTo('body');
var width = $('#width').width() + 2;
$('#width').remove();
// variable "width" is now the margin required to be given from left to be next to the input's context
console.log(width);
});
This script creates a temporary <span> tag next to your <input> tag, with the same content as your <input> tag, therefor having the <span> tag the same width as your content.
See it in action here: http://jsfiddle.net/Wa7Lf/
The only thing you are going to have to do on your own is hovering it above the input field and adding your own icon, but that shouldn't be that hard.
I know it isn't perfect, but it should help you forward.

I think that is not really what you want but should go in the right direction.
http://demos.kendoui.com/web/multiselect/index.html
An "jQuery function" is not there I think. Eventually if you search, you will find an jQuery plugin for this. I don´t know. Take a look at jQuery UI or bootstrap or some other framework out there. Or take a look at the source from the kendo ui multiselect and build you own ;-)

May not worth adding another library just for this UI element. The other option besides the proposed jQuery UI/bootstrap/kendoui would be to add in an image with display: inline; and a small bit of margin to the left of the 'x' image.
In theory you could also do the whole element in css, but that's likely not worthwhile in your case.

Bootstrap popover without title

I am using bootstrap popovers.There are many popovers on the page and in one of the popover , I dont want to display the title,when I dont give Title, it still shows that area where the title would have been.
Found an answer on How do you disable the title in Twitter Bootstrap's popover plugin?
but cant give css : display:none
to popover-title class since that would hide title from all other popovers also.
What should be the correct way to do this?
Thanks in advance.

Thanks.. got it worked by overriding the template
showpopover=function(message,context){
var popover_message="<div>"+message+"</div>";
//$(a).hide();
$popover=$(context).popover({ placement:"bottom",trigger:"hover",template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',content:popover_message}).popover('show');
};
how i called the function is here:
html = html + "<td onmouseover=\"showpopover('"+main_image_data['score_reason']+"',this)\"><center>"+main_image_data['bonus']+"</center></td>";
It works :)

You can specify the template for a popover using the admittedly undocumented template option. This is described in one of the answers to the question you posted (not the accepted one). I'd use this method if it's only for some popovers on the page.
Edit: this has some drawbacks of course: updating bootstrap means making sure your template still fits, which is exactly the reason this option is not documented (I imagine).

Change div blocks onclick

Have a nice day, dear Programmers!
On G + is a block Posts; About; Photos; Videos
https://plus.google.com/109813896768294978296/posts
when you click for example on the About, there is a change at the bottom of div that contains a specific content. As I understand it, realize it is not difficult, but I'm afraid to write ten lines of code is very dirty because, in addition to jquery, because I am only a beginner. Can someone push on the right track, or to show where it has already been implemented in the demo with source code? Thanks!
<div id="109813896768294978296-posts-page" class="c-ha-If" role="tabpanel" aria-hidden="false">…</div>
<div id="109813896768294978296-about-page" class="c-ha-If c-ha-jb" role="tabpanel" aria-hidden="true">…</div>

There are two things occurring when you click on About from Posts. It appears to be adding and removing CSS classes dynamically. Which you can do with http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/.
As for loading data into a div from a URL, use http://api.jquery.com/jQuery.get/.
Once you've got the data, you can use http://api.jquery.com/html/.
If you've already loaded everything and want to achieve tab switching: http://jqueryui.com/demos/tabs/