1

The following react component here:

http://engineering.kapost.com/2018/05/horizontal-react-component-slider/

Working example for the react component: https://codesandbox.io/s/nkm614n740?from-embed

I have been trying to figure out how to convert this into a simplified jquery component/function, but I just can't get around some of the functions that are working in react out of the box.

Here is the full code below:

this.state = {
  marginLeft: 0,
};

renderLeftArrow = () => {
  if (this.state.marginLeft !== 0) {
    return (
      <button className="caret caret-left" onClick={this.handleLeftClicked}>
        {this.props.renderLeftArrow()}
      </button>
    );
  }
  return null;
 }

const remainingWidth = contentWidth - (sliderWidth) - currentMarginLeft;

handleLeftClicked = () => {
  const currentMarginLeft = this.state.marginLeft;
  const sliderWidth = this.slider.offsetWidth;
  let marginLeft;

  if (currentMarginLeft > sliderWidth) {
    marginLeft = currentMarginLeft - sliderWidth;
  } else {
    marginLeft = 0;
  }
   this.setState({ marginLeft });
 }

handleRightClicked = () => {
  const currentMarginLeft = this.state.marginLeft;
  const sliderWidth = this.slider.offsetWidth
  const contentWidth = this.sliderContent.offsetWidth;
  const remainingWidth = contentWidth - (sliderWidth - arrowWidth) - currentMarginLeft;
  let marginLeft;


  if (remainingWidth > 0) {
    if (remainingWidth <= sliderWidth) {
      marginLeft = currentMarginLeft + remainingWidth;
    } else {
      marginLeft = currentMarginLeft + sliderWidth;
    }
  } else {
    marginLeft = currentMarginLeft;
  }
  this.setState({ marginLeft });
 };

componentDidMount() {
 window.addEventListener('resize', this.handleResize());
 this.resetMargin();
}

componentWillUnmount() {
 window.removeEventListener('resize', this.handleResize());
}

Below is what I was able to achieve thus far trying to 'reverse-engineer' it. Looks like its somewhat working but could use some pointers...

Also in JSfiddle

$(".nav-menu").css('margin-left', '0px');
var navWrapper = $("#js-nav-menu-wrapper"),
  sliderWidth = navWrapper.outerWidth(),
  contentWidth = navWrapper.children('.nav-menu').outerWidth(),
  currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')),
  remainingWidth,
  setMargin;

var updateSlider = function() {


  if ('#js-nav-menu-wrapper') {
    sliderWidth = navWrapper.outerWidth();
    contentWidth = navWrapper.children('.nav-menu').outerWidth();
    currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left'));
    remainingWidth = contentWidth - sliderWidth - currentMarginLeft;

    console.log(remainingWidth);
    return this;

  } else {
    navWrapper.children('.nav-menu').css('margin-left', '0px');
  }
};

var navMenuScrollRight = function() {

  updateSlider();

  if (currentMarginLeft > sliderWidth) {
    setMargin = currentMarginLeft - sliderWidth;
  } else {
    setMargin = 0;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};

var navMenuScrollLeft = function() {

  updateSlider();

  if (remainingWidth > 0) {
    if (remainingWidth <= sliderWidth) {
      setMargin = currentMarginLeft + remainingWidth;
    } else {
      setMargin = currentMarginLeft + sliderWidth;
    }
  } else {
    setMargin = currentMarginLeft;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};


$('#js-scroll-right').click(function() {

  navMenuScrollRight();

  event.preventDefault();
});

$('#js-scroll-left').click(function() {

  navMenuScrollLeft();

  event.preventDefault();
});
.main-menu {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: initial;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  transition: 1s all;
}

.nav-menu-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  display: flex;
  flex: 0 1 100%;
  width: 0;
  overflow: hidden;
}

.nav-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  transition: margin 0.5s ease-out 0s;
  list-style: none;
}

