w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
jquery draggable & droppable get source container (that draggable came from)
You can use a variable which you set in the start event of the draggable and get that info in the stop event of the droppable. $(function () { var sourceElement; $("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({ helper: 'clone', revert: 'invalid', start: function (event, ui) { $(this).css('opacity', '.5'); //NEW sourceElement = $(this).closest('table').attr('id'); }, stop: function (event, ui) { $(this).css('opacity', '1'); } }); $("#Table1, #Table2, #Table3").droppable({ drop: function (event, ui) { $(ui.draggable).appendTo(this); //alert sourceElement alert($(ui.draggable).text() +

Categories : Jquery

JQuery draggable is snapping to a container below the desired target
Alright. I think I found a way to fix this for your, as I was able to duplicate it in JSFiddle. Instead of using this: ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); You need to use this: $(this).position({ of: $(this), my: 'left top', at: 'left top' }); JSFiddle: http://jsfiddle.net/Y6dbe/ Alternatively, you could use this as well: ui.draggable.position({ of: ui.draggable, my: 'left top', at: 'left top' }); JSFiddle: http://jsfiddle.net/Y6dbe/1/ --------------------------------EDIT------------------------------- I think I found a workaround in JQuery so that you don't have to do this in your PHP. Replace this: var id = $(this).closest("div").attr("id"); With this: var id; if(ui.draggable.hasClass("blob15")

Categories : Jquery

&
with floating image, figcaption wraps and article text wraps around image/caption
try this css and look when you resize the browser,, the text wrap on the image. .left { float: left; border: 5px solid #BDBDBD; background: #E0E0E0; padding: 5px; margin:0px; } figcaption{ text-align:center; }

Categories : HTML

A library that wraps iOS animations the same way three20 wraps UI Classes
I don't know Three20 UI classes - I find that, most of the time, I can start from some open-source project close enough from the result I'm looking for, but I have to play with code to become familiar with it, erase code that I don't use - in the end, there is no such thing as a golden hammer. Still, for advanced animations, I found these easing functions (AHEasing) quite useful

Categories : IOS

Size of text that wraps to multiple lines different from text that doesn't
Adding this to my CSS fixed the problem: html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } Got this from https://github.com/necolas/normalize.css/blob/v2.1.2/normalize.css

Categories : IOS

JQuery Draggable: How do I make a draggable element snap to the inner-top of a div?
i'm not sure but it seems like jQueryUI doesn't support something like that. You could use this workaround to get the behaviour you need. Simply put another div in your div which is used for the snap. <div class='row'> <div class='innerHack'></div> </div> Here's a Fiddle

Categories : Jquery

Make jQuery UI draggable element only draggable in down direction
$('#repel').mousemove(function () { var z = $(window).scrollTop(); var o = $('#repel').offset().top; var h = $('#repel').height(); $("#containment-wrapper").css({ top: o + h -2000 }); if (z < 10) { $("#containment-wrapper").css({ top: -850 }); } else { $("#containment-wrapper").css({ top: o + h -2000 }); } });

Categories : Javascript

WordPress text background disappears when text wraps
The white background is being applied to the ".container" element only when the window is at least 1024px wide. At smaller sizes it's trying to load a background image that doesn't exist (http://www.me-afrika.de/wp-content/themes/musicplus/images/content/main-n.png).

Categories : Wordpress

Jquery draggable element when cloned not draggable
call draggable() again for the cloned element after it is appended to the DOM function seCopyBox(x) { z = $('.seBox').eq(x).clone(); z.insertAfter($('.seBox').eq(x)).draggable(); } and i would go with clean jquery click function rather that inline javascript.. $(document).on('click','.seBox p',function(){ var x=$(this).closest('.seBox').index(); var z = $('.seBox').eq(x).clone(); z.insertAfter($('.seBox').eq(x)).draggable(); } remove the inline javascript and the seCopyBox function...

Categories : Jquery

jQuery wrap text without container
You might want to look at the .contents() method. This will give you text nodes as well as wrapped nodes, so you can wrap them. To adjust the example from the jQuery docs: $(".container") .contents() .filter(function() { // get only the text nodes return this.nodeType === 3; }) .wrap( "<span></span>" ); It sounds like you want to wrap the content after click, which I think might be quite difficult. If possible, it would be better to wrap the content before the user clicks, then apply a style to the span they clicked - this is much more straightforward. If you use the code above to wrap, you can then apply a handler like $(".container").on('click', 'span', function() { $(this).addClass('clicked'); });

Categories : Javascript

JqueryUI Draggable - Auto resize parent container vertically only
I think this question is the same as yours and has already an answer :) JqueryUI Draggable - Auto resize parent container

Categories : Javascript

javascript / jQuery : get selected text's container
window.getSelection().anchorNode - Gives you the DOM element where the selection started window.getSelection().focusNode - Gives you the DOM element where the selection ended Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&redirectslug=DOM%2FSelection

Categories : Javascript

jquery adjust size div with text inside div container resizable
Capture the length and width of the div as it is being resized, and input those parameters into a calculation which changes the font size of div#intern. You should place a lower limit on how small the length and width of the container div can be. Play around with different scaling values to make a formula which yields a corresponding font size which works. If you are using jQuery UI, then trigger the calculation on the resize() event for your implementation of Resizable.

Categories : Jquery

Using jQueryUI sortable and draggable causes container inline-block elements for sortable element to jump
As mentioned in comments, this solution works for you. I basically changed your structure from display: inline-block; to float: left;

Categories : Jquery

How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?
The API for three.js is pretty low-level. I do not believe this is possible in general. One way you can work around this is to produce multiple TextGeometry instances, one per line, and manually position them at different y coordinates.

Categories : Javascript

jQuery UI - Revert a jQuery draggable object back to its original?
You need to enable droppable on the objects you intend to drag and use revert there. Like this: $(".draggable2").droppable({ greedy: true, tolerance: 'touch', drop: function (event, ui) { ui.draggable.draggable('option', 'revert', true); } }); See this fiddle for a demo Also see this SO question

Categories : Jquery

changing text of jLabel in a draggable jPanel
When you invoke the setText() method on the label the revalidate() and repaint() methods are invoked on the label. This will cause the layout manager to be invoked and I'm guessing the layout manager will reset the panel to its default position. If you want to be able to randomly move components around a screen then you need to use a null layout on the parent of the panel that is being dragged. Once you do this you will also need to manually set the size and location of your components. You might find the Drag Layout handy to use in this case.

Categories : Java

jQuery draggable div
http://jqueryui.com/draggable/#snap-to Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Categories : Jquery

How does one set a div to be draggable with jQuery?
Assuming you declared library jquery.ui.js for draggable method, and assuming you do append a or a for loop each, the counter may be the variable i, simplifying the attributes you add to your order would be something like. for (var i = 0; i < jsonResult.data.length; i++) { $('#portfolio').prepend("<div id='equity'"+i+" class='portfolioEquity'><h5>"+jsonResult.Data.Symbol+"</h5></div>"); $('#'+i).draggable(); };

Categories : Javascript

create draggable div on click make the parrent draggable not the new div
You are applying the .draggable() at the wrong element. The .append() method returns the container element, not what you added. This should work: $('<div class="boxArt red" row="2" col="4" id="dragme3">DRAG ME3</div>').draggable().appendTo('#dropbtn');

Categories : Javascript

Draggable div clone using jquery ui
The helper: 'clone' option for a draggable only creates a clone of the div while dragging. Try appending a clone during the drop event of the droppable widget. (Note: I also removed the revert option from the draggable as it's not needed) google.maps.event.addListener(map, 'tilesloaded', function(evt) { $(function() { $( ".draggable" ).resizable(); $( ".draggable" ).draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7}); $( "#drop_here td" ).droppable({ accept: '.draggable', drop: function( event, ui ) { $(this).append($(ui.draggable).clone()); } }); }); });

Categories : Jquery

jQuery UI Slider Draggable
If i understand you correct, what you try to accomplish in the first place is a two-way communication between the slider and the select element? A possible solution using widget factory to extend the slider and turn the handle into a draggable: fiddle $.widget("ui.dragSlider", $.ui.slider, { _create: function () { this._super('_create'); var drWidth = this.element.context.clientWidth; var drMax = this.options.max - this.options.min; var drStep = drWidth / drMax; var perc = drStep / drWidth; // turn handle into draggable widget this._handleDraggable(this.handle, drWidth, drMax); // add a basic ruler to the slider this._addVisuals(drMax, drStep); }, // setup handle as a draggable object // wire up dra

Categories : Jquery

Jquery Draggable Placeholder
Try the blow code, $( "#container_drag" ).draggable({ drag: function() { $('#container_drop').addClass('highlight_container'); }, stop: function() { $('#container_drop').removeClass('highlight_container'); } }); Where, container_drag - your draggable container and container_drop - where the items going to be dropped. And in Css, .highlight_container{border:...,background:...}

Categories : Jquery

jQuery .draggable without clicking
EDIT Looks better without jQuery UI at least works in Chrome. LIVE DEMO $(function(){ var $par = $('.magic_movable'), $bg = $('.magic_background'), parW = $par.outerWidth(), parH = $par.outerHeight(), bgW = $bg.width()/2, bgH = $bg.height()/2, X, Y, posX, posY; var drag = 0; // flag $par.on('mousemove', function( e ){ X = e.clientX - $(this).offset().left; // get mouse X position inside parent Y = e.clientY - $(this).offset().top; // get mouse Y position inside parent posX = Math.min( Math.max(0, X-bgW), parW-(bgW*2) ); // containment X posY = Math.min( Math.max(0, Y-bgH), parH-(bgH*2) ); // containment Y if(drag){ $bg.css({left:posX, top:posY}); // move element only if flag is true (1) } }).on('mouseleave',

Categories : Jquery

JQuery UI draggable within a triangle
One of my friends came up with a really simple and nice solution: see it $( "#circle" ).draggable({ drag: function(e, ui) { var width = $('#triangle').width(); var height = $('#triangle').height(); var x = ui.position.left + $(this).width() / 2; var y = ui.position.top + $(this).height() / 2; var difference = Math.abs( x - width / 2 ); var min_y = height * ( difference / (width / 2) ); if ( y < min_y ) y = min_y; if ( x < 0 ) x = 0; if ( y < 0 ) y = 0; if ( x > width ) x = width; if ( y > height ) y = height; ui.position.top = y - $(this).height() / 2; ui.position.left = x - $(this).width() / 2; } });

Categories : Jquery

jQuery draggable and droppable
Use the accept property. $( "#snap-one" ).droppable({ accept: "#draggable", drop: function( event, ui ) { var top = $('#draggable').css('top') ,left = $('#draggable').css('left'); if (top === '-107px'){ if(left === '0px'){ $(ui.draggable).draggable('disable'); if ($('#draggable').hasClass('ui-draggable-disabled')){ alert('hello'); } } } } }); Heres your altered fiddle.

Categories : Javascript

Rotating a .draggable() div - JQuery
Hope this helps jQuery.fn.rotate = function(degrees) { $(this).css({ transform : 'rotate('+ degrees +'deg)' }); }; var rotation = 0; $('.customize-Container').on('click', '#draggable', function() { rotation += 5; $(this).rotate(rotation); });

Categories : Javascript

jQuery textarea draggable
Have you tried : <div class="item-txt txt-static" id="1" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;"> <textarea class="drag-item" disabled style="width:98px; height:48px;">Some text</textarea> </div> The text area was not draggable since you have given draggable property to the div only.

Categories : Javascript

jQuery's draggable function
For one thing, you're applying $.draggable() twice, you don't need to do it again in your $(a).click(). Also it's not a good idea to do this with absolutely-positioned elements, see if you can put your <div>'s in a container that is absolutely positioned and keep the ones inside relative.

Categories : Jquery

Jquery draggable sortable
Put the connectToSortable in your draggable function. jQuery Part: $("#container").sortable({ receive: function(event,ui){ ui.item.remove(); } }); $("#element-container").draggable({ connectToSortable: "#container", helper: "clone", revert: "invalid" }); HTML Part: //First <div id="container"></div> //Second <div id="element-container"></div>

Categories : Jquery

Knockoutjs and Jquery draggable div
Try to read next article - Revisiting Dragging, Dropping, and Sorting observableArrays It contains detailed explanation and number of samples.

Categories : Javascript

jQuery UI draggable revert
if you add tolerance: 'touch' to the droppable it works. Which points to it being more of a css issue than one with the script. Updated JS BIN

Categories : Jquery

Saving jQuery UI draggable value?
I dont know what need_id is but it is probably something that you can get from a data attribute. The code below will send the new position of your element every time you stop dragging the element: $( ".ELEMENT" ).draggable({ containment: '#_moon_static_bg_status', stop: function(event, ui) { $.ajax({ type: "POST", url: "your_php_script.php", data: { x: ui.position.left, y: ui.position:top, need_id: need} }).done(function( msg ) { alert( "Data Saved: " + msg ); }); } });

Categories : PHP

JQuery draggable droppable
Another thing, the proxy: 'clone' doesn't work. it should be helper:"clone" docs revert: true From jQuery doc: Boolean: If set to true the element will always revert. So you want: revert:"invalid" Here is a simple example : http://jsfiddle.net/Rusln/8BY5e/

Categories : Jquery

jQuery + PHP - Croopzoom - IE not draggable
I have given soución in a programming forum I added this CSS to the element of "drang and dro". You must have "background" because otherwise, Internet Explorer does not launch events for that object (this is my logic, what I understand). This is the CSS applied in order to "drag and drop": #crop_container_selector{ background:url(about:blank) } Regards

Categories : Misc

Can't get JQuery to make an element draggable
works fine in fiddler. Only difference was I used jQuery 1.7.2 $(document).ready(function() { $( "#dragme" ).draggable(); });

Categories : Jquery

jquery dialog draggable and resizable
did you check this? it's by default draggable dialog and resizable http://jqueryui.com/dialog/#modal it's about strTitle try to remove it and add 'Title' or anything and close(number) make sure number and strTitle exists as valid variables. i created this example i working fine: <div id="dialog-modal-alerts" title="Alerts" style="display:none;"> Hlllo Ahmed Alaa<br /> </div> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function ()

Categories : Javascript

jQuery UI Draggable Position not refreshing?
You could use an helper : http://jsfiddle.net/tB4L3/4/ $(".draggable").draggable({ revert: "invalid", cursor: "move", opacity: 0.7, helper: function () { return $(this).clone().appendTo('body'); }, start: function () { $(this).hide(); }, stop: function () { $(this).show(); } });

Categories : Jquery

jquery multiple draggable and sortable
Easy enough, there's an option in sortable that you can use: connectWith. It accepts a selector to connect other sortables: $(".container").sortable({ connectWith: '.container', revert: true }); JSFiddle Your next problem will probably be that every box should only accept one element. So you need to delete the other elements in the sortable dynamically on drop of an element, which is trickier than I thought.

Categories : Jquery

jQuery Draggable not behaving as expected
I fixed your issue. You were creating a div with the same id '6' each time you clicked on add div. $("#adddiv").click(function() { $('<div></div>').draggable().appendTo($('#set')); }); Fiddle : http://jsfiddle.net/vQ3Tg/1/

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.