Develop Reference

Dropdown menu not opening

I'm stuck with my dropdown menu.
I want it to open when I click the Nav-Button "clicker". Then it shall close when I click "clicker" again.
I want it to show/hide only when clicking the Image. It shall stay open when I click inside the hidden div.
But that doesnt work. I dont know why. Tried so many things. Any idea? (Total noob here).
HTML:
(Click on "#clicker" Image = Toggle Dropdown; "#dropdown-inside" = hidden div;
<div class="header_content">
<div class="navbar">
<div id="dropdown-menu">
<img id="clicker" src="http://porschedvd.de/bluptest/typo3/fileadmin/stromer/template/pix/menu_btn.jpg" alt="">
<ul id="dropdown-inside">
JQuery:
$j('#clicker').click(function() {
$j('#clicker').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideToggle("slow");
});
$j('#clicker').blur(function() {
$j('#dropdown-inside').hide('slow', function() {
});
});
Fiddle here: http://jsfiddle.net/377G6/2/

I have read your code and tried to run it.
Now you have 2 points to fix:
Your selector $j(this).children(ul) can't find the list.
The list ul is a sibling element of your #clicker, so you can use the method siblings('ul') or next() to select the list, but not children()
the event 'blur' can't be triggered now.
Generally, the event blur could only be triggered on input or textarea, so if you want to trigger the blur on <img> or <div>, you may set an attribute like tabindex="-1" to it.
As I tried, it runs successfully after the fix.
Here is the link: http://jsfiddle.net/edisonator/kfcB9/
Thanks,
Edison

Jquery toggle activating on multiple elements instead of the element specified

alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.

My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>

close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.

Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN

How do i fade out a pop up box when the body behind it is clicked

Once my pop up box has faded in, i want it to fade away when the user clicks away from pop up box.
Currently, it fades in and then fades straight back out again.
Jquery
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
HTML
<button id="footButton" onClick="jsRef()" type="button">References</button>
EDIT**
The file in question is sitting at the bottom of a main file via PHP include.
The pop up box should fade out when the body of the main file is clicked

Add e.stopPropagation() to the button click or add the body click event after you opened the popup.
Like:
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
});
Or:
$('#footButton').click(function(e){
e.stopPropagation()
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
I would definitely prefer the e.stopPropagation() solution.
Also you dont need you function jsRef() in the onClick attribute of the button.

I think you need to use event.stopPropagation() to prevent click event on the button buble up the DOM tree:
$('#footButton').click(function(e){
e.stopPropagation();
$('#refPop').fadeIn(1000);
});
You're also missing a closing bracket of your jsRef function:
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
} // <-- Here

The problem is both events are being fired which is causing the modal to be shown and then hidden immediately. I'd go about this in a different way, separating your modal content from your modal wrapper, making the modal fade out when the user clicks the modal wrapper:
<button>Show modal</button>
<div class="modal wrapper"></div>
<div class="modal body">I'm a modal!</div>
CoffeeScript (This isn't Javascript but is a "tiny language that compiles" into JS, hopefully you get the idea):
$('button').click ->
$('.modal').show()
$('.modal.wrapper') .click ->
$('.modal').hide()
Working JSFiddle with some SCSS styling (again, SCSS isn't CSS, it's a language that's compiled into CSS).

Jquery - Prevent click event from being triggered through an overlying layer

.PopBgd is 100% of the screens size with another div .PopUp contained within .PopBgd and appearing on top of it.
Clicking on .PopBgd gives the desired effect of Hiding. However clicking anywhere in PopUp also runs the fadeOut part of the script below.
QUESTION
How to prevent the fadeOut part of the script from triggering though overlying divs?
$('.BtnPop').click(function(e) {
e.preventDefault();
$($(this).data('popup')).fadeIn();
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});
});
ANSWER
<button type="button" class="BtnPop" data-popup=".Pop1">CLICK</button>
<div class="Pop1 PopBgd">
<div class="PopUp">
<a class="PopClose">×</a>
<div>Content</div>
</div>
</div>
$('.BtnPop').click(function(e) {
e.preventDefault();
$($(this).data('popup')).fadeIn();
});
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});
$('.PopUp').click(function(e) {
e.stopPropagation();
});
NEW QUESTION
How to use StopPropogation when the target div's name is unknown?
What I have tried above does not work.
I resolved my additional problem by simply adding a second class name that was static to the desired div to allow stopPropogation to work as normal.

$('.Pop').click(function(e) {
e.stopPropagation();
});
.stopPropagation() "Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event."

Closing jQuery Modal box

I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro

Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working

Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)