...

View Full Version : can I embed css into javascript string?



MTWK
12-29-2007, 02:05 AM
I've created coding that generates a random testimonial each time a page is loaded. Everything works the way I want it to. The problem is adding css. The question: I would like to bold the Client name (Client One, Client Two, etc.)in the array below when it displays on the page. Can I imbed css (span style="font-weight:bold;") in the javascript array? If so, how? I tried a number of different ways but none work.

Here's the html.

<p id="testimonial" >
This is the original testimonial.
</p>

Here's the javascript.

//This is the array of testimonials
var items = new Array();
items[0] = "Many thanks for the amazing staging that Onstage provided for our development in Brookline. Your expert assessment of the furniture and items needed to stage our renovation clearly made the difference in selling our property. Less than a week after you completed the staging we accepted an offer and are happy to report the unit will close in 3 weeks. I strongly urge other developers to plan on staging their units as part of the overall renovation costs.Thanks again for your help. Client One.";
items[1] = "On Stage staging recently created a beautiful model townhouse for a 26 unit new construction property in Brighton. The property SOLD OUT very quickly and everybody complimented us on the fabulous model. Additionally, On Stage staged a Newton property that sold within days of the staging. They do beautiful and creative work. Client Two.";
items[2] = "We needed to move quickly from our house and put it on the market empty, without any furniture. Unfortunately, people didn’t seem to understand the house well and see its potential. After staging the house, we started to get some offers, and eventually a decent offer during a soft market. On Stage clearly helped buyers to see our house’s beauty and worth. Thank you! Client Three.";
items[3] = "I finally had a chance to go take a look at the completed staging and all I can say is “WOW!” You guys did an unbelievable job, it was so nice. You made it a very modern, contemporary home but also making it feel very warm and welcoming. I am confident now that this home will not last long on the market after you have added your touch. Client Four";

//This creates a random number for the index array to display a random item from the array
function replace() {
var displayItemIndex = Math.floor(Math.random() * items.length);
//This puts the item on the correct part of the page
var testimonialParagraph = document.getElementById("testimonial");
testimonialParagraph.firstChild.nodeValue = items[displayItemIndex];
}

window.onload = replace;

VIPStephan
12-29-2007, 02:20 AM
Something like:


testimonialParagraph.style.fontWeight = 'bold';

should do it.
However, even better is to separate CSS and JavaScript that you don’t confuse yourself as to where something has been styled:


testimonialParagraph.className = 'jsEnabled'

and in the external stylesheet you would write:


.jsEnabled {
font-weight: bold;
color: green;

}

_Aerospace_Eng_
12-29-2007, 02:31 AM
The thing is they only want Client One, Client Two, etc. in bold, not all the text. Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.client {
font-weight:bold;
}
</style>
<script type="text/javascript">
//This is the array of testimonials
var items = new Array();
items[0] = "Many thanks for the amazing staging that Onstage provided for our development in Brookline. Your expert assessment of the furniture and items needed to stage our renovation clearly made the difference in selling our property. Less than a week after you completed the staging we accepted an offer and are happy to report the unit will close in 3 weeks. I strongly urge other developers to plan on staging their units as part of the overall renovation costs.Thanks again for your help. ";
items[1] = "On Stage staging recently created a beautiful model townhouse for a 26 unit new construction property in Brighton. The property SOLD OUT very quickly and everybody complimented us on the fabulous model. Additionally, On Stage staged a Newton property that sold within days of the staging. They do beautiful and creative work. ";
items[2] = "We needed to move quickly from our house and put it on the market empty, without any furniture. Unfortunately, people didn’t seem to understand the house well and see its potential. After staging the house, we started to get some offers, and eventually a decent offer during a soft market. On Stage clearly helped buyers to see our house’s beauty and worth. Thank you! ";
items[3] = "I finally had a chance to go take a look at the completed staging and all I can say is “WOW!” You guys did an unbelievable job, it was so nice. You made it a very modern, contemporary home but also making it feel very warm and welcoming. I am confident now that this home will not last long on the market after you have added your touch. ";

var client = new Array();
client[0] = "Client One.";
client[1] = "Client Two.";
client[2] = "Client Three.";
client[3] = "Client Four.";
//This creates a random number for the index array to display a random item from the array
function replaceit() {
var displayItemIndex = Math.floor(Math.random() * items.length);
//This puts the item on the correct part of the page
var testimonialParagraph = document.getElementById("testimonial");
var createSpan = document.createElement('span');
createSpan.className = 'client';
var createText = document.createTextNode(client[displayItemIndex]);
createSpan.appendChild(createText);
testimonialParagraph.firstChild.nodeValue = items[displayItemIndex];
testimonialParagraph.appendChild(createSpan);
}

window.onload = replaceit;
</script>
</head>

<body>
<p id="testimonial">
This is the original testimonial.
</p>
</body>
</html>

There may be a better way to do this but this is all that comes to mind at the moment.

MTWK
12-29-2007, 10:04 PM
Thanks to both.
VIPStephen: I do understand separating javascript and css. I know I can target the id (testimonial) on the paragraph with CSS in a separate stylesheet to style the entire paragraph. What I couldn't figure out how to do was to target the portion of the paragraph that I wanted bolded. Normally would throw a span around it if I were entering the text by hand but I couldn't figure out how to do that within the array.
Aerospace Eng: I had thought of doing a second array but not in the creative approach you took. I'll try it out.
Thanks much, Marie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum