We Keep Coding

How to remove the link from all parent elements and clone them as a child elements

Because mobile devices do not have a hover state, I am trying to remove the links on the first il elements every time these have children, and clone them as children of themselves (with link).
<ul id="menu-header-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children">Portfolio
<ul class="sub-menu">
<li>Painting</li>
<li>Video</li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li>About</li>
</ul>
And I want to do the same in the footer menu:
<ul id="menu-footer-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children">Links
<ul class="sub-menu">
<li>Documents</li>
<li>Extra</li>
<li>Photos</li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li>Contact</li>
</ul>
I am generating this html structure through php on a WordPress website so I am trying to avoid element ID's.
I am trying this jQuery script, but it clones both li onto both menus (header and footer) so I end up with two clones of each, one in each menu.
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
}
Could give me a hand?

Ok, got it. I just needed to target the right place to append the cloned li.
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-footer-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-header-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
}

Navbar using js. Link not working

I have download a navigation bar template and struggling to make it work as I want it to. When a heading is clicked it opens a sub menu to have further links. I do not want all headings to open the sub menu, I want some to just be a link I.E home.
When home is clicked it just highlights home as if opening the submenu and doesnt go to the link. I think this is a js issue.
Below is the html:
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Home
<li>
Club Information
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>About the Club</h4>
<ul>
<li>About IDMC</li>
<li>Where to Find Us</li>
<li>What We Do</li>
</ul>
<h4>Contacting Us</h4>
<ul>
<li>General Information</li>
</ul>
</div></div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
I believe this is the js causing the issue but not sure what to change:
var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("click",a);b.on("click",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("click").on("click",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();

You want to exclude the items that are just links, not dropdowns. So, add a class of link to the links that have no sub-items. Home
Then change the Javascript to look like this: The code should then not run on the links with a class of link.
var cbpHorizontalMenu=(function(){
var b=$("#cbp-hrmenu > ul > li"), g=b.children("a").not($('.link')), c=$("body"), d=-1;
function f(){
g.on("click",a);
b.on("click", function(h){
h.stopPropagation();
})
}
function a(j){
if(d!==-1){
b.eq(d).removeClass("cbp-hropen");
}
var i=$(j.currentTarget).parent("li"), h=i.index();
if(d===h){
i.removeClass("cbp-hropen");
d=-1
}else{
i.addClass("cbp-hropen");
d=h;
c.off("click").on("click",e);
}
return false
}
function e(h){
b.eq(d).removeClass("cbp-hropen");
d=-1
}
return {init:f}
})();

Use list instead of option for dropdown select

I need to be able to change the style of a page based on a dropdown list. I have a dropdown form as an option list, and using JS that are currently selecting from CSS on the page. This needs to apply a separate stylesheet (style1.css, style2.css, etc) on click/change of the dropdown based on the dropdown list item, instead of the option select.
HTML
Option select
<div class="et-select-wrapper">
<div class="et-select-wrapper" style="margin:0">
<select id="styleSwitcher">
<option value="default">Default</option>
<option value="option2">Option2</option>
</select>
</div>
</div>
List Items -
NEEDS TO WORK WITH LIST ITEM (BELOW) INSTEAD OF THE ABOVE OPTION
LIST ITEMS
<button class="et-icon-down-arrow" data-toggle="dropdown"><span class="caret">
</span> Page Style</button>
<ul class="dropdown-menu" role="menu" id="styleSwitcher">
<li>Default</li>
<li>WCAG</li>
</ul>
JavaScript
window.onload = function() {
function addEvent(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
}
obj.attachEvent('on' + type, obj[type + fn]);
} else obj.addEventListener(type, fn, false);
}
function switchStyles() {
var selectedOption = this.options[this.selectedIndex],
className = selectedOption.value;
document.body.className = className;
}
var styleSwitcher = document.getElementById("styleSwitcher");
addEvent(styleSwitcher, "change", switchStyles);
}
===========================================================================
SOLUTION
I found the solution for what I needed here: http://test.unintentionallyblank.co.uk/switcher.html
By applying the function setStyleSheet to the li item in the dropdown like so:
<a data-toggle="dropdown"><button class="et-icon-eye"> Style Selector</button>
<ul class="dropdown-menu" role="menu">
<li>Arial</li>
<li>Open Sans</li>
</ul>
and using the javascript from here:
http://test.unintentionallyblank.co.uk/switcherpart1.js
which selects from a list of external stylesheets on the page, I'm able to change the pages style on select from the li list.

Your style switcher (UL) doesn't have a "change" event, it doesn't change when you click things - it's a LIST, not a form control. It's a static element on your page, like a text or something. Bind your switchStyle() on "click" event of LI-s, instead.
Also, consider jQuery. It saves you a lot of work around the events:
$("li").on("click",switchStyles);
UPDATE
I've created a minimal demo of how you can react on LI clicks:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<body>
<ul>
<li> Style 1 </li>
<li> Style 2 </li>
<li> Style 3 </li>
<li> Style 4 </li>
<li> Style 5 </li>
</ul>
<div class="colorMe">
<br><br><br>
</div>
<script>
function styleSwitcher(x) {
var colors = ["blue","green","red","purple","orange"];
$(".colorMe").css("background-color",colors[--x]);
}
$("li > a").on("click",function() {
var n = $(this).data("value");
styleSwitcher(n);
});
</script>
</body>
</html>
(Also a Fiddle for this)
Now you can apply your own method of switching styles.
UPDATE II
Here's another version with changing stylesheets:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<link id="customStyle" rel="stylesheet" href="theme.peace.css">
<body>
<ul>
<li> Ocean Blue Theme </li>
<li> Dark Theme </li>
<li> Flaming Red Theme </li>
<li> Peaceful Nature Theme </li>
<li> Steampunk Theme </li>
</ul>
<div class="colorMe">
<br><br><br>
</div>
<script>
function styleSwitcher(t) {
var cssName = "theme."+t+".css";
document.getElementById("customStyle").setAttribute("href",cssName);
}
$("li > a").on("click",function() {
var theme = $(this).data("value");
styleSwitcher(theme);
});
</script>
</body>
</html>
Make sure you have to properly named css files (like theme.ocean.css) in the proper directory - or update the name composition part if you have them somewhere else.

How to make only previous process bar clickable using jquery

I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks

Problem with add/remove class in jquery

I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)

You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)

you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element