SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Misc. DHTML questions -innerHTML

    Hiya, I just started my webpage two nights ago, and it is comming along nicely.

    Here is my webpage:
    www.angelfire.com/wizard/arcanemajik/

    BTW - Use IE to view it ^_^'

    I haven't had much time to work on it, but I have the basic layout done. I am using nested tables with javascript and CSS. To move through my site, I use the innerHTML javascript function to set the html code of a <td> tag, and I plan on coding my whole site like this. I have serveral problems, so here they are:

    1. When the amount of web page in the txtarea <td> (the main one to the right of the buttons) gets to a certain level down the cell, the button cells on the left increase in height. (Try clicking on the "About Me" button!) I'm really not quite sure why.

    2. I started doing this webpage using IE to preview it, and it didn't work very well....so, I got a snippit of code from xbDOM API (http://developer.netscape.com/evangelism/docs/api/) that would make my innerHTML stuff work on all browsers with a bit of tweaking, but it still doesn't work.

    3.For each page to be loaded into the txtarea cell (<td id='txtarea'>) I have a seperate .js file with the corresponding code. Unfortunatly, the innerHTML code needs all your HTML code to be on 1 line....is it not fun to try changing a webpage that is all on one line? No, it is not. Basically what I do, is make a .html without the body/head/whatever tags, and preview it. When it looks good, I go through and take out all the carriage returns, then cut it paste it into the .js file, and that works nicely. Now the question here is, does anyone know a way to automatically take out all those carriage returns??? It's a real pain!

    Any help with any of the three above topics would be greatly appreciated!
    -Colin

  2. #2
    SitePoint Member
    Join Date
    May 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I managed to solve one of my own problems, and am now updating my site to reflect that! I just figured out that Netscape doesn't like use of element.blah instead it likes getelementbyid('element').blah so, I used my nice little cross browsr api so I just go like this:

    xbSetInnerHTML(xbGetElementById('element'), "Stuff");

    This makes it compatible with Netscape Navigator 4+, Mozilla ish things, EI 4+, Opera 4+. I think. I've only tested IE 5.toolazytocheck, and NS 6.2. See the link in the above post for more info!

    and it was that simple! Lol! The rest of my problems are still relevant though ...

    Thanks me very much for my own help!
    Last edited by arcanemajik; May 13, 2002 at 12:46.
    -Colin

  3. #3
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With number 3 you have a couple of options...

    1 start using escaped characters in the right spot this will fix the problem you are having with everything showing on one line

    for example
    document....innerHTML="<body>\n<table>\n\t<tr>\n\t\t<td>cell1</td>\n\t</tr>\n</table>";

    This will work and make you viewed code look good...you can also shorten this (although this method requires slightly more processing time but it worth it to increase code readability.

    var inner_text = "<body\n";
    inner_text += "<table>\n";
    inner_text += "\t<tr>\n";
    ...

    Then
    document....innerHTML=inner_text;

    This should help clean up your code a bit...it will look better inside and out

    As for the problem with the moving cell heights...I think this

    <tr>
    <td style='background-color:#999999;height:100%'>
    &nbsp
    </td>
    </tr>

    piece of code is where your content pops into...the TD should also have a

    <td rowspan="7" style=....>

    This way the rows stay the same and the content shifts...BTW I didn't cound the rows but the number of rows you have should go in there...

    Hope that helps
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a better method than that using the xml dom, i will give you an example when i get home, as this basically means you can include/update/rewrite or anything you want without refreshing the page.

  5. #5
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately it has even less browsers supporting it than javascript, correct?
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  6. #6
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting you should mention that...
    I normally use appendChild and spans for control inside
    divs etc...

    I'm in the process of writing a one2many support chat system. One support member can speak to many users.
    The system uses postgres, Mason, python and Javascript (though i plan to phase python out to make it portable and convert the Mason to pure Perl (though i don't like the idea of loosing the easy Object reference)).

    It works surprisingly well - and i'm quite impressed by it.
    I always thought scripted chat programs would always flop - but with the right backend they work fine.

    The only problem i have is that whent he JS file updates i get a mouse cursor flash for about a 1/10th of a second - showing it's loading - it's quite distracting - since it happens every second

    Any ideas anyone?

    Thanks

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i couldn't put this online, so just copy it and paste it into a html file.
    Unfortunately it has even less browsers supporting it than javascript, correct?
    you can always make the user update there browser ie6 comes to mind lol:P

    At the moment i'm currently making something, which uses a php file to connects to mySQL database and creates, modfifys everything from a single page without refreshing the page using the method below

    what did you mean JS file updates Flawless?

    are you using inteval or something?
    Code:
    
    <html>
    <head>
      <title>setup</title>
    	
      <style type="text/css">
      <!-- 
    
        
    
      -->
      </style>
    	
      <script type="text/javascript">
    
        var methods;
        var locatedAT;
        var bool;
        
        methods   = 'GET';                                      // method type (get || post)
        locatedAT = 'http://www.google.com';                    // location of document to retreive
        bool      = 'false';                                    // leave this false
    
        function replace(methods,locatedAT,bool,obj)
        {			        
    
          obj = document.getElementById(obj);
          btn = document.getElementById('replaceButton');
    
            function stat()
            {
    
              var objHTTP = new ActiveXObject("Microsoft.XMLHTTP")  // opens activex http property
              objHTTP.Open(methods, locatedAT, bool)                // opens
              objHTTP.Send()                                        // sens
        
              x = '<br />connection status: ';
              x+= objHTTP.status;                           // displays whether a 404 or 200 connection etc was received
              x+= '<br />connection statustext: ';
              x+= objHTTP.statusText;                       // will return if connection is ok
              x+= '<br />connection response: <br />';
              x+= objHTTP.responseText;                     // will display text in that file (your contents)
              //xmlHttp.readyState 
              return x;
            }
            
          if (btn.value != 'show text')
          {
            obj.innerHTML = stat();
            document.getElementById('replaceButton').value = 'show text';
          }
          else
          {
            obj.innerHTML = '&lt;div&gt;replaceTEXT div&lt;/div&gt;';
            document.getElementById('replaceButton').value = 'show html'
          }
    
        }    // function end;
        
      </script>
        
    </head>
    
    <body>
    
      <h5>note</h5>
    
      <ul>
        <h5>
          <code>
              I just tested this with an external page from google and it asks the user for the activex.  <br />
              I havent tested whether it asks to connect to a local page on a server yet, but i doubt it  <br />
              will. Other than that just use local pages to retreive external pages using php and then    <br />
              just echo the page from the php file and you have your external page without active x being <br />
              enabled.
          </code>
        </h5>
      </ul>
    
    
      <h5>code</5>
    
      <ul><h6>place javascript in head</h6></ul>
    
      <pre>
        <code>
          &lt;script type="text/javascript"&gt;
    
            var methods;
            var locatedAT;
            var bool;
        
            methods   = 'GET';                                      // method type (get || post)
            locatedAT = 'http://www.google.com';                    // location of document to retreive
            bool      = 'false';                                    // leave this false
    
            function replace(methods,locatedAT,bool,obj)
            {			        
    
              obj = document.getElementById(obj);
              btn = document.getElementById('replaceButton').value;
    
                function stat()
                {
    
                  var objHTTP = new ActiveXObject("Microsoft.XMLHTTP")  // opens activex http property
                  objHTTP.Open(methods, locatedAT, bool)                // opens open(method, url, async, userid, password)
                  objHTTP.Send()                                        // sends
        
                  x = '&lt;br /&gt;connection status: ';
                  x+= objHTTP.status;                           // displays whether a 404 or 200 connection etc was received
                  x+= '&lt;br /&gt;connection statustext: ';
                  x+= objHTTP.statusText;                       // will return if connection is ok
                  x+= '&lt;br /&gt;connection response: &lt;br /&gt;';
                  x+= objHTTP.responseText;                     // will display text in that file (your contents)
      
                  return x;
               }
    
               obj.innerHTML = stat(); //to show source without it being marked up, then replace innerHTML with innerTEXT as you get sent the source code
    
           }    // function end;
     
          &lt;/script&gt;
        </code>
      </pre>
    <ul><h6>place javascript in body</h6></ul>
    
      <pre>
        <code>
          &lt;script type="text/javascript"&gt;
    			
            replace('GET', 'http://www.google.com', false, 'replaceTEXT');    // calls function in the head
    			
          &lt;/script&gt;
        </code>
      </pre>	
    
    <ul><h6>Example</h6></ul>
    <ul>
        <code>
          <input id="replaceButton" type="button" value="click here to replace" onclick="replace('GET', 'http://www.google.com', false, 'replaceTEXT');" style="background-color:white;" /> <br />
          <div   id="replaceTEXT">&lt;div&gt;replaceTEXT div&lt;/div&gt;</div>
        </code>
    </ul>
    
    <ul><h6>Extra info</h6></ul>
    
    <ul>
      <ul>
        <h6>The httpRequest Properties</h6>
        <h5>
          <table border="0" width="100%" class="ex" cellspacing="0">
            <tr>
              <td width="25%"><b>Property</b></td>
              <td width="75%"><b>Description</b></td>
            </tr>
            <tr>
              <td>readyState</td>
              <td>Returns the state of the document</td>
            </tr>
            <tr>
              <td>responseBody</td>
              <td>Returns the response as an array of unsigned bytes</td>
            </tr>
            <tr>
              <td>responseStream</td>
              <td>Returns the response as an IStream</td>
            </tr>
            <tr>
              <td>responseText</td>
              <td>Returns the response as a string</td>
            </tr>
            <tr>
              <td>responseXML</td>
              <td>Returns the response as an xml document</td>
            </tr>
            <tr>
              <td>status</td>
              <td>Returns the status code as a number</td>
            </tr>
            <tr>
              <td>statusText</td>
              <td>Returns the status as a string</td>
            </tr>
          </table>
        </h5>
        
        
        <h6>The httpRequest Methods</h6>
        
        
        <h5>
          <table border="0" width="100%" class="ex" cellspacing="0">
            <tr>
              <td width="25%" valign="top"><b>Property</b></td>
              <td width="75%" valign="top"><b>Description</b></td>
            </tr>
            <tr>
              <td valign="top">abort()</td>
              <td valign="top">Cancel the current http request</td>
            </tr>
            <tr>
              <td valign="top">getAllResponseHeaders()</td>
              <td valign="top">Returns the value of the http headers</td>
            </tr>
            <tr>
              <td valign="top">getResponseHeader(headerName)</td>
              <td valign="top">Returns the value of one specified http header</td>
            </tr>
            <tr>
              <td valign="top">open(method, url, async, userid, password)</td>
              <td valign="top">Opens http request, and specifies the information</td>
            </tr>
            <tr>
             <td valign="top">send()</td>
             <td valign="top">Send&nbsp;the http request to the server</td>
            </tr>
            <tr>
              <td valign="top">setRequestHeader(headerName,headerValue)</td>
              <td valign="top">Specifies the name of a http header</td>
            </tr>
            <tr>
              <td valign="top"></td>
              <td><sup><b><a title="www.w3schools.com" href="http://www.w3schools.com"><font color="black">http://www.w3schools.com</a></b></sup></td>
            </tr>
    
          </table>
          
        </h5>
      </ul>
    </ul>
    
      <ul><h6>php retreiving external page</h6></ul>
    
      <pre>
        <code>
    
          &lt;!--
            &lt;?
    
              // someone posted this code in sitepoint a while back which works fine
           
              $fp = fopen('http://www.google.com,','r'); 
              $contents = fread ($fp, 40960); // 40960 is a kludge...should catch most pages
              fclose($fp);
              $cleanfile=preg_replace("'(.*?)<body([^>]*?)>(.*?)</body>(.*?)'si","\\3",$contents); // strip it down to just what's inside the <body></body>
              print ($cleanfile);
    
            ?&gt;
    
          --&gt;
        </code>
      </pre>
    
      <ul><h6>php retreiving external page</h6></ul>
    
      <pre>
        <code>
    
          &lt;!--
              Andrew-J
          --&gt;
        </code>
      </pre>
    
    </body>
    </html>
    
    
    Last edited by Andrew-J2000; May 16, 2002 at 03:11.

  8. #8
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May I introduce you all to the cross-browser remote scripting wonder that is JSRS:
    http://ashleyit.com/rs/


    M@rco

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Marco - most of my work involves Js Remote scripting.
    I've been using it for about seven months now.
    The chat program i mentioned uses it exclusively.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •