i want to print some default string value in bold but i am using tag but it is not rendered as bold rather it is showing it is printing the same etc
var defaultFCKValue = '----Original Message---- \n';
defaultFCKValue += '<b>From:</b> ' + from + '\n';
defaultFCKValue += '<b>Sent:</b> ' + date + '\n';
defaultFCKValue += $('div.popupContent div div.message').html();
var oEditor = FCKeditorAPI.GetInstance("<%=FCKeditorSelfDocument.ClientID %>");
var oDOM = oEditor.EditorDocument;
oDOM.body.innerText = defaultFCKValue;
The problem is that the <b> tags are being escaped/encoded and are being rendered as <b>
You might want to try using
oEditor.setHtml(defaultFCKValue)
See the js docmentation for fckeditor.
Try <strong> rather than <b>, as <b> tags have been depreciated in most doctypes. It may not directly solve your problem, but it is at least good practice.
Related
Can we format a colour text message and sendFormattedMessage?
Using JavaScript + Google Web Apps to interact with Telegram Bot.
function sendFormattedMessage( chat_id, text, parse_mode, disable_web_page_preview, disable_notification ) {
var encodedText = encodeURIComponent(text);
var response = UrlFetchApp.fetch(vUrlTelegram + "/sendMessage?chat_id=" + chat_id + "&text=" + encodedText + "&parse_mode=" + parse_mode );
// Logger.log(response.getContentText());
}
function telegramBotMachine( id, chat_id, text, name ) {
var sUpperText = text.toUpperCase();
if ( sUpperText.substr( 0, 4 ) === "MENU" ) {
sendFormattedMessage( chat_id, menu(), "HTML", "false", "false" );
have obtained Telegram Bot API docs, unable to find a HTML tag to colour format a text?
Any work around?
HTML style
To use this mode, pass HTML in the parse_mode field. The following tags are currently supported:
<b>bold</b>, <strong>bold</strong>
<i>italic</i>, <em>italic</em>
<u>underline</u>, <ins>underline</ins>
<s>strikethrough</s>, <strike>strikethrough</strike>, <del>strikethrough</del>
<b>bold <i>italic bold <s>italic bold strikethrough</s> <u>underline italic bold</u></i> bold</b>
inline URL
inline mention of a user
<code>inline fixed-width code</code>
<pre>pre-formatted fixed-width code block</pre>
<pre><code class="language-python">pre-formatted fixed-width code block written in the Python programming language</code></pre>
I am not sure if it is still relevant for you, but they have an API method to enable htmlMode.
For instance in java it will be:
message.enableHtml(true);
And you can wrap your message with html tags and css styles.
String message_text = "<b>" + update.getMessage().getFrom().getFirstName() + "</b>" + " Said what? \n" + update.getMessage().getText();
I'd like to find and replace specific text strings within an element across multiple URLS.
The element:
<div class="text-row"><p></p></div>
Within the p tags the text strings would be:
1."Endo" change to "Endodontist"
2."MCD" change to "Lead Dentist"
How would I accomplish that using Google Tag Manager?
Using Javascript you can look for the elements that match by class/id and just edit them.
if(document.getElementsByClassName('text-row')){
var elems = document.getElementsByClassName('text-row');
for(var k = 0;k < elems.length;k++){
var text = elems[k].innerText;
if(text.indexOf('Endo') != -1){
text.replace('Endo','Endodontist');
elems[k].innerText = text;
}
}
}
I have the color theme of a website I'm working on change on refresh and would like to display the css background color attribute in my HTML. Is that possible?
i.e.
<footer>The color of the moment is <insert the background color attribute>. Refresh for a makeover</footer>
would display something like
"The color of the moment is #DB0C0C. Refresh for a makeover"
Since the hex color changes based on the style sheet loaded, I don't want to hardcode it. If I had a ruby variable #color which = #ff0000 and wanted to display it in html I could do something like
<%= #color%>
I'm wondering if there is any way to do something similar to access a CSS attribute.
You don't even need jQuery for this.. you can use just vanilla javascript with .getComputedStyle():
<span id='color-map'></span>
var element = document.getElementById("id-goes-here");
var style = window.getComputedStyle(element);
document.getElementById('color-map').innerHTML = style.backgroundColor;
However, it would appear that this does not give the color as a hex, but rather an 'rpg(x, y, z)' string. To get the hex from that, you can parse it using regex and return the result:
function rgbsToHex(str) {
var hex = "#";
var matches = str.match(/rgb\((\d+),\s(\d+),\s(\d+)\)/);
hex += Number(matches[1]).toString(16);
hex += Number(matches[2]).toString(16);
hex += Number(matches[3]).toString(16);
return hex;
}
DEMO
You can use the .css() function in jQuery.
$('footer').find('span').text($('.bg').css('background-color'));
This will give you the color in rgb, if you would like to show it in HEX then check this for more info.
This question already has answers here:
Widow/Orphan Control with JavaScript?
(7 answers)
Closed 8 years ago.
A common problem when working with typography in HTML/CSS is something we call "horunge" in Swedish ("widow" in english).
What it is:
Let's say you have a box with a width of 200px and with the text "I love typograpy very much". Now the text breaks and becomes:
I love typography very
much
As a designer I don't want a word bastard (single word / row). If this was a document/PDF etc. I would break the word before very and look like this:
I love typography
very much
which looks much better.
Can I solve this with a CSS rule or with a javascript? The rule should be to never let a word stand empty on a row.
I know it can be solved by adding a <br /> but that's not a solution that works with dynamic widths, feed content, different translations, browser font rendering issues etc.
Update (solution)
I solved my problem with this jquery plugin: http://matthewlein.com/widowfix/
A simple jQuery / regrex solution could look like the following, if you add the class "noWidows" to the tag of any element that contains text you are worried about.
Such as:
<p class="noWidows">This is a very important body of text.</p>
And then use this script:
$('.noWidows').each(function(i,d){
$(d).html( $(d).text().replace(/\s(?=[^\s]*$)/g, " ") )
});
This uses regex to find and replace the last space in the string with a non-breaking character. Which means the last two words will be forced onto the same line. It's a good solution if you have space around the end of the line because this could cause the text to run outside of an element with a fixed width, or if not fixed, cause the element to become larger.
Just wanted to add to this page as it helped me a lot.
If you have (widows) actually should be orphans as widows are single words that land on the next page and not single words on a new line.
Working with postcodes like "N12 5GG" will result in the full postcode being on a new line together but still classed as an orphan so a work around is this. (changed the class to "noWidow2" so you can use both versions.
123 Some_road, Some_town, N12 5GG
$('.noWidows2').each(function(i,d){
var value=" "
$(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, value).replace(/\s(?=[^\s]*$)/g, value));
});
This will result is the last 3 white spaces being on a new line together making the postcode issue work.
End Result
123 Some_road,
Some_town, N12 5GG
I made a little script here, with the help of this function to find line height.
It's just an approach, it may or may not work, didn't have time to test throughly.
As of now, text_element must be a jQuery object.
function avoidBastardWord( text_element )
{
var string = text_element.text();
var parent = text_element.parent();
var parent_width = parent.width();
var parent_height = parent.height();
// determine how many lines the text is split into
var lines = parent_height / getLineHeight(text_element.parent()[0]);
// if the text element width is less than the parent width,
// there may be a widow
if ( text_element.width() < parent_width )
{
// find the last word of the entire text
var last_word = text_element.text().split(' ').pop();
// remove it from our text, creating a temporary string
var temp_string = string.substring( 0, string.length - last_word.length - 1);
// set the new one-word-less text string into our element
text_element.text( temp_string );
// check lines again with this new text with one word less
var new_lines = parent.height() / getLineHeight(text_element.parent()[0]);
// if now there are less lines, it means that word was a widow
if ( new_lines != lines )
{
// separate each word
temp_string = string.split(' ');
// put a space before the second word from the last
// (the one before the widow word)
temp_string[ temp_string.length - 2 ] = '<br>' + temp_string[ temp_string.length - 2 ] ;
// recreate the string again
temp_string = temp_string.join(' ');
// our element html becomes the string
text_element.html( temp_string );
}
else
{
// put back the original text into the element
text_element.text( string );
}
}
}
Different browsers have different font settings. Try to play a little to see the differences. I tested it on IE8 and Opera, modifying the string every time and it seemed to work ok.
I would like to hear some feedback and improve because I think it may come in handy anyway.
Just play with it! :)
There are also CSS widows and orphans properties: see the about.com article.
Not sure about browser support...
EDIT: more information about WebKit implementation here: https://bugs.webkit.org/buglist.cgi?quicksearch=orphans.
Manually, you could replace the space in between with
I've been looking for ways to dynamically add it in. I found a few, but haven't been able to make it work myself.
$('span').each(function() {
var w = this.textContent.split(" ");
if (w.length > 1) {
w[w.length - 2] += " " + w[w.length - 1];
w.pop();
this.innerHTML = (w.join(" "));
}
});
#foo {
width: 124px;
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span>
</div>
I need a way to allow each letter of a word to rotate through 3 different colors. I know of some not so clean ways I can do this with asp.NET, but I'm wondering if there might be a cleaner CSS/JavaScript solution that is more search engine friendly.
The designer is including a file like this for each page. I'd rather not have to manually generate an image for every page as that makes it hard for the non-technical site editors to add pages and change page names.
Here is some JavaScript.
var message = "The quick brown fox.";
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
for (var i = 0; i < message.length; i++){
document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
}
On the server-side you can do this easily enough without annoying search engines AFAIK.
// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
c = c + 1; if (c > 3) c = 1;
}
If you really want dead simple inline HTML code, write client-side Javascript to retrieve the message out of a given P or DIV or whatever based on its ID, split it, recode it as above, and replace the P or DIV's 'innerHTML' attribute.
There’s definitely no solution using just CSS, as CSS selectors give you no access to individual letters (apart from :first-letter).
I'd rather not have to manually generate an image for every page
Then generate the image automatically.
You don't specify which server-side technology you're using, but any good one will allow you to manipulate images (or at least call an external image utility)
So the non-technical users would just need to do something like this:
<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>
And the redblueyellow.cfm script would then either use an existing programs.png or generate a new image with the multiple colours as desired.
I can provide sample CFML or pseudo-code to do this, if you'd like?