Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    can I embed css into javascript string?

    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;
    Last edited by MTWK; 12-29-2007 at 02:07 AM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Something like:
    Code:
    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:
    Code:
    testimonialParagraph.className = 'jsEnabled'
    and in the external stylesheet you would write:
    Code:
    .jsEnabled {
      font-weight: bold;
      color: green;
      …
    }

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The thing is they only want Client One, Client Two, etc. in bold, not all the text. Try this
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by MTWK; 12-29-2007 at 10:13 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •