We Keep Coding

Making different parts of a text (of one div) colored using CSS in java script

I am setting a dynamic message through JS like:
A.$("#mydiv").html("Some message");
A.$("#mydiv").append(date+", "+start+" - "+end+". ").css('color','#008A00'); -->//Want only this coloured.
But it is making the whole message in the div as coloured.
But I want only the second line message coloured.
How can I do that??
Any leads appreciated!!

Try with:
var span = $('<span>' + date + ", " + start + " - " + end + ". </span>").css('color','#008A00');
A.$("#mydiv").append(span);
You cannot set color just to some part of the text - you can apply it to some specific element and append it to your parent #mydiv.

TinyMCE Replace Parent Node

I'm developping a WordPress plugin which adds a button to the TinyMCE editor. When that button is clicked the desired behaviour should be:
1. If the selected text is not part of a short (or is the short) then the shortcode should be inserted into the DOM.
2 If not, the shortcode should be replaced with the new one.
The first requirement is fufilled, but the second not. When inserted, it show up in the visual editor but it not saved or displayed when saving or switching to text. This leads me to believe that im not directly editting the object underneath the editor, only that which is displayed. What is the correct way to go about it. Please see the following function:
...
insertContent: function(){
var atts = '';
var node = tinyMCE.activeEditor.selection.getNode();
var edit = $(node).is('div.wp-arv-faq');
jQuery('./$p/-sc-input').each(function() {
atts = atts + jQuery(this).attr('name') + '=\"' + $(this).val() + "\" ";
});
var caption = 'F.A.Q. ' + $('./$p/-sc-input[name="tax"] option:selected').text();
var style = $('./$p/-sc-input[name="style"] option:selected').text();
atts += ' caption="' + caption + ' (' + style + ')"';
if (edit){
$(node).empty();
tinyMCE.activeEditor.selection.setContent('[arv-faq ' + atts + '][/arv-faq]');
/$p/faqMCE.closeModal();
},
...
Please note, that the '/$p/' is unique to my build process and should be ignored. Thanks in advance

From your question it is not perfectly clear what you are trying to do, but i guess you are trying to insert html code into the editor.
Be sure to have the selection set right after calling $(node).empty();
Note: All your tags and attributes need to be configured as allowed tags and attributes using valid_elements and valid_children configuration paramters.

upgrading javascript that adds a link to a field

I am trying to change the Sales Stage field label to a hyperlink to pop up a new browser window.
Currently I have a form with a Sales Stage field that has a drop down::
The underlying HTML:
<td title="Select the sales process stage for the opportunity to indicate the probability of closing the opportunity." class="ms-crm-ReadField-Normal ms-crm-FieldLabel-LeftAlign" id="salesstagecode_c"><span class="ms-crm-InlineEditLabel"><span class="ms-crm-InlineEditLabelText" style="text-align: left; max-width: 115px;">Sales Stage</span><div class="ms-crm-Inline-GradientMask" style="display: none;">
</div></span></td>
or perhaps better formatted:
The function that I used previously worked on an older version of the form:
function csjs_AddHyperlinkToLabel(sFieldId, sURL, sWindowOptions) {
    var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
    $("label[for='" + sFieldId + "']").html("" + sCurrentLabel + "");
}
the function above worked on a form with the following html::
What changes would be required to the javascript to change the Sales Stage field label to a hyperlink to pop up a new browser window?
Though I'd be very grateful for a solution, I'm looking for guidance on how to accomplish this. Thank you for your attention and time.
Unfortunately, the solutions below did not work. I ran this through the debugger and here's what I got http://screencast.com/t/fT6tHvXZzvc
The issue here is that we are passing “salesstagecode” to this function:
csjs_AddHyperlinkToLabel("salesstagecode", sPageURL, sWindowFeatures);
and this turns out to be NULL:
var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
*
The issue is that Microsoft changed the way the forms are rendered and
the HTML of the rendered page will no longer work with the way the
function was written. The label is now in a span tag instead of a
label tag. I don't know if there is a way to identify that span and
change the contents to have new HTML to make the text link.
*
How do you update a span tag?

You need to add target="_blank" attribute in your hyperlink markup.

Simple:
change
.... onclick=\"window.open('" + sURL + "', null, '" ....
to
.... onclick=\"window.open('" + sURL + "', '_blank', '" ....

Programmatically turning on <strong></strong> for editable section in html5

I am working on an HTML5/javascript/php project where I have a which is set to be editable.
I know the user can be press ctrl + b to make the text bold, but I also want to allow the user to be able to click on the appropriate button on the web page to perform the same action.
I.e. when the user types it will be in normal text, they click on the bold button on the web page and it appends <strong> to the html of the section, and whatever they type now will be hold until they press the button again and it then appends </strong>.
However, at the moment when I append <strong> it seems to automatically add </strong> and I want to stop that from happening. Am I going about this the right way or is there a better way that this can be achieved.
Below is the javascript that I am trying to use
function enableDisableBold(section)
{
var boldEnabled = $("#boldEnabled").val();
var content = $("#" + section).html();
var newContent;
if (boldEnabled == "true")
{
$("#btnBold").removeClass("formatButtonsActivated");
$("#boldEnabled").val("false");
//newContent = content + "</strong>";
//$("#" + section).html(newContent);
}
else
{
$("#btnBold").addClass("formatButtonsActivated");
$("#boldEnabled").val("true");
newContent = content + "<strong>";
$("#" + section).html(newContent.replace("</strong>", ""));
}
alert($("#" + section).html());
}
Thanks for any help you can provide.
UPDATE
I've just come across another solution which does what I want to achieve, but there is a slight issue. At the end of the function call, I perform the following bit of code.
var article = document.getElementById(section);
article.focus();
document.execCommand("Bold", false, null);
The problem is this is working fine in Internet Explorer, but in Chrome is where I am having the problem. When I set the focus back to the <section> tag, it puts the cursor back to the beginning of the text. I read somewhere that putting onfocus="this.value = this.value;" on the control but this doesn't help.
I was trying to find a way of putting the cursor back to the end of the character, but I would actually need to put the cursor back to where it originally was. Is this something that can be done.

create a strong element and append your content to it
$('<strong />').append(content);

JS Alert not showing when using Sharepoint list value

I am using Sharepoint 2007 and writing a web part. In the "RenderContents" method I am writing the html code for displaying page. there is a requirement to display alert message to user when they click a link.
I have written following code-
string alertmessage = Utility.GetLocalizedText("NavigatingToNewPageTxt", "RCCResources", "Common");
writer.Write("<a href='" + clubMemberReportsLink + "' target='new' onClick='alert('" + alertmessage + "');' > ");
Note- My requirement is to get the alert message from Sharepoint list as we use SP list for translations.
when I refreshed the site link was displayed but alert message did not appear.when I checked what was rendered in browser I got following code in browser.
ClubLeaderDownloadreportsText
I tried using following code as well
writer.Write("<a href='" + clubMemberReportsLink + "' target='new' onClick=alert('" + alertmessage + "'); > ");
(I removed the single quote from onclick method.)Still the browser does not display alert message.
this behavior is observed in both browsers. I know I am missing something very simple here...
can you pleas point out any help?

Seems like you need to escape the quotation marks for so that the onclick string is not terminated. Like:
onclick='alert(\"" + alertmessage + "\");'
Hope that helps!