i am creating html elements live and appending them to the window.
The issue im having is that i can't use jquery ui on them. I have tried the deffer method, but that doesn't work as well.
What i am trying to accomplish is to clone the last div, add it to the container and make it resizable
here's some code jsfiddle:
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button class="add">add</button>
#container {width: 600px;height: 300px;}
#container h3 {text-align: center;margin: 0;margin-bottom: 10px;}
.resizable {width: 100px;height: 100px;float: left;}
.resizable, #container {padding: 0.5em;}
var dfd = $.Deferred();
dfd.done(function () {
var lastDiv = $('.resizable').last();
var lastDivClone = lastDiv.clone();
lastDivClone.appendTo('#container');
return lastDivClone;
});
$('.add').on("click", function () {
var x = dfd.resolve();
x.resizable("enable");
});
$(".resizable").resizable({
containment: "#container",
grid: 50
});
any ideas?
Remove the resizable handle first.
lastDivClone.appendTo('#container').find('.ui-resizable-handle').remove()
.end().resizable({
containment: "#container",
grid: 50
});
http://jsfiddle.net/ExplosionPIlls/945p6/2/
Related
[Accordion open after refresh] (https://i.stack.imgur.com/a4Qwr.png)
If I refresh my browser the accordion is expanding automatically, If I click any one accordion it shrinks.
Jquery Code:
$(document).ready(function(){
$(".accordion h1").click(function(){
var id = this.id; /* getting heading id */
/* looping through all elements which have class .accordion-content */
$(".accordion-content").each(function(){
if($("#"+id).next()[0].id != this.id){
$(this).slideUp();
}
});
$(this). next(). toggle(); /* Selecting div after h1 */
});
});
Expectation is, If I refresh all the accordions should shrink.
I do not know your html logic, but I suggest that you use jQuery toggleClass.
$(document).ready(function(){
$(".accordion h1").click(function(){
$(this). next(). toggleClass("accordion-content"); /* Selecting div after h1 */
});
});
.accordion-content {
width: 500px;
height: 500px;
background: #ccc;
}
<div class="accordion">
<h1 id="tab_1">tab 1</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>
<div class="accordion">
<h1 id="tab_1">tab 2</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>
Using the latest jQuery UI, the drag and drop function doesn't work properly, when moving elements from one list to another. I want to drag elements from one list to another and replace the drooped element with another one, the problem is that jquery UI replaces the element but it moves it to the bottom of the list, it doesn't keep it to the position where it was dropped.
<head>
<style>
#list1{
float:left;
width: 200px;
margin-right: 20px;
}
#list2{
float:left;
width: 200px;
}
.element1{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ededed;
}
.element2{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ffeded;
}
.highlight{
border: 1px dashed #999999;
color: #333333;
height: 25px;
background-color: #faffd6;
}
</style>
</head>
<body class="">
<div id="wrapper">
<div id="list1">
<div class="element1">Element 1</div>
<div class="element1">Element 2</div>
<div class="element1">Element 3</div>
<div class="element1">Element 4</div>
<div class="element1">Element 5</div>
<div class="element1">Element 6</div>
</div>
<div id="list2">
<div class="element2">Element 1</div>
<div class="element2">Element 2</div>
<div class="element2">Element 3</div>
<div class="element2">Element 4</div>
<div class="element2">Element 5</div>
<div class="element2">Element 6</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
$(window).load(function () {
$("#list1").sortable({
revert: true,
placeholder: "highlight",
});
$("#list2").sortable({
revert: true,
placeholder: "highlight",
});
$( ".element1" ).draggable({
connectToSortable: "#list2",
revert: "invalid",
stop: function( event, ui ) {
$(this).replaceWith('<div class="element1">Element 99</div>');
}
});
});
</script>
The problem you got is that you have two different events and you catch only one of them.
You drag item from gray-list and place it inside the pink-list, your highlight element is shown and then you drop it. This is your problematic usage.
You grad item from gray-list and place it inside the pink-list, your highlight element is shown, then you take your dragged element outside of that list (you still have the margin of the new list-item, but the highlighted element is not there) and you drop it. This scenario is all good.
Your problem is that on the first scenario the dragged element position (DOM-wise) is the last element of the list, and when you drop it what happen is that you get animation to put it in the correct position (where the highlight element is places) and then there is a switch. If you change that the function that should change between those elements will not know which elements to switch.
The way to fix this issue is to go to the "droppable" element - the list you put your item in. use the deactivate event of the sortable (#list2) to run anything you want after the element was placed in the right place.
$("#list2").sortable({
revert: true,
placeholder: "highlight",
deactivate: function(event, ui) {
$(ui.item).replaceWith('<div class="element1">Element 99</div>');
}
});
Note the usage of event.toElement and not this, since this in the current scope is the list element and not the dragged element. Don't forget to remove the code of the stop event from your draggable element.
I've a sortable element inside another sortable element. Both are connected to each other.
Following the the sample markup:
<div id='container'>
<div class='parent'>
<div class='child'>1</div>
<div class='child'>2</div>
<div class='child'>3</div>
<div class='child'>4</div>
</div>
<div class='parent'>
<div class='child'>5</div>
<div class='child'>6</div>
<div class='child'>7</div>
<div class='child'>8</div>
</div>
</div>
What i'm trying to do is to drag multiple items between .parent's and #container.
Following is the JS:
$("#container").on('click', '.child', function () {
$(this).toggleClass('selected');
});
$('.parent').sortable({
appendTo: "#container",
connectWith: '.parent, #container',
revert: 0,
helper: function (e, item) {
if (!item.hasClass('selected')) {
item.addClass('selected').siblings().removeClass('selected');
}
var elements = $('#container').find('.selected').clone();
$('#container').find('.selected').not(item).addClass('hidden');
var helper = $('<div/>', {
class: 'parent'
});
return helper.append(elements);
},
start: function (e, ui) {
var len = ui.helper.children().length;
var width = ui.item.width() + 2;
ui.helper.width((len * width));
ui.placeholder.width((len * width));
},
stop: function (e, ui) {
$('.selected').removeClass('selected');
}
});
$('#container').sortable({
connectWith: '.parent',
tolerance: "pointer"
});
The following
JSFiddle
with the whole code (I removed the code for appending items to minimize the code since that is not relevant to the placeholder position) demonstrates the issue i'm facing:
I'm able to drag items from .parent to the #container as follows:
By dragging the items to the left of #container as shown below:
By dragging items above #container through the space between .parents (This is a bit tricky but it works when the center is exactly hovered over the space) as shown below:
But Once i drag an item outside, the placeholder does not appear to the right side of #container even when i directly hover the item over it.
Expected output:
Current result:
As shown in the image, the placeholder is inside the .parent even though the item is away from it, inside #container.
From what i tried, the issue is with the following:
$('#container').find('.selected').not(item).addClass('hidden');
Where i hide the selected items using display:none, Possibly causing miscalculations with jQuery UI.
So i tried refresh and refreshPositions in the start event, as in this JSFiddle, Which is produces the expected output, but it no longer properly displays the placeholder in #container in the other two scenario.
What i want to do is to be able to drag items from .parent to #container by
Dragging items to the left of #container
Dragging items above #container through the space between .parents
Dragging items to the right of #container
Side note: Most of the sortable options are added while trying to fix the issue, and the css dimensions are for demo purpose only, these can be added or removed if necessary.
Update: this seems like a bug, which i reported here. The jQuery UI team replied that they are in the process of rewriting all interactions. So hopefully this will be fixed in the next release.
In my code, it has almost become a convention to just apply this poorly documented hack to Sortable’s over and out callback functions:
if($.ui.ddmanager.current)
$.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);
This will make sure positions are refreshed, and in contrast to the built-in refresh and refreshPositions methods, it seems to work.
Could you try this approach, and see if it improves your Sortable’s behavior?
Edit:
Never mind the third-party plugin, check this out let me know if this is what you were after: http://jsfiddle.net/6opxyvkp/7/ - old
http://jsfiddle.net/6opxyvkp/9/ - new
HTML
<div id='container'>
<div class='parent'>
<div class='child'>1</div>
<div class='child'>2</div>
<div class='child'>3</div>
<div class='child'>4</div>
</div>
<div class='parent'>
<div class='child'>5</div>
<div class='child'>6</div>
<div class='child'>7</div>
<div class='child'>8</div>
</div>
</div>
CSS
#container {
display: inline-block;
height:60px;
background:dodgerblue;
}
.parent {
float:left;
height:58px;
margin:0 15px;
border:0px solid red;
background:silver;
}
.child {
float:left;
width:50px;
height:60px;
text-align: left;
background:#fff;
border:1px solid;
margin:0px;
}
.ui-sortable-placeholder {
visibility: visible !important;
border: none;
padding:1px;
background:rgba(0, 0, 0, 0.5) !important;
}
.selected {
background:red;
}
.hidden {
display:none !important;
}
JS
$("#container").on('click', '.child', function () {
$(this).toggleClass('selected');
});
$('.parent').sortable({
connectWith: '.parent, #container',
appendTo: '#container',
revert: 0,
helper: 'clone',
helper: function (e, item) {
var helper = $('<div/>');
if (!item.hasClass('selected')) {
item.addClass('selected').siblings().removeClass('selected');
}
var elements = item.parent().children('.selected').clone();
item.data('multidrag', elements).siblings('.selected').remove();
return helper.append(elements);
},
start: function (e, ui) {
var len = ui.helper.children().length;
var width = ui.item.width() + 2;
ui.helper.width((len * width));
ui.placeholder.width((len * width));
},
stop: function (e, info) {
info.item.after(info.item.data('multidrag')).remove();
}
});
$('#container').sortable({
connectWith: '.parent',
tolerance: 'pointer'
});
If third-party jQuery plugins are allowed, take a look at https://github.com/shvetsgroup/jquery.multisortable.
I want to point out which div I clicked on to prevent confusing as the pop up menu that comes out of it on my site will be both the same just different links but same buttons. Now my problem is that i cant figure out how i can manage to do it been stuck on it for quite some time now. My site is in Wordpress for the info. The color of the text doesnt really matter atm.
The code does work but i want that when i hit "juicyplants" the color changes and when i hit "leafyplant" that color changes and "juicyplants" go back to normal. with the changing colors i mean the already presenting ones.
My code:
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
h2 {
float:left;
display:block;
height:40px;
width:150px;
cursor:pointer;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
Best to change classes and use styling:
jsfiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/2/#update
$(function () {
$("#clickOne").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
});
in style add:
.active{
color: green;
}
It is better to data-drive any menu system and reduce the code:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/3/
JQuery:
$(function () {
$('.clickDesign').on('click', function () {
var $this = $(this);
$('.clickDesign').removeClass("active");
$this.addClass("active");
// Use the id in the data-target attribute
$target = $($this.data('target'));
$(".target").not($target).fadeOut();
$target.fadeIn();
});
});
Html (has data-target attributes)
<div>
<div id="clickOne" class="clickDesign" data-target="#leafyPlants">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign" data-target="#juicyPlants">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants" class="target">Leafy Test</div>
<div id="juicyPlants" class="target">Juicy Test</div>
I want re-sizable feature like jsFiddle : link. If i explain in my own words there are four layouts
[1. HTML, 2. javascript, 3. CSS & 4.Result] and we can re-size the layout inwards & outwards. I have been tried to make resizable using jQuery but failed to do like jsFiddle.
my example: CSS
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>
js: $(function() { $('.resize').resizable( { handlers: 'n,e,s,w' } );
});
in example, there are two layout left & right, are equals in size. when i resize any div then other div should change it's size too but it doesn't make any difference in size while jsFiddle does.
Add the jQuery css in your code and it will be working fine.
add this line:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
**Editing**:: Use this one: It will work for left div. try this :)
/*my example: CSS */
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
/*my example: JS */
jQuery(function() {
jQuery('#left').resizable({
resize: function(event, ui) {
var leftWidth = ( 100 * parseFloat($('#left').css('width')) / parseFloat($('#left').parent().css('width')) );
var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
jQuery('#right').css('width', rigthWidth + '%');
}
});
});
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>