Develop Reference

Current Alternative To .fontcolor() method in Javascript

I was given this task with some existing code to change the string color of each of three selector.value(s) that is output onto an input element to three different colors. The code boils the three selectors into a single output variable. Without destroying the code, I cannot figure out how to select each individual variables prior to condensing them.
If I could use the fontcolor() method, my life would be great but it's 2018 and I can't. Is there any way you can think of to solve this issue?To clarify, I need to alter the colors of the strings that belong to output(red), select1.value(blue) and select2.value(black.
Most of the action for this is happening in the parseOutput() function but I'm just stuck and don't think it's possible without rewriting the entire program.
function updateSelector(result){
var options = result.options;
var elementId = "select" + result.element;
var logger = document.getElementById('logger');
var selector = document.getElementById(elementId);
//logger.innerHTML = JSON.stringify(elementId);
selector.innerHTML = options;
selector.disabled = false;
}
google.script.run.withSuccessHandler(updateSelector).processOptions(0);
plate();
function resetAll(){
for (var i = 0;i<3;i++){
var selector = document.getElementById('select' + i);
selector.disabled = true;
selector.innerHTML = "";
}
google.script.run.withSuccessHandler(updateSelector).processOptions(0);
}
function finalSelection(){
var output = document.getElementById('out');
//output.focus();
output.select();
}
function plate(){
var plate = document.getElementById('plate');
plate.innerHTML = atob('Q3JhZnRlZCBieTogWmFjaGFyeSBTdGFjaG93aWFr');
}
//Adds the location as initial output, followed by divider, application, and issue if select1 is selected
//else statement added so if select0 is [Costco Website Name], to ommit the " - "
function parseOutput(){
var output = "";
if (select1.value.length > 0 && select0.value !== "[Costco Website Name]"){
output = output + ' - ' + select1.value + ' // ' + select2.value;
} else{
output = output + select1.value + ' // ' + select2.value;
}
out.value=output.trim();
}
And this is the Div that displays the output:
<div class="wide"><p><input class="wide" type="readonly" id="out" onfocus="this.select();"></p></div>

A modern replacement for fontcolor would use a span and a style (or class), e.g.:
function modernFontColor(str, color) {
return '<span style="color: ' + color + '">' + str + '</span>';
}
or
function modernFontClass(str, cls) {
return '<span class="' + cls + '">' + str + '</span>';
}
...where the class defines the styling.

Increment id value in jQuery selector

I have the following code:
$("#cc").on('hidden.bs.modal', function (e) {
$("#cc iframe").attr("src", $("#cc iframe").attr("src"));
});
I would like to apply that to 10 different divs in my markup (#cc-1, #cc-2, #cc-3, etc...).
I tried using a for loop so I don't have to rewrite the same code 10 times by doing the following:
for (var i = 1; i < 11; i++) {
$('"#cc-' + i + ' iframe"').on('hidden.bs.modal', function (e) {
$('"#cc-' + i + ' iframe"').attr("src", $('"#cc-' + i + 'iframe"').attr("src"));
});
}
The thing is, I don't know how to concatenate the variable i inside my jQuery selector with everything else.
Please note that I need to target the iframe inside every #cc- div. This is the part what I'm getting trouble with. When adding the iframe after the concatenation of the #cc- with the variable i I get a syntax error.
I hope I made myself clear. Any clues in what I'm doing wrong?

You should be able to concatenate a variable in a selector like you are doing, however you don't need to add quotations.
Change this:
$('"#cc-' + i + ' iframe"')
To this:
$('#cc-' + i + ' iframe')
Also you are forgetting to add a space infront of your iframe class.
Change this:
$('"#cc-' + i + 'iframe"')
To This:
$('#cc-' + i + ' iframe')
Complete Change:
for (var i = 1; i < 11; i++) {
$('#cc-' + i + ' iframe').on('hidden.bs.modal', function (e) {
$('#cc-' + i + ' iframe').attr("src", $('#cc-' + i + ' iframe').attr("src"));
});
}

for (var i = 1; i < 11; i++) {
var mydiv="#cc-"+i;
$("mydiv iframe").on('hidden.bs.modal', function (e) {
$('"#cc-' + i + ' iframe"').attr("src", $('"#cc-' + i + 'iframe"').attr("src"));
});
}

Manipulating JQuery .text() output

I am building a Twitter like site that is fed random tweets that I want to export to the website in a particular manner. I have most of my requirements met up to this point, the only issue I am having is turning the jQuery text of a Twitter user and handle it into a link that can be clicked.
My code snippet below exhibits my work so far:
<script>
$(document).ready(function(){
var $body = $('.middle');
$body.html();
var index = streams.home.length - 1;
var newTweets = function(index){
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class=tweetBox></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
$tweet.appendTo($body);
index -= 1;
}
}
newTweets(index);
$('button').on('click', function(){
index = streams.home.length - 1;
newTweets(index);
});
});
</script>
The line that is giving the issue is $tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
I want to take tweet.user and convert it into a click-able link. Any suggestions on ways to attack this would be very much appreciated.

You have to use the HTML function of jQuery. http://api.jquery.com/html/
like this:
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);
it will do the work.

