Develop Reference

jquery .ui-selectable with scroll

I have a div with fixed height
<div style="height:300px; overflow-y:scroll">
<div class="selectable_div">
....
</div>
</div>
And I init selectable like this:
$( ".selectable_div" ).selectable({
But when I select content in .selectable_div scroll gets blocked and div is not scrolling. I want it to scroll while selecting on mouse wheel and when I just select and hold selection and move mouse down.
What do I do?
I found a plugin but don't want really to use 3d party plugins cause they might break something
UPD : the entire snippet if u ask(it very big, so I don't think it will help)
$( ".selectable_wrap" ).selectable({
filter: ".word_item",
cancel: '.cancel_selection',
stop: function(){
self.words.filter(x => x.selected).forEach(function(w){
w.selected = false
})
self.words_ids=[]
// alert($( ".ui-selected.word_item").size())
$( ".ui-selected.word_item", this ).each(function() {
let word_index = $(this).attr('data-count')
word = self.words[word_index]
word.selected = true
self.words_ids.push(word.id)
});
self.get_phrases_by_words(JSON.stringify(self.words_ids))
},
}).disableSelection();

Wordpress Visual Composer Strech Row and Direction RTL

When I try to strech row in the row settings in Visual Composer, the row streches, but the position of the row is all wrong.
It happens only when body direction has direction:rtl css setting.
Website is online: http://ono.devurl.net/?page_id=871
Any way of fixing that?
Yuval.

Yuval Hey !
Try this script to fix your problem.
if( jQuery('html').attr('dir') == 'rtl' ){
jQuery('[data-vc-full-width="true"]').each( function(i,v){
jQuery(this).css('right' , jQuery(this).css('left') ).css( 'left' , 'auto');
});
}
Put this script code in jQuery(window).load.
hope this'll help you :)

Could be easier to resolve it with css, and it will work when page is resized too.
Find a class for row before [data-vc-full-width="true"] and add such css to your rtl.css
.before-fullwidth-row {
direction: ltr;
}
.before-fullwidth-row > div {
direction: rtl;
}
Seems to work...

If you want to fix VC Row also on window resize use this solution:
$(window).on( 'resize', function() {
$( '.rtl [data-vc-full-width="true"]' ).each( function(){
$( this ).css( 'right' , $( this ).css( 'left' ) ).css( 'left' , 'auto' );
});
}).resize();

WordPress Visual Composer full width row ( stretche row ) fix for RTL
jQuery(document).ready(function() {
function bs_fix_vc_full_width_row(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('right', $el.css('left')).css('left', '');
});
}
// Fixes rows in RTL
jQuery(document).on('vc-full-width-row', function () {
bs_fix_vc_full_width_row();
});
// Run one time because it was not firing in Mac/Firefox and Windows/Edge some times
bs_fix_vc_full_width_row();
});
Source

Is there a way to lock/freeze a jquery datatable after it has been instantiated?

I'm looking for a way to toggle the scrolling of a datatable when using a draggable link ala jqueryUI.
Due to space constraints I need a scrolling DataTable and due to UI requirements I need draggable links.
Example I fleshed out: http://jsfiddle.net/sqwgs6wb/8/
JavaScript from the sample:
$(document).ready( function () {
var table = $('#example').DataTable({
"scrollX": true,
"scrollCollapse": true,
"bJQueryUI": true,
"scrollY": 140 });
$( init1 );
$( init2 );
$( ".makeMeDraggable" ).on( "drag", function( event, ui ) {
$('#status').html("dragging");
} );
$( ".makeMeDraggable" ).on( "dragstop", function( event, ui ) {
$('#status').html("Stopped dragging");
} );
} );
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
containment: "document"});
})}
function init2() {
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'A Link was dropped onto me! with a URL of: ' + draggable.attr('href') );
}
Using jqueryUI I can detect when a datatable item(link) is being dragged and when it is done being dragged but the problem I'm running into is that the contents of the table shift around when I want to drag a link onto a drop area. Thus losing their place in the table.
I've looked on Stack and on datatables.net and I think it might be possible to access an extended function and freeze it but I'm not sure about how to do that.
I would very much like the contents of the table to not move when a user drags a draggable item from the datatable. Basically, freezing the table scroll in the X and Y axis would rock and naturally I would need the ability to unfreeze it.

