We Keep Coding

noUiSlider touch events not working in foundation off-canvas menu

I am using noUiSlider in a Foundation 6 off-canvas menu, and the slider handles will not drag on touch devices. It works if the noUiSlider is nested outside of the off-canvas menu, and it even works fine in the off-canvas menu when using a mouse to drag the handles. However when I emulate touch events, or actually attempt to drag the sliders handles on a touch device the slider handles do not move and stay fixed in place.
HTML:
<div class="off-canvas position-right" id="offCanvasNestedPush" data-content-scroll="false" data-off-canvas>
<div class="row align-middle" id="fr_wrapper_price_slider" data-initial-start="0" data-initial-end="10000000">
<div class="columns small-12">
<!-- noUiSlider -->
<div id="fr_price_slider"></div>
</div>
</div>
</div>
JS:
var fr_price_slider_wrapper = document.getElementById('fr_wrapper_price_slider');
var fr_price_slider = document.getElementById('fr_price_slider');
noUiSlider.create(fr_price_slider, {
/* Slider Positions on DOM Load */
start: [
fr_price_slider_wrapper.getAttribute('data-initial-start'),
fr_price_slider_wrapper.getAttribute('data-initial-end')
],
behaviour: 'drag',
connect: true,
range: {
'min': [ 0, 5000 ],
'50%': [ 1000000, 50000 ],
'max': [ 10000000 ]
}
});

The reason i'm answering this question myself is because I was not able to find any questions on StackOverflow that asked about this issue, and it's a really simple fix. Foundation 6's documentation for the off-canvas menu does not mention that setting data-content-scroll="false" can block touch events for third-party scripts nested in the off-canvas menu. I spent far more time than I should have debugging this issue, and I'm hoping it will save someone some time in the future.
Bugfix:
Remove the data-content-scroll="false" attribute from the off-canvas menu element, and noUiSlider will work as expected.

As you've already found out the contentScroll option is responsible for this because it prevents touch events if enabled. Your 'bugfix' is not a real solution because this option has a right to exist!
There are use cases (for example in my projects) where you need it.
However a solution would be an additional option for the noUiSlider which provides the possibility to change the slider's scope.
I've submitted a PR for this last year which has not been merged yet
https://github.com/leongersen/noUiSlider/pull/821

Odd Draggable Behavior After Implementing Auto Scroll

I've implemented drag and drop using the jQuery UI draggable widget.
I'm now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll.
You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side.
But there's a problem: if you scroll to the bottom of the page, and then drag an item to the top overlay, it will scroll up as expected. However, for me, I get about half way up the page and the draggable helper won't go any higher. There's no way for me to drag all the way to the top of the page.
This most likely seems related to the Draggable widget. Is anyone able to see why this is happening? I'm using Google Chrome on Windows 7.

To be cross-browser compatible and to avoid wird behavior, I would recommend to use all JQueryUI draggable callbacks.
I read some days ago that the last version of Chrome has some really tricky problems with natives HTML5 draggable events.
For example, I have just checked your web page source code and you are using $('.drag-handle').on('drag', function(){...}); => You should use the drag callback.
I would also recommend to not use window as the scrollable container in your case. You should create a div to wrap all the tables contents and use it as a scroll container. I have already done this implementation in the past and it is working.
Don't forget to set the wrapper ID in the containment option durring the draggable widget creation.
If it always not working, you could also try to overwrite the helper position in the drag callback :
//Save the mouse position in global variables
$(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
scroll: true,
stop: function(){},
drag : function(e,ui){
//Force the helper position
ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top;
});
});

Changing the draggable containment option from window to document worked for me.
$('.drag-handle').draggable({
...
containment: "document",
...
});
See: http://docs.jquery.com/UI/Draggable#option-containment

Chrome Extension Scrollbar Placement

After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?

I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.

Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}

I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.

JQuery Sortable Grid Functionality without Identical Dimensions

