Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Jun 2014
    Posts
    5
    Member #
    39420

    Problem with javascript error php and html

    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. Even if I add a span inside the li the javscript still fails.
    Code:
    <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>

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Are there any errors in the console?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jun 2014
    Posts
    5
    Member #
    39420
    I see no errors.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    What happens if you do this (see below, where the URI line is duplicated) ... does it fail?

    Code:
    <?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><span class='white'>".htmlspecialchars("Plugin URI: PlaceWebsiteAddressHere")."</span></li>".
    "</ol>"; 
    ?>


  6. #5
    Junior Member
    Join Date
    Jun 2014
    Posts
    5
    Member #
    39420
    Yes that still fails.

  7. #6
    Junior Member
    Join Date
    Jun 2014
    Posts
    5
    Member #
    39420
    I have also tried this still fails
    Code:
    <?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></ol>";
                ?>

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Provide a link so we can get a look at what's going on.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Junior Member
    Join Date
    Jun 2014
    Posts
    5
    Member #
    39420


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com