I'm building a table that displays the dates of the next 10 days. I need to insert the day, date, month and year into the table. I'm using this JavaScript code for this:
document.getElementById(i).innerHTML = weekday + " " + date + " " + month + " " + year;
My problem:
I want to underline the month, but not the other values.
How can I fix this one? I already tried giving a CSS class along with the variable but I keep failing quite hard.
If more details or code is needed, please ask. This is my first time posting here and only javascripting for a month or so.
You do want to use a CSS class to give meaning to that portion of the element and style it. Wrap it in a <span> with the given class and then apply the styles through your style sheet.
document.getElementById(i).innerHTML = weekday + " "
+ date
+ " <span class='month'>" + month + "</span> "
+ year;
Style
.month { text-decoration: underline; }
Using a semantic class, rather than a specific tag or inline styles, allows you to easily change the style of this type of display on a global basis rather than having to update each individual place where the styling occurs.
EDIT: Obviously you know your application best, but I would avoid underlining except for links or where convention dictates (like some titles) that it should be used. It can be very confusing for a user since underlining in a browser typically conveys that something is a clickable link. That doesn't seem to be what you're going for here, but I could be wrong.
Not elegant solution, but just works:
document.getElementById(i).innerHTML = weekday + " " + date + " <span style='text-decoration: underline;'>" + month + "</span> " + year;
Why don't you just give it markup since innerHTML implies that you can put html there.
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year;
I just used an underline tag :)
You can achieve this using the HTML <u> tag. For example:
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year;
Here's an example using the above method > http://jsfiddle.net/vuS4B/
But it might be better for you to do this using a <span> element, and add a CSS class to the span. Something like this:
document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year;
And the associated CSS:
span.underline { text-decoration: underline; }
Here's the jsFiddle > http://jsfiddle.net/vuS4B/1/
Related
I'm trying to make the first line of text from my tool tip to be bold.
The code below is what I currently have and it doesn't work.
tooltip.html("<b>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</b> <br>" +
"Total CO2 Emission excluding LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] +
"<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
"<br>")
The screenshot below is the result of the code above (some CSS was used to style the tooltip, etc.)
Result of tooltip code
Can anyone help me with this?
If you need more code to help me with this problem, I'm more than happy to share it with you! :)
Sorry for my bad English, it's not my native language.
Thank you in advance!
Hi you can solve this by using a span with a class and style the class in your css file:
tooltip.html("<span class='tooltip-text-bold'>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</span> <br>" +
"Total CO2 Emission excluding LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] +
"<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
"<br>")
then you style in css using:
.tooltip-text-bold{
font-weight: 700;
}
I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`
I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`
You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';
I'm faced with a trivial but not-quick-to-get thing: I need to set the font of a string as a strike-through style.
I've tried search for similar solution on Stackoverflow but it wasn't much instructive and helpful.
What I do have:
var bookingDetails = "\nЗаезд: " + row[0] + "\nВыезд: " + row[1] + "\nНомер: " + "«" + row[2] + "»" + "\nТип размещения: " + row[3] + "\n" + "\nЦена за ночь: " + row[4] + " руб." + "\nВнесённый депозит: " + row[8] + " руб." + "\n" + "\nИмя и фамилия гостя: " + row[5] + "\nМобильный телефон: " + row[6] + "\nЭлектронная почта: " + row[7] + "\n" + "\nПримечание: " + row[11];
I need to make the content of bookingDetails striked out without changing anything in the sheet itself. I tried bookingDetails.setFontLine("line-through") but it didn't help by showing the error of "TypeError: Cannot find function setFontLine in object...".
Please, help me fix it.
Just letting you know that I'm very thankful for your attempt to help me in advance.
UPD № 1: I'm using Google Spreadsheets. If it does make sense.
UPD № 2: If it is not possible to make this strike-through transformation just in the script not explicitly in cells then I should add that bookingDetails is used in the email body to be sent through MailApp.sendEmail. So if it possible to transform the contents of bookigndbetails directly in the message body then let me know how to make it as quick as possible on the example of my script.
Hoping that know my goal is clear.
Here is a function that will set strikethrough the text
function setStrikethrough(range) {
var ss = SpreadsheetApp.getActiveSpreadsheet(); // Get the current spreadsheet.
var sheet = ss.getSheets()[0]; // Select the first sheet.
var cell = sheet.getRange(range); // Use supplied arguments
cell.setFontLine("line-through"); // set strikethrough
}
You can call this method like this (this will set the line style of the given range to 'line-through'):
// specify the range
setStrikethrough("B2:C4");
See https://developers.google.com/apps-script/reference/spreadsheet/
So I have this code that defined a variable called circles, and appended it a title. The title has four lines, first is the country, second is the price, 3rd is the value, and 4th is the gdppc.
Now I want to make the gdppc a larger font size than the previous 3 variables. This would require me to style gdppc separately from the others (currently they are all styled by this css called tipsy). However, I don't know how exactly would I do that.
circles.append("title")
.text(function(d) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + d.gdppc; });
$(".circles").tipsy({ gravity:'nw', html: true,});
The idea is probably to make gdppc a separate variable, and style it separately. How is this implemented in coding?
I tried
var ratings = function(d) {return d.gdppc};
circles.append("title")
.text(function(d,ratings) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + ratings; });
$(".circles").tipsy({ gravity:'nw', html: true,});
$(".ratings).myownstyle({});
and it doesn't work, probably because of I am an amateur who doesn't understand anything about JavaScript.
Just wrap it:
circles.append("title")
.text(function(d) {
return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> <strong>" + d.gdppc + "</strong>;
});
CSS
strong {
font-size: 1.25em;
}
Note:
You could use any tag here, <span>, <em> and/or you could use classes to hook the style to them, rather than just adding a css rule to the element.
In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?
You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.