We Keep Coding

Django Horizontal Scroll on Top of Changelist

I have the same problem as depicted here by mozman2:
"In my Django changelist there are lots of columns that means there is a scrollbar at the bottom of the list. Is it possible to get a scrollbar to appear at the top so I don't need to scroll down"
The solution from the given link seemed to help mozman2. However, I cannot reproduce it. Hence I tried copy-pasting the code from
https://github.com/avianey/jqDoubleScroll#readme
In particular, I copied this file from the repository to MyApp/static/admin/js/
jquery.doubleScroll.js
The file looks like this:
/*
* #name DoubleScroll
* #desc displays scroll bar on top and on the bottom of the div
* #requires jQuery
*
* #author Pawel Suwala - http://suwala.eu/
* #author Antoine Vianey - http://www.astek.fr/
* #version 0.5 (11-11-2015)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Usage:
* https://github.com/avianey/jqDoubleScroll
*/
(function( $ ) {
jQuery.fn.doubleScroll = function(userOptions) {
// Default options
var options = {
contentElement: undefined, // Widest element, if not specified first child element will be used
scrollCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden',
'height': '20px'
},
contentCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden'
},
onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
};
$.extend(true, options, userOptions);
// do not modify
// internal stuff
$.extend(options, {
topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper"><div class="doubleScroll-scroll"></div></div>',
topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
topScrollBarInnerSelector: '.doubleScroll-scroll'
});
var _showScrollBar = function($self, options) {
if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
// content doesn't scroll
// remove any existing occurrence...
$self.prev(options.topScrollBarWrapperSelector).remove();
return;
}
// add div that will act as an upper scroll only if not already added to the DOM
var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
if ($topScrollBar.length == 0) {
// creating the scrollbar
// added before in the DOM
$topScrollBar = $(options.topScrollBarMarkup);
$self.before($topScrollBar);
// apply the css
$topScrollBar.css(options.scrollCss);
$(options.topScrollBarInnerSelector).css("height", "20px");
$self.css(options.contentCss);
var scrolling = false;
// bind upper scroll to bottom scroll
$topScrollBar.bind('scroll.doubleScroll', function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$self.scrollLeft($topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
var selfScrollHandler = function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$topScrollBar.scrollLeft($self.scrollLeft());
};
$self.bind('scroll.doubleScroll', selfScrollHandler);
}
// find the content element (should be the widest one)
var $contentElement;
if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
$contentElement = $self.find(options.contentElement);
} else {
$contentElement = $self.find('>:first-child');
}
// set the width of the wrappers
$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
$topScrollBar.width($self.width());
$topScrollBar.scrollLeft($self.scrollLeft());
}
return this.each(function() {
var $self = $(this);
_showScrollBar($self, options);
// bind the resize handler
// do it once
if (options.resetOnWindowResize) {
var id;
var handler = function(e) {
_showScrollBar($self, options);
};
$(window).bind('resize.doubleScroll', function() {
// adding/removing/replacing the scrollbar might resize the window
// so the resizing flag will avoid the infinite loop here...
clearTimeout(id);
id = setTimeout(handler, options.timeToWaitForResize);
});
}
});
}
}( jQuery ));
I then told django about the file using
class Media:
js = (
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', # jquery
'js/jquery.doubleScroll.js', # project static folder
)
Afterwards I followed with a collectstatic-command:
...
Copying '/MyApp/static/admin/js/jquery.doubleScroll.js'
...
1 static file copied to '/MyApp/static', 123 unmodified.
However, the horizontal scroll-bar on top doesn't show.
In the github repository it is suggested to use the double-scrollbar by
$(document).ready(function() {
$('.double-scroll').doubleScroll();
});
Where do I put this? I tried using it on the same .js-File instead of the starting
(function( $ ) {
...
};
This didn't help neither.
I guess I am missing out on something?

I solved my problem by knowing the syntax for django - jquery.
Here's how:
I got 2 new .js - Files, one which just calls the function of the double-scroll provided (calling.js) and the js-Files of the authors (doubleScroll.js) itself.
In your adminModel in admin.py you put in:
class Media:
js = ('//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js',
'admin/js/doubleScroll.js',
'admin/js/calling.js',)
The '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' - link is necessary to make native jquery possible to run, if I understood correctly.
calling.js:
django.jQuery(document).ready(function() {
setTimeout(() => $('.results').doubleScroll({resetOnWindowResize: true}), 245);
});
doubleScroll.js:
/*
* #name DoubleScroll
* #desc displays scroll bar on top and on the bottom of the div
* #requires jQuery
*
* #author Pawel Suwala - http://suwala.eu/
* #author Antoine Vianey - http://www.astek.fr/
* #version 0.5 (11-11-2015)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Usage:
* https://github.com/avianey/jqDoubleScroll
*/
(function( $ ) {
jQuery.fn.doubleScroll = function(userOptions) {
// Default options
var options = {
contentElement: undefined, // Widest element, if not specified first child element will be used
scrollCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden',
'height': '20px'
},
contentCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden'
},
onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
};
$.extend(true, options, userOptions);
// do not modify
// internal stuff
$.extend(options, {
topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper"><div class="doubleScroll-scroll"></div></div>',
topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
topScrollBarInnerSelector: '.doubleScroll-scroll'
});
var _showScrollBar = function($self, options) {
if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
// content doesn't scroll
// remove any existing occurrence...
$self.prev(options.topScrollBarWrapperSelector).remove();
return;
}
// add div that will act as an upper scroll only if not already added to the DOM
var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
if ($topScrollBar.length == 0) {
// creating the scrollbar
// added before in the DOM
$topScrollBar = $(options.topScrollBarMarkup);
$self.before($topScrollBar);
// apply the css
$topScrollBar.css(options.scrollCss);
$(options.topScrollBarInnerSelector).css("height", "20px");
$self.css(options.contentCss);
var scrolling = false;
// bind upper scroll to bottom scroll
$topScrollBar.bind('scroll.doubleScroll', function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$self.scrollLeft($topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
var selfScrollHandler = function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$topScrollBar.scrollLeft($self.scrollLeft());
};
$self.bind('scroll.doubleScroll', selfScrollHandler);
}
// find the content element (should be the widest one)
var $contentElement;
if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
$contentElement = $self.find(options.contentElement);
} else {
$contentElement = $self.find('>:first-child');
}
// set the width of the wrappers
$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
$topScrollBar.width($self.width());
$topScrollBar.scrollLeft($self.scrollLeft());
}
return this.each(function() {
var $self = $(this);
_showScrollBar($self, options);
// bind the resize handler
// do it once
if (options.resetOnWindowResize) {
var id;
var handler = function(e) {
_showScrollBar($self, options);
};
$(window).bind('resize.doubleScroll', function() {
// adding/removing/replacing the scrollbar might resize the window
// so the resizing flag will avoid the infinite loop here...
clearTimeout(id);
id = setTimeout(handler, options.timeToWaitForResize);
});
}
});
}
}( jQuery ));
Dont forget to run
collectstatic

