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

XF 1.5 JQuery Java Script Causing Continuous Load

Discussion in 'Troubleshooting and Problems' started by Grizzly Adam, Nov 17, 2015.

  1. Grizzly Adam

    Grizzly Adam Active Member

    Move this if it's not in the best place, I have a jquery script I just added to our home page and it causes the page to continuosly load. The script didn't do this when it was placed in an html file, so something much be clashing. Any ideas are welcome.

    Here is the html:

    Code:
    <html>
    <head>
    <link rel="stylesheet" href="http://firewoodhoardersclub.com/js/simplecarousel/simplecarousel.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
    <script src="http://firewoodhoardersclub.com/js/simplecarousel/simplecarousel.js"></script>
    
    <script>
    
    jQuery(function($){ // on DOM load
    
        mycarousel = new simplecarousel({
            id: 'swag',
            url: 'http://firewoodhoardersclub.com/js/simplecarousel/swagcarouselcontent.htm'
        })
    
    })
    
    </script>
    </head>
    
    <body>
    
    <div class="carousel" id="swag">
    <div class="belt">
    </div>
    </div>
    
    </body>
    </html>
    And the script:

    Code:
    function simplecarousel(setting){
        var gallerydefaults = {
            navhtml: ['<div class="navsemi"><span>&#65513;</span></div>', '<div class="navsemi right"><span>&#65515;</span></div>'],
            dragleeway: 40, // number of pixels users can drag when at the start/end of carousel before it bounces back
            bounceduration: 0.5 // the duration in seconds for the carousel to bounce back
           
        }
        var $ = jQuery
        var s = $.extend({}, gallerydefaults, setting)
        s.bounceduration = parseFloat(s.bounceduration) + 's'
        var $carousel = $('#' + s.id)
        var $belt = $carousel.find('.belt:eq(0)')
        var mousemoveevtstr = 'mousemove.dragstart' + s.id + ' touchmove.dragstart' + s.id
        var cal = {carouselw:null, beltw:null}
        var bounds = [,]
        var contentloaded = false
        var $navsemis = $(s.navhtml.join('')).appendTo($carousel)
    
        this.loadfile = function(url){
            contentloaded = false
            $belt.html('<p>Loading contents</p>')
            $.ajax({
                url: url,
                dataType: 'html',
                error:function(ajaxrequest){
                    alert('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
                },
                success:function(content){
                    $belt.html(content)
                    setbounds()
                    bounceback()
                    showhidenav()
                    contentloaded = true
                }
            })
    
        }
    
        function setbounds(){
            cal = {carouselw:$carousel.width(), beltw:$belt.outerWidth()}
            bounds = [0, Math.min(cal.carouselw - cal.beltw, 0)]
        }
    
        function bounceback(){
              $belt.css({transitionDuration: s.bounceduration})
            if (parseInt($belt.css('left')) > bounds[0])
                $belt.css({left: bounds[0]})
            if (parseInt($belt.css('left')) < bounds[1])
                $belt.css({left: bounds[1]})
        }
    
    
    
        this.loadfile(s.url)
    
        $belt.on('transitionend webkitTransitionEnd', function(e){
            var $target = $(e.target) // target
            if (/left/i.test(e.originalEvent.propertyName)){ // check event fired on "left" prop
                showhidenav()
            }
        })
    
        $navsemis.bind('click touchstart', function(e){
              var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
            var $target = $(e.target)
            $target = ($target.hasClass('navsemi'))? $target : $target.parent('.navsemi')
            var initialx = parseInt($belt.css('left'))
            var dir = ($target.hasClass('right'))? 'right' : 'left'
            var newx = (dir == 'left')? Math.min(initialx + cal.carouselw, bounds[0]) : Math.max(initialx - cal.carouselw, bounds[1])
            $belt.css('left', newx)
        })
    
        $belt.bind('click', function(e){
            if ($belt.data('dx') != 0) // if dragging on belt instead of clicking on it
                e.preventDefault() // prevent default action
        })
    
          $belt.bind('mousedown touchstart', function(e){
              var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
              var initialx = parseInt($belt.css('left'))
            var mousex = e.pageX
              $belt.css({transitionDuration: '0s'}).data({dx: 0})
            setbounds()
              $(document).bind(mousemoveevtstr, function(e){
                  var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
                  var dx=e.pageX-mousex //distance to move horizontally
                  var newx=(dx<0)? Math.max(bounds[1] - s.dragleeway, initialx+dx) : Math.min(bounds[0] + s.dragleeway, initialx+dx) // dx<0 = dragging left
                  $belt.css({left: newx}).data({dx: dx})
                  return false //cancel default drag action
              })
                if (e.type == "mousedown")
                  return false //cancel default drag action
          })
    
          $(document).bind('mouseup touchend', function(e){
              var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
              $(document).unbind(mousemoveevtstr)
            bounceback()
            showhidenav()
            if (e.type == "mouseup")
                return false
          })
    
        $(window).bind('resize', function(e){
            setbounds()
            bounceback()
            showhidenav()
        })
    
    }
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    Most likely this line:
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    If you're including the code in XenForo you don't need to call jQuery because we already call it, and calling it twice can cause a conflict.
     
  3. Grizzly Adam

    Grizzly Adam Active Member

    You know what, I actually already took that out. My bad, it was causing some other issues as well. Anything else in there suspicious?
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    If you open the Dev tools in your browser (F12) and go to console, there would usually be an error message there which may point to the specific error or line causing the error.
     
    Grizzly Adam likes this.
  5. Grizzly Adam

    Grizzly Adam Active Member

    Oh voo, I never knew about that. It seems that showhidenav is undefine. Now I need to figure out what that is. Screenshot from 2015-11-16 19:33:02.png
     
  6. Grizzly Adam

    Grizzly Adam Active Member

    Eh, just deleted all instances of it from the script and all is fixed. Guess I didn't need that! Thanks Chris.
     
    Chris D likes this.

Share This Page