I am having trouble with some javascript failing to run when generating html using php.
Here is my file. The javascript on this page makes all spans the width of the widest span in the ol using jquery but it fails when I attempt to add on <li></li> element, can anyone tell me why the li pointed out below causes the script to fail to get the actaul width of widest span.
<html>
<head>
<style>
.codesnippet {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: thin solid black;
width: 740px;
}
.codesnippet .heading {
padding-left: 10px;
background-color: lightblue;
height: 25px;
}
.codesnippet .content {
background-color: white;
white-space: nowrap;
overflow: scroll;
}
.codesnippet .grey {
background-color: lightgrey;
margin: 0px;
display: inline-block;
min-width: 683px;
}
.codesnippet .white {
background-color: white;
margin: 0px;
display: inline-block;
min-width: 683px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
window.onload = function () {
var spanwidth = []
l = 0;
var ollength = $('ol').length;
for (var i = 0; i < ollength; i++) {
$('ol').eq(i).children('li').each(function () {
spanwidth.push($(this).children('span').width());
l++;
});
makeThemEqual(i, spanwidth);
l = 0;
}
}
function makeThemEqual(i, spanwidth) {
var a = 0;
var widest = spanwidth[0];
$('ol').eq(i).children('li').each(function () {
if (widest < spanwidth[a]) {
widest = spanwidth[a];
}
a++;
});
if (widest > 683) {
$('ol').eq(i).children('li').each(function () {
$(this).children('span').width(widest + "px");
});
}
widest = 0;
}
</script>
</head>
<body>
<div class="codesnippet">
<div class="content">
<?php echo
"<ol>".
"<li><span class='grey'>".htmlspecialchars("<?php")."</span></li>".
"<li><span class='white'>".htmlspecialchars("/*")."</span></li>".
"<li><span class='grey'>".htmlspecialchars("Plugin Name: PlacePluginNameHere")."</span></li>".
"<li><span class='white'>".htmlspecialchars("Plugin URI: PlaceWebsiteAddressHere")."</span></li>".
"<li></li>". //<--------------------- THIS CAUSES IT TO FAIL if this li is removed the script runs fine.
"</ol>";
?>
</div>
</div>
<div class="codesnippet">
<div class="content">
<?php echo
"<ol>".
"<li><span class='grey'>".htmlspecialchars("<?php ?>")."</span></li>".
"<li><span class='white'>".htmlspecialchars("<div class=\"wrap\">")."</span></li>".
"<li><span class='grey'> ".htmlspecialchars("<div>")."</span></li>".
"<li><span class='white'> ".htmlspecialchars("<form method=\"post\" action=\"options.php\">")."</span></li>".
"<li><span class='grey'> ".htmlspecialchars("<?php settings_fields( 'Template_Settings' ); ?>")."</span></li>".
"<li><span class='white'> ".htmlspecialchars("<?php ")."$".htmlspecialchars("options = get_option('Template_Settings'); ?>")."</span></li>".
"<li><span class='grey'> ".htmlspecialchars("<label>Example Setting</label> <input type=\"text\" name=\"Template_Settings[ExampleSetting]\" value=\"<?php echo ")."$".htmlspecialchars("options['ExampleSetting']; ?>\"><br>")."</span></li>".
"<li><span class='white'> ".htmlspecialchars("<label></label><input type=\"submit\" name=\"Submit\" value=\"<?php esc_attr_e('Save Changes'); ?>\">")."</span></li>".
"<li><span class='grey'> ".htmlspecialchars("</form>")."</span></li>".
"<li><span class='white'> ".htmlspecialchars("</div>")."</span></li>".
"<li><span class='grey'>".htmlspecialchars("</div>")."</span></li>".
"</ol>";
?>
</div>
</div>
</body>
</html>
palaniraja
10.5k5 gold badges46 silver badges78 bronze badges
asked Jun 14, 2014 at 2:29
Vil Ignoble
391 gold badge2 silver badges10 bronze badges
1 Answer 1
That's because the following line:
...
$(this).children('span').width(widest + "px");
..
tries to get <span> tag from <li> and in your case you don't have <span> tag for last <li>, so try changing:
..<li></li>
..
to
..
<li><span></span></li>
..
halfer
20.2k20 gold badges111 silver badges208 bronze badges
answered Jun 14, 2014 at 2:36
Sudhir Bastakoti
100k15 gold badges163 silver badges169 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Vil Ignoble
Having the span there it still fails
default
widest. Just usevar widest = Math.max(...spanwidth);$('ol').eq(i).find('> li > span').width(widest + 'px'). No loop needed there, either.