I am looking to create a sortable (via drag and drop) grid, similar to what JQuery's Sortable grid does ( http://jqueryui.com/demos/sortable/#display-grid ). However, Sortable requires that you use only divs with identical dimensions. For my purposes, each block is allowed to be different widths and heights.
The functionality I am looking for is the snap-to-grid capabilities while "shoving" the other elements out of the way. Draggable does everything except for preventing them from overlapping and shoving the other elements out of the way.
Oh, it doesn't have to be Jquery either. I'm open to using other methods if it is easier.

Jquery sortable does not require the items to be the same dimensions, as you can see in my prototype here: http://brettlyman.net/dashboard/index3.html
Most people use <ul> as the sortable container and <li>'s as the sortable items, and they can contain any content you want. Just make sure you put "list-style-type: none; margin: 0; padding: 0;" in the style of the <ul> so it looks/behaves like a container.
Unfortunately with sortable you cannot do a free-form grid -- the items must be next to each other in proximity. In my prototype I float everything left, so they fill to the right and then drop to the next line. I have the grid option set on the resize of my containers, however, so I can enforce a grid-type layout.
Thought I'd post my solution in case anyone else is having the same type of problem.

The short answer:
use "stop" event to re-calculate all grid elements according their new positions.
General comments:
sortable grid with variable element's dimensions - it is a visual mess, as elements of different size moving multiple times, jumping up and down, while you're dragging one of them; and layout completely different after each movement.
Working on the similar feature I developed jQuery plugin "Swappable"
http://www.eslinstructor.net/demo/swappable/swappable_home.html
and recently I answered the same question regarding this plugin:
to Swap elemnts(with className too) when Draged & Dropped
please take a look at the discussion and maybe it help you.
best regards,
-Vadim

I came across this question trying to solve the problem for myself.
I'm on my first iteration at trying a workaround: use the parent container as a droppable. Will let you know if it works:
For the following HTML:
<div id="sortable">
<div><div class="handle"></div>1</div>
<div><div class="handle"></div>2</div>
<div><div class="handle"></div>3</div>
...
</div>
Using the following JavaScript:
$('#sortable')
.sortable({
handle: '.handle',
tolerance: 'pointer'
})
.droppable({
drop: function(e, ui) {
var previousElement = ui.draggable.parent().children().filter(function() {
var $this = $(this);
var pos = $this.position();
return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top);
}).last();
if( previousElement.length ) {
previousElement.after(ui.draggable[0]);
ui.draggable.parent().data().sortable._noFinalSort = true;
}
}
});

jCarousel with unknown content width