jQuery is included in Django, so only one .js file is required.
1. admin.py
# Created by BaiJiFeiLong#gmail.com at 2022/5/5
from django.contrib import admin
from django.contrib.auth.models import User
class UserAdmin(admin.ModelAdmin):
model = User
class Media(object):
js = (
"js/doubleScroll.js",
)
2. js/doubleScroll.js
/*
* #name DoubleScroll
* #desc displays scroll bar on top and on the bottom of the div
* #requires jQuery
*
* #author Pawel Suwala - http://suwala.eu/
* #author Antoine Vianey - http://www.astek.fr/
* #version 0.5 (11-11-2015)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Usage:
* https://github.com/avianey/jqDoubleScroll
*/
(function( $ ) {
jQuery.fn.doubleScroll = function(userOptions) {
// Default options
var options = {
contentElement: undefined, // Widest element, if not specified first child element will be used
scrollCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden',
'height': '20px'
},
contentCss: {
'overflow-x': 'auto',
'overflow-y': 'hidden'
},
onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
};
$.extend(true, options, userOptions);
// do not modify
// internal stuff
$.extend(options, {
topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper"><div class="doubleScroll-scroll"></div></div>',
topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
topScrollBarInnerSelector: '.doubleScroll-scroll'
});
var _showScrollBar = function($self, options) {
if (options.onlyIfScroll && $self.get(0).scrollWidth <= Math.round($self.width())) {
// content doesn't scroll
// remove any existing occurrence...
$self.prev(options.topScrollBarWrapperSelector).remove();
return;
}
// add div that will act as an upper scroll only if not already added to the DOM
var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
if ($topScrollBar.length == 0) {
// creating the scrollbar
// added before in the DOM
$topScrollBar = $(options.topScrollBarMarkup);
$self.before($topScrollBar);
// apply the css
$topScrollBar.css(options.scrollCss);
$(options.topScrollBarInnerSelector).css("height", "20px");
$self.css(options.contentCss);
var scrolling = false;
// bind upper scroll to bottom scroll
$topScrollBar.bind('scroll.doubleScroll', function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$self.scrollLeft($topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
var selfScrollHandler = function() {
if (scrolling) {
scrolling = false;
return;
}
scrolling = true;
$topScrollBar.scrollLeft($self.scrollLeft());
};
$self.bind('scroll.doubleScroll', selfScrollHandler);
}
// find the content element (should be the widest one)
var $contentElement;
if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
$contentElement = $self.find(options.contentElement);
} else {
$contentElement = $self.find('>:first-child');
}
// set the width of the wrappers
$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
$topScrollBar.width($self.width());
$topScrollBar.scrollLeft($self.scrollLeft());
}
return this.each(function() {
var $self = $(this);
_showScrollBar($self, options);
// bind the resize handler
// do it once
if (options.resetOnWindowResize) {
var id;
var handler = function(e) {
_showScrollBar($self, options);
};
$(window).bind('resize.doubleScroll', function() {
// adding/removing/replacing the scrollbar might resize the window
// so the resizing flag will avoid the infinite loop here...
clearTimeout(id);
id = setTimeout(handler, options.timeToWaitForResize);
});
}
});
}
}( jQuery ));
document.addEventListener("DOMContentLoaded", () => {
django.jQuery('.results').doubleScroll({resetOnWindowResize: true});
})
3. Restart Django server
Maybe python manage.py collectstatic is required.
Press F12 in your browser, make sure the .js file is loaded correctly.

