Develop Reference

Each function triggers only once

I'm trying to triggers a function on several owl-carousel sliders having the same class. If i do a console.log, it logs twice, but works only on the first slider.
Here's my function:
function setActiveItem(){
var item = $('.owl-item');
var itemLink = $('.owl-item a');
var pos = $('.is-active').parent().parent().index();
$('.slider-mobile').each(function() {
if($(this).find(itemLink).is('.is-active')) {
item.removeClass('active');
$(this).trigger('to.owl.carousel', [pos, 1, true]);
}
})
}
setActiveItem();
And here's a simplified version of my markup:
<ul class="list-container slider-mobile" data-stage-padding-items="200">
<li class="list-item">
item
</li>
</ul>
<ul class="slider-mobile" data-stage-padding-items="200">
<li class="list-item">
item
</li>
</ul>
I'm not sure if i'm using the each() function right, or if it fits my need at all.

Ok i figured it out.
#Reinder Wit you were right i was referencing the item of the first slider only, so both of my sliders were getting the same datas.
I did this:
function setActiveItem(){
$('.slider-mobile').each(function() {
var item = $(this).find('.owl-item');
var itemLink = $(this).find('.owl-item a');
var pos = $(this).find('.is-active').parent().parent().index();
if($(this).find(itemLink).is('.is-active')) {
item.removeClass('active');
$(this).trigger('to.owl.carousel', [pos, 1, true]);
console.log(pos);
}
})
}
setActiveItem();
And it is working now. Thanks for the clue.

You should activate your listener in the document ready like this:
$(document).ready(function(){
setActiveItem();
});

Menu active current page

I'm using Bootstrap (AdminLTE) and I want to make the current page's menu item active.
Problem is, I don't know how to do it.
I do have a few solutions in mind (besides changing it in every php file), like putting an IF statement for every link, which would be a terrible solution (I think).
<ul class="sidebar-menu">
<li class="header">HOOFD MENU</li>
<li class='treeview'>
<a href='#'>
<i class='fa fa-dashboard'></i> <span>Dashboard</span>
<span class='pull-right-container'>
<i class='fa fa-angle-left pull-right'></i>
</span>
</a>
<ul class='treeview-menu'>
<li><a href='account.php'><i class='fa fa-circle-o'></i>Account</a></li>
</ul>
</li>
</ul>
The above is part of the menu.
So the menu item (in this case Dashboard) and sub-menu item both have to become active.
Thanks in advance!

Try this. This was copied from other bootstrap admin template and modified for AdminLTE
<script>
$(document).ready(function() {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
if (element.is('li')) {
element.addClass('active').parent().parent('li').addClass('active')
}
});
</script>

This solution work with sublevel menu. Need JQuery
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function () {
return this.href == url || url.href.indexOf(this.href) == 0;
});
$(element).parentsUntil('ul.sidebar-menu', 'li').addClass('active');
});
</script>

In one simple line:
$("ul.sidebar-menu li a[href='"+document.location.pathname+"']").parents('li').addClass('active');

So you should always check to make sure the element exists so you don't get any errors and you can user jQuery's data attribute selector to easily target the correct links.
var href = window.location.pathname;
if( $(".sidebar-menu a[href='"+href+"']").length ) {
$(".sidebar-menu a[href='"+href+"']").parent('li').addClass('active');
}
If you are using absolute urls you may need to switch from .pathname to .href in the var

Add Active Class for any URL match to first segment?

My Javascript is adding the active class to all links with one segment that match my path variable, but not ones with two on my nav.
I want it regardless to check the first segment of any URL that is currently in the window.location.pathname and if the first segment matches then add the active class to the nav item.
It works for home, products and gallery. But when I console.log(linkPath) it's showing for the url products/samples the text sample and not products. Thus there is no math and it will not add the active class to the current item.
How Can I get it to add the active class no matter what based off the first segment matching within any url with more than one segment?
HTML
<nav class="navbar" role="navigation">
<h2 class="markup">Main Navigation</h2>
<div class="collapse navbar-collapse main-nav-list navbar-link-background">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Products
</li>
<li>Gallery
</li>
<li>Promotions
</li>
<li>Samples
</li>
</ul>
</div>
</nav>
Javascript
var url = window.location.pathname.split( '/' ),
path = url[1];
/* Get URL For Setting Active Nav List Item */
$(".navbar-nav").children("li").each(function() {
var link = $(this).children("a").attr("href"),
linkPathIndex = link.lastIndexOf("/")+1,
linkPath = link.substring(linkPathIndex);
if (linkPath == path) {
$(this).addClass("active");
}
});

