I have a sidebar-nav that has several tabs. How can I make the current tab viewed by users active/highlighted ??
I tried the active class but it seemed to make one tab active constantly!
any help would be greatly appreciated
Here is my view:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
KU Faculty
</li>
<li>
<hr style='margin-top:2px; color:#000;margin-right:30px;'>
</li>
<li>
My Profile
</li>
<li>
Reseasrch
</li>
<li>
Teaching</li>
</li>
<li>
Experience</li>
</li>
<li>
Publications
</li>
<li>
Resume
</li>
<li>
About us
</li>
</ul>
</div>
You can try to match url path with jQuery and add "active" class to it with:
$(function(){
var this_url = window.location.pathname;
var list_sidebar_link = $(".sidebar-nav li a");
$(list_sidebar_link).each(function (i, item) {
var the_a = list_sidebar_link[i];
if (this_url == $(the_a).attr('href')) {
$(the_a).addClass('active');
}
});
});
Related
I have a multi-level ul list like below.
<ul>
<li>
</li>
<li>
<a href="/">
</a>
<ul>
<li>
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</li>
<li>
</li>
</li>
</li>
</ul>
There could be more levels inserted.
So I want every ul > li > a will have a padding-left+10 of it's parent a tag.
you can use forloop for adding css for all the anchor tags at once.
add class in anchor tag for get element by class
var lis = document.getElementByClass("link").getElementsByTagName("li");
after this you can implement css using javascript:
var sheet = window.document.styleSheets[0];
sheet.insertRule('a { padding-left: 50px; }', sheet.cssRules.length);
I'm making a WordPress website and I created everything outside of it. Now i'm getting it all together but I'm pretty new to this. I would like to create a Wordpress loop to get images from a gallery, replacing the img tag.
------- Edited -------
So there was a small change in the design but same problem. I need to get the images from a gallery in Wordpress to fill two slideshows with the same images.
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I edited the question
As the question has been updated, I'm updating my answer to fit the new requirements. Basically, I've just added a parameter to the _GetSSImages() function. This allows you to pull the images from a specific slideshow, assuming that the class="" is unique for each slideshow. If not, then I would need to adjust the structure of the function.
----Original answer with updated code:
There are few things I don't know, such as how you intend to display the list of images from the slideshow, or how the client will edit this list.
However, you can use the javascript function below to grab all of the image src attributes from the slideshow HTML based on what you've shown here. The function returns an array of all src attributes so you can call it wherever you need to in your code to get the list.
function _GetSSImages(slide) {
var slideEls = document.querySelectorAll(slide),
slideImgs = [];
for(var i = 0; i < slideEls.length; i++) {
if(slideEls[i].querySelector("img").src != null) slideImgs.push(slideEls[i].querySelector("img").src);
}
return slideImgs;
}
var slideShow1 = _GetSSImages("mySlides1"),
slideShow2 = _GetSSImages("mySlides2");
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I have an issue that I have not experienced before and I am hoping to get some information on it. I have a nav bar that is displayed at the top on a webpage and for some reason when the code is run, the browser adds some a>/a> tags which cause my links to have some... disposition themselves. I am hoping to find out how to stop this from happening. Below is an example of the code.
My code:
<nav>
<ul id="LevelMenu">
<?php if($currentuser['userlevel']==0) { ?>
<li>Register New Account</li>
<?php } else {
if($currentuser['userlevel']==1) { ?>
<li><a href="inactive.php">Account Panel<a></li>
<?php } else { ?>
<li><a href="user.php">Account Panel<a></li>
<?php if($currentuser['userlevel']>2) { ?>
<li>Administration</li>
<?php }
} ?>
<li>Log Out</li>
<li>Add Article</li>
<?php } ?>
</ul>
</nav>
Code on Browser:
<nav>
<ul id="LevelMenu">
<li>
Account Panel
<a></a>
</li>
<a></a>
<li>
<a></a>
Home
</li>
<li>
Administration
</li>
<li>
Home
</li>
<li>
Log Out
</li>
<li>
Add Article
</li>
</ul>
</nav>
Result:
This line:
<li><a href="inactive.php">Account Panel<a></li>
You're not closing the <a>, but opening a new one. Fix:
<li>Account Panel</li>
Same problem with:
<li><a href="user.php">Account Panel<a></li>
You are Not Closing Your Anchor Tag.
Correct format would be <a href = "" ></a>
And You are Doing it like this:
<li><a href="inactive.php">Account Panel<a></li>
Instead Do This:
<li>Account Panel</li>
And Same with all other Places where you are doing the same.
Refer To The W3 Documentation for further information on anchor tag.
Im trying to change the nav item in my ASP.Net MVC 4 project. I have found some examples but they dont work with the way the menu in need( See code):
<nav>
<ul>
<li>
<a href="/StartMenu/Index" class="current" title="Dashboard">
<i class="icon-map-marker"></i>
Dashboard
</a>
</li>
<li>
<a href="/StartMenu/Forms" title="Forms Stuff">
<i class="icon-edit"></i>
Forms Stuff
</a>
</li>
If all you're trying to do is make sure the last link that was clicked has class="current" you can do this
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
})
I've an unorderedlist something like this.
<ul class="simpleTree">
<li>
<span>root</span>
<ul>
<li >
<span>Tree Node 1</span>
<ul>
<li>
<span>Tree Node 1-1</span>
<ul>
<li>
<span>Tree Node Ajax 1</span>
</li>
<li>
<span>Tree Node Ajax 2</span>
</li>
</ul>
</li>
<li>
<span>Tree Node 1-1</span>
<ul>
<li>
<span>Tree Node Ajax 1</span>
</li>
<li>
<span>Tree Node Ajax 2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to transform it into
<ul class="simpleTree">
<li class="root">
<span>
<a href="#"title="root">root</a</span> <ul> <li class="open">
<span>Tree Node 1</span>
<ul>
<li><span>Tree Node 1-1</span> <ul> <li>
<span class="text">Tree Node Ajax 1</span>
</li> <li>
<span class="text">Tree Node Ajax 2</span>
</li> </ul>
</li>
<li><span>Tree Node 1-1</span>
<ul>
<li><span class="text">Tree Node Ajax 1</span>
</li> <li>
<span class="text">Tree Node Ajax 2</span>
</li> </ul> </li> </ul>
</li>
</ul>
</li>
</ul>
the above format Programmatically using asp.net/C# or jquery by looping through each 'li' element and assigning a css class,anchor tags etc.The above unordered list is just a sample one.Basically I am retrieving around 600 records from the database and transforming them into unordered list.Could someone please suggest how do I do that?
UPDATE:
I am using the following code in asp.net codebehind to generate an unorderedlist from the database records.
int lastDepth = -1;
int numUL = 0;
StringBuilder output = new StringBuilder();
foreach (DataRow row in ds.Tables[0].Rows)
{
int currentDepth = Convert.ToInt32(row["Depth"]);
if (lastDepth < currentDepth)
{
if (currentDepth == 0)
output.Append("<ul class=\"simpleTree\">");
else
output.Append("<ul>");
numUL++;
}
else if (lastDepth > currentDepth)
{
output.Append("</li></ul></li>");
numUL--;
}
else if (lastDepth > -1)
{
output.Append("</li>");
}
output.AppendFormat("<li><span>{0}</span>", row["name"]);
lastDepth = currentDepth;
}
for (int i = 1; i <= numUL; i++)
{
output.Append("</li></ul>");
}
literal1.text=output.ToString();
In my database table I've name,depth feild.Using the 'depth' feild I am binding data to the unordered list
Thanks in advance.
JavaScript:
You could use the DOMObject.innerHTML read/write property. Or, jQuery's .append().
For the attributes, the DOMObject.setAttribute() should get you all the way.
Check out this piece of jQuery documentation and this.
Am I missing some functionality you wanted?
you are doing the wrong thing.
instead of that approach, i would suggest a different one
Generate the ul element with an id or class
use that id or class in your style sheet
for e.g
<ul>
<li>
<span>root</span>
<li>
</ul>
i would generate like
<ul class='mylist'>
<li>
<span>root</span>
<li>
</ul>
my css would contain
ul.mylist {
write your style properties
}
ul.mylist li{
write your style property for li element
}
Then your records will be displayed properly.