how to use scrollIt.js in different pages with different topOffset?

This is a nice jQuery plugin that i use for my site.
scrollIt.js
In the option section:
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: 0 // offste (in px) for fixed top navigation
});
I set the "topOffset" to "-160", and it works fine. Now on the other page i'm calling the same function but now I want the "topOffset" to be "0". How would i achieve that please?

Solve the problem myself by doing this:
if( $(".main-body").hasClass("home-vertical-scroll") ){
var scrollItTopOffset = 0;
}
else{
var scrollItTopOffset = -160;
};
$(function(){
$.scrollIt({
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
onPageChange: null,
topOffset: scrollItTopOffset
});
});
In case someone want the answer.

spinner on form submit

I’m looking to build a script thats open a spinner on form submit or select change.
I’d like to use spin.js, (this is a working example from the developer):
var opts = {
lines: 11, // The number of lines to draw
length: 15, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb
speed: 0.6, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var spinner = null;
var spinner_div = 0;
$(document).ready(function() {
spinner_div = $('#spinner').get(0);
$("#btn-spin").click(function(e) {
e.preventDefault();
if(spinner == null) {
spinner = new Spinner(opts).spin(spinner_div);
} else {
spinner.spin(spinner_div);
}
});
});
so.. when i click on my submit button
<input id="btn-spin" type="submit" name="next" value="Continua" class="button-big"/>
or when i change a value on my select
<select name="billing_country" onChange="this.form.submit();">
{billing_country_options}
</select>
I’d like to:
add “lightbox-is-open” and “lightbox-is-fixed” classes to HTML
remove “hidden” class from my glasspane div
start (or show) the spinner
wait 500ms
submit the button or the select (and then other page will be loaded)
someone can help me please?
it’s too hard, a very difficult puzzle for me, (i’m a sound engineer, not a web developer)
thanks so much

Assuming that you have initialized your spinner correctly, we can listen to either the form submit or select change events using jQuery, and avoid using inline JS. For your <select>, just remove the inline JS.
$(function() {
// Remember to use 'var'
var spinner_div = $('#spinner').get(0),
spinner,
opts = {
// Opts go here
},
showSpinner = function() {
// Add 'lightbox-is-open' and 'lightbox-is-fixed' classes to HTML
$('html').addClass('lightbox-is-open lightbox-is-fixed');
// Remove 'hidden' class from '.glasspane'
$('.glasspane').removeClass('hidden');
// Show spinner
if(spinner == null) {
spinner = new Spinner(opts).spin(spinner_div);
} else {
spinner.spin(spinner_div);
}
// Submit form after 500ms
var timer = window.setTimeout(function() {
$('form').submit();
}, 500);
};
// Bind events
$('form').on('submit', function(e) {
e.preventDefault();
showSpinner();
});
$('#btn-spin').on('click', function(e) {
e.preventDefault();
showSpinner();
});
$('select').on('change', showSpinner);
});

jssor slider not responding to nav arrows

I am building a jssor slider dynamically using javascript. The slider is based on the jssor 'carousel' demo. Everything looks correct when displayed, including the navigation arrows at either end of the slider. It will also respond correctly when I swipe left or right with the mouse. The slider, however, does not respond to any clicks on the nav arrows.
One problem I have seen mentioned in other postings is improper nesting of the nav arrows. I don't think that is the problem here. Any help would be most appreciated.
Here is the javascript that builds the slider:
var CpxRowSlider = function(callback) {
var callback;
var indexedImgEl = new Array();
var DEFAULT_H = 110;
var DEFAULT_W = 260;
var outerDivEl = document.createElement('div');
var title = true;
var addNavArrows = true;
var sliderDivEl = null;
var sliderId = "slider_SOLO";
/*
* image set should be an array of key-value pairs where the value is the
* URL of an image and the key will be used as a tag that identifies the
* image in any callback functions.
*/
function create(imageSet) {
/* Slides Container -- */
var rowDivEl = document.createElement('div');
$(rowDivEl).attr("u", "slides");
$(rowDivEl).css({
"cursor" : "move",
"position" : "absolute",
"left" : "0px",
"top" : "0px",
"width" : "780px",
"height" : "110px",
"overflow" : "hidden"
});
for ( var key in imageSet) {
var imgUrl = imageSet[key];
var imgDivEl = document.createElement('div');
var imgEl = document.createElement('img');
imgEl.src = imgUrl;
$(imgEl).attr("u", "image");
imgDivEl.appendChild(imgEl);
// add to row
rowDivEl.appendChild(imgDivEl);
$(imgEl).data("cpxKey", key);
/*
* actions associated with the img....
*/
/*
* click event gets handed off via callback
*/
if ((callback != undefined) && (callback != null)) {
imgEl.onclick = function(evt) {
var targetImg = evt.target;
trace("Click on " + $(targetImg).data("cpxKey"));
callback($(targetImg).data("cpxKey"));
};
}
}
// add slides to a slider...
sliderDivEl = document.createElement('div');
sliderDivEl.id = sliderId
$(sliderDivEl).css({
"position" : "relative",
"left" : "0px",
"top" : "0px",
"width" : "780px",
"height" : "110px"
});
// add to DOM
sliderDivEl.appendChild(rowDivEl);
if (addNavArrows) {
sliderDivEl.appendChild(createNavArrow(true));
sliderDivEl.appendChild(createNavArrow(false));
}
outerDivEl.appendChild(sliderDivEl);
}
function createNavArrow(toLeft) {
var arrowSpan = document.createElement('span');
$(arrowSpan).attr("u", "image");
$(arrowSpan).css({
"top" : "30px",
"width" : "55px",
"height" : "55px"
});
if (toLeft) {
$(arrowSpan).css({
"left" : "5px"
});
$(arrowSpan).addClass("jssora03l");
} else {
$(arrowSpan).css({
"right" : "5px"
});
$(arrowSpan).addClass("jssora03r");
}
return arrowSpan;
}
/*
* Invoked only AFTER the slider has been added to the DOM
*/
function finalize() {
// add to sliders being controlled by jssor
var sliderOptions = getSliderOptions();
var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);
}
function getSliderOptions() {
var sliderhOptions = {
/*
* $AutoPlay [Optional] Whether to auto play, to enable slideshow,
* this option must be set to true, default value is false
*/
$AutoPlay : false,
/*
* $PauseOnHover [Optional] Whether to pause when mouse over if a
* slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause
* for touch device, 3 pause for desktop and touch device, default
* value is 1
*/
$PauseOnHover : 1,
/*
* $AutoPlaySteps [Optional] Steps to go for each navigation request
* (this options applys only when slideshow disabled), the default
* value is 1
*/
$AutoPlaySteps : 2,
/*
* $ArrowKeyNavigation [Optional] Allows keyboard (arrow key)
* navigation or not, default value is false
*/
// $ArrowKeyNavigation : true,
/*
* [Optional] Specifies default duration (swipe) for slide in
* milliseconds, default value is 500
*/
$SlideDuration : 300,
/*
* [Optional] Minimum drag offset to trigger slide , default value
* is 20
*/
$MinDragOffsetToSlide : 20,
/*
* [Optional] Width of every slide in pixels, default value is width
* of 'slides' container
*/
$SlideWidth : DEFAULT_W,
/*
* [Optional] Height of every slide in pixels, default value is
* height of 'slides' container
*/
// $SlideHeight: 150,
/*
* [Optional] Space between each slide in pixels, default value is 0
*/
$SlideSpacing : 3,
/*
* [Optional] Number of pieces to display (the slideshow would be
* disabled if the value is set to greater than 1), the default
* value is 1
*/
$DisplayPieces : 3,
/*
* [Optional] The offset position to park slide (this options applys
* only when slideshow disabled), default value is 0.
*/
$ParkingPosition : 0,
/*
* [Optional] The way (0 parellel, 1 recursive, default value is 1)
* to search UI components (slides container, loading screen,
* navigator container, arrow navigator container, thumbnail
* navigator container etc).
*/
$UISearchMode : 0,
// ...................................
// [Optional] Options to specify and enable navigator or not
$BulletNavigatorOptions : {
$Class : $JssorBulletNavigator$, // [Required] Class to
// create navigator instance
$ChanceToShow : 1, // [Required] 0 Never, 1 Mouse Over, 2
// Always
$AutoCenter : 0, // [Optional] Auto center navigator in
// parent container, 0 None, 1 Horizontal, 2
// Vertical, 3 Both, default value is 0
$Steps : 1, // [Optional] Steps to go for each navigation
// request, default value is 1
$Lanes : 1, // [Optional] Specify lanes to arrange items,
// default value is 1
$SpacingX : 0, // [Optional] Horizontal space between each item
// in pixel, default value is 0
$SpacingY : 0, // [Optional] Vertical space between each item
// in pixel, default value is 0
$Orientation : 1
// [Optional] The orientation of the navigator, 1 horizontal, 2
// vertical, default value is 1
}
}
return sliderhOptions;
}
function trace(msg) {
console.log("CpxRowSlider: " + msg);
}
return {
create : create,
finalize : finalize,
getContainer : function() {
return outerDivEl;
}
};
};
UPDATE:
Well, some digging around turned up the "where" but the "why" is still a mystery. The generated HTML should look something like this (minus the "styles" for clarity):
<div id="slider_SOLO" >
<div u="slides">
<div>
<img u="image" src="../foo1.jpg" />
</div>
<div>
<img u="image" src="../foo2.jpg" />
</div>
<div>
<span u="arrowleft" class="jssora03l" ></span>
<span u="arrowright" class="jssora03r"></span>
</div>
The problem is that in the actual HTML page there are TWO elements with the attribute u="slides". The 2nd is the correct one but just before it is another empty div. In other words, the DOM I see when I examine the displayed HTML is more like:
<div id="slider_SOLO" >
<div u="slides"></div>
<div u="slides">
<div>
<img u="image" src="../foo1.jpg" />
</div>
<div>
<img u="image" src="../foo2.jpg" />
</div>
<div>
<span u="arrowleft" class="jssora03l" ></span>
<span u="arrowright" class="jssora03r"></span>
</div>
If I add a similar div to the jssor carousel demo HTML, I get the same behavior (i.e., navigation arrows no longer work).
The problem is that the error (i.e., the extra DIV) is not inserted by my javascript. Rather it seems to be linked to the call
var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);
I am wondering if the cause is something in the options I pass in.

