Having trouble getting Syl.js to work

Hello all,

Im having a trouble getting a javascript library to work with my code. Id appreciate any help I can get.
Here is the link to the library im using: http://darsa.in/sly/
Thanks

<div style="overflow: hidden;" id="fm_scroller_wrap" class="frame">

    <div style="transform: translateZ(0px);" id="fm_articleWrap">

        <article id="post-1376" class="fm_articleItem infinite-item">

        </article>

    </div>

</div>

Here is my js:

// Vars
    var contentFrame = document.getElementById('fm_scroller_wrap'), // frame
        itemsWrap = document.getElementById('fm_articleWrap'), // slidee
        items = document.getElementsByClassName('fm_articleItem'), // items
        dummyVar;

    // Single page sly
    var elSingleOpts = {
            slidee: itemsWrap,
        },
        elSingleCallbackMap = {

            load: function (eventName) {
                console.log('we are live.');
            },
            move: function (eventName) {
                console.log(eventName);
            },
            change: function (eventName) {
                console.log(eventName);
            }

        },
        dummyVarSINGLEPAGE;

    // Slys.

    var elSingle = new Sly(contentFrame, elSingleOpts, elSingleCallbackMap);

    function startAutoLoad() {

        elSingle.on('load change', function () {
            if (this.pos.dest > this.pos.end - 200) {

                console.log('on load situation. pos end: ' + this.pos.end);
            }

        });

        elSingle.init();
    }

    (function ($) {
        "use strict";

        startAutoLoad();

    })(jQuery);

Thank you for any help anyone can offer.

  • Adam Czajczyk

    Hello odotjdot,

    I hope you're well today and thank you for your question!

    I'll be happy to work with you on this but I'll need some more information. Could you please elaborate a bit on this?

    Let me know please:
    - where and how did you applied those codes on your site
    - how are you calling/including your script to the site
    - what theme are you using
    - what's the expected result of this code
    - what are the issues that you're experiencing currently with it?

    Anything that you think may be relevant will help a lot here.

    Please advise!

    Best regards,
    Adam

  • odotjdot

    Sorry, should have included more detail.

    - where and how did you applied those codes on your site -- I have a separate javascript file. Everything is inserted and enqueued correctly. I can get the on load message to work, but nothing else.

    - how are you calling/including your script to the site -- enqueued scripts. the script is loaded properly, I just cant get it to work with my html set up

    - what theme are you using -- custom foundation 6 barebones theme.

    - what's the expected result of this code - I just need the if statement to work, I can take it from there

    elSingle.on('load change', function () {
                if (this.pos.dest > this.pos.end - 200) {
    
                    console.log('on load situation. pos end: ' + this.pos.end);
                }
    
            });

    - what are the issues that you're experiencing currently with it? -- only on load function works. I cant get any of the other methods or events to work.

  • Panos

    Hey there odotjdot ,

    As this is related to a specific js library that we haven't used perhaps you could get better answers from the developers of the library.

    However in a first glance I noticed that in their examples they mention:

    This method returns the very same object it was called on, so you can chain it right after the instance creation

    and

    The purpose of this is to give you time to register callbacks with .on() and .off() methods without using callbackMap argument before anything happens.

    So it is possible that
    if (this.pos.dest > this.pos.end - 200) {
    doesn't work because init hasn't been called, so either "on" might not be working.

    Have you tried first to initialize:
    var elSingle = new Sly(contentFrame, elSingleOpts, elSingleCallbackMap).init();
    and then check the if statement?

    Cheers,
    Panos

  • Panos

    Hi odotjdot ,

    Sorry to hear it didn't work for you.

    I am not sure which method you would like to implement, but I found and tested another way to use their script which seems simpler, taken from one of their examples:

    jQuery(function($){
    	'use strict';
    
    	// -------------------------------------------------------------
    	//   Basic Navigation
    	// -------------------------------------------------------------
    	(function () {
             //Here you can replace with your elements
    		var $frame  = jQuery('#basic');
    		var $slidee = $frame.children('ul').eq(0);
    		var $wrap   = $frame.parent();
    
    		// Call Sly on frame
    		$frame.sly({
    			horizontal: 1,
    			itemNav: 'basic',
    			smart: 1,
    			activateOn: 'click',
    			mouseDragging: 1,
    			touchDragging: 1,
    			releaseSwing: 1,
    			startAt: 3,
    			scrollBar: $wrap.find('.scrollbar'),
    			scrollBy: 1,
    			pagesBar: $wrap.find('.pages'),
    			activatePageOn: 'click',
    			speed: 300,
    			elasticBounds: 1,
    			easing: 'easeOutExpo',
    			dragHandle: 1,
    			dynamicHandle: 1,
    			clickBar: 1,
    
    			// Buttons
    			forward: $wrap.find('.forward'),
    			backward: $wrap.find('.backward'),
    			prev: $wrap.find('.prev'),
    			next: $wrap.find('.next'),
    			prevPage: $wrap.find('.prevPage'),
    			nextPage: $wrap.find('.nextPage')
    		});
    
    		// To Start button
    		$wrap.find('.toStart').on('click', function () {
    			var item = $(this).data('item');
    			// Animate a particular item to the start of the frame.
    			// If no item is provided, the whole content will be animated.
    			$frame.sly('toStart', item);
    		});
    
    		// To Center button
    		$wrap.find('.toCenter').on('click', function () {
    			var item = $(this).data('item');
    			alert( "item:" + item );
    			// Animate a particular item to the center of the frame.
    			// If no item is provided, the whole content will be animated.
    			$frame.sly('toCenter', item);
    		});
    
    		// To End button
    		$wrap.find('.toEnd').on('click', function () {
    			var item = $(this).data('item');
    			// Animate a particular item to the end of the frame.
    			// If no item is provided, the whole content will be animated.
    			$frame.sly('toEnd', item);
    		});
    
    		// Add item
    		$wrap.find('.add').on('click', function () {
    			$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
    		});
    
    		// Remove item
    		$wrap.find('.remove').on('click', function () {
    			$frame.sly('remove', -1);
    		});
    	}());
    });

    Just make sure you have enqueued all js and css (normalize.css, font-awesome.css, ospb.css, horizontal.css, modernizr.js, sly.min.js and horizontal.js) files. You can simply copy these files from their examples page source code if you haven't already :slight_smile:

    Let me know how this sounds to you!

    Cheers,
    Panos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.