3

Maybe some of you have already some experience with using head.js. I'm a first-time user and I'm having some problems: as soon as I try to load multiple javascript files my <html> tag get a style="margin-left: -32767px;" applied.

<script type="text/javascript">
   var path = "<?php bloginfo('template_directory'); ?>";

   head.js( path + "/js/jquery-1.5.min.js", path + "/js/css3-mediaqueries.js",
         path + "/js/jquery-cookie.js", path + "/js/scripts.js", function() { });
</script>

Any idea why that happens? When I get rid of that weird style attribute in my html with Firebug all javascript libraries work just fine. However when the page loads the content flickers and as soon as this negative margin gets applied absolutely nothing is visible on my page.

skolima
  • 31,963
  • 27
  • 115
  • 151
matt
  • 42,713
  • 103
  • 264
  • 397
  • Do you have something like [FireBug](http://getfirebug.com) to see where that `margin-left` setting is coming from? I'm guessing it's in your `/js/css3-mediaqueries.js` file. – drudge Feb 08 '11 at 19:23
  • 2
    oh yeah! you're right! when i get rid of it everything works just fine. any idea why that happens but does not happen if i just embed it normally? i'm using head.js exactly for the reason that i'm loading large js files like mediaqueries.js – matt Feb 08 '11 at 19:52

1 Answers1

2

The negative margin is coming from css3-mediaqueries.js

the code is:

var _57 = document.documentElement;
_57.style.marginLeft = "-32767px";
setTimeout(function () {
    _57.style.marginTop = "";
}, 20000);

I don't know what purpose this has but you could probably delete this without a problem, if you don't want to do that then I would apply a style on the html tag

style="margin-left:0 !important;"

or with JS:

document.getElementsByTagName("HTML")[0].style.margin = "0"
timewaster51
  • 120
  • 5