EzDevInfo.com

Multiscroll.js plugin - right side works late

This plugin is great, but I think the right side lags.

I am trying to use this plugin with bootstrap for a website. I have used a fullscreen carousel and I used the solution described in this site http://reverzo.tymberry.com/ to do so.

My problem is that i am trying to make a full screen carousel by taking two carousel on left and right side which cuts and looks as one.

This is my site http://tantra-gyan.in/nitpl/#first

The carousel is not synched well and right side lags.

Split scroll to full scroll parallax using multiscroll.js

I'm using multiscroll.js here: http://alvarotrigo.com/multiScroll/

but is it possible to also include one large full slide in the slideshow that is not split?

automatic scroll using multiscroll.js

i was testing multiscroll.js for my website on a temp link. I was wondering if it is possible to scroll through without using mouse or keyboard ie. the images should scroll automatically.(like after every 5 secs it should scroll to next block)

my test link is: http://goo.gl/HjkJKx

this page consists of simple jquery call

<script type="text/javascript">
     $(document).ready(function() {
            $('#myContainer').multiscroll({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
                anchors: ['first', 'second', 'third'],
                menu: '#menu',
                loopTop: true,
                loopBottom: true
            });
        });
    </script>

and the html is like this:

<ul id="menu">
    <li data-menuanchor="first"><a rel='nofollow' href="#first">First slide</a></li>
    <li data-menuanchor="second"><a rel='nofollow' href="#second">Second slide</a></li>
    <li data-menuanchor="third"><a rel='nofollow' href="#third">Third slide</a></li>
</ul>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section" id="left1">
            <h1>Left 1</h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>

        <div class="ms-section" id="left3">
            <h1>Left 3</h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>

        <div class="ms-section" id="right3">
            <h1>Right 3</h1>
        </div>
    </div>  
</div>

Navigation Issue with Multiscroll.js

Let me start out by saying my JQuery skills are next to null. I am building a website with wordpress which utilises multiscroll.js. Normally in wordpress I add menu items and can put in links to pages or anchors within a page, however with this site if I put in a page anchor as a menu link, it will scroll the left hand section to that anchor, but not the corresponding right hand section, that remains blank.

You can see a build of the site here: www.mauriceredmond.com/client/beco clearly the navigation can be achieved as the dot-nav on the right hand side does the job perfectly. Any insights into this problem would be greatly appreciated.

Using multiscroll.js. Want to invert arrow after reaching end of slide

I am using multiscroll.js in my page. See below.

$('#myContainer').multiscroll({
    sectionsColor: ['#116a9e'],
    anchors: ['welcome', 'second', 'third'],
    menu: '#menu',
    navigation: true,
    navigationTooltips: ['1', '2', '3'],
    loopBottom: true,
    loopTop: true
});

And I have arrow points down and I want if I reach the end of my page that arrow has to point up. But I'm not able to use below this.

document.addEventListener('scroll', onScroll);
function onScroll(){
console.log("Hello");
$('.arrow-scroll').toggleClass('scroll-down scroll-up')
}

This code never gets called. If I 'click' in place of 'scroll' everything works fine.

Disable "auto" scroll on multiscroll.js

I want to disable the "auto" scrolling on multiscroll.js plugin. (for those who don't know its a "split screen" js plugin)

Here is a codepen. I've managed to achieve this easily. But I don't want it to be, lets say, magnetic (I don't know how else I can describe it). Here is what I'm trying to do . As you can see you can scroll normally the two split sections. They don't automatically "stick" together immediately after scroll.

Here is multiscroll.js

I've tried to use normalScrollElements, by adding classes to each section and then link them to normalScrollElements without luck.

jQuery('#multiscroll').multiscroll({
    sectionsColor: ['#2980b9', '#2ecc71', '#e74c3c',],
    normalScrollElements: '.sec1, .sec2, .sec3',
});

Bootstrap make multiscroll responsive

Currently working on a site and using the plugin multiscroll.js in the portfolio section.

The important part is everything needs to be 100% responsive. The multiscroll isn't a responsive script so I'm struggling to get this straight.

I allready tried several responsive jquery libraries, standard jqeruy sizing,...

The main issue will be in the javascript functionality.

Ideal would be: from a certain screensize ex for mobile phones, disable the plugin and show content in some other way. Tried the show() and hide() but no result.

An other possible solution is to fully disable javascript functionality and simply maintain the layout.

No fiddle, currently no time to set it up but here's a link to the page we're talking about http://staging.tonneurd.com/showcase.php

Turning two sections into one using media query

I am using the multiscroll.js jquery plugin (https://github.com/alvarotrigo/multiscroll.js).
It works great. However, at a certain browser width it breaks down. So I would like it to be 'disabled' and just show one side of each section after a certain browser width.

Like on this page for example:
http://www.reverzo.tymberry.com/

Here is the fiddle: http://jsfiddle.net/929u1za0/

My pathetic attempt:
HTML

<div id="myContainer">

    <div class="ms-left">
        <!-- Section 1 left -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
            <div class="ms-section-content">
                <h1>Section 1 left</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 left -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <h1>Section 2 left</h1>
        </div><!-- /.ms-section-content -->
      </div><!-- /.ms-section -->
    </div><!-- /.ms-left -->

    <div class="ms-right">
        <!-- Section 1 right -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <div class="ms-section-content">
                <h1>Section 1 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 right -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
           <div class="ms-section-content">
                <h1>Section 2 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->
    </div><!-- /.ms-right -->   
</div><!-- #myContainer -->

CSS

/**
 * multiscroll 0.0.6 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
.ms-section {
    position: relative;
    @include box-sizing(border-box);
}

.ms-section.ms-table{
    display: table;
    width: 100%;
}

.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.ms-easing {
    @include transition(all 0.7s ease-out);
}

/* Custom styles */
.ms-section {
    text-align: center;
}

/* The media query */
@media screen and (max-width: 700px) {
    .ms-section section2 {
        display: none;
    }
}

I am thankful for any kind of help! Thank you!!

UPDATE: Why does this not work to just show the left section1 and the right section 2?

       @media screen and (max-width: 700px) {
            .ms-left .section1, 
            .ms-right .section2 {
                width: 100% !important;   
            }
        }