Found it! The root cause was indeed my options but not in the way I thought. I was missing the $ArrowNavigatorOptions. The mystery DIV is still being inserted but everything now works correctly.
The take-away lesson for me is that jssor seems to fail quietly in the sense that rather than generate a console message about the missing option it simply did nothing.

Using links within a parallax ScrollMagic site

I'm making a vertical parallax scrolling site with ScrollMagic which includes a navigation menu at the top to link within the site.
The menu itself works correctly when no parallax animation is applied to the scroll but when the parallax is added (ie the 2nd section moves up over the intro section), it seems unable to take the reduction in overall height into account when moving to the section, so it overshoots.
Here is some code:
var site = {
smController : {},
init : function () {
site.setupScroll();
site.setupMainNavigation();
site.setupAnimation();
},
setupScroll : function () {
// init the smController
var controller = new ScrollMagic({
globalSceneOptions: {
triggerHook: "onLeave"
}
});
site.smController = controller;
},
setupMainNavigation : function () {
$('.menuclick').on('click', function (event) {
event.preventDefault();
var anchor = $(this),
sectionId = $(anchor.attr('href'));
site.scrollToSection(sectionId);
});
},
/**
* uses tweenlite and scrolltoplugin from greensock
* #param {string} sectionId id of section to scroll to
* #return {void}
*/
scrollToSection : function (sectionId) {
var scrollYPos = $(sectionId).offset().top;
TweenLite.to(window, 0.5, { scrollTo:{ y: scrollYPos } });
},
setupAnimation : function () {
// parallax animation - move marginTop back by 100%
var tween = new TimelineMax()
.to('#section1', 2, { marginTop: '-100%', ease:Linear.easeNone });
var controller = site.smController,
scene = new ScrollScene({ duration: 500 })
.setTween(tween)
.addTo(controller);
// show indicators (requires debug extension)
scene.addIndicators();
}
};
$(document).ready(function () {
site.init();
});
Does anyone have a strategy to deal with moving (parallax) sections like this please?
Thanks

