www.webdeveloper.com
Results 1 to 14 of 14

Thread: Styling JavaScript output with CSS

  1. #1
    Join Date
    May 2011
    Posts
    8

    Styling JavaScript output with CSS

    Hello, can anyone tell me how I can style the html output of the following statement:

    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function() {
    if ( $.browser.msie && $.browser.version < 8) {
    $('body').html( 'your browser is outdated' );
    }
    });
    </script>
    </head>

    <body>

    </body>

    </html>



    I tried using inline styles, which did style the output but I get validation errors saying I cannot have the <p> or <a> elements where they are.

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    if ( $.browser.msie && $.browser.version < 8) {
    $('body').html( '<p style="margin:0 auto; text-align:center; margin-top:25px; font-size:18px; font-weight:bold;">Your browser is outdated, please upgrade to a current version. <br/> This site is standards-compliant and was created to be viewed by all modern browsers.<br/></p><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" title="download the latest version of Internet Explorer" style="display:block; margin-top:15px; font-size:14px; margin:0 auto; text-align:center; margin-top:25px; font-size:18px; font-weight:bold;">Click here to download the latest version of Internet Explorer</a>' );
    }
    });
    </script>


    Thanks in advance!

    DR

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    you could just put your desired css in a style block surrounded by a conditional statement - http://www.quirksmode.org/css/condcom.html

  3. #3
    Join Date
    May 2011
    Posts
    8

    Styling JavaScript output with CSS Reply to Thread

    Thanks for the reply!
    Where in the code would I put the conditional block?

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <!--[if lt IE 8]>
    <style type="text/css">
    <!--
    body p{
        margin:0 auto;
        text-align:center; 
        margin-top:25px; 
        font-size:18px; 
        font-weight:bold
    }
    -->
    </style>
    <![endif]-->
    </head>
    <body>
    
    </body>
    </html>

  5. #5
    Join Date
    May 2011
    Posts
    8

    Styling JavaScript output with CSS

    Thanks so much for the help!

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    no problem. you could also alternatively create an external css file and include the link to the external file within the conditional. bear in mind this only works with internet explorer.

  7. #7
    Join Date
    May 2011
    Posts
    8

    Styling JavaScript output with CSS

    I am still getting validation errors stating that i cannot have a <p> or <a> tag in that code block.
    I need these tags to be there so I can target my styles and place an anchor in the html output of the script.

    Am I doing something wrong?

  8. #8
    Join Date
    May 2011
    Posts
    8
    I just realized that putting a conditional statement in the code causes the page not to validate anyway, so I guess the point is moot from the standpoint of validation. The functionality is there and I guess that is the main thing.

  9. #9
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    show the code that you are trying to validate, the whole thing.

  10. #10
    Join Date
    May 2011
    Posts
    8

    Styling JavaScript output with CSS

    <!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" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title>Creative, Unique and Personalized Web and Graphic Design in Miami, Florida</title>
    <link rel="canonical" href="http://www.ransomemultimedia.com" />
    <meta name="description" content="Web Design, Graphic Design, Photo Editing and Retouching, Original Music, SEO in Miami, Florida" />
    <meta name="keywords" content="miami, web design, graphic design, miami website, web designer, website, websites, creative, custom website, custom blog, wordpress, seo, logos, corporate identity, original electronic music, brochure, brochures, t-shirt design, south florida, translation, proofreading, translation services, business cards, custom blog, spanish translation, flash, html, xhtml, css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript">

    // JAVASCRIPT VARS
    // cache buster
    var cacheBuster = "?t=" + Date.parse(new Date());

    // stage dimensions
    var stageW = 560;//"100%";
    var stageH = 350;//"100%";


    // ATTRIBUTES
    var attributes = {};
    attributes.id = 'FlabellComponent';
    attributes.name = attributes.id;

    // PARAMS
    var params = {};
    params.bgcolor = "#ffffff";


    /* FLASH VARS */
    var flashvars = {};

    /// if commented / delete these lines, the component will take the stage dimensions defined
    /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml
    flashvars.componentWidth = stageW;
    flashvars.componentHeight = stageH;

    /// path to the content folder(where the xml files, images or video are nested)
    /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
    flashvars.pathToFiles = "banner/";
    flashvars.xmlPath = "xml/banner.xml";


    /** EMBED THE SWF**/
    swfobject.embedSWF("preview2.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);

    </script>
    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-23251157-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>
    </head>
    <body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    if ( $.browser.msie && $.browser.version < 8) {
    $("body").html( '<p style="margin-left:auto; margin-right:auto; margin-top:25px; font-size:18px; font-weight:bold; text-align:center;">Your browser is outdated, please upgrade to a current version. <br/> This site is standards-compliant and was created to be viewed by all modern browsers.<br/></p><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" title="download the latest version of Internet Explorer" style="display:block; margin-top:15px; margin-left:auto; margin-right:auto; font-size:14px; font-weight:bold; text-align:center;">Click here to download the latest version of Internet Explorer</a>' );
    }
    });
    </script>
    <div id="page_wrap">
    <div id="home_frame">
    <div id="header">
    <h1>Ransome Multimedia</h1>
    <a href="http://www.ransomemultimedia.com" title="navigate to Home page">Home</a> <br />
    <h2 id="home_subheading">Creative Design</h2>
    </div>
    <!--end header-->
    <div id="content">
    <div id="home_content_box">
    <div id="slideshow_div">
    <table id="home_slideshow_table" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center"><!-- this div will be overwritten by SWF object -->

    <div id="FlabellComponent">
    <p>In order to view this object you need Flash Player 9+ support!</p>
    <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </div></td>
    </tr>
    </table>
    </div>
    <!--end slideshow_div-->
    </div>
    <!--end home_content_box-->

    <div id="home_content_left">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_about.html">Who we are</a></h3>
    <p>As a small but talented web and graphic design team, we at Ransome Multimedia are committed to offering our 10 plus years of combined professional experience to delivering the unique and personalized service and product that you need and deserve.</p>
    </div>
    <!--end home_content_left-->

    <div id="home_content_middle">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_services.html">What we do</a></h3>
    <p> We offer creative website development and redesign, custom WordPress blogs, HTML mailers, SEO, graphic design of all kinds, photo manipulation and restoration, translation and proofreading, original music and sound effects, and audio post production services. </p>
    </div>
    <!--end_home_content_middle-->

    <div id="home_content_right">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php">Contact us</a></h3>
    <p>We want to hear from you! Contact us today (we are located in Miami, Florida) to talk about your next project. We will be happy to answer any questions you may have for us and to provide you with a free estimate. We look forward to working with you.</p>
    </div>
    <!--end home_right-->
    </div>
    <!--end content-->

    <div id="home_sidebar">
    <div id="nav">
    <ul>
    <li> <a id="nav_about" href="http://www.ransomemultimedia.com/ransome_multimedia_about.html" title="navigate to About page">About</a> </li>
    <li> <a id="nav_services" href="http://www.ransomemultimedia.com/ransome_multimedia_services.html" title="navigate to Services page">Services</a> </li>
    <li> <a id="nav_portfolio" href="http://www.ransomemultimedia.com/ransome_multimedia_portfolio.html" title="navigate to Portfolio page">Portfolio</a> </li>
    <li> <a id="nav_blog" href="http://www.ransomemultimedia.com/blog/" title="navigate to Blog page">Blog</a> </li>
    <li> <a id="nav_contact" href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php" title="navigate to Contact page">Contact</a> </li>
    </ul>
    </div>
    <!--end nav-->
    </div>
    <!--end home_sidebar-->

    <div id="footer">
    <div id="footer_top">
    <div id="twit_div">
    <p>From Twitter:</p>
    <ul id="twitter_update_list">
    <li></li>
    </ul>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ransomemultimed.json?callback=twitterCallback2&amp;count=5"></script>
    <a href="http://www.facebook.com/pages/Ransome-Multimedia/190687264311608" target="_blank" class="footer_facebook">Link to Ransome Multimedia Facebook Page</a> <a href="http://twitter.com/ransomemultimed" target="_blank" class="footer_twitter">Link to Twitter</a> <a href="http://www.linkedin.com/pub/ransome-multimedia/33/2b5/95a" target="_blank" class="footer_linkedin">Link to Ransome Multimedia Linkedin Profile</a> <a href="http://www.myspace.com/ransomemultimedia" target="_blank" class="footer_myspace">Link to Ransome Multimedia MySpace Page</a> </div>
    <!--end footer_top-->
    <!-- <div id="valid_XHTML">valid XHTML
    <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ransomemultimedia.com%2F">validate page xhtml</a>
    </div>
    <div id="valid_CSS">valid CSS
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.ransomemultimedia.com&profile=css21&usermedium=all&warning=1&vextwarning=">validat e page CSS</a>
    </div>-->

    <div id="footer_bottom">
    <p class="footer_bottom_left">Copyright &copy; 2011 Ransome Multimedia</p>
    <p class="footer_bottom_right">This site is powered by 100% wind energy.</p>
    </div>
    <!--end footer_bottom-->

    </div>
    <!--end footer-->

    </div>
    <!--end home_frame-->
    </div>
    <!--end page_wrap-->
    </body>
    </html>




    Line 70, Column 584: document type does not allow element "a" here
    …px; font-size:18px; font-weight:bold;">Click here to download the latest versi…

    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

  11. #11
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    1. always post code in code tags by using the Black hashmark button

    2. wrap your js like so:

    Code:
    <script type="text/javascript">
    
    <!--
    
    function yourFunction()
    
    {
    
    }
    
    //-->
    
    </script>
    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" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title>Creative, Unique and Personalized Web and Graphic Design in Miami, Florida</title>
    <link rel="canonical" href="http://www.ransomemultimedia.com" />
    <meta name="description" content="Web Design, Graphic Design, Photo Editing and Retouching, Original Music, SEO in Miami, Florida" />
    <meta name="keywords" content="miami, web design, graphic design, miami website, web designer, website, websites, creative, custom website, custom blog, wordpress, seo, logos, corporate identity, original electronic music, brochure, brochures, t-shirt design, south florida, translation, proofreading, translation services, business cards, custom blog, spanish translation, flash, html, xhtml, css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript">
    <!--
    // JAVASCRIPT VARS
    // cache buster
    var cacheBuster = "?t=" + Date.parse(new Date());	
    
    // stage dimensions
    var stageW = 560;//"100&#37;";
    var stageH = 350;//"100%";
    
    
    // ATTRIBUTES
    var attributes = {};
    attributes.id = 'FlabellComponent';
    attributes.name = attributes.id;
    
    // PARAMS
    var params = {};
    params.bgcolor = "#ffffff";
    
    
    /* FLASH VARS */
    var flashvars = {};	
    
    /// if commented / delete these lines, the component will take the stage dimensions defined 
    /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml	
    flashvars.componentWidth = stageW;
    flashvars.componentHeight = stageH;
    
    /// path to the content folder(where the xml files, images or video are nested)
    /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
    flashvars.pathToFiles = "banner/";
    flashvars.xmlPath = "xml/banner.xml";
    
    
    /** EMBED THE SWF**/
    swfobject.embedSWF("preview2.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);
    //-->
    </script>
    <script type="text/javascript">
    <!--
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-23251157-1']);
    _gaq.push(['_trackPageview']);
    
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    //-->
    </script>
    </head>
    <body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript">
    <!--
    $(document).ready(function() {
    if ( $.browser.msie && $.browser.version < 8) {
    $("body").html( '<p style="margin-left:auto; margin-right:auto; margin-top:25px; font-size:18px; font-weight:bold; text-align:center;">Your browser is outdated, please upgrade to a current version. <br/> This site is standards-compliant and was created to be viewed by all modern browsers.<br/></p><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" title="download the latest version of Internet Explorer" style="display:block; margin-top:15px; margin-left:auto; margin-right:auto; font-size:14px; font-weight:bold; text-align:center;">Click here to download the latest version of Internet Explorer</a>' );
    }
    });
    //-->
    </script>
    <div id="page_wrap">
    <div id="home_frame">
    <div id="header">
    <h1>Ransome Multimedia</h1>
    <a href="http://www.ransomemultimedia.com" title="navigate to Home page">Home</a> <br />
    <h2 id="home_subheading">Creative Design</h2>
    </div>
    <!--end header-->
    <div id="content">
    <div id="home_content_box">
    <div id="slideshow_div">
    <table id="home_slideshow_table" width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center"><!-- this div will be overwritten by SWF object -->
    
    <div id="FlabellComponent">
    <p>In order to view this object you need Flash Player 9+ support!</p>
    <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </div></td>
    </tr>
    </table>
    </div>
    <!--end slideshow_div--> 
    </div>
    <!--end home_content_box-->
    
    <div id="home_content_left">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_about.html">Who we are</a></h3>
    <p>As a small but talented web and graphic design team, we at Ransome Multimedia are committed to offering our 10 plus years of combined professional experience to delivering the unique and personalized service and product that you need and deserve.</p>
    </div>
    <!--end home_content_left-->
    
    <div id="home_content_middle">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_services.html">What we do</a></h3>
    <p> We offer creative website development and redesign, custom WordPress blogs, HTML mailers, SEO, graphic design of all kinds, photo manipulation and restoration, translation and proofreading, original music and sound effects, and audio post production services. </p>
    </div>
    <!--end_home_content_middle-->
    
    <div id="home_content_right">
    <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php">Contact us</a></h3>
    <p>We want to hear from you! Contact us today (we are located in Miami, Florida) to talk about your next project. We will be happy to answer any questions you may have for us and to provide you with a free estimate. We look forward to working with you.</p>
    </div>
    <!--end home_right--> 
    </div>
    <!--end content-->
    
    <div id="home_sidebar">
    <div id="nav">
    <ul>
    <li> <a id="nav_about" href="http://www.ransomemultimedia.com/ransome_multimedia_about.html" title="navigate to About page">About</a> </li>
    <li> <a id="nav_services" href="http://www.ransomemultimedia.com/ransome_multimedia_services.html" title="navigate to Services page">Services</a> </li>
    <li> <a id="nav_portfolio" href="http://www.ransomemultimedia.com/ransome_multimedia_portfolio.html" title="navigate to Portfolio page">Portfolio</a> </li>
    <li> <a id="nav_blog" href="http://www.ransomemultimedia.com/blog/" title="navigate to Blog page">Blog</a> </li>
    <li> <a id="nav_contact" href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php" title="navigate to Contact page">Contact</a> </li>
    </ul>
    </div>
    <!--end nav--> 
    </div>
    <!--end home_sidebar-->
    
    <div id="footer">
    <div id="footer_top">
    <div id="twit_div">
    <p>From Twitter:</p>
    <ul id="twitter_update_list">
    <li></li>
    </ul>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> 
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ransomemultimed.json?callback=twitterCallback2&amp;count=5"></script> 
    <a href="http://www.facebook.com/pages/Ransome-Multimedia/190687264311608" target="_blank" class="footer_facebook">Link to Ransome Multimedia Facebook Page</a> <a href="http://twitter.com/ransomemultimed" target="_blank" class="footer_twitter">Link to Twitter</a> <a href="http://www.linkedin.com/pub/ransome-multimedia/33/2b5/95a" target="_blank" class="footer_linkedin">Link to Ransome Multimedia Linkedin Profile</a> <a href="http://www.myspace.com/ransomemultimedia" target="_blank" class="footer_myspace">Link to Ransome Multimedia MySpace Page</a> </div>
    <!--end footer_top--> 
    <!-- <div id="valid_XHTML">valid XHTML
    <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ransomemultimedia.com%2F">validate page xhtml</a>
    </div>
    <div id="valid_CSS">valid CSS
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.ransomemultimedia.com&profile=css21&usermedium=all&warning=1&vextwarning=">validat e page CSS</a>
    </div>-->
    
    <div id="footer_bottom">
    <p class="footer_bottom_left">Copyright &copy; 2011 Ransome Multimedia</p>
    <p class="footer_bottom_right">This site is powered by 100% wind energy.</p>
    </div>
    <!--end footer_bottom--> 
    
    </div>
    <!--end footer--> 
    
    </div>
    <!--end home_frame--> 
    </div>
    <!--end page_wrap-->
    </body>
    </html>

  12. #12
    Join Date
    May 2011
    Posts
    8
    ok, i'm new to the forum game

  13. #13
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    NP, the version i posted is valid. on the code block thing, you shoudl always do that as the page will read your code wrong sometimes display smileys instead of what you intended, stuff like that . Not a big deal

  14. #14
    Join Date
    May 2011
    Posts
    8
    Thanks, i passed!
    You were a huge help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles