1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 This javascript script causes several issues.

Discussion in 'Styling and Customization Questions' started by mauzao9, Aug 21, 2014.

  1. mauzao9

    mauzao9 Well-Known Member

    Hello there.

    I have been trying to fix my code i have used on a page html that includes a javascript, the thing is on the page in question, the javascript loads, but then bugs xenforo, can't load nothing (alerts/pms), all menus float around after mouse-hover, etc....

    The code is:
    Code:
    <html>
    <head>
    <style>
    body {
      background-color: #3e94ec;
      font-family: "Roboto", helvetica, arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      text-rendering: optimizeLegibility;
    }
    
    div.table-title {
       display: block;
      margin: auto;
      max-width: 500px;
      padding:5px;
      width: 100%;
    }
    
    .table-title h3 {
       color: #fafafa;
       font-size: 30px;
       font-weight: 400;
       font-style:normal;
       font-family: "Roboto", helvetica, arial, sans-serif;
       text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
       text-transform:uppercase;
    }
    
    
    /*** Table Styles **/
    
    .table-fill {
      background: white;
      border-radius:3px;
      border-collapse: collapse;
      height: 320px;
      margin: auto;
      max-width: 500px;
      padding:5px;
      width: 100%;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      animation: float 5s infinite;
    }
    th {
      color:#D5DDE5;;
      background:#1b1e24;
      border-bottom:4px solid #9ea7af;
      border-right: 1px solid #343a45;
      font-size:20px;
      font-weight: 100;
      padding:15px;
      text-align:left;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      vertical-align:middle;
    }
    
    th:first-child {
      border-top-left-radius:3px;
    }
    th:last-child {
      border-top-right-radius:3px;
      border-right:none;
    }
     
    tr {
      border-top: 1px solid #C1C3D1;
      border-bottom-: 1px solid #C1C3D1;
      color:#666B85;
      font-size:16px;
      font-weight:normal;
      text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
    }
    tr:hover td {
      background:#4E5066;
      color:#FFFFFF;
      border-top: 1px solid #22262e;
      border-bottom: 1px solid #22262e;
    }
    tr:first-child {
      border-top:none;
    }
    
    tr:last-child {
      border-bottom:none;
    }
    tr:nth-child(odd) td {
      background:#EBEBEB;
    }
    tr:nth-child(odd):hover td {
      background:#4E5066;
    }
    
    tr:last-child td:first-child {
      border-bottom-left-radius:3px;
    }
    tr:last-child td:last-child {
      border-bottom-right-radius:3px;
    }
    td {
      background:#FFFFFF;
      padding:10px;
      text-align:left;
      vertical-align:middle;
      font-weight:300;
      font-size:17px;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
      border-right: 1px solid #C1C3D1;
    }
    
    td:last-child {
      border-right: 0px;
    }
    
    th.text-left {
      text-align: left;
    }
    
    th.text-center {
      text-align: center;
    }
    
    th.text-right {
      text-align: right;
    }
    
    td.text-left {
      text-align: left;
    }
    
    td.text-center {
      text-align: center;
    }
    
    td.text-right {
      text-align: right;
    }
    </style>
    
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    
    <script>
    
      var people = [];
     
            $(function() {
                    $.ajax({
                url: "http://143.95.99.97:21020/api/players",
                dataType: 'jsonp',
                success: function(data) {
    
     
    $.each(data, function(i, e) {
                      var tblRow = null;
                      if (e.accountName == null) {
    tblRow = "<tr>" + "<td>" + e.name + "</td>" + "<td><sup>None</td>" + "</tr>";
                        } else {
    tblRow = "<tr>" + "<td>" + e.name + "</td>" + "<td>" + e.accountName + "</td>" + "</tr>";
                      }
               $(tblRow).appendTo("#userdata tbody");
    
                    });
                }
            });
            });
    </script>
    </head>
    
    <body>
    <div class="wrapper">
    <div class="profile">
       <table class="table-fill" id="userdata">
      <thead>
                <th class="text-left">Player Name</th>
                <th class="text-left">Account</th>
            </thead>
          <tbody>
    
           </tbody>
       </table>
    
    </div>
    </div>
    
    </body>
    </html>
    That on it can be causing it?
     
  2. Steve F

    Steve F Well-Known Member

    Without seeing the Js, no idea really . You're not describing the problem really well either.
     
  3. mauzao9

    mauzao9 Well-Known Member

    @Steve F the script is on this part of the code:
    The problem is things like mouse-over my alerts box, and the load bar displays not ending, neither shows the alert list, things like that on the page this code is displayed.
    Code:
    <script>
    
      var people = [];
            $(function() {
                    $.ajax({
                url: "http://143.95.99.97:21020/api/players",
                dataType: 'jsonp',
                success: function(data) {
    
    $.each(data, function(i, e) {
                      var tblRow = null;
                      if (e.accountName == null) {
    tblRow = "<tr>" + "<td>" + e.name + "</td>" + "<td><sup>None</td>" + "</tr>";
                        } else {
    tblRow = "<tr>" + "<td>" + e.name + "</td>" + "<td>" + e.accountName + "</td>" + "</tr>";
                      }
               $(tblRow).appendTo("#userdata tbody");
    
                    });
                }
            });
            });
    </script>
     
  4. Milano

    Milano Well-Known Member

    You don't need to load jquery, XF already did it, using older version of jquery may causing bugs. Furthermore, open your browser dev tools and look at the console tab, you may find your problem.
     
    Steve F and mauzao9 like this.
  5. mauzao9

    mauzao9 Well-Known Member

    Many Thanks @Milano it was indeed that. I copied from one separate page where i first created it so i forgot the jquery load was repeated. ;)
     
    Steve F likes this.
  6. mauzao9

    mauzao9 Well-Known Member

    Well i am trying to place a button at Homepage, where the user clicks, and it loads the Page, this simple code:
    Code:
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").load("/quest");
      });
    });
    </script>
    
    
    <div id="div1"><button>Get Server PlayerList</button></div>
    However once i click it, it loads the page but it bugs, it again, it triggers the xenforo load animation, not sure how to do this without cause any conflict, unless the main code is missing some tweak that breaks it. :(
    [​IMG]
     
  7. Milano

    Milano Well-Known Member

    Click on the xenforo.js?_v=0bd3fd26 on the right to see your problem
     
  8. mauzao9

    mauzao9 Well-Known Member

    @Milano refers to this:
    Code:
    jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
    
     
  9. Milano

    Milano Well-Known Member

    Try it on your local or testing board with unminify js version, you can find that option when debug mode enabled
     

Share This Page