I am trying to use jCarousel plugin for jQuery in order to provide my website users with scrollable (horizontal) content.
The content I am mentioning is basically user defined <li> elements, styled so that they have a feel and look of a tab. so basically I am trying to achieve the same effect of the tabs in pageflakes.com. As you may imagine, the users are creating tabs and providing tab names by themselves..
jCarousel needs you to specify a fixed width for the content e.g., all their examples are based upon images that have fixed height and width. but in my case I have not control over what the user will name his/her tab...making it impossible for me to guess the width of the total container div.
I have tried using a silly method such as guessing the width programatically assuming each letter being approx 5 pixels and multiplying 5 with the length of the word they have given as a name for a tab. even in this case, i needed to manipulate the css file dynamically which I am not sure how to do and even if it is feasable to do so..
Any solutions appreciated...
<lu>
<li class='MyTab' id='578'>This is my tab</li>
<li class='MyTab' id='579'>of which I can</li>
<li class='MyTab' id='580'>never guess</li>
<li class='MyTab' id='581'><img src='img/bullet_key.png' /> The length of</li>
</lu>
The above html is produced programatically through ajax_tabs_output.aspx, loaded into a javascript array and the jCarousel takes care of the rest..
function outputTabsArray() {
$.ajax({
url: 'ajax_tabs_output.aspx',
type: 'get',
data: 'q=array',
async: false,
success: function(out)
{
tabs_array = out;
}
});
}// end outputTabsArray
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > tabs_array.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(tabs_array[i-1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<div class="MyTab" id="' + item.tab_id + "'>" + item.tab_name + '</div>';
};
$('#mycarousel').jcarousel({
size: tabs_array.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});

The closest thing to what you want is probably jscrollhorizontalpane. I've never used it so I can't vouch for it's effectiveness as a solution to this specific problem.
This sort of widget shouldn't be to hard to make if you want to attempt it. I'll break down the approximate method I would use:
Make sure to use plenty of wrappers.
<div class="scrollable">
<div class="window">
<div class="space">
<ul class="tabs">
<li class="tab">...</li>
<li class="tab">...</li>
<li class="tab">...</li>
</ul>
</div>
</div>
←
→
</div>
What we'll be doing is shifting the "space" element back and forth inside "window" element. This can be done by setting position:relative to "window" and position:absolute to "space" and then shift it about using left:-??px, but I'll use the scrollLeft property.
Add some CSS.
.window {
overflow : hidden;
width : 100%;
}
.space {
width : 999em; /* lots of space for tabs */
overflow : hidden; /* clear floats */
}
.tabs {
float : left; /* shrink so we can determine tabs width */
}
.tab {
float : left; /* line tabs up */
}
This is just the basic stuff that the technique needs. Some of this stuff could be applied by jQuery,
Add events to window resize.
$(window)
.resize(function () {
var sz = $('.window');
var ul = sz.find('ul');
if ( sz.width() < ul.width() ) {
$('.scrollable a.left, .scrollable a.right').show();
}
else {
$('.scrollable a.left, .scrollable a.right').hide();
}
})
.trigger('resize');
Add events to scroll buttons.
$('.scrollable a.left').hover(
function (e) {
var sz = $('.window');
sz.animate({ scrollLeft : 0 }, 1000, 'linear');
},
function (e) {
$('.window').stop();
});
$('.scrollable a.right').hover(
function (e) {
var sz = $('.window');
var margin = sz.find('ul').width() - sz.width();
sz.animate({ scrollLeft : margin }, 1000, 'linear');
},
function (e) {
$('.window').stop();
});
Done!
The widths could also be calculated by looping through the "tab" elements and summing upp outerWidth. This is unnecessary if you have full control but might be a better choice for a full standalone plugin.

From what I can tell, you're trying make JCarousel do something it was never designed to do. Based on what I read on the JCarousel website it appears to be an image rotator.
What it sounds like you want is a tabbed interface. See JQuery UI Tabs for a demo and documentation on how to implement it.
If I'm totally wrong and all you're looking for is a tutorial on how to do proper CSS tabs, have a look at:
http://unraveled.com/projects/css_tabs/

Soviut,
You are actually quite right! I am trying to make JCarousel do something it wasn't designed for.
However, I also wouldn't like to use a tab plugin or any similar stuf as I NEED FULL CONTROL over my output. Such as injecting more elements into the tabs when needed such as double clicking, loading and many other etc. etc.
Actually what I am looking for a way to scroll horizontally the content within a div with arrows on the left and right.. To be more precise, I need the exact same structure of the tabs seen in www.pageflakes.com
The user will be able to create tabs by clicking on a link (or any other element for that matter), they will be able to inline edit its name, whenever they have more tabs then the length of the div, the buttons will be visible allowing them to slide inside the div, I will have events bound to their load, click and double click events.
To summarize I have everything ready and working except for the sliding/scrolling part. Its only I have to get help from you guys regarding how to achieve this functionality..
Kind regards,

What you're looking for isn't tabs, but draggable panels. One example can be found here, called JQuery Portlets. The related blog entry about Portlets can be found here.
You may also want to look into JQuery UI's Draggable, Droppable, and Sortable plugins.