We Keep Coding

Links not clickable due to JS return false

JS Fiddle Example
I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
$(document).on('click', '.dd-box', function() {
// Comment out the return statement below and the links will start working.
return false
});
The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
The reason I need this code is because I don't want the dropdown boxes to close when click events happen within them.
I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?

you should put stopPropagation
$(document).ready(function() {
$("a").click(function(e) {
e.stopPropagation();
});
...
see JSFiddle

Deleting a dynamically added div on a parent causes it to append again

JsFiddle
I am trying to dynamically add a div on clicking td.active. I wish to remove the dynamically added div when someone click on the close button or click on other td.active
Right now my code just append another div when the close button is clicked. can anyone help me to fix the issue.
$(function() {
$('td.active').click(function(event){
$(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
});
$('.planner-modal-header.close').click(function(e){
$(this).closest('planner-modal').remove();
});
});

I have gone through the jsfiddle and fixed it. you were trying to call click event on dynamically added content for ding this we can use jQuery on method.
i am sharing the jsfiddle link.
$(document).on("click",'.close',function(e){
$('.planner-modal').remove()
});
click here to see the working jsfiddle example
thanks

Use event delegation for dynamicaly created element
$('td.active').on("click", ".planner-modal-header .close", function (e) {
e.stopPropagation();
$(this).closest('.planner-modal').remove();
});
DEMO
use e.stopPropagation(); to stop the bubbling event

jQuery - trigger a custom event on a link

I am trying to run this custom 'getOffer()' event using jQuery
<img src="images/img.jpeg">
I have tried the following but it doesn't seem to work (I am using the Firefox Firebug console.log window)
$('a[title="Submit for offer"]').trigger('getOffer');
This is the page I am trying this on: http://bit.ly/1dpIMFk
Can anyone suggest any ideas?

<img src="images/img.jpeg">
$(document).ready(function(){
$('a[title="Submit for offer"]').trigger('getOffer');
});
function getOffer(){
alert('link clicked');
}
Seems working fine for me.I think you didnt wrapped your event trigger in document ready.
DEMO

You can use
<img src="images/img.jpeg">

Creating an custom event on jQuery
First add some identifier (id/class) to your link
<a id="linkOffer" title="Submit for offer"><img src="images/img.jpeg"></a>
Then, create your CUSTOM event.
//The function that will to the getOffer things
function getOffer() {
//Do get offer...
}
$(document).ready(function(){
//Custom event pointing to the function
$('a#linkOffer').on('getoffer',getOffer);
//Default click event
$('a#linkOffer').on('click',function(e){
//Do click stuff.
//Trigger your custom event.
$(this).trigger('getoffer');
//If you wish to not move the page, prevent the default link click behavior (moveing to other page)
e.preventDefault();
});
});

Trigger will not function because it search click attribute in element. Work around for this can be is:
Add click attribute to the element and then call the jquery function.
<button value="yu" onclick="getOffer();"/>
<script>
$("a[title='Submit for offer']").attr("onclick",$("a[title='Submit for offer']").attr('href')); // get value from href
$("a[title='Submit for offer']").trigger('click');
function getOffer()
{
alert('j');
}
</script>

basic problem in jQuery code

http://jsfiddle.net/nhmbA/
In above link you'll find my working code.
The issue is when you first click on Select For button, it'll show a list but again you click on the same button then the list should not be visible but its vice-versa.
I know, this is due to blur event applied to the list but I also want the list to be hidden when its clicked outside.
Help me to sort this minor issue..

In your code change
$('.tglrOptns').blur(function(){
$(this).css('display', 'none').siblings('.optnTglr:first').removeClass('seltd');
});
to
$('body').click(function(e){
$('.tglrOptns').css('display', 'none')
.siblings('.optnTglr:first').removeClass('seltd');
});
and add this
$('.tglrOptns').click(function(e){
e.stopPropagation();
});
Demo

I have added a close label, on clicking it closes the options div

hi if you change the on click function
to:
$('.optnTglr').live('click', function(e){
this should help

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"