We Keep Coding

How to CSS target a row based upon its content, not attributes

I'm using software that isn't very specific in its naming/targeting. I'm trying to target a row that contains the label Interests. I cannot add new classes.
This works too well:
.resultsList .row:nth-child(2) {color:red;}
The red text then appears anywhere on the website that uses .resultsList. I need to specifically target result-labels that only have Interests within it like so:
<div class="row">
<div class="result-label col-tn-3">Interests</div>
<div class="result-value col-tn-9">Sailing</div>
</div>
Any help? I've tried targeting using the whole class on Interests but I also turned other rows red that weren't Interests. I may be able to use plain Javascript on this but CSS would be better.
Thanks.

In Jquery! (.result-label is your target element/s class)
$(".resultsList .result-label").css("color", "red");
In Vanilla JS!
document.querySelector(".resultsList .result-label").style.color = "red";
In CSS!
.resultsList .result-label {color:red }

I think I didn't properly understand the case, but you want to only have red text those labels that have interests, right?
If it's the case, why you can't simply create a new class (for example, interest-label) and enter color: red in that? then for the tags you want, you simply add class="interest-label".
.resultsList .row:nth-child(2) {color:red;}
The css you wrote will apply color red to all elements of .resultsList and also to the second child of the row inside an element with class resultsList.
Would you please share more of your code and/or specify lil bit more what do you want to end with?

Updating a simple jQuery / CSS code

I was hoping someone could help me out with this simple question: I’ve just started to learn jQuery and found a code to show hidden text after selecting an item.
I’d like to update it so that:
a.) The selected item is bold
b.) I can add placeholder text instead of starting off with a blank hidden text field
I foolishly assumed I could solve a.) by using the :active property in css, but that only works as long as the link is clicked on. (As soon as you release the mouse button it’s gone.) Just like b.), this is probably only possible by using jQuery as well? If so, would be really great if you could show me how to solve it. :)
The codes: http://jsfiddle.net/KUtY5/1/
JS
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #menu_"+id[1]).show();
});
});
CSS
#menu_container {
width: 650px;
height: auto;
padding-left: 30px;
}
#menu_container div {
display:none;
}
HTML
<div id='nav'>
<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>
<div id="menu_container">
<div id="menu_apps">
Content of the App Section Here
</div>
<div id="menu_soups">
Content of the Soups Section Here
</div>
<div id="menu_entrees">
Content of the Entrees Section Here
</div>
</div>

Updated fiddle
You can realize a) using a custom class bold for example and the following code :
CSS
.bold{ font-weight: bold;}
JS
$(this).addClass('bold').siblings('a').removeClass('bold');
For b) I can't find any textfield in your code.
Hope this helps.

I have added some extra lines to your code and you can check it from here http://jsfiddle.net/KUtY5/483/.
You bold like this
$("#nav a").css("font-weight", 400); // First you make them thin
$(this).css("font-weight", 800); // Than you make them bold
You put placeholder like this
<div id="placeholder">
Placeholder
</div>
$("#placeholder").hide();
On the other hand I recommend you not to hide menu container. Rather hide the elements inside the menu_container. So you can put a plcaeholder in menu container and you can hide it.

To figure this out 2 questions must be asked / solved
how do you normally make text bold on a page... css right?
where do you want those styles to be defined? There are 2 places:
a. You can define it inside the javascript.
b. You can define it inside the projects css through normal methods (inline, external, embedded).
What's the difference? If you define it inside the javascript the code is self-contained. What i mean by that is you can copy/paste the JS code from one project to the next and you don't need to worry about copying related styles from the stylesheets or other sources because it's all in the JQuery that you've written.
In contrast if you define it outside the javascript in the regular places the code may not be self-contained however some find it easier to manage in the scope of that particular project because all your css is contained in one place (external stylesheet typically).
If you want to take option a, see the .css() method
If you want to take option b, see the style manipulation (toggle class in particular)
Note the examples in the above references should get you 90% of the way to understanding it.
Some final words. Learn Jquery, but i advise you to stay away from it as much as possible because it implements DOM thrashing instead of DOM caching (sizzle engine).
This video series will briefly go into why Jquery sucks for performance in the first video and the rest of the series is about how to create modular vanilla JS.
JQuery goes back and searches the DOM every time you need to make a change that is what
$.(*element*) is doing instead of just caching it.
The more nodes you have in the DOM the more processing power is used searching (because it has to go through the entire tree).
Then on top of that the more elements you have to make changes to (say if you use a css class selector) you have to add even more processing on top of that.
All this is fine if you're on a desktop, but what about a mobile platform? Where would you get all this processing power from?... It doesn't exist.

