Develop Reference

Hover in/out makes my div flicker

I am trying to make a flowing-down div. I have the following jQuery code for them:
$(".centered-wrapper>main>.event").hoverIntent({
over: function() {
var pos = $(this).position();
$presentationEvent = $(this);
$fullEvent = $(this).clone();
$fullEvent.addClass("full");
$(this).css("visibility", "hidden");
$fullEvent.css({
position: "absolute",
top: pos.top,
left: pos.left
});
$(".centered-wrapper>main").append($fullEvent);
$fullEvent.find("main").slideDown(50, function() {
$fullEvent.find("footer").slideDown(50);
});
$fullEvent.animate({boxShadow: "0px 5px 5px 0px rgba(0,0,0,0.5);"}, 100);
console.log( $(".centered-wrapper>main>.event.full"));
$(".centered-wrapper>main>.event.full").on("mouseout", function() {
$(this).find("main, footer").slideUp(100);
$(this).remove();
$presentationEvent.css("visibility", "visible");
});
},
out: function() {}
});
Everything works well until I move my cursor up and down on that element, because, then it flickers and appears and disappears...
<div class="event">
<header>
<img class="photo" src="/res/users/events-photos/bal.jpg" alt=""/>
<div class="event-card">
<div class="date">
<!-- content -->
</div>
</header>
<main>
<!-- content -->
</main>
<footer>
<!-- content -->
</footer>
</div>
How can I solve this problem and where am I wrong?

You need to disable multiple queued animations. The best way to achieve this is to stop() it.
http://api.jquery.com/stop/
According to documentation:
$( "#hoverme-stop-2" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
});
In your case:
$fullEvent.find("main").stop(true,true).slideDown(50, function() {
$fullEvent.find("footer").stop(true,true).slideDown(50);
});
and:
$(this).find("main, footer").stop(true,true).slideUp(100);

The visibility hidden code interferes with element hover and causes the flicker. Use another way to hide it. Like
.event:hover
{
opacity: 0;
}
To avoid events from firing use 'pointer-events: none;'
.event:hover
{
opacity: 0;
pointer-events: none;
}

JQuery carousel shift by one element

I try to create my own JQuery carousel using this code as example http://coolcodez.net/create-infinite-carousel-in-jquery-using-a-few-lines-of-code/
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width();
setInterval(function() {
carousel.delay(1000).animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find('>:first-child');
first.remove();
$(this).append(first);
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});
http://jsfiddle.net/n8b65qbb/33/
I need to shift one image to the left every time, but my script doesn't work properly.
How can I fix it and make it work the right way ?

There are some errors in your code. First, I think the carousel variable should point to the ul, not to the div. The selector for the first variable is weird. Also, you should use detach instead of remove. By the way, there was a "jump" because you're not taking into account the margin between the list items in the animation.
Here's a working version (still needing big improvement):
$(document).ready(function () {
$.fn.carousel = function () {
var carousel = $(this);
var width = carousel.find('li').width() + 15; // Hardcoded margin
setInterval(function () {
carousel.animate({
right: '+=' + width
}, 1000, function () {
var first = carousel.find("li:first-child").detach();
$(this).find("ul").append(first); // The "ul" should be cached
$(this).css({
right: '-=' + width
});
});
}, 2000);
return $(this);
};
$('#carousel-1').carousel();
});

Some thoughts and changes:
I would suggest to constrain your HTML and CSS to the really needed elements to achieve the desired, and that's UL. keep it minimalistic and simple:
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
</ul>
therefore that's the only needed CSS you need:
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
Regarding your plugin, this is a simple way to achieve the desired, looping a function instead of using a setInterval:
(function($) {
$.fn.carousel = function( options ) {
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(2000).animate({scrollLeft : w}, 700, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
You can see from the code above that there's no hardcoded width values (beside the delay and animation, but on that later) cause of the use of outerWidth(true);which will account paddings, margins , borders of your LI element.
Now you're building a plugin, right? You might want to allow the user to easily modify default Plugin values like:
$('#carousel-1').carousel({
pause : 3400,
animate : 700
});
simply extend your plugin to accept editable options:
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({ // Default Settings
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
(function($) {
$.fn.carousel = function( options ) {
var S = $.extend({
pause : 2000,
speed : 700
}, options );
return this.each(function() {
var ul = this,
w = $("li", ul).outerWidth(true);
(function loop(){
$(ul).delay(S.pause).animate({scrollLeft : w}, S.speed, function(){
$(this).append( $('li:first', ul) ).scrollLeft(0);
loop();
});
}());
});
};
}(jQuery));
$(function () { // DOM ready
$('#carousel-1').carousel();
});
ul.carousel {
list-style: none;
padding:0;
height: 350px;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
ul.carousel li {
display:inline-block;
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="carousel-1" class="carousel clearfix">
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/VegKfUt.jpg" alt="" width="646" height="350">
</li>
<li>
<img src="http://i.imgur.com/YrU0rrW.jpg" alt="" width="646" height="350">
</li>
</ul>
Regarding a better UX, I would also sugget to pause completely your gallery on mouseenter, and restart your animations on mouseleave (though a setInterval might be best suited in that case.)

How to drag and drop multiple elements between different tabs

I am trying to drag and drop multiple elements between different tabs.
in this jsfiddle, When an item is being dragged, i want to drag all other checked items along with it, like Gmail does when you move several email from inbox to another folder.
I think it is necessary to use ui.helper but i don't have enough skill in query.
following is the code i'm currently working with:
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});

After a lot of fiddling, I came up with the following based on my answer here
Basically we save the selected items using data(), Initialize the tabs as droppable() and append the selected items into the sortable on drop event.
$('.connectedSortable').on('click', 'input', function() {
$(this).parent().toggleClass('selected');
});
$("#sortable1, #sortable2").sortable({
revert: 0,
helper: function(e, item) { //create custom helper
if (!item.hasClass('selected')) item.addClass('selected');
// clone selected items before hiding
var elements = $('.selected').not('.ui-sortable-placeholder').clone();
//hide selected items
item.siblings('.selected').addClass('hidden');
return $('<ul/>').append(elements);
},
start: function(e, ui) {
var $elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
//store the selected items to item being dragged
ui.item.data('items', $elements);
},
stop: function(e, ui) {
//show the selected items after the operation
ui.item.siblings('.selected').removeClass('hidden');
//unselect since the operation is complete
$('.selected').removeClass('selected');
$(this).find('input:checked').prop('checked', false);
}
});
var $tabs = $("#tabs").tabs(),
$tab_items = $("ul:first li", $tabs).droppable({
accept: "ul, .connectedSortable li",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var $item = $(this),
$elements = ui.draggable.data('items'),
$list = $($item.find("a").attr("href")).find(".connectedSortable");
ui.draggable.show().hide("slow", function() {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow").before($elements.show("slow"));
});
}
});
ul {
list-style-type: none;
}
.connectedSortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.chbox {
margin-right: 10px;
}
.selected {
background: red !important;
}
.hidden {
display: none !important;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt
</li>
<li>Proin dolor
</li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 1</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 2</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 3</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 4</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
</div>
</div>
Updated Fiddle

Animate content in a list

I want to make it so that when I hover over one of the items in a list, it moves that element.
Here is my HTML code for the list:
<ul class="nav">
<li class="test">Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
And here is my Jquery code:
$(document).ready(function() {
$('').mouseenter(function() {
$(this).animate({ left: '+=100px' });
});
$('').mouseleave(function() {
$(this).animate({ left: '-=100px' });
});
});
Basically, my question is what goes in the quote marks in the JQuery functions?

Use the on event
$(document).ready(function () {
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');
});

Try this:
$(document).ready(function()
{
$('.nav li').mouseenter(function()
{
$(this).animate({left: '+=100px'});
});
$('.nav li').mouseleave(function()
{
$(this).animate({left: '-=100px'});
});
});

You can use $('.nav li') to target list items of your nav:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
Also, you need to set position: relative for your list items, so the left value can work:
.nav li {
position: relative;
}
Fiddle Demo

You might want to consider the .on and event map approach.
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');

HTML Code:
<ul class="nav">
<li>Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
Javascript:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
A little CSS tweek to make the list hover animation work:
.nav {
padding: 20px 0 0 20px;
}
.nav li {
position: relative;
}
Check the demo at: DEMO

Jquery drag resize select

I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine .
JSFiddle
My code is:-
CSS-
.dr {
background: none repeat scroll 0 0 #63F;
color: #7B7B7B;
height: 50px;
text-shadow: 1px 1px 2px #FFFFFF;
width: 50px;
position:absolute;
}
.bg_section {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
position: relative;
width: 400px;
}
JS-
$(document).ready(function(){
var selected = $([]), offset = {top:0, left:0};
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$( "."+section).selectable();
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$(".dr").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
},
stop: function(e, ui) {
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(e) {
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( ".dr" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( ".bg_section" ).data(".bg_section")._mouseStop(null);
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})
HTML-
<div id="dialog-form" title="Add fields in Section">
<p class="validateTips">All form fields are required.</p>
<div class="add_new">Add</div>
<input type="text" id="new_field"/>
<div id="save_new">save</div>
<form>
<fieldset>
<label for="divdata">Divs</label>
<select name="divdata" id="divdata">
<option value="dr1">Div1</option>
<option value="dr2">Div2</option>
<option value="dr3">Div3</option>
<option value="dr4">Div4</option>
<option value="dr5">Div5</option>
</select>
</br>
<label for="section">Section</label>
<select name="section" id="section">
<option value="paper-area">Header</option>
<option value="paper-area-detail">Detail</option>
<option value="paper-area-qty">Items</option>
<option value="paper-area-sub">Total</option>
<option value="paper-area-footer">Footer</option>
</select>
</fieldset>
</form>
</div>
<div class="main_bg">
<div class="textarea-top">
<div class="textarea-field">
<div class="field-icon add"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></div>
</div>
<div class="paper-area bg_section" id="paper_area">
</div>
<div class="paper-area-detail bg_section">
</div>
<div class="paper-area-qty bg_section">
</div>
<div class="paper-area-sub bg_section">
</div>
<div class="paper-area-footer bg_section"></div>
</div>
I am using drag-select for drag resize.Any help should be Appreciated.

Seems like a strange bug/conflict with jquery ui dragable and/or resizeable. Only some parts of selectable are working in combination with these other two functions. If you inspect the elements which have all three functions and you try to select one of them it only gets the "ui-selecting" class, which is a timeout class and option from selectable but stoping there. Normally the classes are replaced in this way:
ui-selectee
ui-selecting
ui-selected.
If you remove the drag- and resizeable functions the selectable stuff is working normally (but there still other bugs in your code)
I guess it is possible to combine all these function, but you will have to play around with the options and callbacks to get it working like you want to. Maybe not everything you want is possible becouse of these conflicts.

The easiest way to resize is by using resize:both; , max-height:__px; , max-width:__px; in CSS

Indeed it seems that jquery ui draggable and selectable don't work that nice together. However other people have posted solutions. Please look at the following,
http://words.transmote.com/wp/20130714/jqueryui-draggable-selectable/
http://jsfiddle.net/6f9zW/light/ (this is from the article above)
Since it seems as a nice working solution that examines the state when dragging and selecting, i will also post it below in case the site goes down.
JS
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#selectable > div" ).draggable({
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#selectable > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#selectable" ).selectable();
// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("selectable")._mouseStop(null);
});
// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
$(this).css({
top: i * 42
});
i++;
});
CSS
#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
HTML
<div id="selectable">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
</div>
Other threads describing similar problem and solutions,
Is there a JQuery plugin which combines Draggable and Selectable
jQuery UI : Combining Selectable with Draggable

I have found A solution Now we can use *Drag-Resize-Select -*together
Example-
code:-
CSS:-
.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
JS:-
var selected = $([]); // list of selected objects
var lastselected = ''; // for the shift-click event
$(document).ready(function(){
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
selected = $(".ui-selected").each(function() {
$(this).addClass("dragging");
});
},
drag: function(ev, ui) {
},
stop: function(e, ui) {
selected.each(function() {
$(this).removeClass("dragging");
});
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
$("#paper_area").selectable();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(evt) {
id = $(this).attr("id");
// check keys
if ((evt.shiftKey) && (lastselected != '')) {
// loop all tasks, select area from this to lastselected or vice versa
bSelect = false;
$(".task").each(function() {
if ($(this).is(':visible')) {
if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
bSelect = !bSelect;
if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
if (!$(this).hasClass("ui-selected"))
$(this).addClass("ui-selected");
}
else
$(this).removeClass("ui-selected");
}
});
return;
}
else if (!evt.ctrlKey)
$(".ui-selected").removeClass("ui-selected"); // clear other selections
if (!$(this).hasClass("ui-selected")) {
$(this).addClass("ui-selected");
lastselected = id;
}
else {
$(this).removeClass("ui-selected");
lastselected = '';
}
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})