I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)
Related
Would be very easy to embed the missing div container in the html ...if I only could add it. I'm limited to "jimdo's" head area to manipulate classes and id's from there. Code is already written but it seems to me the only way that works is to do that with jQuery or Javascript?
So, I have this code here:
<div id="1" class="2">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
And the missing div container in the html <div class="margin"> needs to be under the first div container from top <div id="1" class="2"> added by its id #1 and then surrounds the rest code below into the new added <div class="margin">
Like this:
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
Is it possible to add it like that with jQuery or javascript? If so, maybe someone could show me how to implement this?
You can try $.before() to append the <div class="margin"> before the target:
const $container = $("#cc-m-7032876518");
$container.before(`<div class="margin">`);
You can try this with jquery.
let children = $("#1").clone().children().wrap( "<div class='margin'></div>" );
$("#1").empty().append(children);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="2">
<div class="margin">
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
To start, here's a JSFiddle:
https://jsfiddle.net/RobGADV/kuy8wsLg/
<div class="tocButtonsDiv">
<div class="tocListItems">
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="51" data-title="Bacon Ipsum">Bacon Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="43" data-title="Pirate Ipsum">Pirate Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="48" data-title="Klingon Ipsum">Klingon Ipsum</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="8" data-title="klingon anchor">klingon anchor</div>
</div>
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="10" data-title="klingon anchor too">klingon anchor too</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="52" data-title="Plastic Onion Rings">Plastic Onion Rings</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="11" data-title="Condiments">Condiments</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="53" data-title="Porcupines For Fun">Porcupines For Fun</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="54" data-title="Tragedy At 7-11">Tragedy At 7-11</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="9" data-title="tragedy anchor">tragedy anchor</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="57" data-title="Something Fancy">Something Fancy</div>
</div>
</div>
</div>
Basically, I have a list of Items and Subitems, as you can see if you run the fiddle. The larger boxes are the Items, the smaller boxes are subitems, grouped below its parent Item. Make sense so far?
I want to be able to do the jqueryUI sortable() routine on each of the sets; meaning, I want to be able to reorder the Items (large buttons), and then also reorder the subItem (small buttons) under its parent Item.
I have the entire thing under a div called tocButtonsDiv. Inside that is a div called tocListItems, which contains ALL of the Items ("tocItem") (and their respective subItems).
The way it is in the Fiddle right now is the only way it works at all, but it's not keeping the subItems with the parent, and in fact, treats the subitems as a single group (whether there's one, two or more). I know my markup may need a little work, but I wonder if the .sortable() method has some more options I'm not aware of that will let me associate the subItems to the Items.
FWIW, the Fiddle as presented doesn't work at all; not sure why. This is my first time actually using JSFiddle.
Thank you for your help!
I want to drag a rectangle with mouse to select those divs.
The selected div will change class from “no” to “yes”. Also, the a link is clickable and dblclickable
<div id= "container" >
<div id="div-1" info="info1">
<div class="no" id="inside">
something
</div>
</div>
<div id="div-2" info="info2">
<div class="no" id="inside">
something
</div>
</div>
<div id="div-3" info="info3">
<div class="no" id="inside">
something
</div>
</div>
<div id="div-4" info="info4">
<div class="no" id="inside">
something
</div>
</div>
</div>
Using the jQuery UI Selectable, the code adds a yes class to selected divs and adds the no class when a div is deselected. The code looks something like this:
$(document).ready(function(){
$("#container").on("selectableselected selectableunselected", function(){
$(".inside").removeClass("yes").addClass("no");
$(".ui-selected > .inside").removeClass("no").addClass("yes");
});
});
(I had to change the inside id to a class since it uses multiple elements.)
The solution to anchor tags not working inside of selectable is here: https://bugs.jqueryui.com/ticket/4236
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..