Develop Reference

jQuery .show doesn't display the background

I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.

You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}

Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output

In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}

As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}

For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

How to add a class to a div, make it wait a while, and then add another class to another div?

So far I can apply a class to one div but I want it to then add another class to another div to make that show and fade in down.
http://www.penguinie.co.uk/test/
I want the first page to fade out and the about page fade in (or the projects or contact page).
<li>About</li>
That is what I used to make the main page fade out. The class hidden is used to hide the about page until the user clicks on the about link.
.hidden {
display: none;
}
.show {
display: inline;
}

You can do this with built-in jQuery methods fadeIn and fadeOut.
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
})
This way, #about will fade in right after #start fades out. If you want different a different animation, you can use the animate method to specify your animation.
You can also use the setTimeout method but as far as I can see, you want one div to disappear and the other div to appear right after. I think chaining two animations would be the better option in this case.
Also, #pszaba is right. You shouldn't use onclick attributes. You should use event handlers like the click handler like this:
$("#about").click(function(){
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
});
});
(This code actually doesn't make sense since the #about element is invisible so it cannot be clicked :) Just use it as a reference for your own implementation.)

I think you're looking for setTimeout() function :
$('#start').addClass('fadeOutUp');
setTimeout(function() {
// executed after 2 seconds
$('#about').addClass('animated fadeInDown');
}, 2000);
EDIT: but about fadeIn / fadeOut, you can also take a look on $("selector").fadeIn("slow", function(){ /* callback here */ });

not statement in CSS? Or way around? (superfish)

I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)

You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!

CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.

Creating new definition for my CSS with JavaScript (and mootools if needed). Selectors problem

I'm making some divs clickable with JavaScript. I'd like to use CSS to make the user understand that they are clickable, for example changing the color of links inside a div when mouse enters the div.
In CSS it is:
#menu > div:hover > a {
color: #f00;
}
and it works like a charm.
I'd like the color of the link to change when you mouseover only if JavaScrpt is Enabled, because if it is disabled the div is not clickable, just the link is. I'd like to add this declaration with javascript, something that in mootools should be as simple as:
$$('#menu > div:hover > a').setStyle('color', '#f00');
But that selector doesn't work on mootools. I should go for each div children of #menu and addEvents to it. That seems too much work for me compared to the simple css definition. How can I do that?
Alternative solution (that I don't know how to implement) could be write a with_js_enabled.css to load trough javascript. Is it possible?

Much simpler: set a class on the body element on page load:
document.body.className = "js";
Then modify your CSS;
.js #menu > div:hover > a {
color: #f00;
}
Job done :-)
(Although I assume you're aware that IE 6 doesn't support :hover on anything but links?)

well, since you asked about mootools here...
to change the colours of all A's within the divs of #menu when mouseover is triggered on the div, you could define a class a.red { color: red; }
$("menu").getElements("div").each(function(el) {
el.addEvents({
mouseenter: function() {
this.getElements("a").addClass("red");
},
mouseleave: function() {
this.getElements("a").removeClass("red");
}
});
});
you could also go $("menu").getElements("div").getElements("a") or even $("menu").getElements("a"), then attach the events to the parent (if it happens to be the div) - i guess it really does not matter.