Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Angry think Jquery code is causing blank space under image slider, can someone please help?

    Hi There,

    I have an image slider on my site but for some reason it is leaving some white space underneath the slider, you should beable to see what i mean by going to the site.

    I think the slides is based on jquery and i think the script is attaching some style code to the css of the slider to determin its height, but i am unable to figure out where this is happening?

    the 4 circles(the slides navigation) should apear directly underneath the slide not about 100px below it

    will try and post the jquery code below if it lets me

    would appreciate any help with this
    Cheers
    Last edited by LJackson; 07-16-2014 at 04:32 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Here is the jquery code
    Code:
    (function() {
    
      (function($, window, document) {
        var Plugin, defaults, pluginName;
        pluginName = "slidesjs";
        defaults = {
          width: 940,
          height: 375,
          start: 1,
          navigation: {
            active: true,
            effect: "slide"
          },
          pagination: {
            active: true,
            effect: "slide"
          },
          play: {
            active: false,
            effect: "slide",
            interval: 5000,
            auto: false,
            swap: true,
            pauseOnHover: false,
            restartDelay: 2500
          },
          effect: {
            slide: {
              speed: 500
            },
            fade: {
              speed: 300,
              crossfade: true
            }
          },
          callback: {
            loaded: function() {},
            start: function() {},
            complete: function() {}
          }
        };
        Plugin = (function() {
    
          function Plugin(element, options) {
            this.element = element;
            this.options = $.extend(true, {}, defaults, options);
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
          }
    
          return Plugin;
    
        })();
        Plugin.prototype.init = function() {
          var $element, nextButton, pagination, playButton, prevButton, stopButton,
            _this = this;
          $element = $(this.element);
          this.data = $.data(this);
          $.data(this, "animating", false);
          $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
          $.data(this, "current", this.options.start - 1);
          $.data(this, "vendorPrefix", this._getVendorPrefix());
          if (typeof TouchEvent !== "undefined") {
            $.data(this, "touch", true);
            this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
          }
          $element.css({
            overflow: "hidden"
          });
          $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
            overflow: "hidden",
            position: "relative"
          });
          $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
          $(".slidesjs-control", $element).css({
            position: "relative",
            left: 0
          });
          $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            zIndex: 0,
            display: "none",
            webkitBackfaceVisibility: "hidden"
          });
          $.each($(".slidesjs-control", $element).children(), function(i) {
            var $slide;
            $slide = $(this);
            return $slide.attr("slidesjs-index", i);
          });
          if (this.data.touch) {
            $(".slidesjs-control", $element).on("touchstart", function(e) {
              return _this._touchstart(e);
            });
            $(".slidesjs-control", $element).on("touchmove", function(e) {
              return _this._touchmove(e);
            });
            $(".slidesjs-control", $element).on("touchend", function(e) {
              return _this._touchend(e);
            });
          }
          $element.fadeIn(0);
          this.update();
          if (this.data.touch) {
            this._setuptouch();
          }
          $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
            return $(this).css({
              zIndex: 10
            });
          });
          if (this.options.navigation.active) {
            prevButton = $("<a>", {
              "class": "slidesjs-previous slidesjs-navigation",
              href: "#",
              title: "Previous",
              text: "Previous"
            }).appendTo($element);
            nextButton = $("<a>", {
              "class": "slidesjs-next slidesjs-navigation",
              href: "#",
              title: "Next",
              text: "Next"
            }).appendTo($element);
          }
          $(".slidesjs-next", $element).click(function(e) {
            e.preventDefault();
            _this.stop(true);
            return _this.next(_this.options.navigation.effect);
          });
          $(".slidesjs-previous", $element).click(function(e) {
            e.preventDefault();
            _this.stop(true);
            return _this.previous(_this.options.navigation.effect);
          });
          if (this.options.play.active) {
            playButton = $("<a>", {
              "class": "slidesjs-play slidesjs-navigation",
              href: "#",
              title: "Play",
              text: "Play"
            }).appendTo($element);
            stopButton = $("<a>", {
              "class": "slidesjs-stop slidesjs-navigation",
              href: "#",
              title: "Stop",
              text: "Stop"
            }).appendTo($element);
            playButton.click(function(e) {
              e.preventDefault();
              return _this.play(true);
            });
            stopButton.click(function(e) {
              e.preventDefault();
              return _this.stop(true);
            });
            if (this.options.play.swap) {
              stopButton.css({
                display: "none"
              });
            }
          }
          if (this.options.pagination.active) {
            pagination = $("<ul>", {
              "class": "slidesjs-pagination"
            }).appendTo($element);
            $.each(new Array(this.data.total), function(i) {
              var paginationItem, paginationLink;
              paginationItem = $("<li>", {
                "class": "slidesjs-pagination-item"
              }).appendTo(pagination);
              paginationLink = $("<a>", {
                href: "#",
                "data-slidesjs-item": i,
                html: i + 1
              }).appendTo(paginationItem);
              return paginationLink.click(function(e) {
                e.preventDefault();
                _this.stop(true);
                return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
              });
            });
          }
          $(window).bind("resize", function() {
            return _this.update();
          });
          this._setActive();
          if (this.options.play.auto) {
            this.play();
          }
          return this.options.callback.loaded(this.options.start);
        };
        Plugin.prototype._setActive = function(number) {
          var $element, current;
          $element = $(this.element);
          this.data = $.data(this);
          current = number > -1 ? number : this.data.current;
          $(".active", $element).removeClass("active");
          return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
        };
        Plugin.prototype.update = function() {
          var $element, height, width;
          $element = $(this.element);
          this.data = $.data(this);
          $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
            display: "none",
            left: 0,
            zIndex: 0
          });
          width = $element.width();
          height = (this.options.height / this.options.width) * width;
          this.options.width = width;
          this.options.height = height;
          return $(".slidesjs-control, .slidesjs-container", $element).css({
            width: width,
            height: height
          });
        };
        Plugin.prototype.next = function(effect) {
          var $element;
          $element = $(this.element);
          this.data = $.data(this);
          $.data(this, "direction", "next");
          if (effect === void 0) {
            effect = this.options.navigation.effect;
          }
          if (effect === "fade") {
            return this._fade();
          } else {
            return this._slide();
          }
        };
        Plugin.prototype.previous = function(effect) {
          var $element;
          $element = $(this.element);
          this.data = $.data(this);
          $.data(this, "direction", "previous");
          if (effect === void 0) {
            effect = this.options.navigation.effect;
          }
          if (effect === "fade") {
            return this._fade();
          } else {
            return this._slide();
          }
        };
        Plugin.prototype.goto = function(number) {
          var $element, effect;
          $element = $(this.element);
          this.data = $.data(this);
          if (effect === void 0) {
            effect = this.options.pagination.effect;
          }
          if (number > this.data.total) {
            number = this.data.total;
          } else if (number < 1) {
            number = 1;
          }
          if (typeof number === "number") {
            if (effect === "fade") {
              return this._fade(number);
            } else {
              return this._slide(number);
            }
          } else if (typeof number === "string") {
            if (number === "first") {
              if (effect === "fade") {
                return this._fade(0);
              } else {
                return this._slide(0);
              }
            } else if (number === "last") {
              if (effect === "fade") {
                return this._fade(this.data.total);
              } else {
                return this._slide(this.data.total);
              }
            }
          }
        };
        Plugin.prototype._setuptouch = function() {
          var $element, next, previous, slidesControl;
          $element = $(this.element);
          this.data = $.data(this);
          slidesControl = $(".slidesjs-control", $element);
          next = this.data.current + 1;
          previous = this.data.current - 1;
          if (previous < 0) {
            previous = this.data.total - 1;
          }
          if (next > this.data.total - 1) {
            next = 0;
          }
          slidesControl.children(":eq(" + next + ")").css({
            display: "block",
            left: this.options.width
          });
          return slidesControl.children(":eq(" + previous + ")").css({
            display: "block",
            left: -this.options.width
          });
        };
        Plugin.prototype._touchstart = function(e) {
          var $element, touches;
          $element = $(this.element);
          this.data = $.data(this);
          touches = e.originalEvent.touches[0];
          this._setuptouch();
          $.data(this, "touchtimer", Number(new Date()));
          $.data(this, "touchstartx", touches.pageX);
          $.data(this, "touchstarty", touches.pageY);
          return e.stopPropagation();
        };
        Plugin.prototype._touchend = function(e) {
          var $element, duration, prefix, slidesControl, timing, touches, transform,
            _this = this;
          $element = $(this.element);
          this.data = $.data(this);
          touches = e.originalEvent.touches[0];
          slidesControl = $(".slidesjs-control", $element);
          if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
            $.data(this, "direction", "previous");
            this._slide();
          } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
            $.data(this, "direction", "next");
            this._slide();
          } else {
            prefix = this.data.vendorPrefix;
            transform = prefix + "Transform";
            duration = prefix + "TransitionDuration";
            timing = prefix + "TransitionTimingFunction";
            slidesControl[0].style[transform] = "translateX(0px)";
            slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
          }
          slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
            prefix = _this.data.vendorPrefix;
            transform = prefix + "Transform";
            duration = prefix + "TransitionDuration";
            timing = prefix + "TransitionTimingFunction";
            slidesControl[0].style[transform] = "";
            slidesControl[0].style[duration] = "";
            return slidesControl[0].style[timing] = "";
          });
          return e.stopPropagation();
        };
        Plugin.prototype._touchmove = function(e) {
          var $element, prefix, slidesControl, touches, transform;
          $element = $(this.element);
          this.data = $.data(this);
          touches = e.originalEvent.touches[0];
          prefix = this.data.vendorPrefix;
          slidesControl = $(".slidesjs-control", $element);
          transform = prefix + "Transform";
          $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
          if (!this.data.animating && !this.data.scrolling) {
            e.preventDefault();
            this._setuptouch();
            slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
          }
          return e.stopPropagation();
        };
        Plugin.prototype.play = function(next) {
          var $element, currentSlide, slidesContainer,
            _this = this;
          $element = $(this.element);
          this.data = $.data(this);
          if (!this.data.playInterval) {
            if (next) {
              currentSlide = this.data.current;
              this.data.direction = "next";
              if (this.options.play.effect === "fade") {
                this._fade();
              } else {
                this._slide();
              }
            }
            $.data(this, "playInterval", setInterval((function() {
              currentSlide = _this.data.current;
              _this.data.direction = "next";
              if (_this.options.play.effect === "fade") {
                return _this._fade();
              } else {
                return _this._slide();
              }
            }), this.options.play.interval));
            slidesContainer = $(".slidesjs-container", $element);
            if (this.options.play.pauseOnHover) {
              slidesContainer.unbind();
              slidesContainer.bind("mouseenter", function() {
                return _this.stop();
              });
              slidesContainer.bind("mouseleave", function() {
                if (_this.options.play.restartDelay) {
                  return $.data(_this, "restartDelay", setTimeout((function() {
                    return _this.play(true);
                  }), _this.options.play.restartDelay));
                } else {
                  return _this.play();
                }
              });
            }
            $.data(this, "playing", true);
            $(".slidesjs-play", $element).addClass("slidesjs-playing");
            if (this.options.play.swap) {
              $(".slidesjs-play", $element).hide();
              return $(".slidesjs-stop", $element).show();
            }
          }
        };
        Plugin.prototype.stop = function(clicked) {
          var $element;
          $element = $(this.element);
          this.data = $.data(this);
          clearInterval(this.data.playInterval);
          if (this.options.play.pauseOnHover && clicked) {
            $(".slidesjs-container", $element).unbind();
          }
          $.data(this, "playInterval", null);
          $.data(this, "playing", false);
          $(".slidesjs-play", $element).removeClass("slidesjs-playing");
          if (this.options.play.swap) {
            $(".slidesjs-stop", $element).hide();
            return $(".slidesjs-play", $element).show();
          }
        };
        Plugin.prototype._slide = function(number) {
          var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
            _this = this;
          $element = $(this.element);
          this.data = $.data(this);
          if (!this.data.animating && number !== this.data.current + 1) {
            $.data(this, "animating", true);
            currentSlide = this.data.current;
            if (number > -1) {
              number = number - 1;
              value = number > currentSlide ? 1 : -1;
              direction = number > currentSlide ? -this.options.width : this.options.width;
              next = number;
            } else {
              value = this.data.direction === "next" ? 1 : -1;
              direction = this.data.direction === "next" ? -this.options.width : this.options.width;
              next = currentSlide + value;
            }
            if (next === -1) {
              next = this.data.total - 1;
            }
            if (next === this.data.total) {
              next = 0;
            }
            this._setActive(next);
            slidesControl = $(".slidesjs-control", $element);
            if (number > -1) {
              slidesControl.children(":not(:eq(" + currentSlide + "))").css({
                display: "none",
                left: 0,
                zIndex: 0
              });
            }
            slidesControl.children(":eq(" + next + ")").css({
              display: "block",
              left: value * this.options.width,
              zIndex: 10
            });
            this.options.callback.start(currentSlide + 1);
            if (this.data.vendorPrefix) {
              prefix = this.data.vendorPrefix;
              transform = prefix + "Transform";
              duration = prefix + "TransitionDuration";
              timing = prefix + "TransitionTimingFunction";
              slidesControl[0].style[transform] = "translateX(" + direction + "px)";
              slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
              return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
                slidesControl[0].style[transform] = "";
                slidesControl[0].style[duration] = "";
                slidesControl.children(":eq(" + next + ")").css({
                  left: 0
                });
                slidesControl.children(":eq(" + currentSlide + ")").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
                });
                $.data(_this, "current", next);
                $.data(_this, "animating", false);
                slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
                slidesControl.children(":not(:eq(" + next + "))").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
                });
                if (_this.data.touch) {
                  _this._setuptouch();
                }
                return _this.options.callback.complete(next + 1);
              });
            } else {
              return slidesControl.stop().animate({
                left: direction
              }, this.options.effect.slide.speed, (function() {
                slidesControl.css({
                  left: 0
                });
                slidesControl.children(":eq(" + next + ")").css({
                  left: 0
                });
                return slidesControl.children(":eq(" + currentSlide + ")").css({
                  display: "none",
                  left: 0,
                  zIndex: 0
                }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
              }));
            }
          }
        };

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    this is the conclusion to the jquery code
    Code:
        Plugin.prototype._fade = function(number) {
          var $element, currentSlide, next, slidesControl, value,
            _this = this;
          $element = $(this.element);
          this.data = $.data(this);
          if (!this.data.animating && number !== this.data.current + 1) {
            $.data(this, "animating", true);
            currentSlide = this.data.current;
            if (number) {
              number = number - 1;
              value = number > currentSlide ? 1 : -1;
              next = number;
            } else {
              value = this.data.direction === "next" ? 1 : -1;
              next = currentSlide + value;
            }
            if (next === -1) {
              next = this.data.total - 1;
            }
            if (next === this.data.total) {
              next = 0;
            }
            this._setActive(next);
            slidesControl = $(".slidesjs-control", $element);
            slidesControl.children(":eq(" + next + ")").css({
              display: "none",
              left: 0,
              zIndex: 10
            });
            this.options.callback.start(currentSlide + 1);
            if (this.options.effect.fade.crossfade) {
              slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
              return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
                slidesControl.children(":eq(" + next + ")").css({
                  zIndex: 0
                });
                $.data(_this, "animating", false);
                $.data(_this, "current", next);
                return _this.options.callback.complete(next + 1);
              }));
            } else {
              return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
                slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
                  return slidesControl.children(":eq(" + next + ")").css({
                    zIndex: 10
                  });
                }));
                $.data(_this, "animating", false);
                $.data(_this, "current", next);
                return _this.options.callback.complete(next + 1);
              }));
            }
          }
        };
        Plugin.prototype._getVendorPrefix = function() {
          var body, i, style, transition, vendor;
          body = document.body || document.documentElement;
          style = body.style;
          transition = "transition";
          vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
          transition = transition.charAt(0).toUpperCase() + transition.substr(1);
          i = 0;
          while (i < vendor.length) {
            if (typeof style[vendor[i] + transition] === "string") {
              return vendor[i];
            }
            i++;
          }
          return false;
        };
        return $.fn[pluginName] = function(options) {
          return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
              return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
          });
        };
      })(jQuery, window, document);
    
    }).call(this);

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,098
    Thanks
    297
    Thanked 12 Times in 12 Posts
    sorted it
    thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •