How to “reverse engineer” a simple react component to pure jquery

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>

javascript jquery reactjs

share|improve this question

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 7 more comments

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>

javascript jquery reactjs

share|improve this question

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 7 more comments

1

1

1

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>

javascript jquery reactjs

share|improve this question

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

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>

$(".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>

$(".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>

javascript jquery reactjs

javascript jquery reactjs

share|improve this question

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

share|improve this question

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

share|improve this question

share|improve this question

edited Jan 4 at 1:37

webkitfanz

edited Jan 4 at 1:37

webkitfanz

edited Jan 4 at 1:37

webkitfanz

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

asked Jan 1 at 12:42

webkitfanzwebkitfanz

3851322

3851322

• 
  
  
  

  
  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
  

  
  
  
  

 | 
show 7 more comments

• 
  
  
  

  
  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
  

  
  
  
  

1

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

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

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

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

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

@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

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

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

13

Converting FROM React TO jQuery - I thought I'd seen everything :).

– Elliot Nelson
Jan 4 at 1:33

Converting FROM React TO jQuery - I thought I'd seen everything :).

– Elliot Nelson
Jan 4 at 1:33

 | 
show 7 more comments

1 Answer
1

active

oldest

votes

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:

share|improve this answer

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

 | 
show 5 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995519%2fhow-to-reverse-engineer-a-simple-react-component-to-pure-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

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:

share|improve this answer

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

 | 
show 5 more comments

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:

share|improve this answer

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

 | 
show 5 more comments

2

+100

2

+100

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:

share|improve this answer

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

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:

share|improve this answer

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

share|improve this answer

share|improve this answer

edited Jan 5 at 2:42

edited Jan 5 at 2:42

edited Jan 5 at 2:42

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

answered Jan 4 at 3:14

iagowpiagowp

1,40511224

1,40511224

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

 | 
show 5 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

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

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

@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

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

Ok I updated the answer. Its actually really simple.

– iagowp
Jan 4 at 23:06

1

1

Nop, haven't worried about IE in a long time

– iagowp
Jan 13 at 2:31

Nop, haven't worried about IE in a long time

– iagowp
Jan 13 at 2:31

 | 
show 5 more comments

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995519%2fhow-to-reverse-engineer-a-simple-react-component-to-pure-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here