CODEWITHSUNDEEP
javascriptphpjqueryhtml
Vil Ignoble
Vil Ignoble

Reputation: 41

Error with php and html javascript error

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'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<div>")."</span></li>".
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<form method=\"post\" action=\"options.php\">")."</span></li>".
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php settings_fields( 'Template_Settings' ); ?>")."</span></li>".
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php ")."$".htmlspecialchars("options = get_option('Template_Settings'); ?>")."</span></li>".
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<label></label><input type=\"submit\" name=\"Submit\" value=\"<?php esc_attr_e('Save Changes'); ?>\">")."</span></li>".
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</form>")."</span></li>".
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</div>")."</span></li>".
"<li><span class='grey'>".htmlspecialchars("</div>")."</span></li>".
"</ol>"; 
?>
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 80

Answers (1)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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>
..

Upvotes: 1

Related Questions