In ScrollMagic 1.1 you can now provide custom scroll functions AND scroll to the beginning of a specific scene.
Read more here:
http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#scrollTo
I would also strongly suggest not to use animated elements as scroll targets, because their position might be different before and after initiating scroll.
If you have elements that influence the DOM height, try to take them out of the DOM flow.
You can do this for example by adding an element as a placeholder and setting your element as positioned absolutely.
hope this helps.
J

I did something like this, using a similar setup to the demo page
new ScrollMagic.Scene(settings)
.setPin(slides[i])
.on('enter', function () {
var $trigger = $(this.triggerElement()),
$nextSlide = $trigger.parent().next().find('.slide');
/*
* If there's a next slide,
* update the href of the button
* to target the next slide
* otherwise, we're at the end;
* toggle the button state so it targets
* the top of the page
*/
if ($nextSlide.length) {
$('.btn-scroll').attr('href', '#' + $nextSlide.attr('id'));
} else {
$('.btn-scroll').attr('href', '#').addClass('up');
}
})
.on('leave', function (event) {
var $trigger = $(this.triggerElement()),
$firstSlide = $('.slide:first');
/*
* If we're going back up and we pass
* the first slide, update the button
* so it targets the first slide
*/
if (event.scrollDirection === 'REVERSE' && ($trigger.offset().top === $firstSlide.offset().top)) {
$('.btn-scroll').attr('href', originalTarget).removeClass('up');
}
})
.addTo(controller);
It just needs an anchor link with the href set to the first slide.
and something like this to handle the scroll:
var scrollToContent = function (target, speed) {
if (target === '#') {
target = $('body');
} else {
target = $(target);
}
speed = typeof speed !== 'undefined' ? speed : 'slow';
$('html, body').animate({
scrollTop: target.offset().top
}, speed);
}