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... Link to comment https://forums.phpfreaks.com/topic/150636-solved-display-doesnt-work-with-js/ 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> Link to comment https://forums.phpfreaks.com/topic/150636-solved-display-doesnt-work-with-js/#findComment-791343 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>'; ?> Link to comment https://forums.phpfreaks.com/topic/150636-solved-display-doesnt-work-with-js/#findComment-791346 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 ) Link to comment https://forums.phpfreaks.com/topic/150636-solved-display-doesnt-work-with-js/#findComment-791410 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" Link to comment https://forums.phpfreaks.com/topic/150636-solved-display-doesnt-work-with-js/#findComment-791438 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.