I found a post that had a similar problem and verified that the solution fixes your problem in the fiddle. Here is the thread that discusses it
Draggable element hidden outside container
Basically, these 3 options need to be setup on your draggble setup
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
Here is a working update of the fiddle with these options
http://jsfiddle.net/sqwgs6wb/11/

It's a JqueryUI issue, or rather my lack of knowledge of all the options.
The answer is to add appendTo to the jqueryUI Draggable initialization.
http://jsfiddle.net/sqwgs6wb/9/
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
appendTo: 'body', //<-==This is what fixed it.
containment: "document"});
})}
The appendTo 'body' option causes the draggable item to be created at the body level and not inside the scrollable container like it was before.

JQueryUI Tooltip settings ignored

I can't get JQueryUI to pay any attention to the tooltip settings I am trying to apply
var li = jQuery('<li title="test">test</li>');
jQuery(myUl).append(li);
jQuery(li).tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});
I know that the tooltip() function is being called because I can comment it out and the display reverts back to the standard tooltip, but nothing in the parameters makes any difference to the display. My first priority is to get the content to appear on multiple lines, for that I have added <br /> tags at the right places. But so far they always get displayed to the user.
Help!

It appears to be a user error. I had no idea that Bootstrap also provided a Tooltip function and it is taking priority here. Once I started using Bootstrap Tooltip options they were used just fine

remove the line:
var li = jQuery('<li title="test">test</li>');
add <li> element directly to jQuery:
jQuery('li').tooltip({
track: true,
position: {
my: "left top",
at: "bottom",
using: function (position, feedback) {
$( this ).css( position );
$("<div>").addClass("arrow")
}
},
content: function () {
return $(this).attr('title');
}
});

Help with adding CSS to jquery

I am really new to jquery and I dont really have time to see how it works (I work with PHP a lot) I want to make a jquery slideshow but I dont know how to add z-index to the images here: http://www.albavid.com/new/index.html
I can see that jquery adds some css elements like opacity, width.. etc.
I tried to add a bigger z-index to the current image and lower z-index to the right images and left images.
Can anyone tell me how to add css with jquery so the current image(the biggest) to be on the top and then the others behind it.

Replace your javascript on the page with this:
I added in $(el).css('z-index', 5) and $(el).css('z-index', 0) in currentCss, beforeCss, and afterCss.
jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
beforeCss: function( el, container, offset ){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '10px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
$(el).css('z-index', 5);
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 200 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '400px' }, { } )
];
},
change: function(event, ui){
jQuery('#scrollbar').slider('value', ui.to*25);
}
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});

you can also get it working by using different classes the use addclass() - removeClass() to toggle the effect works well if you're already familiar with CSS overrides

Try setting the position property of the elements to relative, otherwise they will be treated as static and ignore all settings to z-index.

It looks like the z-index in question should be applied to the <li>, not the <img>.

You can alter the z-index of an element by using the .css() function.
$("#elem").css('z-index','1000');
However, two better options would be to either define CSS classes for the elements you want to style and toggle between them, or use some nice jQuery slideshow plugins.

You can alter the inline CSS by selecting the element and using the css method
Suppose an element has no z-index, or a different one, and you want to change it to 5
$("#elementId").css('z-index', 5);
Another option is to set up classes with certain CSS styles before hand and change the class of certain elements ie (currentShown, nextUp, etc)

rather then waste your time reinventing the wheel why not just use a jquery slideshow plugin?

Z-index'ing the <li> instead of the <img> is the right solution to fix the overlap. However, because the <li>s are dynamic and flip before and after each other, an applied z-index to all in a sequential order from left-to-right will not solve his issue.
Solving the issue will need a few more actions to invoke within jquery but not too much extra work. What needs to happen is for jQuery to apply a z-index to the current <li> higher than the rest of the batch for each event on the slider.
Since I don't have access to your code, you basically want to apply the following logic:
Whatever <li> is in front it should have a z-index:1 and all other <li>s should have z-index:0. This should happen on every change in the slider.
#mcgrailm: Give him a break man, you can't learn how to swim unless you jump into the pool.