I have a ul element which I need to add list item dynamically. UL element has class name res. I don't want to add class to list item. Is there anyway to add the list item dynamically without losing the style..!
<ul class="res">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Short Codes</li>
<li>Contact</li>
<li><a id="login" href="login.html">login</a></li>
<li><a id="logout">Hello Guest<span class="arrorow">▼</span></a>
<ul class="sub-menu">
<li>View Profile</li>
<li>Booking History</li>
<li>Logout</li>
</ul>
</li>
</ul>
EDIT 1:
I attached a pic here... Please see it carefully.
I added those circled ones dynamically. Please check the styling of that...!
You can use ELEMENT NAME to style it without the need of adding class to each element.
For example:
ul.res li {
color: red;
}
The above code will apply color red to all li elements inside ul with class res.
Using
$('.res').append('<li>Location</li>')
this resolved the issue...!
Related
How could I add toggle class? When I click on anchor tag it should add class to only next sibling element ( .treeUlChild ). i tried a lot and try to find solution but couldn't. I am new and this is my first project in javascript.
here is my html code.
<div id="treeList" class="treeDiv">
<ul class="treeUl">
<li>
GUIDELINES
<ul class="treeUlChild treeLevel2">
<li> Guidlines 1</li>
<li> Guidlines 2</li>
<li> Guidlines 3</li>
<li> Guidlines 4</li>
</ul>
<!-- End Child Ul -->
</li>
<li>
AFTER-SALES
<ul id="test" class="treeUlChild treeLevel2">
<li>xyz</li>
<li>
def
<ul class="treeUlChild treeLevel3">
<li>
ASSETS
<ul class="treeLevel4">
<li>DIGITAL</li>
<li>OOH</li>
<li>POS</li>
<li>PRINT</li>
<li>SOCIAL GIF</li>
<li>SOCIAL VIDEOS</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End Child Ul -->
</li>
</ul>
<!-- End treeUl -->
</div>
This is my javascript code.
document.querySelector('#treeList ul li a').addEventListener("click", function(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
});
One issue is nextSibling returns a node object, it's better you use nextElementSibling which returns an element node. The other issue is querySelector will always return the first element with the specified selector, so the changes will always be reflected on the same element whichever link you clicked. You may rather use querySelectorAll which returns all the elements as a node list, and loop through each element and apply the changes. Another thing is, it's better to use event.target to get clicked element and rather than using a selector again.
document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
event.target.nextElementSibling.classList.toggle('done');
}));
There is very simple way using Bootstrap by the way.
But if you want to do that with pure Javascript, you're on the right way to it.
So first, transform your query selector into a object e.g:
var el = document.querySelector('#treeList ul li a');
forEach method, querying the single object clicked in the array of multiple objects:
el.forEach(yourFunctionName());
Add functions to your elements:
<li><a onclick="yourFunctionName()" href="#"> Guidlines 1</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 2</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 3</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 4</a></li>
ps: you can simplify this.
Structure your function:
function myFunctionName(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
}
I am new to web development
I need to know how to set an onclick() attribute for the elements in an unordered list
here is my code :
<ul id = "headlist">
<li>Home</li>
<li>Gallery</li>
<li>Downloads</li>
</ul>
How to set onclick attribute for the elements and based on the items in the list , the click should take the user to a particular webpage
You got the HTML a bit wrong, how about something like this:
<ul id = "headlist">
<li>Home</li>
<li>Gallery</li>
<li><a href="link-to-the-page">HomeDownloads/a></li>
</ul>
In lists, the actual list items need to be inside <li> tags like:
<ul id = "headlist">
<li>Home</li>
<li>Gallery</li>
<li>Downloads</li>
</ul>
If you want the list items to open another page, the easiest way is a link:
<li>Link Here</li>
But, if you want to do it with JS, here is one option:
<li onclick="window.location='http://google.com'">Link Here</li>
or, if you want to shorten it:
<script>
function link(src){
window.location=src;
}
</script>
<li onclick="link('http://google.com')">Link Here</li>
I have a very basic and usual list menu with a submenu:
<ul>
<li>Home</li>
<li>
About
<ul id="sub-menu">
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
And then I have a Cufon selector applying a font to the menu:
Cufon.replace('ul li a');
Is there any way to select only the first level of the menu and disregard the other? Right now both levels get the font, but I would like to use something else for submenu.
I am very much a beginner with Javascript, Cufon and jQuery, I tried using child selectors but I had no luck with that. How can I achieve this?
It appears that your JavaScript library uses CSS-style selectors; you can just use
<ul class='containingMenu'>
<li>Home</li>
<li>
About
<ul id="sub-menu">
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
with this selector
ul.containingMenu > li > a
where the > causes the selector to apply only to a's that are direct children of li's that are direct children of the ul.containingMenu.
↪ See this example in action at JSFiddle.
I have the following markup:
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
I need help figuring out how to add a class using Jquery or Javascript (preferably Jquery) according to the active page. Example, when on the "Home.php" page, I would like to add the class ".selected" to the active <a> tag and at the same time add the class ".none" to all the other links.
Therefore, when being on the "home.php" page the code should look like this:
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
According to the way the rest of the code works, I need the class to be assigned to the <a> tag and not to the entire <li> item. Any ideas are appreciated.
Try something like this (you might need to use different properties from location, like href or pathname, but you get the idea):
$('ul.menubar a').each(function(){
if(location.href === this.href){
$(this).addClass('selected');
$('ul.menubar a').not(this).addClass('none');
return false;
}
});
Or better yet:
$('ul.menubar a').addClass('none').filter('a[href="'+location.pathname+'"]')
.removeClass('none').addClass('selected');
Here's more info on the location object: https://developer.mozilla.org/en/DOM/window.location
A very simple method, no guarantees on efficiency though.
HTML :
<ul class="menubar">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Javascript:
$(document).ready(function() {
$("#"+ $.trim( $("title").html() ) ).addClass("selected");
});
Edit: added $.trim(), just an extra step.
Just add ID attribute to your "a tags" and using jQuery do:
$("#home").addClass('selected');
Is it possible to attach html tag to others using Javascript?
<li> to other <li> ?
For instance, I'm creating dropdown menu.
I have div separate from the <ul> tag
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:
<ul>
<li>menu1</li>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
</ul>
The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> "hide", it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:
mypage
----------------------------
| menu1
|
| <------ big open space div is hiding
|
|
| hello content start here
EDIT
Thanks for the tip guys, I've solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.
This is invalid HTML. A li should be contained in either a ol or a ul element. Change
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
to
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
For your main problem, there is no need to put the div (or ideally ul) outside the main ul. When you hide an element by setting its visibility to hidden, it will still take up the empty space. To complete hide it and remove any space it was taking, set the display CSS property to none.
document.getElementById('submenu1').style.display = 'none';
Usually you put the submenu in another <ul> inside an <li> in your main menu (so that you get valid HTML), and hide it with display: none CSS property and show it on click.
<ul>
<li>menu item 1<ul class="submenu">
<li>sub 1</li>
</ul></li>
<li><a hrf="menu2">menu item 2</a></li>
</u>
Then in your CSS (or added using js):
ul.submenu {
display: none;
}
a:hover + ul.submenu, ul.submenu:hover {
display: block;
}
This one will work on modern browsers without any js! But you can do it with js too, of course.
This is usually done via CSS. You have the entire menu pre-created (note that nesting <div> within <ul> is invalid HTML):
<ul class="menu">
<li>menu1
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
and then you declare in CSS:
ul.submenu {
display: none;
}
Now you can remove or add the "submenu" CSS class from the <ul> through JavaScript, or you set the .style.display property.
Or even more elegantly (but less cross-browser compatible, if you still care for old browsers), entirely without JavaScript through pure CSS:
ul.menu > li:hover ul.submenu {
display: block;
}
ul.submenu:hover {
display: block;
}
If you use display: none in your CSS then the hidden element doesn't need any space:
HTML:
<ul>
<li>menu1
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li class="active">menu2
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</ul>
CSS:
li ul {
display: none;
}
li.active {
display: block;
}
<ul>
<li>menu1</li>
<div id="submenu1" style="display: none">
<li>sub1</li>
<li>sub2</li>
</div>
<li>menu2</li>
</ul>
Try it, this will make the div take up no space. if you use visiblity: hidden then it will take up space.