SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Created DOM elements and CSS

    I've written some elements to the DOM. In IE they do not pick up the styling from the CSS. Yet in FF they do.

    Any suggestions?



    Code CSS:
    a:link              { font: 12px verdana; color: #000000; text-decoration: underline }
    a:active            { font: 12px verdana; color: #000000; text-decoration: underline }
    a:visited           { font: 12px verdana; color: #000000; text-decoration: underline }
    a:hover             { font: 12px verdana; color: #000000; text-decoration: underline }
     
    a.normal:link       { font-family: "Arial", Arial, Helvetica, sans-serif; font-size:   12px; color: #FFFFFF; text-decoration: none }
    a.normal:active     { font-family: "Arial", Arial, Helvetica, sans-serif; font-size:   12px; color: #FFFFFF; text-decoration: none }
    a.normal:visited    { font-family: "Arial", Arial, Helvetica, sans-serif; font-size:   12px; color: #FFFFFF; text-decoration: none }
    a.normal:hover      { font-family: "Arial", Arial, Helvetica, sans-serif; font-size:   12px; color: #FFFFFF; text-decoration: underline }
     
    table.admin {
            border-width: 1px;
            border-style: solid;
            border-color: #5B5762;
            border-collapse: separate;
            background-color: #5B5762;
    }
    table.admin th {
            text-align: left;
            border-top: 0px solid #333;
            border-right: 1px solid #333;
            border-left: 0px solid #333;
            border-bottom: 2px solid #5B5762;
            padding: 5px;
            background-color: #8B8793;
            }
    table.admin td {
            border-top: 0px solid #333;
            border-right: 1px solid #5B5762;
            border-left: 0px solid #333;
            border-bottom: 1px solid #5B5762;
            padding: 5px;
            background-color: #FCF6CF;
           }
    table.admin tr.d0 td {
            border-style: solid;
            border-color: #5B5762;
     
            background-color: #FCF6CF;
            font-family:  Arial, Helvetica, sans-serif; font-size: 12px;
    }
    table.admin tr.d1 td {
             border-style: solid;
             border-color: #5B5762;
             background-color: #FEFEF2;
             font-family:  Arial, Helvetica, sans-serif; font-size: 12px;
    }
     
    /* this is for the mouseout and default settings */
     
    .mouseit {
      background-color: #e5e5e5;
    }
     
    /* :hover is a pseudo selector to use to set the mouseover attributes */
    .mouseit:hover {
      background-color: #CC0000;
    }
     
    *{padding:0;margin:0;}
    body
    {
      padding: 2px;
      margin: 2px;
     
      font-family:  Arial, Helvetica, sans-serif; font-size: 11px;
      background-color :#A69F93;
     
    }
     
    .input-box
    {
    color: #000000;
    background: #FEFEF2;
    border: 1px solid #000;
    }
    .acp
    {
     background:#009900;
     background: url(images/4.jpg) repeat-x bottom;
    }
    h2,ul{font-size:1em;padding:18;margin:0;}
     
     
     
    rad_list
    {
      text-align: left;
      padding: 10px;
      margin: 0px;
     
    }
    .wrapper {
    margin: 2px auto 0 auto;
    background: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }
     
    .w {width:80%;}
     
    #header {background:#b7c9e9;
    height:100px;
    padding:5px;
    }
    .cellback {
    background: url(../images/bar.jpg) repeat-x;
    width: 100%;
    padding: 5px;
    }
    .message-wrapper{
            display: block;
            width: 400px;
            margin: 1px 1px 1px 1px;
            padding: 2px 2px 2px 2px;
            border: 1px solid #000;
            background: #8B8793;
            font-weight: regular;
            text-decoration: none;
            color: #8B8793;
            }
    #message{
            display: block;
            margin: 2px 2px 2px 2px;
            padding: 4px 8px;
            border: 1px solid #000;
            background: #FCF6CF;
            font-weight: regular;
            text-decoration: none;
            color: #5B5762;
            }
    #errorDiv{
     
            font-weight: bold;
            font-size: 16px;
            color: red;
     
    }
    #loading{
            float: right;
     
    }
    #wrapper{
    color: #000;
    border: 2px solid #000;
    }
    .newsitem{
     
            margin: 5px;
            padding: 5px 5px 5px 0px;
     
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 9px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemtitle{
            margin: 5px;
            padding: 5px 5px 5px 0px;
     
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemsummary{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-style: italic
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemurl{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemclickurl{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemsource{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemsourceurl{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    .newsitemlanguage{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
     
    .newsitempublisheddate{
            margin: 5px;
            padding: 5px 5px 5px 0px;
            text-align: left;
            font-family: "Arial", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 12px;
            color: #000;
            border: 1px solid #FFF;
     
    }
    #output{
                    border: 1px solid red;
     
    }
     
    #footer{
    position: fixed;
    bottom: 0px;
    }
    p.copyright{
    font-family: "Arial", Arial, Helvetica, sans-serif; font-size:   10px; color: #000000; text-decoration: none
    }
    input.mar{background-color:maroon; color:white}
    input.white{background-color:white; color:maroon}
    input.red {background-color:red; color:white}
    input.blue {background-color:white; color:blue}

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
      <title></title>
      <style type="text/css" media="screen">@import "trouble.css";</style>
     
     
     <script type="text/javascript">
     function ddo(){
      // set the parent container
      var ni = document.getElementById('output');
     
      // start a counter
      var num = 2;
     
      //create a new container div
      var newdiv = document.createElement('div');
      // create other divs
      var newdivnewsitemtitle = document.createElement('div');
      var newdivnewsitemsummary = document.createElement('div');
      var newdivnewsitemurl = document.createElement('div');
      var newdivnewsitemclickurl = document.createElement('div');
      var newdivnewsitemsource = document.createElement('div');
      var newdivnewsitemsourceurl = document.createElement('div');
      var newdivnewsitemlanguage = document.createElement('div');
      var newdivnewsitempublisheddate = document.createElement('div');
      var chkdiv9 = document.createElement('input');
     
     
     
     
     
      //create an id for the div
      var divIdName = 'newsitem_'+num;
      // create other names
      var divIdNamenewsitemtitle = 'newsitemtitle_'+num;
      var divIdNamenewsitemsummary = 'newsitemsummary_'+num;
      var divIdNamenewsitemurl = 'newsitemsitemurl_'+num;
      var divIdNamenewsitemclickurl = 'newsitemclickurl_'+num;
      var divIdNamenewsitemsource = 'newsitemsource_'+num;
      var divIdNamenewsitemsourceurl = 'newsitemsourceurl_'+num;
      var divIdNamenewsitemlanguage = 'newsitemlanguage_'+num;
      var divIdNamenewsitempublisheddate = 'newsitempublisheddate_'+num;
      var chkIdName9 = 'newsitem9_'+num;
     
      // class name for div
      var classname ='newsitem';
     
      var class1 ='newsitemtitle';
      var class2 ='newsitemsummary';
      var class3 ='newsitemurl';
      var class4 ='newsitemclickurl';
      var class5 ='newsitemsource';
      var class6 ='newsitemsourceurl';
      var class7 ='newsitemlanguage';
      var class8 ='newsitempublisheddate';
      var class9 ='newsitemchk';
     
      // set the id for the div
      newdiv.setAttribute('id',divIdName);
     
      newdivnewsitemtitle.setAttribute('id',divIdNamenewsitemtitle);
      newdivnewsitemsummary.setAttribute('id',divIdNamenewsitemsummary);
      newdivnewsitemurl.setAttribute('id',divIdNamenewsitemurl);
      newdivnewsitemclickurl.setAttribute('id',divIdNamenewsitemclickurl);
      newdivnewsitemsource.setAttribute('id',divIdNamenewsitemsource);
      newdivnewsitemsourceurl.setAttribute('id',divIdNamenewsitemsourceurl);
      newdivnewsitemlanguage.setAttribute('id',divIdNamenewsitemlanguage);
      newdivnewsitempublisheddate.setAttribute('id',divIdNamenewsitempublisheddate);
      chkdiv9.setAttribute('id',chkIdName9);
      chkdiv9.setAttribute('type','checkbox');
     
     
      // set the class name
      newdiv.setAttribute('class',classname);
     
      newdivnewsitemtitle.setAttribute('class',class1);
      newdivnewsitemsummary.setAttribute('class',class2);
      newdivnewsitemurl.setAttribute('class',class3);
      newdivnewsitemclickurl.setAttribute('class',class4);
      newdivnewsitemsource.setAttribute('class',class5);
      newdivnewsitemsourceurl.setAttribute('class',class6);
      newdivnewsitemlanguage.setAttribute('class',class7);
      newdivnewsitempublisheddate.setAttribute('class',class8);
      chkdiv9.setAttribute('class',class9);
     
      //insert the data
      //newdiv.innerHTML = Result.Title + '\n\n' + Result.Summary;
     
     newdivnewsitemtitle.innerHTML = 'ppppp';
     newdivnewsitemsummary.innerHTML = 'ppppp';
     newdivnewsitemurl.innerHTML = 'ppppp';
     newdivnewsitemclickurl.innerHTML = 'ppppp';
     newdivnewsitemsource.innerHTML = 'ppppp';
     newdivnewsitemsourceurl.innerHTML = 'ppppp';
     newdivnewsitemlanguage.innerHTML = 'ppppp';
     newdivnewsitempublisheddate.innerHTML ='ppppp';
     //chkdiv9.innerHTML = '';
     
     
     
     
     
     
      // add the child div to the container
      //ni.appendChild(newdiv);
     
      ni.appendChild(newdivnewsitemtitle);
      ni.appendChild(newdivnewsitemsummary);
      ni.appendChild(newdivnewsitemurl);
      ni.appendChild(newdivnewsitemclickurl);
      ni.appendChild(newdivnewsitemsource);
      ni.appendChild(newdivnewsitemsourceurl);
      ni.appendChild(newdivnewsitemlanguage);
      ni.appendChild(newdivnewsitempublisheddate);
      ni.appendChild(chkdiv9);
     
      }
     </script>
     
    </head>
     
    <body>
    <form name="form1" method="post" enctype="multipart/form-data" action="news-capture-settings.php"><input type="hidden" name="action" value="add">  <table class="admin" border="0" cellpadding="0" cellspacing="0">
     
            <th colspan="2">Capture Criteria</th>
     
            <tr class="d0">
     
                <td>Search Term(s)</td>
                <td><input type="text"  class="input-box" id="queryText" name="search_term" size="40" value="hurricane" /></td>
     
            </tr>
     
     
     
            <tr class="d1">
     
                <td>Providers</td>
                <td><input name="google" id="google" type="checkbox" value="ON" disabled>Google <input name="yahoo" id="yahoo" type="checkbox" value="ON" disabled checked="ckecked">Yahoo</td>
     
            </tr><tr class="d1"><td colspan="2">
     
     
     
                <input type="button" value="Search" onclick="ddo();"/> <div id="loading"></div></td></tr>        </form></table>
            <div id="errorDiv" name="errorDiv"></div>
     
              <div name="ouput" id="output"><div>
     
            <div id="results" name="results"></div>
            </div>
     
     
        <div class="newsitem">xhbx</div>
     
     
     
                <div class="newsitemtitle">'.$title.'</div>
     
                <div class="newsitemsummary">'.$summary.'</div>
     
                <div class="newsitemurl">'.$url.'</div>
     
                <div class="newsitemclickurl"><a href="'.$clickurl.'" target="_blank">Read Article</a></div>
     
                <div class="newsitemsource">'.$newssource.'</div>
     
                <div class="newsitemsourceurl">'.$newssourceurl.'</div>
     
                <div class="newsitemlanguage">'.$language.'</div>
     
                <div class="newsitempublisheddate">Published on '.Nice_Date_Time((int)$published_date).'</div>
     
     
     
     
     
    </body>
     
    </html>
    Last edited by Robert_2006; Aug 27, 2008 at 09:02. Reason: removed link and added file contents for future reference

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To set the class of an element via JavaScript, use the className attribute, not the class attribute.

  3. #3
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r51 View Post
    To set the class of an element via JavaScript, use the className attribute, not the class attribute.
    Thank you. I did just notice though that it fails in FF then. I'll try to add both.

  4. #4
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding both solved the second issue.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you access the className property of each element directly, you should only have to set it once.
    Code:
    element.className = 'myClassName';
    rather than
    Code:
    element.setAttribute('className', 'myClassName');
    element.setAttribute('class', 'myClassName');

  6. #6
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all kind of new to me. What I'm doing is as follows.

    Code JavaScript:
    newdivnewsitemtitle.setAttribute('className',class1);

    This is part of the process for adding new divs to the page.

    bigger picture.

    Code JavaScript:
         for(var i in obj.Results) {
          var Result = obj.Results[i];
     
          //alert(Result.Title + '\n\n' + Result.Summary);
     
      // set the parent container
      var container = document.getElementById('output');
     
      // start a counter
      var num = i;
     
      //create a new container div
      var newdiv = document.createElement('div');
      // create other divs
      var newdivnewsitemtitle = document.createElement('div');
      var newdivnewsitemsummary = document.createElement('div');
      var newdivnewsitemurl = document.createElement('div');
      var newdivnewsitemclickurl = document.createElement('div');
      var newdivnewsitemsource = document.createElement('div');
      var newdivnewsitemsourceurl = document.createElement('div');
      var newdivnewsitemlanguage = document.createElement('div');
      var newdivnewsitempublisheddate = document.createElement('div');
      var chkdiv9 = document.createElement('input');
     
     
     
     
     
      //create an id for the div
      var divIdName = 'newsitem_'+num;
      // create other names
      var divIdNamenewsitemtitle = 'newsitemtitle_'+num;
      var divIdNamenewsitemsummary = 'newsitemsummary_'+num;
      var divIdNamenewsitemurl = 'newsitemsitemurl_'+num;
      var divIdNamenewsitemclickurl = 'newsitemclickurl_'+num;
      var divIdNamenewsitemsource = 'newsitemsource_'+num;
      var divIdNamenewsitemsourceurl = 'newsitemsourceurl_'+num;
      var divIdNamenewsitemlanguage = 'newsitemlanguage_'+num;
      var divIdNamenewsitempublisheddate = 'newsitempublisheddate_'+num;
      var chkIdName9 = 'newsitem9_'+num;
     
      // class name for div
      var classname ='newsitem';
     
      var class1 ='newsitemtitle';
      var class2 ='newsitemsummary';
      var class3 ='newsitemurl';
      var class4 ='newsitemclickurl';
      var class5 ='newsitemsource';
      var class6 ='newsitemsourceurl';
      var class7 ='newsitemlanguage';
      var class8 ='newsitempublisheddate';
      var class9 ='newsitemchk';
     
      // set the id for the div
      newdiv.setAttribute('id',divIdName);
     
      newdivnewsitemtitle.setAttribute('id',divIdNamenewsitemtitle);
      newdivnewsitemsummary.setAttribute('id',divIdNamenewsitemsummary);
      newdivnewsitemurl.setAttribute('id',divIdNamenewsitemurl);
      newdivnewsitemclickurl.setAttribute('id',divIdNamenewsitemclickurl);
      newdivnewsitemsource.setAttribute('id',divIdNamenewsitemsource);
      newdivnewsitemsourceurl.setAttribute('id',divIdNamenewsitemsourceurl);
      newdivnewsitemlanguage.setAttribute('id',divIdNamenewsitemlanguage);
      newdivnewsitempublisheddate.setAttribute('id',divIdNamenewsitempublisheddate);
      chkdiv9.setAttribute('id',chkIdName9);
      chkdiv9.setAttribute('type','checkbox');
     
     
      // set the class name for IE
      newdiv.setAttribute('className',classname);
     
      newdivnewsitemtitle.setAttribute('className',class1);
      newdivnewsitemsummary.setAttribute('className',class2);
      newdivnewsitemurl.setAttribute('className',class3);
      newdivnewsitemclickurl.setAttribute('className',class4);
      newdivnewsitemsource.setAttribute('className',class5);
      newdivnewsitemsourceurl.setAttribute('className',class6);
      newdivnewsitemlanguage.setAttribute('className',class7);
      newdivnewsitempublisheddate.setAttribute('className',class8);
      chkdiv9.setAttribute('className',class9);
     
     // set the class name for FF
     newdiv.setAttribute('class',classname);
     
      newdivnewsitemtitle.setAttribute('class',class1);
      newdivnewsitemsummary.setAttribute('class',class2);
      newdivnewsitemurl.setAttribute('class',class3);
      newdivnewsitemclickurl.setAttribute('class',class4);
      newdivnewsitemsource.setAttribute('class',class5);
      newdivnewsitemsourceurl.setAttribute('class',class6);
      newdivnewsitemlanguage.setAttribute('class',class7);
      newdivnewsitempublisheddate.setAttribute('class',class8);
      chkdiv9.setAttribute('class',class9);
     
     
      //insert the data
     newdiv.innerHTML = Result.Title + '\n\n' + Result.Summary;
     
     newdivnewsitemtitle.innerHTML = Result.Title;
     newdivnewsitemsummary.innerHTML = Result.Summary;
     newdivnewsitemurl.innerHTML = Result.URL;
     newdivnewsitemclickurl.innerHTML = Result.ClickURL;
     newdivnewsitemsource.innerHTML = Result.Source;
     newdivnewsitemsourceurl.innerHTML = Result.SourceUrl;
     newdivnewsitemlanguage.innerHTML = Result.Language;
     newdivnewsitempublisheddate.innerHTML = Result.PublishDate;
     //chkdiv9.innerHTML = '';
     
     
     
     
     
     
      // add the child div to the container
      container.appendChild(newdiv);
     
      container.appendChild(newdivnewsitemtitle);
      container.appendChild(newdivnewsitemsummary);
      container.appendChild(newdivnewsitemurl);
      container.appendChild(newdivnewsitemclickurl);
      container.appendChild(newdivnewsitemsource);
      container.appendChild(newdivnewsitemsourceurl);
      container.appendChild(newdivnewsitemlanguage);
      container.appendChild(newdivnewsitempublisheddate);
      container.appendChild(chkdiv9);
     
     
         }

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      // set the class name for IE
      newdiv.setAttribute('className',classname);
     
      newdivnewsitemtitle.setAttribute('className',class1);
      newdivnewsitemsummary.setAttribute('className',class2);
      newdivnewsitemurl.setAttribute('className',class3);
      newdivnewsitemclickurl.setAttribute('className',class4);
      newdivnewsitemsource.setAttribute('className',class5);
      newdivnewsitemsourceurl.setAttribute('className',class6);
      newdivnewsitemlanguage.setAttribute('className',class7);
      newdivnewsitempublisheddate.setAttribute('className',class8);
      chkdiv9.setAttribute('className',class9);
     
     // set the class name for FF
     newdiv.setAttribute('class',classname);
     
      newdivnewsitemtitle.setAttribute('class',class1);
      newdivnewsitemsummary.setAttribute('class',class2);
      newdivnewsitemurl.setAttribute('class',class3);
      newdivnewsitemclickurl.setAttribute('class',class4);
      newdivnewsitemsource.setAttribute('class',class5);
      newdivnewsitemsourceurl.setAttribute('class',class6);
      newdivnewsitemlanguage.setAttribute('class',class7);
      newdivnewsitempublisheddate.setAttribute('class',class8);
      chkdiv9.setAttribute('class',class9);
    The setAttribute method is a general method for setting attributes of xml elements. If you're sticking with (x)html web pages then you can use the shortcut:
    Code:
      newdiv.className = classname;
     
      newdivnewsitemtitle.className = class1;
      newdivnewsitemsummary.className = class2;
    etc.
    The problem you're seeing is that while 'class' is a valid html attribute, it is also a reserved word in JavaScript. Browser vendors have used the 'className' property instead of 'class' to get and set CSS classes programmatically.

    In your example, do you need to assign both id and class values? Are you going to reference each element individually (needing ids) or will you be looking at groups of similar items (needing classes) or both?

  8. #8
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm. It's smaller and easier to read also. Thanks for the information.


Bookmarks

Posting Permissions

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