I'm working on a site that works as expected in Chrome but opening it in Internet Explorer a see that the navigation menu is out of place.
Investigating the problem a saw that not all the list items are wrapped inside the main ul and 2 list items do not have the correct class.
The one with the problem:
The correct one:
My project is made using ASP.NET MVC 4 and Umbraco CMS. The menu View looks like this:
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
<li>
#foreach (var sub in subMenuItems)
{
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<li><a class="parent" href="#sub.Url">#sub.Name</a></li>}
}
</li>
</ul>
}
</li>
}
</ul>
This works fine in Chrome, and cant seem to find the problem for IE.
You should have a new list item for each submenu rather than wrapping all the submenus in one list item (or otherwise nesting list items without separating them into proper nested lists with a ul wrapper).
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
#foreach (var sub in subMenuItems)
{
<li>
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<a class="parent" href="#sub.Url">#sub.Name</a>}
</li>
}
</ul>
}
</li>
}
</ul>
Related
Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>
I have a basic HTML list like below...
<ul class="test_ul">
<li class="item" id="item1">
Item 1
</li>
<li class="item" id="item2">
Item 2
</li>
<li class="item" id="item3">
Item 3
</li>
<li class="item" id="item4">
Item 4
</li>
</ul>
I am using javascript to try and grab the id of each list item and then use a loop to check each one against a string. I have this so far..
var myvariable
myvariable = "item2"
items = document.getElementsByClassName("item");
for (i = 0; i < items.length; i++) {
console.log(i);
console.log(item[i]);
}
This isn't working for me, is it because it is not really an array?
You're logging the index i, instead, use items[i].id to get the id of the matched element. Something like this
var items = document.getElementsByClassName("item");
for (i = 0; i < items.length; i++) {
console.log(items[i].id);
}
<ul class="test_ul">
<li class="item" id="item1">
Item 1
</li>
<li class="item" id="item2">
Item 2
</li>
<li class="item" id="item3">
Item 3
</li>
<li class="item" id="item4">
Item 4
</li>
</ul>
You could borrow Array#map for an array like object and return just the id property of the objects.
var result = [].map.call(document.getElementsByClassName("item"), function(o) {
return o.id;
});
console.log(result);
<ul class="test_ul">
<li class="item" id="item1">Item 1</li>
<li class="item" id="item2">Item 2</li>
<li class="item" id="item3">Item 3</li>
<li class="item" id="item4">Item 4</li>
</ul>
My understanding is, you want to loop through this list of items and find a match of the item based on a specified string.
What you've done so far with the classes is good. This will allow you to reference all the list items, but there isn't really a need for the IDs based on what I think it is that you're trying to do.
If I were you, I would utilize a querySelectorAll, which returns an iterable array of HTML nodes that we can do whatever we want with.
Here's my code.
let listItemArray = document.querySelectorAll('.item');
console.log(listItemArray);
const SEARCH_STRING = 'Item 1'
for(let i=0; i<listItemArray.length; i++) {
if(listItemArray[i].innerText === SEARCH_STRING) {
console.log(`The item was found! ${listItemArray[i]}`); // This syntax is called a query string. Powerful stuff. Look them up.
}
}
<ul class="test_ul">
<li class="item" id="item1">
Item 1
</li>
<li class="item" id="item2">
Item 2
</li>
<li class="item" id="item3">
Item 3
</li>
<li class="item" id="item4">
Item 4
</li>
</ul>
Add ID ="lstUsers" to ul element < you're registered with DOM now
for (var i = 0; i < lstUsers.children.length; i++) {
alert( lstUsers.children[i].innerText);
}
#lstUsers <--css with your id you shrink your HTML down this way...
While all of the answers here are equally good, and this qs is old(2017)
I am posting this for knowledge sharing
We can use:
items = document.querySelectorAll(".item");//Get items
items.forEach(function(item) {
console.log(item);/*Use variable item for any need*/
});
If you need the index of item as well then use
items = document.querySelectorAll(".item");//Get items
items.forEach(function(item,index) {
console.log(item, index);/*Use variable item & index for any need*/
});
The best of this is that it doesn't need any loop or extra variable like i. Also, it do not make use of a loop like for or while, but a function like forEach(), where forEach is a human-readable word
Note: forEach() cannot be used with getElementsByClassName() ,it supports only querySelectorAll()
Working snippet:
items = document.querySelectorAll(".item");//Get items
items.forEach(function(item) {
console.log(item);/*Use variable item for any need*/
});
console.log("The below log is with index");
items = document.querySelectorAll(".item");//Get items
items.forEach(function(item,n) {
console.log(n,item);/*Use variable item for any need*/
});
<ul class="test_ul">
<li class="item" id="item1">Item 1</li>
<li class="item" id="item2">Item 2</li>
<li class="item" id="item3">Item 3</li>
<li class="item" id="item4">Item 4</li>
</ul>
Using ES6 (might need to transpile or add polyfills for older browsers):
// Get the DOMCollection of node corresponding to the item class
var items = document.getElementsByClassName("item")
// Transform the DOMCollection to an array and map item.id
, ids = Array.from(items).map(item => item.id);
;
console.log(ids);
<ul class="test_ul">
<li class="item" id="item1">
Item 1
</li>
<li class="item" id="item2">
Item 2
</li>
<li class="item" id="item3">
Item 3
</li>
<li class="item" id="item4">
Item 4
</li>
</ul>
Using ES5 only:
var items = document.getElementsByClassName("item")
, ids = []
;
for(var i = 0, c = items.length; i<c; i++) {
ids.push(items[i].id);
}
console.log(ids);
<ul class="test_ul">
<li class="item" id="item1">
Item 1
</li>
<li class="item" id="item2">
Item 2
</li>
<li class="item" id="item3">
Item 3
</li>
<li class="item" id="item4">
Item 4
</li>
</ul>
My Javascript
var selectmenu = function(index, sub){
$('.main-navigation-menu li:nth-child('+index+')').addclass('active');
}
In my view there are two li tags to select main menu and sub menu; so because of the above JS, it is always selecting a 1st main menu and the 1st sub menu; even when clicking the 2nd sub menu of the 1st main menu... anyone knows how to correct this behavior? Here I wanted to use the 'sub' variable and do something like this:
$('.sub-menu li:nth-child('+index+')').removeClass('active');
$('.sub-menu li:nth-child('+sub+')').addClass('active');
HTML
<ul class="main-navigation-menu ">
#foreach (var menu in mainmenu) {
var sublist = userContext.Menus.Where(m => m.Id == menu.Id);
if (sublist.Count == 0){
<li class="active open">
<a href="#Url.Content(menu.MenuUrl)">
<span class="title"> #menu.Name </span>
<span class="selected"></span>
</a>
</li>
}
else {
<li class="main-menu-selection">
<a href="#menu.MenuUrl">
<span class="title">#menu.Name</span>
<i class="fa fa-chevron-down pull-right"></i>
<span class="selected"></span>
</a>
#if (sublist.Count > 0) {
<ul class="sub-menu">
#foreach (var sub in sublist) {
<li class="sub-menu-selection">
<a href="#Url.Content(sub.MenuUrl)">
<span class="title"> #sub.Name </span>
</a>
</li>
}
</ul>
}
</li>
}
count++;
}
</ul>
Try using stopPropagation:
$('.main-navigation-menu').on('click', '.sub-menu-selection', function(e){
var index;
e.stopPropagation();
$('.min-navigation-menu .active').removeClass('active');
$(e.currentTarget).addClass('active');
});
More info here
I have html code:
<ul class="tabs clearfix" style="margin:0px 5px;">
<li class="" id="menu" class="active">
Menu
</li>
<li id="list">
List
</li>
</ul>
li elements are my tab that controlled by bootstrap.min.js.
Now I want change active tab with javascript:
function backBtn()
{
var x = document.getElementById('list').className;
if(x == 'active')
{
$("#list").removeClass('active');
$("#menu").addClass('active');
}
else
{
alert('Exit');
}
}
Therefore I wrote this code to change it and it works
but when I change it I could not see active tab content.
Here is my code :
<ul>
<li class="active">
<div class="course_video_heading"><span class="minus"></span> Introduction <div class="course_duration" align="right">1m 21s</div></div>
<ul>
<li class="course_video viewed">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Warm up <div class="course_duration" align="right">1h 15m</div></div>
<ul>
<li class="course_video viewed current">
Roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Roll down with demi pointe variation <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video" data-file="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-image="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">
Side roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Side roll down variation with contraction <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Class exercise <div class="course_duration" align="right">57s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Brushes <div class="course_duration" align="right">1h 5m</div></div>
<ul>
<li class="course_video">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
</ul>
My requirement : There is a element, <li class="course_video viewed current">, I need the previous li which has course_video class. In this case it would be :
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
What have I tried :
$(".current").prev(".course_video")
This is not working as it is in different li
Note : It is not the duplicate of following questions :)
jQuery to find nearest Div of Parent
Getting next closest select element with jquery
jquery find closest previous sibling with class
Try this : read the index of current li and if it is 0 then find the previous li of its parent li and then find the course_video. And if index is not 0, then find previous li using prev()
var index = $(".current").index();
if(index==0)
{
var previousLi = $(".current").closest('li').prev('li').find("li.course_video:last");
}
else
{
var previousLi = $(".current").prev(".course_video");
}
var vindex;
$().ready(function () {
$("li .course_video").each(function (index) {
if ($(this).hasClass('current')) {
vindex = index;
}
});
$("li .course_video").each(function (index) {
if (index == vindex - 1) {
alert($(this)[0].outerHTML);
}
});
});
this code will help you.
$('.current').parents('li').prev().find('li:last')
Here's the jsFiddle
You can do it easily with a function that checks the index of the item: if the index is 0 then you'll select the last li in the previous ul.
Element.prototype.previousLi = function() {
var i = $(this).index(),
n = this.parentElement.previousSibling.children.length;
if (i) return this.parentElement.children[i-1];
else return this.parentElement.previousSibling.children[n-1];
}
Then you can do:
var el = $(".course_video.viewed.current")[0];
var previous = el.previousLi();
Try this code , it will give you the desired result :
<script>
var currentLI = $("li.current");
prevLi=$(currentLI).parent('ul').parent('li').prev('li').find('li.viewed:last');
alert($(prevLi).html());
</script>