Adding text to a speech bubbles in real time

I have an image that will form the background of an html page, and I want to superimpose speech bubbles over it. I've figured out how to make bubbles with css, and set their placement. But I cannot figure out how I will populate the bubbles (the div elements). Text messages will populate files, and I need to grab the strings and display them in the bubbles, refreshing the bubble content as messages come in. Any thoughts?

Assuming one of your bubbles contains a DIV which looks like this:
<div id="bubble1">This is the text</div>
You can use Javascript to easily change the text content. Using a JS library like jQuery is recommended. Here is a code example which changes the text:
<script>
$(document).ready(function()
{
$('#bubble1').text('This is the changed text'); // to change the text
$('#bubble1').html('This has <b>some</b> formatting'); // to change the html
});
</script>
Don't forget to include jQuery itself with a line like:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
I couldn't understand where you are getting your strings from, if you let me know, I could update the answer.
If you are unfamiliar with jQuery, take a look here.

I think this will answer your question:
http://nicolasgallagher.com/pure-css-speech-bubbles/
Keep in mind that this is css3, so older browsers can have problems with that.

Adding part of the text from Textarea colored/highlighted somehow

Well, I would like to hightlight part of the text in a textarea tag, like facebook does it when you are linking someone in your status update. how do I do that?
Thanks in advance.

What facebook do is they have a div sitting under the textarea which updates on keyup on from the textarea, which can obviously use tags and css to change how the text looks, they wrap the highlighted words in b tags which have background: lightbluecolor; font-weight:normal
So your markup would look something like this
<div class="highlight">
hi <b>Dave<b> how are you?
</div>
<textarea></textarea>
.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }
$('textarea').keyup(function(){
// do stuff with detecting the mentions but essentially:
$('.highlight').html($(this).val());
})

You're going to need the help of Javascript to do this. Because the solution is, I believe, a bit too complex for this Q&A site, I would suggest Googling tutorials, for example: http://www.developphp.com/view.php?tid=1192. There are also some great examples for you to examine: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Use this jquery plugin http://plugins.jquery.com/project/htmlArea
from the website
With this very basic plug-in, you can allow any HTML inside a textarea
- with full jQuery UI Theme support.
It's as simple as $("TEXTAREA").htmlArea();
There are many options you can set, the colour of the text, position,
show formatting options etc. etc.
$("TEXTAREA").htmlArea({color:'#FF00FF',align:'right'});

If jQuery is in your stack, this plugin should do the trick for you:
https://github.com/mistic100/jQuery-highlightTextarea

Ghost writing like on tumblr signup page

Does anyone know how to create a tumblr like field as they have on
http://www.tumblr.com/
It's the URL field where some faded text is there then when you click on it, and type, it appends some text ... .tumblr.com that you cannot erase or highlight or whatever. The javascript is obfuscated so I really have no clues on how it was accomplished
I'd prefer jquery but really as long as it works...
Much regards

Edit: I just looked at it again. It takes the input as you type it and adds it into the ghostwriter span that lays above the input field. Pretty simple, really. The ".tumblr.com" text is just in the span itself. Something to the effect of: <span id="ghostwriter"><span id="ghostwriter-copy">Your Input</span>.tumblr.com</span>

There is a jQuery Plugin for that!
https://github.com/michelgotta/jquery-ghostinput-plugin
Demo:
http://michelgotta.de/ghost-input-demo/