The Little Guy Posted March 22, 2009 Share Posted March 22, 2009 I don't under stand why this displays properly: <div style="vertical-align:top;max-width:100px;border:solid 1px #AAA;border-right:0;padding:5px;font-size:18px;display:table-cell;font-weight:bolder;">Ryan</div> <div style="vertical-align:top;padding:5px;border:solid 1px #AAA;border-left:0;display:table-cell;width:200px;"> <input type="text" id="setStatus" rows="1" style="font-family:verdana, arial, times;border:0;outline:none;font-size:18px;color:#AAA;" class="bold" /> </div> But when I turn it into JavaScript like this: function setStatus(id,first){ var status = document.getElementById(id); var stat = ''; stat += '<div style="vertical-align:top;max-width:100px;border:solid 1px #AAA;border-right:0;padding:5px;font-size:18px;display:table-cell;font-weight:bolder;">'+first+'</div>'; stat += '<div style="vertical-align:top;padding:5px;border:solid 1px #AAA;border-left:0;display:table-cell;width:200px;">'; stat += '<input type="text" id="setStatus" rows="1" style="font-family:verdana, arial, times;border:0;outline:none;font-size:18px;color:#AAA;" class="bold" />'; stat += '</div>'; status.innerHTML = stat; document.getElementById('setStatus').focus(); } The display is completely wrong! basically the table element doesn't work... Quote Link to comment Share on other sites More sharing options...
Psycho Posted March 23, 2009 Share Posted March 23, 2009 Works fine for me in both IE and FF. However, they both display very differently in thos two browsers - you'll need to work on the CSS to get them to display consistently. My guess is that you are not passing an ID to the function for an element on the page or one that does not support innerHTML. Here is what I used to test. <html> <head> <script type="text/javascript"> function setStatus(id,first){ var status = document.getElementById(id); var stat = ''; stat += '<div style="vertical-align:top;max-width:100px;border:solid 1px #AAA;border-right:0;padding:5px;font-size:18px;display:table-cell;font-weight:bolder;">'+first+'</div>'; stat += '<div style="vertical-align:top;padding:5px;border:solid 1px #AAA;border-left:0;display:table-cell;width:200px;">'; stat += '<input type="text" id="setStatus" rows="1" style="font-family:verdana, arial, times;border:0;outline:none;font-size:18px;color:#AAA;" class="bold" />'; stat += '</div>'; status.innerHTML = stat; document.getElementById('setStatus').focus(); } </script> </head> <body> <h3>Hard coded HTML:</h3><br> <div style="vertical-align:top;max-width:100px;border:solid 1px #AAA;border-right:0;padding:5px;font-size:18px;display:table-cell;font-weight:bolder;">Ryan</div> <div style="vertical-align:top;padding:5px;border:solid 1px #AAA;border-left:0;display:table-cell;width:200px;"> <input type="text" id="setStatus" rows="1" style="font-family:verdana, arial, times;border:0;outline:none;font-size:18px;color:#AAA;" class="bold" /> </div> <br><br> <h3>Dynamically generated from JS (span with the id of 'test'):</h3><br> <span id="test"></span> <br> <button onclick="setStatus('test', 'Ryan')">Run setStatus('test', 'Ryan')</button> </body> </html> Quote Link to comment Share on other sites More sharing options...
The Little Guy Posted March 23, 2009 Author Share Posted March 23, 2009 Well... Here is the code to activate the function, it is in the "a" tag... <?php echo ' <div class="content">'; //include 'inc/profileNav.php'; //$sql = mysql_query("SELECT * FROM "); echo '<div class="fontbig block" id="status"> <a href="javascript:void(0);" onclick="setStatus(parentNode.id,\''.$_SESSION['user']['first'].'\');">Whats going on?</a> </div> </div>'; ?> Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted March 23, 2009 Share Posted March 23, 2009 Sorta fixed what was inside the tag: setStatus(parentNode.id;,\''.$_SESSION['user']['first'].'\''); Remaining Errors: expression expected after comma expected ) Quote Link to comment Share on other sites More sharing options...
The Little Guy Posted March 23, 2009 Author Share Posted March 23, 2009 I got what I wanted by making it inline, and removing "display:table-cell" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.