How should I trouble shoot this?

PeakOutput · 20-03-2013 12:25am #1

So I was working away on a simple little site for a friend. I was adding a jquery slideshow pluging and all of a sudden this seemed to be getting injected into the html

<html style="" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

I have tried to remove everything that I added in with the plugin but it is still happening.

there are 3 parts to the page header.php index.php and footer.php

it seems to be getting injected at some stage when header.php is being included as it is just before the opening head tag

it seems to be limiting the height of the page and leaves a lot of white space along the bottom.

here is the code

header.php

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Brett</title>
        <meta name="description" content="Skydiving">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="static/css/normalize.min.css">
        <link rel="stylesheet" href="static/css/main.css">
        

 

<!-- scripts concatenated and minified via build script -->
        <script src="static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <!-- end scripts -->
    </head>

index.php

<!-- remember that the h5bp build file needs to be edited to work with this php layout.-->
<?php
    //Uncomment the next line to include config file
    //require_once('/config.php')
    //include header file
    require_once('/views/header.php');
?>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title">B2 Stunning Slider Stows</h1>
                <nav>
                    <ul>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                    </ul>
                </nav>
            </header>
        </div>

        <div class="main-container">
            <div class="main wrapper clearfix">
                
                <article>
                    
                </article> 
                
                <article>
<form action="MAILTO:" method="post" enctype="text/plain">
Change tab color:
<br>
<select name="tab">
  <!-- More colors from Google Calendar -->
    <option value="#ffffff">White</option>
    <option value="#000000">Black</option>
    <option value="#ff6a00">Orange</option>
    <option value="#fff200">Yellow</option>
    <option value="#fe61ec">Pink</option>
    <option value="#ff0000">Red</option>
    <option value="#008000">Green</option>
    <option value="#630210">Burgundy</option>
    <option value="#030623">Navy Blue</option>
</select>

<br>
  
 Change stripe color:
 <br>
 <select name="stripe">
  <!-- More colors from Google Calendar-->
    <option value="#ffffff">White</option>
    <option value="#000000">Black</option>
    <option value="#808080">Grey</option>
    <option value="#fe61ec">Pink</option>
    <option value="#800080">Purple</option>
    <option value="#1aa3fe">Turquioise</option>
    <option value="#030186">Royal Blue</option>
    <option value="#018651">Mediteranean</option>
    <option value="#17e828">Light Green</option>
    <option value="#ff0000">Red</option>
    <option value="#630210">Burgundy</option>
</select>
  
  <br>

  Change base color:
  <br>
<select name="base">
  <!-- More colors from Google Calendar -->
    <option value="#ffffff">White</option>
    <option value="#000000">Black</option>
    <option value="#ff6a00">Orange</option>
    <option value="#fff200">Yellow</option>
    <option value="#fe61ec">Pink</option>
    <option value="#ff0000">Red</option>
    <option value="#008000">Green</option>
    <option value="#630210">Burgundy</option>
    <option value="#030623">Navy Blue</option>
</select>

<br>

Change thread color
<br>
  <select name="thread">
  <!-- More colors from Google Calendar -->
    <option value="#000000">Black</option>
    <option value="#ffffff">White</option>
    <option value="#ff6a00">Orange</option>
    <option value="#fff200">Yellow</option>
    <option value="#fe61ec">Pink</option>
    <option value="#ff0000">Red</option>
    <option value="#008000">Green</option>
    <option value="#630210">Burgundy</option>
    <option value="#030623">Navy Blue</option>
</select>
<br><br>
<input type="submit" value="Send">
</form>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="HXWV4H6T4ATW2">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

                

<div class="selector">
    <div class="band border"></div>
    <div class="stripe stripe-color border"></div>
    <div class="tab tab-color border"></div>
    <div class="stripe-color tab2 border"></div>
    <div class="base border"></div>
    <div class="stripe2 stripe-color border"></div>
    <div class="band2 border"></div>
  </div>
               
                </article>

            

            </div> <!-- #main -->
        </div> <!-- #main-container -->
    </body>
<?php
    require_once('/views/footer.php');
?>

footer.php

<div class="footer-container">
            <footer class="wrapper">
                <h3>footer</h3>
            </footer>
        </div>
<!-- scripts concatenated and minified via build script -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.js"><\/script>')</script>

        <script src="static/js/plugins.js"></script>
        <script src="static/js/main.js"></script>
<!-- end scripts -->

<!-- scripts concatenated and minified via build script -->
        <script>
        $(document).ready(function() {

  setTimeout(function() {
    $('#colorpicker-inline').simplecolorpicker('selectColor', '#fbd75b');
  }, 1000);

  $('select[name="tab"]').change(function() {
    $(".tab-color").css('background-color', $('select[name="tab"]').val());

  });
  
  $('select[name="stripe"]').change(function() {
    $(".stripe-color").css('background-color', $('select[name="stripe"]').val());

  });
  
  $('select[name="base"]').change(function() {
    $(".base").css('background-color', $('select[name="base"]').val());

  });
  
  $('select[name="thread"]').change(function() {
    $(".border").css('color', $('select[name="thread"]').val());    
  });
  
  setTimeout(function() {
    // Generates a JavaScript error
    $('select[name="colorpicker-picker-background"]').simplecolorpicker('selectColor', 'unknown');
  }, 3000);

  //$('#init').on('click', function() {
    
    $('select[name="tab"]').simplecolorpicker({picker: true});
    $('select[name="stripe"]').simplecolorpicker({picker: true});
  $('select[name="base"]').simplecolorpicker({picker: true});
  $('select[name="thread"]').simplecolorpicker({picker: true});
  //});
  

  $('#destroy').on('click', function() {
    $('select[name="tab"]').simplecolorpicker('destroy');
    $('select[name="stripe"]').simplecolorpicker('destroy');
    $('select[name="base"]').simplecolorpicker('destroy');
    $('select[name="thread"]').simplecolorpicker('destroy');
  });

  // By default, activate simplecolorpicker plugin on HTML selects
  $('#init').trigger('click');
});
        </script>
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
        <!-- end scripts -->
    </body>
</html>

Giblet · 20-03-2013 9:11am

It's modernizr.

It appends those to the html tag so that you can vary styling / poll the html classes to check detected features.

PeakOutput · 20-03-2013 5:27pm

Thanks, unfortunately removing modernizer didnt help. ANy ideas about why there would just be a bunch of white space under the footer? as far as I can tell I have no open tags, it seems to be happening on two other sites I was working on with wamp and I havnt edited any of the code on those sites recently.

Could it be a wamp issue?

this empty div seems to be appearing in any sites I run on local host

<div id="mixpanel" style="visibility: hidden;"></div>

PeakOutput · 20-03-2013 7:00pm

disabling an extension in chrome got rid of that div but it didnt fix the problem

I went back to the responsive html5 boilerplate I started this project with and just opened up its index.html with chrome and the template renders fine

when I put it into the www folder in wamp and open it through localhost then the whitespace appears again.

There is a css reset in this template so it shouldnt be anything got to do with that.

this is super frustrating and I bet something really simple I just dont know about

How should I trouble shoot this?

Comments