.nav-menu li {
  display: inline-flex;
  align-items: center;
  padding: 1rem;
  min-width: 100px;
  border: 1px solid #f3f3f3; 
}

.nav-padel-left,
.nav-padel-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width:50px;
  border: 1px solid;
  background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-menu">
  <div id="js-scroll-left" class="nav-padel-left"><<</div>
  <div id="js-nav-menu-wrapper" class="nav-menu-wrapper">
    <ul class="nav-menu js-nav-built" style="margin-left: 0px;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </div>
  <div id="js-scroll-right" class="nav-padel-left">>></div>
</div>

  • 1
    What have you tried? What exactly are you struggling with? How much do you know about how React works, so you can do a similar thing with jQuery? – GregL Jan 3 at 21:37
  • 1
    Is this some work you got and you're trying to set someone up to do it for you, for free? – vsync Jan 3 at 21:38
  • 1
    @vsync not really I am just doing this for a personal project. Are you looking to get paid for this? :) – webkitfanz Jan 3 at 21:40
  • 4
    This isn't actually too hard, since the only state is the marginLeft. Just copy the code as is, remove the extends React.Component bit, change all the JSX to jQuery DOM manipulation, and call this.render() in the constructor. That should get you on the right track. Once you have made progress, post again if you get stuck with the specific problem. – GregL Jan 3 at 21:54
  • 13
    Converting FROM React TO jQuery - I thought I'd seen everything :). – Elliot Nelson Jan 4 at 1:33
2
+100

Okay, so you had your logic reversed at some points that I fixed. Some notes:

  • I'm not sure what if ('#js-nav-menu-wrapper') { was supposed to do, but it will always evaluate to true. If this was something that you really want to check for some reason, recheck this.

  • Most of your initialization variables are unnecessary as they will get their values set the first time updateSlider is called

This is not a full version, to finish you should hide arrows when on maximum amount on either side, and show them again when leaving the extremes.

$(".nav-menu").css('margin-left', '0px');
var navWrapper = $("#js-nav-menu-wrapper"),
  sliderWidth = navWrapper.outerWidth(),
  contentWidth = navWrapper.children('.nav-menu').outerWidth(),
  currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')),
  setMargin;

var max = (navWrapper.children('.nav-menu').outerWidth() - sliderWidth) * -1;

var updateSlider = function() {
  sliderWidth = navWrapper.outerWidth();
  contentWidth = navWrapper.children('.nav-menu').outerWidth();
  currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left'));
};

var navMenuScrollRight = function() {

  updateSlider();

  if (currentMarginLeft * -1 + sliderWidth < contentWidth ) {
    setMargin = Math.max(currentMarginLeft - sliderWidth, max);
  } else {
    setMargin = currentMarginLeft;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};

var navMenuScrollLeft = function() {

  updateSlider();

  if (currentMarginLeft < 0) {
    setMargin = Math.min(currentMarginLeft + sliderWidth, 0);
  } else {
    setMargin = currentMarginLeft;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};


$('#js-scroll-right').click(function(e) {

  navMenuScrollRight();

  e.preventDefault();
});

$('#js-scroll-left').click(function(e) {

  navMenuScrollLeft();

  e.preventDefault();
});

Shouldn't be hard finishing from here. Good Luck

Link to fiddle:

  • Thanks, this is very close to what I was after, but what value do I set the Math.max, the React version in my first post has a nice way to stop at the very edge, how do I achieve that? – webkitfanz Jan 4 at 15:04
  • @webkitfanz you need to calculate the width of everything and the width of the visible container. The max value of margin will be everything - visible. – iagowp Jan 4 at 20:33
  • I tried the following: jsfiddle.net/f4g5pmbL but it looks like it only goes to about 80%; not sure how to calculate this, its very tricky... – webkitfanz Jan 4 at 22:51
  • Ok I updated the answer. Its actually really simple. – iagowp Jan 4 at 23:06
  • 1
    Nop, haven't worried about IE in a long time – iagowp Jan 13 at 2:31

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.