Is there any way to do this:
<h1>Topology</h1>
<ul><li> Parent Directory</li>
<li> File1.mp4</li>
<li> File2.mp4</li>
<li> File3.mp4</li>
<li> File4.mp4</li>
<li> File5.mp4</li>
<li> File6.mp4</li>
<li> File7.mp4</li>
<li> File8.mp4</li>
<li> File9.mp4</li>
<li> File10.mp4</li>
</ul>
JSFiddle: https://jsfiddle.net/wagyox71/
Is there any way to do this without listing every single file separately?
You can do this with JavaScript.
Create a div for the list, then use a script and an array to populate the div.
The div: <div id="myLinks"></div>
var links = [' Parent Directory', ' File1.mp4', 'File2.mp4', 'etc'];
var ul = document.createElement('ul');
document.getElementById('myLinks').appendChild(ul);
links.forEach(function(name){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += name;
});
You can manually populate the links array, or do it dynamically from a directory on the site via some other call.
Related
I need to take the text "UNIT01". How I can do this using JQuery or JS?
`<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>`
$( document ).ready(function() {
var txt = $('.choices li:first-child>div').text()
console.log( txt );});
This code will access the text inside that div by accessing the div through its parent elements.
var unit = document.getElementById("unit");
var list = unit.getElementsByTagName("ul")[0];
var items = list.getElementsByTagName("li")[0];
var div = items.getElementsByTagName("div")[0];
var text = div.innerHTML;
alert(text);
<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
I want to create tab dynamically with iterative for each as bellow, but its creating space like tab-btn 1, tab-btn 2. How to iterate for class name.
<li>
View Document - 01
</li>
<li>
View Document - 02
</li>
<li>
View Document - 03
</li>
<li>
View Document - 04
</li>
I have created for loop as bellow,
#{int i = 0;}
#foreach (System.Data.DataRow item in ds.Tables[0].Rows)
{
<li>
#item["M36_01_TypeName"]
</li>
i++;
}
I have also tried as suggest in excepted answer of Razor - using foreach, insert html every nth item but its also not working.
You could use string.Format()
<a href="javascript:void(0);" class=#string.Format("tab-btn{0}", i)>#item["M36_01_TypeName"]</a>
i am Editing an HTML template that has Navbar at top. i am able to edit the navbar items to the items in database but i am unable to change the Number of Items in Navbar menu because that coding is hardcoded in HTML. i want to create Categories in Database and show these in Navbar. these categories are not specific.
coding for Navbar item in HTML is
<li class="active">Home</li>
<li>
Sliders
<ul>
<li>Basic Slider</li>
<li>Right Info Slider</li>
<li>Nivo Slider</li>
<li>Accordion Slider</li>
<li>Thumbnail Slider</li>
</ul>
</li>
these are 5 items in list and these are hardcoded in HTML. when i use database for this purpose my need is that i want all the database items in this Navbar no matter 5,6 or else.
please suggest me what to do
I assume you get data from database in a datatable. Loop through table and create sublist and append in the item you want.
You will need to set id of the li in which a sublist will appear
<li id="liDynamic" runat="server">
And Code to add a sublist in this li
HtmlGenericControl ul = new HtmlGenericControl("ul");
liDynamic.Controls.Add(ul);
foreach (DataRow dr in dt.Rows)
{
HtmlGenericControl li = new HtmlGenericControl("li");
HtmlGenericControl anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", "page.htm");
anchor.InnerText = dr["id"].ToString();
li.Controls.Add(anchor);
ul.Controls.Add(li);
}
On my website, I want to make a navigation bar just like this, with categories (here 2012) and articles (here May - October). I've got a JSON object with all categories (id, name) and one with all articles (id, title, body, category), which angular gets for me.
The current HTML is as follows:
<!-- The angular controllers are already initialized before this piece of code -->
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries">
<!-- The link links to a function that sets the correct tab -->
<a href ng-click="tab.setTab({{infoentry.id}})">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
And the JavaScript:
app.controller('InfoController', ['$http', function($http){
var info = this;
info.infocategories = [];
info.infoentries = [];
// This all works correctly
$http.get(api + 'info_categories?pageSize=20&pageNumber=1').success(function(data){
info.infocategories = data.data;
});
$http.get(api + 'info_posts?pageSize=20&pageNumber=1').success(function(data){
info.infoentries = data.data;
});
}]);
However, as you can imagine, this code displays all entries under the categories, but I want only the entries that belong to the specific category to be displayed.
I'm relatively new to AngularJS, so any help is greatly appreciated. If there's any code lacking or unclear, please tell me. Thanks in advance!
Never mind, I already fixed it myself. I guess I was thinking too difficult...
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries" ng-show="infoentry.cat == infocategory.id">
<a href ng-click="tab.setTab(infoentry.id)">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>