In the main navigation there are some links including a#estimate
mainNav = document.getElementById('mainNavigation');
subNav = document.getElementById('subNavigation');
This is subnavigation for a#estimate
estimateSubNav = '<li>Create new</li>';
All I need to do is check what ID has current link...
currSectionId = $(mainNav).find('a.current').attr('id');
...and on this basis append to unordered subnav list prepared string
$(subNav).append(currSectionId+'SubNav');
So in "the estimate" case, the sub navigation should look like
<ul id="subNavigation">
<li>Create new</li>
</ul>
At this moment it shows me just estimateSubNav, like you can read it
<ul id="subNavigation">
estimateSubNav
</ul>
What I'm doing wrong? Any help is appreciated.
EDIT:
http://jsfiddle.net/8sHnC/3/
I am not sure whether this is what you are trying to do
var mainNav = document.getElementById('mainNavigation');
var subNav = document.getElementById('subNavigation');
var estimateSubNav = '<li>Create new</li>';
var currSectionElement = $(mainNav).find('a.current')[0];
var newElement=$(currSectionElement).clone().attr("id",currSectionElement.id+"subNav");
$(subNav).append(newElement);
Based on your Fiddle, Updated DEMO
i hope this will solve your problem
var li = $("<li/>").attr("href","?s="+currSectionId+"&p=create");
$(subNav).append(li);
Related
I am trying to create a menu system where I can change the style of the active page item in the menu. I am using a separate body class on each page, then I want to cycle through the li in the menu and find a match to the body class. At that match I will add the new styling to that menu item.
Here is my code so far.
HTML
<body class="home-state">
...
<div class="menu-left">
<ul>
<li class="home-state">
Home
</li>
<li class="work-state">
Work
</li>
<li class="services-state">
Services
</li>
<li class="about-state">
About
</li>
<li class="blog-state">
Blog
</li>
<li class="shop-state">
Shop
</li>
<li class="contact-state">
<a data-toggle="modal" href="#modal-coworking">Contact</a>
</li>
<li class="project-state">
Project brief
</li>
</ul>
</div>
...
</body>
JS
var bodyClass = $("body").attr('class');
$('.menu-left ul li').each(function(){
First: I want to find the element's class here I have used $(this).attr("class"); which didn't work
var element = $(this);
Second: I want to use a if statement to check to see if the class matches the bodyClass
console.log(element);
Last: If there is a match I want to add the class .active to the element li.
});
Given that elements can have multiple classes, I'd suggesting changing your body element to use a data- attribute rather than a class to specify what the current page is:
<body data-current="home-state">
Then the JS needed to add the active class to the relevant menu item is simple:
$("li." + $("body").attr("data-current")).addClass("active")
You don't need to loop over the menu items comparing classes as mentioned in the question, because you can just directly select the required li element based on its class.
In the event that the body element doesn't have a data-current attribute then $("body").attr("data-current") would return undefined, which would mean the code above tries to select an element with $("li.undefined") and add a class to it. Probably you have no elements with such a class so that would be harmless, but if you wanted to explicitly test that the data-current attribute exists:
var current = $("body").attr("data-current")
if (current) {
$("li." + current).addClass("active")
}
You can do this in couple ways, here is the simple way to do this;
var bodyClass = $("body").attr('class');
$("li." + bodyClass).addClass("active")
You can also use a loop for this one;
var bodyClass = $("body").attr('class');
$(".menu-left li").each(function(i, classes) {
if (bodyClass === $(this).attr("class")) {
$(this).addClass("active")
}
})
both will do the job.
enter image description here
enter image description here
as the comment said,the element can have more than one class ,so you should check it one by one
You missed to bind the click event for the menu item. Follow like below
var bodyClass = $("body").attr('class');
$('.menu-left ul li').on( "click", function() {
var myClass = $(this).attr("class");
alert(myClass);
});
Tested: https://codepen.io/anon/pen/XzYjGY
I have something like this:
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>
And I wonder if there is possible to move the list number 3, to the place of the list number 1 using javascript or jquery, like this:
<ul>
<li id="li3">3</li>
<li id="li2">2</li>
<li id="li1">1</li>
</ul>
Thanks for you time!
No jQuery solution :
var list = document.getElementsByTagName('ul')[0],
items = list.getElementsByTagName('li'),
i = items.length;
while (i--) list.appendChild(items[i]);
Here is a demo : http://jsfiddle.net/wared/tJaJ9/.
Based on cookie monster's suggestion :
var list = document.getElementsByTagName('ul')[0],
i = list.children.length;
while (i--) list.appendChild(list.children[i]);
Just for fun :
var list = document.getElementsByTagName('ul')[0],
items = Array.prototype.slice.call(list.children);
while (items.length) list.appendChild(items.pop());
A jQuery one :
$('ul').append($('li').get().reverse());
You can use ajax sortable jquery plugin. One of my recommendation tutorial is Sortable Lists Using jQuery UI .
Here user can re-order list using cursor pointer.
This should do the trick for you.
var length = $('ul li').length;
while (length--) $('ul').append($('ul li')[length]);
Here is a working jsfiddle
I have a list that is kind of like this:
<li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;">one</li>
<li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;">two</li>
<li class="listElement semiUniqueCLassOne" unique-class="semiUniqueCLassOne" style="display:none;">three</li>
<li class="listElement semiUniqueCLassTwo" unique-class="semiUniqueCLassTwo" style="display:none;">four</li>
<li class="listElement semiUniqueCLassTwo" unique-class="semiUniqueCLassTwo" style="display:none;">five</li>
<li class="listElement semiUniqueCLassThree" unique-class="semiUniqueCLassThree" style="display:none;">six</li>
I'm trying to only show the first of each of the semiUniqueCLass so I'm attempting to do it like this:
$('.listElement').each(function(){
var uniqueClass = $(this).attr('unique-class');
if($('.'+uniqueClass).is(':first')){
$(this).show();
}
});
this doesn't work... what ways can I make it work? tried several, a bit stuck.
This should do the trick:
$('.listElement').hide();
$('.listElement:first-child').show();
If there's more elements with the listElement class:
$('.listElement[#class*=semiUniqueCLass]').hide();
$('.listElement[#class*=semiUniqueCLass]:first-child').show();
(Only shows / hides listElements that have a class that contains semiUniqueCLass)
To show the first of each unique semiUniqueCLass* item, take a look at Jack's Answer or xdazz's answer.
Just use the .first() method.
$('.listElement').each(function(){
var uniqueClass = $(this).attr('unique-class');
$('.'+uniqueClass).first().show();
});
And the working demo.
Another solution is shown as below:
var clazzs = $('.listElement').map(function() {
return $(this).attr('unique-class');
});
$.unique(clazzs).each(function() {
$('.'+this).first().show();
});
Also the working demo.
To show the first of each unique semiUniqueCLass* item, you'd have to iterate over all relevant .listElement nodes manually:
var shown = {}; // keep track of which class has already been shown
$('.listElement[unique-class]').each(function() {
var className = this.getAttribute('unique-class');
if (!shown[className]) {
// this class has not been seen before, show the first only
shown[className] = true;
$(this).show();
}
});
It shows elements one, four and six.
Update
I've pitted this answer against the two solutions by xdazz using this jsperf benchmark. This answer comes out on top with the runner up being ~30% slower (in Chrome).
This code shows the first item :
$('[class^=listElement]').first().show();
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;
}
}
I am trying to replace having to create a sub list and instead I want to add the div's via javascript / jquery.
Here is what I have:
<script>
function makepage() {
var myvariable1="myTitle";
var newPage = $("<div>'+myvariable1+'</div");
//appendTo here?
</script>
...
Then the list:
<ul>
<li>
Click Here
</li>
</ul>
The reason code creating it dynamically is that I want to pass some variables to it internally and I don't want to use a form / post etc...
How can I make newPage appear when I click myid link?
Simply make sure you use the quotes you started with and append to body or what element do you want:
<script>
function makepage() {
var myvariable1="myTitle";
var newPage = $("<div>"+myvariable1+"</div>");
$("body").append(newPage);
}
</script>
Instead of making a specific function and using in-line delegations, try the following:
<ul>
<li>
Click Here
</li>
</ul>
$('#myid').click(function() {
var myvariable1 = "myTitle";
var newPage = $("<div>"+myvariable1+"</div>");
$('body').append(newPage);
});
DEMO