Why dont you check for the pathname directly in the link href? something like this:
$(".navbar-nav").children("li").each(function() {
var link = $(this).children("a").attr("href");
if(link.indexOf(path) > -1){
$(this).addClass("active");
return;
}
});

This is what I use:
this.win.on(events.load, function() {
var anchors = self.list.prev().find(cache.anchor),
url = document.URL;
$.each(anchors, function() {
var anchor = $(this),
href = anchor.prop('href');
if (url.indexOf(href) !== -1) {
anchor.addClass(classes.active);
}
});
});

Programmatically adding nav bar element in jQuery Mobile

I can create a 2 item nav bar in a jQuery mobile page with the following code snippet:
<div id="nav-bar" data-role="navbar">
<ul id="nav-list">
<li><a id="link1" href="#">Nav 1</a></li>
<li><a id="link2" href="#">Nav 2</a></li>
</ul>
</div>
I am attempting to programatically add a third nav bar element using various versions of the following code:
$("#nav-list").append("<li><a id='newElement' href='link3'>Nav 3</a></li>");
$("#nav-bar").navbar();
//$("#pageName").page();
//$("#pageName").trigger("create");
//$("#nav-list").listview("refresh");
When I execute this I see the "Nav 3" link appear but it does not take on the jQuery mobile formatting of the other links.
Any help would be greatly appreciated.

You should append your HTML in a pagebeforecreate handler before JQM's enhancement starts.

I had lost my mind because of this problem. .navbar() used to work in previous versions, for some reason not any more.
I have made a function whose job is to add a new element and then rebuild navbar. One part of it is taken from someone else so I cant take full responsibility for this code (mathod used for style stripping).
Here's working example: http://jsfiddle.net/Gajotres/V6nHp/
And here's a method used:
var navbarHandler = {
addNewNavBarElement:function(navBarID, newElementID, newElementText) {
var navbar = $("#" + navBarID);
var li = $("<li></li>");
var a = $("<a></a>");
a.attr("id", newElementID).text(newElementText);
li.append(a);
navbar = navbarHandler.clearNavBarStyle(navbar);
navbar.navbar("destroy");
li.appendTo($("#" + navBarID + " ul"));
navbar.navbar();
},
clearNavBarStyle:function(navbar){
navbar.find("*").andSelf().each(function(){
$(this).removeClass(function(i, cn){
var matches = cn.match (/ui-[\w\-]+/g) || [];
return (matches.join (' '));
});
if ($(this).attr("class") == "") {
$(this).removeAttr("class");
}
});
return navbar;
}
}

javascript prototype problem

So I have a rather basic javascript problem which I have been slamming my head into a wall over for awhile:
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<script>
function toggle_item( num ){
$$( 'li.group_' + num ).invoke('toggle');
}
</script>
Basically, I need to create a sweeper that sets the div to display:none if all the li are display:none.
I think it would start like:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
Any suggestions for good tutorials would be welcome as well

Something like this might get you started. You'll need to iterate through the children and check if they're visible. If any of them aren't, set a flag and break from the loop. If the flag is false then you don't need to hide the div.
function sweep(){
$$('div.alist').each( function( s ) {
var shouldHide = true;
var children = s.down().childElements();
children.each(function(li) {
if(li.visible()) {
shouldHide = false;
throw $break;
}
});
if(shouldHide) {
s.hide();
}
});
}

You could use the select() method of Element to find all li descendants. And run a method Array.all for each li and check if all return true. Hide the div if all return true.
function sweep() {
// check each div
$$('div.alist').each(function(element) {
var listItems = element.select('li');
// are the list items of this div hidden?
var listItemsHidden = listItems.all(function(item) {
return item.visible();
});
// hide the div too if so
if(listIemsHidden) {
element.hide();
}
});
}
This code is untested.

This is jQuery solution (Prototype must be something similar):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});