Develop Reference

Jquery-ui selectable problems

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)

I'm trying to float a <p> tag in a forum setup

I'm currently making a forum setup where users can view, post and respond to topics. The bit I'm posting here is the "reply to a topic bit". Where the top post is "Topic", and the "reply" bit is at the bottom. Inbetween I have "posted answers" to said Topic.
The problem I'm having is that the "p" tag wont position itself to the right of the user who posted his/her reply, like the replyfield at the bottom does.
I have tried to copy/paste the reply bit on top of each other, and they align nicely, but once I change the textarea tag to a p tag it wont work.
NOTE: The posts will later on be converted to actual posts using PHP, this is just for testing
Thanks
Here is the code:
HTML
<div class=forumListWrap>
<div class="col-1-forum">
<h2>TITLE</h2><!--TITLE-->
<button type="button" class="forumBtn">Add a Reply</button>
<div class="topic">
<h6>Topic</h6>
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM</p>
</div>
</div>
</div>
</div>
<div class="reply">
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM LOREM</p>
</div>
</div>
</div>
</div>
<div id="horiLine"></div>
<div class="col-2-reply">
<h2>Reply to thread</h2>
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
</div>
</div>
<div class="col-3-reply">
<div class="answerField">
<textarea></textarea>
</div>
<input id="replySubmit" type="submit" value="Submit">
</div>
</div>
</div>
Please see code.

See the updated jsFiddle for a possible Variant.
Explanation of what i did:
i set a width for the column with the username (col-3-reply) to 20% and also made it float left
i set the width of the reply-content to 80%
i added a antifloat div below. This is because floating elements are treated differently, and by adding this, you can have them still inside the box with the grey border of the reply.
Here are the antifloat CSS rules. See the jsFiddle for all details:
.antifloat {
height: 0;
width: 0;
clear: both;
}
As a general hint: Check out the new CSS 3 flexbox ( display:flex; ) it has very good support in all modern browser and is way easier to understand,write and read.

JQuery - Show multiple divs

I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>

You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}

using jQuery to slide one div down and the other visible divs up (sliding content based navigation)

Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>

You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.

I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});

Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/

Can't seem to get element ID

I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>

Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});

should it not be alert($(this).id);? (Note the $).