We Keep Coding

How can I load function in JS before I call it the first time?

I am creating a megamenu and it works fine until I try to delay the slideDown. I use jQuery. The code for slideUp and slideDown is as follows:
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).delay(500).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("fast");
$(this).toggleClass('open');
}
);
});
When I refresh the page and hover over the ".dropdown" element it slides down without any delay. However, when I hover over it again, it delays just fine, as if I called it when i hovered over it the first time.
Same is true for each menu button (do each ".dropdown" element) separately.
I thought that fault lays in $(document).ready(), so I waited for the whole page to load, but that didn't help.
Do you have any suggestions as to what I am doing wrong?
Let me show you a fragment of my menu. It also uses bootstrap.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
OLEJE
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header" style="color:#F96211">Syntetyczne</li>
<li class="divider"></li>
<li>Oleje silnikowe 0W30</li>
<li>Oleje silnikowe 0W40</li>
</ul>
</li>
</ul>
</li>
</ul>
I stripped it down, so it just shows the basic skeleton.

I don't think it's DOM ready's fault.
Without going much into details (since I cannot test your code) here's how I would write the above
jQuery(function($){ // DOM ready. $ alias secured.
$(".dropdown").hover(function(evt) {
var mEnt = evt.type==="mouseenter";
$(this).toggleClass('open')
.find('.dropdown-menu')
.not('.in') // without seeing your HTML I'm not sure about this line
.stop()
.delay(mEnt?500:0)
.slideToggle("fast");
});
});

Click event on jQuery "fly out" menu

I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit

If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.

$('.listTab a').click(function(e){...});

One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

Cannot attach click handler to anchor class

I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!

Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem

jquery menu - active links

I am trying to make a jquery menu that when I click on one of the links (with reloading the page), it changes its class to "active" and removes this class when I click on another link.
here is my code :
enter code here`$(document).ready(function(){
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
});
<ul id="mainMenu">
<li class="hover-width1">STRONA GŁÓWNA</li>
<li class="hover-width3">OFERTA</li>
<li class="hover-width3">CENNIK</li>
<li class="hover-width2">PRZEPISY</li>
<li class="hover-width2">GALERIA</li>
<li class="hover-width1">NASI KLIENCI</li>
<li class="hover-width2">NARZĘDZIA</li>
<li class="hover-width1">CIEKAWOSTKI</li>
<li class="hover-width2">KONTAKT</li>
</ul>
Can someone tell me why my code is not working when I reload the page:(

You can use $(document).ready(function(){ or $(function(){ to init jquery code, but not both at the same time.
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
The code should work fine, and when you reload the page the markup changes won't stay up, so you must make use of the uri / cookies to determine what item to show active.

jQuery .click event not registering with class

I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:
<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
<div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
<ul id="jsddm">
<li>Item 1
<ul>
<li><a class="btn myOtherClass" href="#">Button 1</a></li>
<li><a class="btn myOtherClass"href="#">Button 2</a></li>
</ul>
</li>
<li>Item 2
<ul>
<li><a class="btn myOtherClass" href="#">Button 3</a></li>
<li><a class="btn myOtherClass" href="#">Button 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
And in my script I have the following:
/* Register the click event for menu buttons */
$('.btn').click(function () {
alert("You clicked a button");
});
The alert never fires and I'm not sure why, any help is appreciated.
UPDATE:
The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.
UPDATE 2:
Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.

Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:
$(document).ready(function(){
$('.btn').click(function () {
alert("You clicked a button");
});
});

are you using stopPropagation or return false in another click event that may have prevented the click event from happening?
Is the jQuery used after jQuery has been loaded?
Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)