I specify the containment option for a draggable to be 'document' but the draggable element cannot be dragged outside of the container. This is only possible if I specify a very high z-index. This results in a strange display (draggable floats over other page elements). What must I specify to have the draggable divs from the editdiv container be draggable to the editdiv2 container?
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.
Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? I have a jsfiddle at http://jsfiddle.net/gkvgn/8/. Thanks.
Had to remove overflow: hidden;
.link_drop_box{
height:80%;
/* overflow:hidden; */
}
.comdiv {
position:absolute;
padding: 0;
border: 1px solid DarkKhaki;
border-radius: 3px 3px 0px 0px;
box-shadow: inset 0px 0px 10px DarkKhaki;
/* overflow-y: hidden;
overflow-x: hidden; */
}
http://jsfiddle.net/gkvgn/10/ .
Related
I created a list from which items can be dragged and dropped into items of another list. The problem is sometimes when the item is dragged at the edge and dropped on the edge of the droppable item nothings happens eventhough the mouse was inside the droppable item. Is there a way to improve this?
Fiddle example grab the draggable item's right edge and drop it on the droppable items left edge. Eventhough the mouse is clearly inside the droppable element the console.log does not register
jquery
$( ".left li" ).draggable({
helper: 'clone'
});
$( ".right li" ).droppable({
accept: '.left li',
drop: function(ev, ui){
console.log('dropped inside right li')
}
});
html
<ul class="left">
<li>drag1</li>
<li>drag2</li>
<li>drag3</li>
<li>drag4</li>
<li>drag5</li>
</ul>
<ul class="right">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
<li>drop4</li>
<li>drop5</li>
</ul>
css
.left {
float:left;
}
.left li {
width: 100px;
height: 30px;
border: 1px solid black;
}
.right {
float:right;
}
.right li {
width: 100px;
height: 30px;
border: 1px solid black;
}
The issue, I suspect, is with your droppable. You're making each list item a droppable instead of its parent.
http://jsfiddle.net/Twisty/1ofa25zx/
JavaScript
$(document).ready(function() {
function log(str) {
$("#log").prepend("<div>" + str + "</div>");
}
$(".left li").draggable({
helper: 'clone'
});
$(".right").droppable({
accept: '.left li',
drop: function(ev, ui) {
log('Drop on: ' + $(this).attr("class"));
var item = $("<li>", {
class: "dropped"
}).html(ui.helper.text()).appendTo($(this));
}
});
});
As you can see here, drop is triggered when an item lands on the ul.right. If you want, you can also adjust the tolerance.
Here's my fiddle: http://jsfiddle.net/challenger/u22PD/69.
Draggable and droppable are initialized this way:
$lister.find('.draggable').draggable({
stack: 'div'
});
$('#insert-editor .droppable-target').droppable({
drop: function(event, ui) {
var $this = $(this);
$this.html(ui.draggable);
}
});
It is only possible to drag .darggable item over #image-lister div. How do I drop a .draggable item onto the droppable-target?
Also how to keep the draggable item after it's been dragged-dropped to the target?
Found a solution there: jQuery Draggable and overflow issue
Changed my code to this:
$lister.find('.draggable').draggable({
scroll: false,
helper: 'clone',
start: function() {
$(this).hide();
},
stop: function() {
$(this).show()
}
});
Here's the result: http://jsfiddle.net/challenger/u22PD/91
The only thing that doesn't satisfy me is that you still can see as a draggable item goes under the hidden part of the parent division when dragged. Maybe you know how to solve this?
Remove overflow: auto; from #image-lister
Try this code:
DEMO
#image-lister {
position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
height: 530px;
overflow: auto; /*remove this */
background: #ddd;
background: #555;
z-index: 2;
padding: 10px;
padding-bottom: 0;
}
My World
jQuery 1.9.1
jQuery UI 1.10.3, although my jsfiddle example uses UI 1.9.2 and seems to work fine.
My Problem
There are many similar questions to this on stackoverflow, but I was unable to find a suitable answer. Basically I've got a jQuery accordion that is not to be displayed when the page loads, and its display can be changed to block via the jQuery .toggle() method. The toggle works fine, but the heightStyle: "fill" does not fill the space appropriately unless the parent div is displayed when the page is loaded, which I don't want.
My Attempts at Solutions
Repositioning the script at the end of the document and in the <head> section.
Rearranging the order in which the toggle happens: there is a second element, #map, which is toggled off at the same time as the accordion is toggled on, and vice versa.
As I am not entirely sure whether the accordion needs a parent container in the first place, I've tried it several ways: toggling the #accordion div, its parent div, and both div's.
For good measure, I've also attempted the .accordion( "refresh" ) method, as well as having a resizable container, on both the parent div and the #accordion. No soup.
Various CSS positioning for the parent container and #accordion.
Getting my hands dirty deep within jQuery.js. Given my fledgling experience with javascript, THAT didn't last long. Seriously, had to look up this thing ===. :)
My, THIS is Interesting
When the toggle button is clicked to hide the accordion and show #map again, you can see the heightStyle: "fill" actually work for a second! I slowed the transition duration in the jsfiddle so that it can be seen more easily.
SO, whatever is enabling the correct height calculation for heightStyle: "fill", that is what I need to have happen all the time. Any suggestions appreciated!
js fiddle: http://jsfiddle.net/Y8B4W/1/
HTML
<div>
<div class="page-header">
<div id="menu">Menu</div>
</div>
<div id="leftpanel">
<div id="accordion">
<h3>Heading 1</h3>
<div>
<p>...</p>
</div>
<!-- ...repeat for three more headings/sections... -->
</div><!--accordion-->
</div><!-- #leftpanel -->
<div id="map"></div>
</div>
CSS
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
color: #000;
}
.page-header {
width: 100%;
height: 3em;
background: gray;
}
#menu {
font-size: 1em;
margin: 0.5em;
font-weight: bold;
cursor: pointer;
}
#leftpanel {
display: none;
background: blue;
padding: 0;
margin: 0;
position: absolute;
top: 3em;
left: 0;
bottom: 0;
width: 100%;
}
#map {
position: absolute;
bottom: 0;
top: 3em;
width: 100%;
background: yellow;
line-height: 1.5em;
}
Javascript
$( "#accordion" ).accordion({
heightStyle: "fill",
collapsible: true
});
$( "#menu" ).click(function() {
$( "#map" ).toggle({
duration: 2000
});
$( "#leftpanel" ).toggle({
duration: 2000
});
$( "#accordion" ).accordion( "refresh" );
});
This is kind of a cheap and cheeky hack, but it works. Basically the height of the parent div, #leftpanel, was not being calculated correctly when the page loaded (which is when jQuery assigns the accordion's height) because of its display:none property. SO, I just grabbed the height myself and assigned it to #accordion manually before the accordion functionality is even added, which works like a dream:
$( "#menu" ).click(function() {
$( "#map" ).toggle( "slow" );
if ($( "#leftpanel" ).css("display") == "none") {
$(function() {
$( "#leftpanel").css("display", "block");
var accordHt = $( "#leftpanel" ).css( "height" );
$( "#accordion").css("height", accordHt);
$( "#accordion" ).accordion({
heightStyle: "fill",
collapsible: true
});
});
};
});
And if you're wondering why the 'if' statement instead of just assigning the property outright, it's because of a media query in which I have #leftpanel being displayed when the page loads on screen widths 800px and up.
Go ahead, fiddle: http://jsfiddle.net/72rw2/
Another way is to call a refresh after display:none changes.
$( "#menu" ).click(function() {
$( "#leftpanel").css("display", "block");
$( "#accordion" ).accordion( "refresh" );
}
I'm trying to have the user drag and drop the items. When an item is lifted from its spot, a gray dashed box needs to appear instead. As the item moves near another spot the boxes move to open up a target (gray dashed box) for the item to be dropped. (see image)
Here is my current jQuery.
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
revert: "invalid",
cursor: "move"
});
$( "ul, li" ).disableSelection();
});
// when the DOM is ready:
$(document).ready(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}
}, function () {
// on hovering out, fade the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(500);
}
});
});
You can try following...
CSS:
.dashed-placeholder {
border: 2px dashed #999;
width: 217px;
height: 320px;
background: #ccc;
margin: 10px 0px 50px 0px;
padding: 8px 0px 10px 6px;
}
JS:
$("#sortable").sortable({
revert: true,
placeholder: "dashed-placeholder"
});
Here's Demo Fiddle
I am creating a horizontal menu bar with a series of links. Underneath the current page link, there is an absolutely positioned div with a fixed size and a black background. When any of the other links are hovered over, this "selection indicator" slides across to underneath the hovered link. I have managed to create this effect as desired.
However, I am having an issue with the position of the "selector" div when the page first loads. For some reason the div sets it's initial position to exactly 5 pixels left of where it is supposed to be (underneath the current page link). I am using the same code to initialise the div as I am for the animation itself, and the bug only appears when the page is loaded. As soon as a link is hovered over, the "selector" slides into the correct positions until the page is refreshed/reloaded.
A working example of the menu (and the bug) can be found at www.jamiedavies.me
Here is the html structure of my navigation bar:
<header>
<h1>Main Title</h1>
<nav id="mainNav">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
<div id="pageSelector"></div>
</header>
Here is the related CSS:
nav#mainNav {
position: absolute;
right: 0px;
top: 63px;
}
nav#mainNav ul li {
display: inline;
list-style-type: none;
margin-left: 35px;
}
div#pageSelector {
height: 5px;
left: -999px;
position: absolute;
top: 91px;
visibility: hidden;
width: 25px;
}
And here is the javascript/jquery code that is responsible for animating the selector:
$( document ).ready( function() {
var offset = $( "header" ).offset().left;
$( "#pageSelector" ).css( "visibility", "visible" );
$( "#mainNav li" ).find( "a" ).each( function( i ) {
$( this ).mouseover( function( e ) {
var l = $( this ).offset().left - offset;
var w = $( this ).width();
$( "#pageSelector" ).animate( {
left: l,
width: w
}, 175, "swing" );
} );
} );
$( "#mainNav" ).mouseleave( function( e ) {
$( "#pageSelector" ).animate( {
left: $( "#mainNav li a.current" ).offset().left - offset,
width: $( "#mainNav li a.current" ).width()
}, 175, "swing" );
} );
$( "#mainNav" ).mouseleave();
} );
Try using
$(window).bind("load", function() {
instead of
$( document ).ready( function() {
Because, it seems the animation script completed execution before the other elements are supposedly loaded first, such as your special fonts and graphics, which most probably caused a mathematical error in alignment computation.
Hope this solves your problem.