We Keep Coding

How to close my dropdown when other areas clicked by jQuery?

I created a simple dropdown for my framework ..., I want to close it when other areas except dropdown clicked like Bootstrap.
This is my code :
$('.ji-dropdown-click button').click(function () {
var animationObject = $(this).parent().find('.ji-dropdown-menu').data('animation');
$(this).parent().find('.ji-dropdown-menu').toggle().addClass('animated' + ' ' + animationObject);
});
Can you please help me ? Thanks ...

Try this code:
$(document).click( function(){
$('.ji-dropdown-menu').hide();
});
It should work.

You can use this code:
$('body *:not(.ji-dropdown-click)').click(function() {
$('ji-dropdown-click').hide(500);
});

Append input box with JQuery

I was trying to add text into field with id #shouttext, but i need to trim value from onclick event which is just after (' and also delete ') symbols.
So if i have
<img src="images/smilies/at.png" alt="" title="" class="smilie smilie_9 smilie_pointer" onclick="MyBBEditor.insertText(':at:');">
I want to get
:at:
and add it to input with #shouttext id. Below is my code, which doesn't work - and i think its blocked by defined onclick value, which i was trying to remove.
<script type="text/javascript">
$( document ).ready(function() {
$('.smilie').click(function()
{
var s1,s1;
s1=attr("onclick");
s1=s1.replace('MyBBEditor.insertText(\'', '');
s2=s1.replace('\')', '');
$('.smilie').attr('onclick','').unbind('click')
$('#shouttext').val($('#shouttext').val()+s2);
})
});
</script>
Thanks for any help in advance!

you could try also:
var str = $(".smilie").attr("onclick").split("'")[1];
to get the :at: try it here: fiddle
now you can use it here:
$('.smilie').unbind("click");
$('.smilie').click(function() {
var str = $(".smilie").attr("onclick").split("'")[1];
$('#shouttext').val($('#shouttext').val() + "" + str);
});
or how #eg_dac says, you can override the click event with $.on()

instead of unbinding it in the click, you can do
$(".smilie").attr("onclick", ""); // clear the already declared attribute.
$(".smilie").on("click", function(){
$('#shouttext').val($('#shouttext').val()+s2);
});
Example found here http://jsfiddle.net/meougz1L/
$("img").attr("onclick","");
$("img").on("click", function(){
alert("click event overridden");
});

how to access an element's data inside its own event handler using jQuery?

I want to retrieve an data attribute of a button inside it's own event handler. I have tried the following jQuery code for the HTML at the end. But the button doesn't seem to respond as I expected:
$('btn.btn-add-layer').on('click', function() {
var layertype = $(this).data('layertype');
alert('type : ' + layertype);
});
Can someone please help explain how to fix the above so that the button can tell its data?
Thanks
HTML:
<button data-layertype="base" class="btn btn-primary btn-xs btn-add-layer">OK</button>
-- EDIT --
Thanks everyone who have helped. As I suspected and pointed out in the two answers, it's a typo. I was thinking about button.btn-... but wrote btn.btn-....

you must select the button with button.btn-add-layer your code must be like:
$('button.btn-add-layer').on('click', function() {
var layertype = $(this).data('layertype');
alert('type : ' + layertype);
});
more about jquery button selector from here

$('.btn.btn-add-layer').on('click', function() {
var layertype = $(this).data('layertype');
alert('type : ' + layertype);
});
Your selector was a bit messed up!

There are a couple of ways to do this, the fastest is this:
$('.btn.btn-add-layer').on('click', function() {
var layertype = this.getAttribute("data-layertype");
alert('type : ' + layertype);
});
You also have an error in your selector, try $('button.btn.btn-add-layer') instead.

Equivalent jquery code for existing javascript code?

I am new to jquery. I wrote one javascript method and will be called on click of an anchor.
onclick="return show('contentTwo','content');
here contentTwo and content are div Ids.
method:
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
Now I would like to use jquery's slideDown and slideUp methods than using javascript. how can I convert the above code into jquery?
Thanks!

Try
$("#shown, #hidden").slideToggle("slow");
DEMO

try this:
DEMO --> http://jsfiddle.net/YFmtc/2/
$("#hidden").hide();
$('a').click(function(){
$("#shown, #hidden").slideToggle("slow");
});
See API slideToggle()

Try
function show(shown, hidden) {
$('#' + shown).show();
$('#' + hidden).hide();
return false;
}
or
function show(shown, hidden) {
$('#' + shown + ',' + '#' + hidden).toggle();
return false;
}

jQuery multiple radio buttons and load html code?

You think is right this way for show HTML code in each click on radio?
What is you propose to animate (effect) appropriate for show and hide html code?
see you example of my codes: http://jsfiddle.net/9LECb/
$('#housing_select input').click(function(){
var classes = $(this).attr('id');
if(classes == 'hotel_select'){
$('.hotel_apartment_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'hotel_apartment_select'){
$('.hotel_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'suite_select'){
$('.hotel_select, .hotel_apartment_select').hide();
$('.'+classes).show();
}
})
With respect

You can remove the if conditions and minimize the code to:
$('#housing_select input').click(function() {
var classes = $("." + this.id);
$('.hotel_apartment_select, .suite_select, .hotel_select').not(classes).hide();
classes.show();
})
JSFiddle: http://jsfiddle.net/9LECb/2/
Note:
You can check jQuery UI Tabs as they acheive a similar effect

Try this:
$('#housing_select input').click(function() {
$('.hotel_apartment_select, .suite_select, .hotel_select').not("." + this.id).hide();
$("." + this.id).show();
})