I am trying to display strings in Adobe Captivate 9 text captions with JavaScript. I'm using a non-responsive project, and the below code always shows the first "br" tag for newline. If I'm to remove the "br" tags in userResults then the "br" tag in topTenUsers will be seen.
However, in a responsive project, the same code does not show any of the "br" tags.
Code:
var userResults = 'You placed at rank ' + myRank + ' with a score of ' + myScore + '<br>' + '<br>';
var topTenUsers = 'The top ' + numPlayers + ' users are: <br>';
var topTenMsg = userResults + ' ' + topTenMsg;
window.cpAPIInterface.setVariableValue(topTenVarName, topTenMsg);
What is the cause of this difference and how could it be avoided?
Try a self-closing br.
var userResults = 'You placed at rank ' + myRank + ' with a score of ' + myScore + '<br />' + '<br />'
Related
This question already has answers here:
How can I insert new line/carriage returns into an element.textContent?
(13 answers)
Closed 4 years ago.
This is a snippet of code, I want to add a line break after each statement. Tried using "/r/n" and "<-br>" none of them seem to work fine.
**else {
para.textContent = num + ' squared is ' + squared(num) + '. ' +
num + ' cubed is ' + cubed(num) + '. ' +
num + ' factorial is ' + factorial(num) + '.';
}**
Instead of textContent you can use innerHTML and <br />s.
para.innerHTML = num + ' squared is ' + squared(num) + '.<br />' +
num + ' cubed is ' + cubed(num) + '.<br />' +
num + ' factorial is ' + factorial(num) + '.';
You can also solve this using CSS. Just add this style white-space: pre; to the target element:
para.setAttribute('style', 'white-space: pre;');
I am actually writing a SOAP command (from javascript) for an Outlook Add-In that sends a mail (to run on an Exchange Server). In the mail, I want to include 2 hyperlinks in 2 different lines. As of now, the code is as follows;
{
var soapNotificationItem = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
' xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages"' +
' xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
' xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"' +
' xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types">' +
' <soap:Header>' +
' <RequestServerVersion Version="Exchange2013" xmlns="http://schemas.microsoft.com/exchange/services/2006/types" soap:mustUnderstand="0" />' +
' </soap:Header>' +
' <soap:Body>' +
' <m:CreateItem MessageDisposition="SendAndSaveCopy">' +
' <m:Items>' +
'<t:Message>'+
'<t:Subject>Notification email</t:Subject>'+
'<t:Body BodyType="HTML">' + MyMessage + '</t:Body>' +
' <t:ExtendedProperty>' +
' <t:ExtendedFieldURI PropertyTag="16367" PropertyType="SystemTime" />'+
'<t:Value>2014-01-02T21:09:52.000</t:Value>'+
'</t:ExtendedProperty>'+
'<t:ToRecipients>' + MyMailAdd + '</t:ToRecipients>' +
'</t:Message>'+
' </m:Items>' +
' </m:CreateItem>' +
' </soap:Body>' +
'</soap:Envelope>';
mailbox.makeEwsRequestAsync(soapNotificationItem, soapNotificationItemCallback);
}
As you can see, I have my parameter MyMessage, which I am constructing separately, as represented in the below example;
MyMessage = "www.mylink1.com" + "
" + "www.mylink2.com"
Any Idea how I make hyperlinks out of the 2 links with a line break in between. The
does not work either.
Finally I managed to find a solution to the issue. By specifying the Body type to HTML <t:Body BodyType="HTML">, I have been able to add simple HTML.
To simplify, the HTML construction follows the below format, though in my case, I was reading the data from a XML file, looping and concatenating the message to be displayed.
var link1 = "www.test.com"
var MyMessage = "<strong>Click on link :</strong>: " + Link1 + "";
Then coming to the SOAP part, it remains as is;
{
var soapNotificationItem = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
' xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages"' +
' xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
' xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"' +
' xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types">' +
' <soap:Header>' +
' <RequestServerVersion Version="Exchange2013" xmlns="http://schemas.microsoft.com/exchange/services/2006/types" soap:mustUnderstand="0" />' +
' </soap:Header>' +
' <soap:Body>' +
' <m:CreateItem MessageDisposition="SendAndSaveCopy">' +
' <m:Items>' +
'<t:Message>'+
'<t:Subject>Notification email</t:Subject>'+
'<t:Body BodyType="HTML">' + MyMessage + '</t:Body>' +
' <t:ExtendedProperty>' +
' <t:ExtendedFieldURI PropertyTag="16367" PropertyType="SystemTime" />'+
'<t:Value>2014-01-02T21:09:52.000</t:Value>'+
'</t:ExtendedProperty>'+
'<t:ToRecipients>' + MyMailAdd + '</t:ToRecipients>' +
'</t:Message>'+
' </m:Items>' +
' </m:CreateItem>' +
' </soap:Body>' +
'</soap:Envelope>';
mailbox.makeEwsRequestAsync(soapNotificationItem, soapNotificationItemCallback);
}
NOTE: for the link to appear correctly in Office365, do add the # in front of the link.
I have a button that when clicked opens email and fills the body with variables. This looks too messy though as it all appears on one line. Could I just chuck in a br tag inbetween each variable so they appear on a new line?
Thanks. Here is code:
$("#buttonLink").click (function() {
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType + ' My Frame Background: ' + frameBackground + ' My text: ' + yourText + ' My Text design: ' + textDesign);
});
I'm thinking something like:
$("#buttonLink").click (function() {
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType + <br> + ' My Frame Background: ' + frameBackground + <br> + ' My text: ' + yourText + <br> +' My Text design: ' + textDesign);
});
Use the ASCII code which is %0D%0A, like this:
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My Frame&body=My frame Type: ' + frameType +'%0D%0A My Frame Background: ' + frameBackground + '%0D%0A My text: ' + yourText + '%0D%0A My Text design: ' + textDesign);
Strictly speaking should the white spaces also be replaced. Use the ASCII code which is %20, like this:
window.open('mailto:sales#beauxcadeaux.co.uk?subject=My%20Frame&body=My%20frame%20Type:%20' + frameType +'%0D%0A%20My%20Frame%20Background:%20' + frameBackground + '%0D%0A%20My%20text:%20' + yourText + '%0D%0A%20My%20Text%20design:%20' + textDesign);
try some thing like this
$("#buttonLink").click (function() {
//try this
var brtag= document.createElement("br");
//then
brtag.id = "your_id"
brtag.setAttribute("class", "your_class");
//and so on
//then do rest of your stuffs
});
it might work ...(do let me know it it works !)
When I parse an html string with $.parseHTML(), the outer most div disappears.
Given the html string:
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
When I call parse this html, the outer most div (class="outer") isn't present.
var $myHtmlObject = $($.parseHTML(myCode))
console.log($myHtmlObject.html()) // no "outer" div present.
I made a jsfiddle to show the behavior
I can easily get around this by wrapping everything in another div before I parse it, but that seems like a hack for something that should otherwise work.
Because .html() gives the inner html of the first element of the set of element on which it was called. What you are looking for here is the outerHTML
console.log($myHtmlObject[0].outerHTML)
console.log($myHtmlObject.prop('outerHTML'))
Also there is no need to use parseHTML() in this case
var log = (function() {
var $log = $('#log');
return function(msg) {
$('<p/>', {
text: msg
}).appendTo($log)
}
})();
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
var $html = $(myCode);
log('html: ' + $html.html())
log('outer-html: ' + $html.prop('outerHTML'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
I've created a universal header dynamically that contains the date and time. Currently it acts and looks perfectly fine, but as soon as I remove the document.write('.') it disappears. It seems that I need any sort of write there in order for the dateDiv to appear, the '.' is just a random character used to fill the space.
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
//dateDiv disappears without a document.write() before being appended to the body. need to fix
document.write('.');
document.body.appendChild(dateDiv);
I haven't been able to find an answer to this yet, anyone see the problem?
As loganfsmyth is implying its likely that your code is executed, when the document is not fully loaded. Try:
window.onload = function(){
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
document.body.appendChild(dateDiv);
};
Edit:
See for example http://javascript.about.com/library/blonload.htm