Question

I have just finished building a website for client, instantinteriors.com.au. (Visit this site for source code.)

For some reason, when I view the website in Firefox offline as a file it looks like it should. Upon upload the sizing becomes different, such as the font and div sizes. There is also a failure in some of my scripts to operate.

The website appears to work fine in Safari and Chrome, haven’t checked on a Windows yet. There also seems to be something wrong with the form, as I have everything ready working and testing, although as soon as it went onto the host server the client uses it fails.

The reason I emphasise client’s server is that when I tested it earlier on the host I use it worked fine.

Here is one of many scripts appearing to fail…

 <script type="text/javascript">
     $.fn.hasOverflow = function() {
     var $this = $(this);
     var $children = $this.find('*');
     var len = $children.length;

     if (len) {
       var maxWidth = 0;
       var maxHeight = 0
       $children.map(function(){
        maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
        maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
     });

     return maxWidth > $this.width() || maxHeight > $this.height();
    }

    return false;
    };

  $(function() {
   var $content = $('#wrap4').children().wrapAll('<div>');
   if($content.hasOverflow()){
       $("#arrows").css("display", "none");
   } else {
     $("#arrows").css("display", "block");
   }
 });

 </script>

Answer 1

Is your logic correct? Your hasOverflow function returns true when either your maxWidth or maxHeight is greater than your current width and height. If you have overflow shouldn’t the test be if either the current values are greater than the maximums?

You should switch the way you use the hasOverflow result so the arrows are shown when you have overflow. You can use the show() and hide() methods as shorthand.

if($content.hasOverflow()) {
  $("#arrows").show();
} else {
  $("#arrows").hide();
}

Is this being called when the document is ready? The source formatting makes it hard to tell.