We Keep Coding

Jssor list-slider and X-Editable

I have a Jssor list slider and I would like to make the thumbnail text editable in place with X-Editable:
example
Both functions work on the page together with separate elements, but I cannot find a way of causing the link text to become editable.
There are no errors, the text element simply does not show the pop-up editable box.
I presume this is because the class="t" declaration informs Jssor to control the thumb div interfering with X-editable's attempt to do the same.
X-Editable requires that the editable text be wrapped in an element:
superuser
But this seems to be interfered with by Jssor.
Can anyone point me in the right direction?
------------------UPDATED in response to answer------------------
Thanks for taking the time to help me out :)
I was unable to change the default behaviour from on click to onmousedown in the x-editable library, but I did find a work around to allow activation of the editable element with the click of another element external to the slider container.
In the body:
$(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('#doit').click(function(e){
e.stopPropagation();
$('#username').editable({
send: 'never',
title: 'Enter text',
placement: 'right',
toggle: 'manual',
display: function(value) {
$('#username').text(value);
}
});
$('#username').editable('toggle');
});
});
...and the elements:
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
<a id="doit" href="#">testlink</a>
If the span is outside of the slider container clicking the testlink functions as expected and opens the pop-up editor input field, but once it is placed inside the slider:
<div class="t">
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
</div>
...there is no response.
I looked for the function you highlighted and think I found the one you meant, 'ContentClickEventHandler', but clearing this function did not solve the problem.
Thanks again for you help, and for releasing this wonderful product to the likes of me :D

Please try the following 3 approaches.
I guess X-Editable detects click event to make an element editable. If you can revise the library, please change the event from click to mousedown.
Not sure it would work or not, please have a good try.
Add nodrag="true" for the link element.
Open jssor.slider.js, replace
function SlidesClickEventHandler(event) {
if (_LastDragSucceded) {
$Jssor$.$StopEvent(event);
var checkElement = $Jssor$.$EventSrc(event);
while (checkElement && _SlidesContainer !== checkElement) {
if (checkElement.tagName == "A") {
$Jssor$.$CancelEvent(event);
}
try {
checkElement = checkElement.parentNode;
} catch (e) {
// Firefox sometimes fires events for XUL elements, which throws
// a "permission denied" error. so this is not a child.
break;
}
}
}
}
with
function SlidesClickEventHandler(event) {
}

Attach handle on every onhide method of bootstrap3-dialog

I'm using bootstrap3-dialog library from https://nakupanda.github.io/bootstrap3-dialog/
The problem is, everytime the dialog shows (alert, confirm or custom dialog), the body's scrollbar is gone and never come back when dialog closed. I could add this line on every dialog's onhide property, but that would be time consuming:
$('body').css('overflow','scroll')
Is there any other way to trigger that function every time the modal closes?

