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();
Related
I am stuck up with a problem and that is annoying me. I hope someone can help me on this.
Please imagine I have a Icon called Communication. On click of that Icon, I should get a tooltip (should kept open until I click outside or on the same Communication Icon)
So the tooltip should contain few other icons like Phone, Email, In Person Icons and I should be able to drag and drop them in another div element.
Note that the Icons from the Communication's Tooltip should not be deleted.
Below is the sample, that I have found and modified a bit.
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
http://jsfiddle.net/AK7pv/961/
I am actually expecting similar to this example, but instead of the list tags, I want the Icons to be arranged in series and it should be drag-gable to other div elements.
Please assist me, whether this is possible or not. We can use Jquery, Javascript, Kendo UI to do this.
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
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.
I have a div that I made draggable and am trying to give the user the ability to build some content. I have it doing most of what I want:
I drag a div from the left toolbar and it lands in the container on the right. If you don't put it in that container, it gracefully floats back to it's original position.
My issue is: Once I drop it I can't move it again to put it in another spot within the same container. How can I fix this?
Note: I am using jQuery: 1.11 and jQuery UI 1.10
// Draggable elements
$("#draggable_div").draggable({
cursor : 'move',
snap : '#target_builder',
revert : function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top : 0,
left : 0
};
return !event;
},
stop : function() {
// do I need to re-initialize it here?
}
});
$("#target_builder").droppable();
<div>
<div>
<div id="draggable_div" style="color: #fefefe; background: #222; width: 100px; height: 100px;">
<p>Div</p>
</div>
</div>
<div>
blank content
</div>
</div>
Edit:
jsfiddle: http://jsfiddle.net/KbQDQ/
it seems to work her, but not in my real code... hmmm...
if you remove
return !event;
the element will stay where you leave it :)
here's the correct code:
// Draggable elements
$("#draggable_div").draggable({
cursor : 'move',
snap : '#target_builder',
revert : function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top : 0,
left : 0
};
},
stop : function() {
// do I need to re-initialize it here?
}
});
$("#target_builder").droppable();
I figured it out. I am using the Twitter bootstrap framework. I removed the classes (not shown above) and all works well.
i think that
return !event;
&
stop : function() {
$("#draggable_div").draggable( "destroy" );
}
make some error please remove it & try again once
I am using this jquery plugin http://packery.metafizzy.co/ to create a dynamic grid layout. The plugin is working perfectly.
The problem is :
I am trying to create an option to add a dynamic grid on click event. If I hand code the html code for grid then the grid shows up perfectly but if I append the grid code to my template layout using jquery then the grid shows up from the very top of the layout and the plugin doesn't seem to adjust the grid position.
You can check my code and see the problem live here: http://jsfiddle.net/A7ubj/2/
I think the plugin is not adjusting the grid because my jquery append code is making the grid seat on the top.
Could you please tell me how to append the grid so that the plugin can adjust the grid perfectly?
This is how I am appending:
$(function(){
$('#myID').click(function(){
$( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );
});
});
And this is my entire code:
JS:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="packery.pkgd.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
var $container = $('#container');
// initialize
$container.packery({
itemSelector: '.item',
gutter: 10
});
});
</script>
<script>
$(function(){
$('#myID').click(function(){
$( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );
});
});
</script>
CSS:
#container{
background-color:#F00;
width: 1130px;
margin:0px auto;
}
.item { width: 275px; background-color:#0C0;}
.item.w2 { width: 560px; background-color:#036; }
.diff{
min-height:300px;
}
.diff2{
min-height:250px;
}
HTML:
<button id="myID">Click</button>
<div id="container">
<div class="item diff">Grid</div>
<div class="item w2 diff2">Grid</div>
</div>
You can call packery.reload() or just use the packery initialization function again after you have append the images and to calculate every new image position. I use the masonry plugin and masonry.reload().
Update: To make masonry work with infinitescroll use a callback function: How to enable infinite scrolling with masonry?
Here is the code from my website. I use jquery templates and prepend. You can see that it call masonry('reload') after the prepend. It also init masonry from the new container. It also correct the width and the height of each image because I think there is an error in masonry. I think it's not really what you need because I don't cache the brick but I rebuild the entire container when I need it to show a new category. In your example you physically add a brick but I don't understand why it didn't work. The result is the same but not so clean.
$j.getJSON($j("#tag") function(response)
{
// Start masonry animated
if (response && response.length)
{
var container = $j('#container');
container.masonry({
itemSelector: '.brick',
columnWidth: brick_width,
isAnimated: !Modernizr.csstransitions
});
boxCount = response.length;
counter = 0;
$j.each(response, function(idx, ele)
{
container.prepend($j("#brickTemplate").tmpl(ele)).masonry('reload');
}
container.imagesLoaded(function()
{
$j("#brick").each(function()
{
var content = $j(this).find(">div");
var height = $j(this).find("img").attr("height");
if ( height == undefined )
{
content.css({
height: "300px"
});
} else {
content.css({
height: height
});
}
// bricks fade in
$j(this).delay(Math.floor(Math.random() * 1600)).fadeIn('slow');
// Bind Mousemove
$j(this).mousemove(function()
{
.....
}
}
}
}