If I understand correctly, then this is what you want
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);

Is it possible to use cloneNode to clone multiple divs?

I'm trying to clone to divs in and append them to to other divs (their parents). I'm using clonenode for this but it doesn't seem to work. It clones the div in the first function and appends it to the parent of the div in the second function! Not sure what I'm doing wrong.
Here's the code (*EDIT:*var added):
function cloneQ() {
//Cloning questions and shit
cloneQ.id = (cloneQ.id || 0) + 1;
var question = document.getElementById("question");
var clone = question.cloneNode(true);
var numberOfQuestions = $('.question').length;
var id = "questioncon" + cloneQ.id;
clone.id = id;
question.parentNode.appendChild(clone);
var inid = "question" + cloneQ.id;
var optionid = "optionsdiv" + cloneQ.id;
$('#' + id + ' ' + '.' + 'questionin').attr('id', inid);
$('#' + id + ' ' + '.' + 'options').attr('id', optionid);
$('#' + id + ' h2').html('Question ' + cloneQ.id);
//Question Cloned
}
function cloneforPrint() {
cloneforPrint.id = (cloneforPrint.id || 0) + 1;
var questionprint = document.getElementById("questionprint");
var cloneprint = questionprint.cloneNode(true);
var printid = "questionprint" + cloneforPrint.id;
cloneprint.id = printid;
questionprint.parentNode.appendChild(clone);
var printinid = "thequestionprint" + cloneforPrint.id;
$('#' + printid + ' ' + '.' + 'thequestionprint').attr('id', printinid);
}
LIVE here: http://bit.ly/R8hB2m

Edit : Global vars are the problem.
You aren't putting var in front of your variables, making them global. The cloneForPrint function is picking up vars defined in cloneQ.
Init all the variables properly and you'll get some errors indicating where the problems are.
CloneQ is indeed appending to questions parent, but cloneForPrint then moves it somewhere else.
-- Old answer --
There's not enough here to work out what the problem is. My 1st guess is that the question element has the same parent as the questionprint element.
Based on the code given, cloneQ should definitely append to questions parent. So to give the appearance you've specified the DOM probably doesn't look like what you expect.

JQuery: get a child as you append it

I am appending p tags to a div as I process a json request and would liek to style it according to what is in the request.
$(document).ready(function() {
function populatePage() {
var numberOfEntries = 0;
var total = 0;
var retrieveVal = "http://www.reddit.com/" + $("#addressBox").val() + ".json";
$("#redditbox").children().remove();
$.getJSON(retrieveVal, function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
ups = this.data.ups;
downs = this.data.downs;
total += (ups - downs);
numberOfEntries += 1;
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
$("#redditbox :last-child").css('font-size', ups%20); //This is the line in question
});
$("#titlebox h1").append(total/numberOfEntries);
});
}
populatePage()
$(".button").click(function() {
populatePage();
});
});
Unfortunately things are not quite working out as planned. The styling at the line in question is applying to every child of the div, not just the one that happens to be appended at the time, so they all end up the same size, not sized dependent on their numbers.
how can I apply a style to the p tags as they are appended ot the div?
Edit: Thanks Fortes and Veggerby both worked, but i went with Fortes in the end because I did.

You can use JQuery's appendTo instead of append. For your example:
$("<p>" + ups + ":" + downs + " " + title + "<p>")
.css('font-size', ups%20)
.appendTo('#redditbox');
Here are the docs for appendTo: http://docs.jquery.com/Manipulation/appendTo

Replace:
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
with
var p = $("<p>" + ups + ":" + downs + " " + title + "<p>");
$("p", p).css('font-size', ups%20)
$("#redditbox").append(p);
Can probably be condensed even further.
Edit:
Condensed like:
$("#redditbox").append(
$("<p></p>").css('font-size', ups%20).append(ups + ":" + downs + " " + title + "")
);

Certain browsers/versions do not support the :last-child CSS selector. In that case they often ignore it and return all elements matching the remainder of the selector. This is possibly what you are seeing.
As usual IE is one such browser.
veggerby's approach should help you get around the need to use :last-child.