Somebody explain this function please

@gautamz07Sep 22.2014

well i came across a small snippet online and this particular piece of code is pretty confusing . espically the part after var opts . can somebody please come along and explain to me whats happening ?

[CODE] function slideTo(imageToGo){ var direction; var numOfImageToGo = Math.abs(imageToGo – currentImage); // slide toward left

direction = currentImage > imageToGo ? 1 : -1; currentPostion = -1 * currentImage * imageWidth;

// from here on its really confusing ……………………..

var opts = { duration:1000, delta:function(p){return p;}, step:function(delta){ ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + ‘px’; }, callback:function(){currentImage = imageToGo;} }; animate(opts); } [/CODE]

i really can point out one part , or atleast whts all tat part like

[CODE] delta:function(p){return p;}, step:function(delta){ ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + ‘px’; [/CODE]

to post a comment

JavaScript

3 Comments(s) _↴

@omnicitySep 23.2014 — #That is fairly horrible code.

Is this something that you are forced to use, because if not I would recommend that you avoid it like the plague.

@Sup3rkirbySep 23.2014 — #The snippet itself isn't very complicated, but it is taken out of context. It references a function that is included elsewhere and so outside the basics of syntax and logic there isn't much else to be explained.

Obviously the first few lines of this function declare and set some variables.

Then once we get to your 'confusing' part, the code simply declares and sets a variable named '[B]opts[/B]', which is an object. And this is where we sort of hit an informational wall with this snippet. The object itself sets one static variable (duration being 1,000) and then the three remaining variables/indexes within the [B]opts[/B] object are functions. These functions would be related to whatever set of code you got this from as they pertain to helping the [B]animate()[/B] function run.

@gautamz07authorSep 23.2014 — #The snippet itself isn't very complicated, but it is taken out of context. It references a function that is included elsewhere and so outside the basics of syntax and logic there isn't much else to be explained...[/QUOTE]

@Sup3rkirby ! thanks that was really helpful , i will have a harder look at the code , in order to understand whats going on . wht u said was elaborate , so thanks again and also , i had stripped down the code , to just the part , i had difficulty with , so sorry for not providing full details . below is the full programme , u can just copy paste it and it should run just fine ! .

[CODE]
 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="Image-Slider-Pager.js"></script>
 <link rel="stylesheet" type="text/css" href="Image-Slider-Pager.css">
 <style type="text/css">
 .container{
 width:800px;
 height:400px;
 padding:20px;
 border:1px solid gray;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 background: black; 
 text-align: center;
 }
 .slider_wrapper{
 overflow: hidden;
 position:relative;
 height:280px;
 top:auto;
 }
 #image_slider{
 
  position: relative;
  height: auto;
  list-style: none;
  overflow: hidden;
  float: left;
  /*Chrom default padding for ul is 40px */
  padding:0px;
  margin:0px;
 }
 #image_slider li{
 position: relative;
 float: left;
 }
 .nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
 }
 .nvgt:hover{
 opacity: 0.9;
 }
 #prev{
 background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
 left: 0px;
 }
 #next{
 background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
 right: 0px;
 }
 #pager{
 /* firefox has different center method. this doesn't work for fire fox */
 /* not in the center*/
 padding:0px;
 position:relative;
 height:50px;
 margin:auto;
 margin-top:10px;
 }
 #pager li{
 padding: 0px;
 margin:5px;
 width:20px;
 height:20px;
 border:1px solid white;
 color:white;
 list-style: none;
 opacity: 0.6;
 float:left;
 border-radius: 3px;
 cursor: pointer;
 }
 #pager li:hover{
 opacity:0.9;
 }
 </style>
 
   <script type="text/javascript">
   //1. set ul width 
 //2. image when click prev/next button
 var ul;
 var liItems;
 var imageNumber;
 var imageWidth;
 var prev, next;
 var currentPostion = 0;
 var currentImage = 0;
 
 
 function init(){
 ul = document.getElementById('image_slider');
 liItems = ul.children;
 imageNumber = liItems.length;
 imageWidth = liItems[0].children[0].clientWidth;
 ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
 prev = document.getElementById("prev");
 next = document.getElementById("next");
 generatePager(imageNumber);
 //.onclike = slide(-1) will be fired when onload;
 /*
 prev.onclick = function(){slide(-1);};
 next.onclick = function(){slide(1);};*/
 prev.onclick = function(){ onClickPrev();};
 next.onclick = function(){ onClickNext();};
 }
 
 function animate(opts){
 var start = new Date;
 var id = setInterval(function(){
 var timePassed = new Date - start;
 var progress = timePassed / opts.duration;
 if (progress > 1){
 progress = 1;
 }
 var delta = opts.delta(progress);
 opts.step(delta);
 if (progress == 1){
 clearInterval(id);
 opts.callback();
 }
 }, opts.delay || 17);
 //return id;
 }
 
 function slideTo(imageToGo){
 var direction;
 var numOfImageToGo = Math.abs(imageToGo - currentImage);
 // slide toward left
 
  direction = currentImage > imageToGo ? 1 : -1;
  currentPostion = -1 * currentImage * imageWidth;
  var opts = {
   duration:1000,
   delta:function(p){return p;},
   step:function(delta){
   ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
   },
   callback:function(){currentImage = imageToGo;} 
  };
  animate(opts);
 }
 
 function onClickPrev(){
 if (currentImage == 0){
 slideTo(imageNumber - 1);
 } 
 else{
 slideTo(currentImage - 1);
 } 
 }
 
 function onClickNext(){
 if (currentImage == imageNumber - 1){
 slideTo(0);
 } 
 else{
 slideTo(currentImage + 1);
 } 
 }
 
 function generatePager(imageNumber){ 
 var pageNumber;
 var pagerDiv = document.getElementById('pager');
 for (i = 0; i < imageNumber; i++){
 var li = document.createElement('li');
 pageNumber = document.createTextNode(parseInt(i + 1));
 li.appendChild(pageNumber);
 pagerDiv.appendChild(li);
 // add event inside a loop, closure issue.
 li.onclick = function(i){
 return function(){
 slideTo(i);
 }
 }(i);
 } 
 var computedStyle = document.defaultView.getComputedStyle(li, null);
 //border width 1px; offsetWidth = 22
 var liWidth = parseInt(li.offsetWidth);
 var liMargin = parseInt(computedStyle.margin.replace('px',""));
 pagerDiv.style.width = parseInt((liWidth + liMargin * 2) * imageNumber) + 'px';
 }
 window.onload = init;
 
   </script>
  </head>
 
  <body>
   <div class="container">
   <div class="slider_wrapper">
   <ul id="image_slider">
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
   <li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
   </ul> 
   <span class="nvgt" id="prev"></span>
   <span class="nvgt" id="next"></span> 
   </div>
   <ul id="pager">
   </ul>
   </div>
  </body>
 [/CODE]

Thanks for ur help .

Gautam.

Also in #JavaScript _↴

What is this ?JS: If/Else statement with an Array Strange bug in Firefox?

Success!

Help @gautamz07 spread the word by sharing this article on Twitter...

Tweet This

Somebody explain this function please

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Somebody explain this function please

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