I was going through the code of bootstrap modal and they have this:
resetScrollbar: function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
Which is called on:
hideModal: function() {
this.$element.hide();
this.backdrop($.proxy(function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
I can't seem to figure out what would cause this code to not bring the scrollbar back. It seems to be working fine on their website.
If you are comfortable, I would suggest debugging the hideModal function of the api itself and figure out why it is not working and maybe put the above css snippet in there as a work around.
Or maybe post your code on plunkr, jsfiddle so we can look at what is going on.

Prevent position absolute element from sticking inside scrollable div

Having this issue with multiple items (e.g. a color picker, date picker, and a time picker) where when they pop out and are thus positioned absolute relative to the input, if a user scrolls the newly spawned element also moves with it.
Based on the nature of most plugins (all major bootstrap plugins I've noticed do this) I'm trying to think of a way to target and keep these elements fixed relative to their original location without hacking every plugin if possible.
Below is an example of the issue in which I utilized the bootstrap datepicker. Click on input to spawn datepicker and then scroll and notice the datepicker staying relative to the screen not the input.
Link to JSFiddle: http://jsfiddle.net/GuJR6/1/
Thanks!
.container {
margin-top: 15px;
height:400px;
overflow-y: scroll;
}
.scrolling-content {
height:1000px;
}
<div class="container">
<div class="scrolling-content">
<div class="well text-center">
<input type="text" class="datetimepicker" readonly>
</div>
</div>
</div>
$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

I just forked bootstrap-datetimepicker and added the container option mention by Jan Peapke. You can use it like this:
$(selector).datetimepicker({ container: nativeDOMElement });
$(selector).datetimepicker({ container: jQueryObject });
$(selector).datetimepicker({ container: jQuerySelector });
This allows you to solve your problem:
In your css:
.scrolling-content {
position: relative;
}
Compare: CSS-Tricks
js
$(".datetimepicker").datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container: '.scrolling-content'
});
Fiddle
http://jsfiddle.net/marionebl/GuJR6/2/
The first input in the fiddle applies the explained fix for your issue. The second should behave like before.
Related pull request
https://github.com/smalot/bootstrap-datetimepicker/pull/215

I'm afraid the problem lies with the bootstrap datetimepicker itself.
Instead of attaching it to the same container as the input, it is attached to the body.
I looked up the documentation to see if there is an option to set the parent, but I'm afraid there is not.
As a solution you could try another framework, like jQueryUI or this plugin.
You could also try to correct the position of the picker manually by attaching a click handler to the input field that removes the datepicker from the body, adds it to the content of the scrollcontainer and uses the events mouse coordinates to position it correctly inside the container. Seems like a lot of hassle though. :)
regards,
J

$('YOURCLASSNAME').on('scroll', function () {
var $this = $('.input-group.date');
$this.datepicker('place');
});
Add above code before
Datepicker.prototype = {...}
This is the solution. and works fine on all devices and screen sizes

Even i have been facing this issue.
Found out a solution to this By adding var t;
$('YOURCLASSNAME').on('scroll', function () {
var $this = $('.input-group.date');
window.clearTimeout(t);
t = window.setTimeout(function () {
$this.datepicker('place');
}, 50)
});
Add above code after if (showFocus) this.show();
in this block
var Datepicker = function (element, options) {....} of bootstrap-datepicker.js plugin

Using button on collapsed Bootstrap navbar to toggle display of a specific div hidden with class="hidden-xs"

I have a complex search form that I want to hide by default on mobile browsers, instead displaying an icon in the navbar that toggles its display.
The div containing the search form is hidden by default on mobiles using class="hidden-xs"
What I wanted to do was have $("#search").fadeToggle() but this doesn't do the trick, in fact it doesn't appear to do anything.
Instead I am partly there by using $("#search").removeClass('hidden-xs') but this obviously doesn't toggle, or give a fade effect. Am I missing something obvious? The search form is quite complex and I do not want it to be displayed in the navbar even on large screens.
jsfiddle - http://jsfiddle.net/ZNUBx/1/

You can do it with this :
fiddle : http://jsfiddle.net/ZNUBx/2/
JS :
$("#search-button").click( function(){
$("#search").removeClass('hidden-xs').stop().hide().fadeIn();
});
Update: [asker demand][see comment] with hide event
jsfiddle : http://jsfiddle.net/ZNUBx/3
Js:
$("#search-button").on('click', function(){
if( $("#search").hasClass('hidden-xs') )
{
$("#search").removeClass('hidden-xs').hide().fadeToggle();
} else {
$("#search").addClass('hidden-xs');
}
});

bootstrap-datepicker does not scroll when scrolling the modal

I am using bootstrap-datepicker and would like to show the date-picker on the modal of bootstrap 2. The problem I got is the date-picker is not scrolling accordingly when scrolling the modal, it is still remained.
The code:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
<div style="height:300px"></div>
<div>Choose Date:
<input class="calendar" />
</div>
<div style="height:300px"></div>
</div>
and javascript:
var datePicker = $(".calendar").datepicker({});
The jsfiddler: http://jsfiddle.net/csrA5/
Is there any solution to make it scroll when scrolling the modal?

There is option datepicker('place') to update position . I have updated jsfiddle
var datePicker = $(".calendar").datepicker({});
var t ;
$( document ).on(
'DOMMouseScroll mousewheel scroll',
'#myModal',
function(){
window.clearTimeout( t );
t = window.setTimeout( function(){
$('.calendar').datepicker('place')
}, 100 );
}
);

Here is another way using jQuery
var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
$('.calendar').datepicker('place')
});

Try to add the event scroll in bootstrap-datepicker.js, in function "Datepicker.prototype"
[$(window), {
resize: $.proxy(this.place, this),
scroll: $.proxy(this.place, this)
}]

I dont know why, but positioning is based on scrolling so you need to find this code in bootstrap-datepicker.js
scrollTop = $(this.o.container).scrollTop();
and rewrite it to
scrollTop = 0;
This helped me, i hope it will help another people.

Solution provided by rab works but still not perfect as the datepicker flickers on scroll of bootstrap modal. So I used the jquery's scroll event to achieve smooth position change of datepicker.
Here's my code:
$( document ).scroll(function(){
$('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
});

I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js (with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.
DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">
Now when the datepicker modal pops up, the newly created layer will occupy the entire page width and height and when the user scrolls since the modal is appended to body, the datepicker modal too scrolls with it. With the introduction of the new layer, the inner scroll of the container in which the datepicker input field is present, will be negated while the modal is open.
One more thing to do is to update the datepicker modal closing event when clicking on the hidden layer and that is done using the below code inside bootstrap-datepicker.js.
// Clicked outside the datepicker, hide it
if (!(
this.element.is(e.target) ||
(this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
this.picker.is(e.target) ||
this.picker.find(e.target).length
)){
this.hide();
}

I ran into this problem aswell with Stefan Petre's version of Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker), the issue is the Datepicker element is attached to the body which means it will scroll with the body, fine in most cases but when you have a scrollable modal you need to attach the Datepicker to the scrollable modal's div instead, so my fix was to change Stefan's bootstrap-datepicker.js as follows -
line 28, change
.appendTo('body')
to
.appendTo(element.offsetParent)
and line 153, change
var offset = this.component ? this.component.offset() : this.element.offset();
to
var offset = this.component ? this.component.position() : this.element.position();
Early tests shows it scrolls perfectly.
In addition you may need to change the z-order of the Datepicker element to make it sit above the modal (this was my initial fix which did not deal with scrolling, I have not backed this change out yet so dont know if its still needed)
I haven'y checked but I suspect the Github version of Bootstrap-datepicker.js is doing the same thing (the sourcecode is much different to what I have from Stefan though)