Browser Content

JavaScript
1

Hey Guys im having issues with my content on my website it seems like it is going off other peoples browser and not mine and it does not render the same on different browsers like IE compared to Chrome. There are errors like this that I found on some peoples browser =

1.	bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
1.	bootstrap.min.js:6(anonymous function)
1.	bootstrap.min.js:6 Uncaught TypeError: undefined is not a function
1.	bootstrap.min.js:6(anonymous function)
2.	bootstrap.min.js:6(anonymous function)

This is the my company’s website: iogproducts.com (check the website in different browsers to see what I am talking about)

2

This page doesn’t have jQuery on it. You need to load jQuery before you try to load bootstrap.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Followed by:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
3

will that explain why the content goes off some browsers?

4

I have this jquery and bootstrap already in there:

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jqddm.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
5

Page looks identical for me in IE11/Chrome.

6

check the Contact Us page.

7

Check all the pages.

8

whatt.png3840Ă—1080 927 KB

Dual monitor FTW!

1 Like
9

I already checked the contact page. I’m not going to check every page on your website. Please give us a concrete example.

10

This page content goes off on IE: http://iogproducts.com/ShockLabels2.aspx and this
http://iogproducts.com/CONTACT2.aspx

11

ShockLabels 2 - I only notice a float drop on the yellow image in Chrome/IE comparison. Look at the picture. That’s a simple CSS issue though not related to JS.

3840Ă—1080 454 KB

12

I’m not sure, but if your design is based on Bootstrap and Bootstrap isn’t properly loading, the chances are very likely this is the cause.

I see where you have this now. You’re trying to load the Boostrap.js as the first thing in the <head></head> tag, jquery needs to come before that one or that one needs to be removed.

This is also a 4yr old version of jQuery and you’re using a current version of Bootstrap which requires "jquery": ">= 1.9.0" which you can find in their bower.json here;

13

This is how I have it:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    
<script type="text/javascript">
       
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-41887506-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jqddm.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>    
</head>
14

Yes. This is wrong.

15

ok ill change it.

16

You should be aware, that the version of jQuery you’re currently using has several deprecated functions that I think have been removed in the required jQuery for bootstrap. It’s possible you’ll run into other errors on other pages because of this.

17

Ok thank you ill try out.

18

Ok thanks so much ill check into that.

19

So it seems that the errors of jquery and bootstrap are gone but I get this on IE:

SCRIPT5: Access is denied.

File: embed, Line: 1, Column: 1
20

This is how I have it now:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jqddm.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    
<script type="text/javascript">
       
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-41887506-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>    
</head>