Develop Reference

Link active anchor class to page section

How can I make the below site add the active class to each anchor link based upon the fullPage.js section displayed?
Codepen: http://codepen.io/anon/pen/wJrwbq.
HTML:
<nav>
<ul id="menu">
<li>
<a>Menu</a>
<div id="dropdown">
<ul>
<li class="navLink active"><span class="navNumber">01</span>Home</li>
<li class="navLink"><span class="navNumber">02</span>About</li>
<li class="navLink"><span class="navNumber">03</span>Skills</li>
<li class="navLink"><span class="navNumber">04</span>Work</li>
<li class="navLink"><span class="navNumber">05</span>Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
CSS:
.navLink > a:hover,
.navLink.active > a,
.navLink.active > a > span
{
color: #1957EF;
text-decoration: none;
}

fullPage.js provides a menu option that you can use for that as it is detailed in the documentation.
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
In your initialization:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Notice how the value of the anchors has to be the same as the data-menuanchor. In your case it isn't. You are using about and then aboutSection.
Also note the active class will be added to your a element and not to the li one.

You need to look at scrollTop in jQuery: https://api.jquery.com/scrollTop/
In a nutshell, you need to measure the scroll position from the top of the page, and if that position is equal to a certain number, use jQuery to add the active class to the link, otherwise remove it.
There are plenty of examples of this online, I'm sure you'll be able to find something!

Try This - you can use .removeClass() and .addClass() to apply/remove class on any HTML tag.
You need to add below code in in your page
$(document).ready(function(){
$(".navLink").click(function(){
$(".navLink").removeClass("active");
$(this).addClass("active");
});
});

How to hide an element after clicking it's child element using JavaScript

I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.

Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});

you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')

Hide divs when showing another - jQuery toggle

I'll start with my JSFiddle example:
http://jsfiddle.net/CR5FB/5/
Basically I'm trying to get the same effect as shown on this post (JSFiddle here), however I'm having some trouble implementing it - being as I want to check for multiple div's toggle status rather than simply switching in between two divs. I have tried using the following:
$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
$(".createmenu").toggle("fast");
$(".searchmenu").toggle("fast");
} else {
$(".createmenu").toggle("fast");
});
(So if the search menu is open, close it and open the create menu but if it's not open, just open the create menu).
I'm not sure if the :visible function applies if I've used $("div").hide() rather than display:none in the css?
Any help on this will be massively appreciated - even a suggestion for another suitable method such as possible jquery accordion etc.?
Thanks alot

Try this please:
HTML:
<div class="actionsmenu" id="actionsmenu">
<div id="navmenu">
<ul id="navmenu">
<li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
<li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
<li><a href='#' class="tog" data-id="settingsmenu" id='showsettings'>Settings</a></li>
<li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
<ul>
</div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">
JS:
$(document).ready(function () {
$(".menu").hide();
$(".tog").click(function () {
$(".menu").hide();
$("." + $(this).data('id')).toggle("fast");
});
});
FIDDLE:
http://jsfiddle.net/CR5FB/14/
EDIT:
You have to use some common class for your links and divs if you want to assign them to the same event.
There is you can find better solution as for me: http://jsfiddle.net/CR5FB/19/

Here is a JS fiddle: http://jsfiddle.net/7nGYE/
What you need to do is keep track of the active menu with a CSS class, so when another menu is clicked, you toggle the active menu, remove it as active, then set the new menu as the active div.
In particular, on any menu item click:
$('ul#navmenu a').click(function() {
$('div.active').removeClass('active').toggle('fast');
});
Hide the active menu. Then, on a particular menu item click:
$("#showcreate").click(function () {
$(".createmenu").toggle("fast").addClass('active');
});
add the 'active' CSS class to keep track of it.

jquery drop down menu is not behaving properly

I have the following jquery code for my drop down menu:
var active = 0;
$(document).ready(function(){
jQuery("#dropmenu ul").css({display:"none"});
// For 1 Level
jQuery("#dropmenu li:has(ul) a").append('');
jQuery("#dropmenu li ul a span").text('');
// For 2 Level
jQuery("#dropmenu li ul li:has(ul) a").append('');
jQuery("#dropmenu li ul li ul a span").text('');
jQuery("#dropmenu li").hover(function(){
if(active != 1){
jQuery($('.active').parent()).find("ul:first").css('display', 'none');
jQuery(this).find("ul:first").fadeIn('fast');
active = 1;
}
},
function(){
jQuery(this).find("ul:first").fadeOut('fast');
jQuery($('.active').parent()).find("ul:first").fadeIn('fast');
active = 0;
}); });
//ACTIVATE
$(document).ready(function(){
jQuery($('.active').parent()).find("ul:first").css('display', 'block');
});
What the code is suppose to do is check and see which element has an active class and show it when the page loads.
The HTML looks something like this:
<ul id="dropmenu">
<li><a class="active" href="index.php">home</a>
<ul>
<li>Euro 2012</li>
<li>FIA Cup</li>
<li>Previous Events</li>
<li>Event 2012-2013</li>
<li class="last">Pre Season</li>
</ul>
</li>
<li><a href="#" >home</a></li>
<li>blabl</li>
<li>dropdown
<ul>
<li>Euro 2012</li>
<li>FIA Cup</li>
<li>Previous Events</li>
<li>Event 2012-2013</li>
<li class="last">Pre Season</li>
</ul>
</li>
<!-- ... -->
</ul>
right now when the page loads the default drop down is shown however once you hover over other menu items if they dont have a drop down menu it shows the default one and hides, and if you quickly go over the the menu item it will keep repeating the animation. How can I avoid the repetition of the animation and how can I avoid showing the default menu when the menu is empty?

I say scrap this and look for scripts that do that, there are plenty if you just take the time to google, here is a useful link :
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus
I personally use this plugin to make dropdown menus:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
You can do a lot with this plugin with a little help of html and css to make a row of dropdown menus... The plugin uses jQuery and jQuery UI for the design, you can custom it however you want, here is the link to the jQueryUI website if you haven't been there: http://www.jqueryui.com/themeroller

if mouse on hover of div then display menu

I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the "div".
Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.
my example

Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});

Make it a child of the <div>, then it won't cancel the event when you leave it.
Also I should note that it's more semantic to make a navigation out of nested lists (such as
Category ItemItem
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>

I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.

http://jsfiddle.net/dttdB/13/
You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.