For some reason, I cant close li tag, I added comment which li tag is in question inside code
<ul>
#foreach (var item in #ViewBag.kategorije) {
<li>
#item.Name #if (item.ChildCategory.Count > 0) { foreach (var child in item.ChildCategory) {
<li class="child">
#child.Name
</li>
} }
</li>
<!-- it says this tag has no matching start tag -->
}
</ul>
Ooops, found it, I needed to nest child list elements into new ul, basic html mistake
<ul>
#foreach (var item in #ViewBag.kategorije)
{
<li>
#item.Name
if (item.ChildCategory.Count > 0)
{ <ul>
foreach (var child in item.ChildCategory)
{
<li class="child">
#child.Name
</li>
}
</ul>
}
</li>
}
</ul>
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
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 am going through this link to understand more on counters and how nested counter work,
I have the css and html as following
<style>
ol {
counter-reset: my-counter 0;
list-style-type: none;
}
li::before {
content: counters(my-counter, '.');
counter-increment: my-counter;
}
</style>
With the html as
<ol>
<li> First
<ol>
<li> Eleven </li>
<li> Twelve </li>
</ol>
</li>
<li> Second
<ol>
<li> Twenty-one </li>
<li> Twenty-two </li>
</ol>
</li>
</ol>
Here i am getting the content as expected, like 1 and 1.1, however changing the before to marker pseudo element i.e li::marker gives a value like 0 and 0.0.
Although when i use only this css, the output is as expected
li::marker {content: counters(list-item, '.') ' ';}
I couldn't get why the before and marker pseudo elements are generating different output for this list.
The issue is related to the allowed properties within ::marker. content is allowed but not counter-increment so it's working but without incrementing the counter.
If you move the incrementation to li it works:
ol {
counter-reset: my-counter 0;
list-style-type: none;
}
li::marker {
content: counters(my-counter, '.');
}
li {
counter-increment: my-counter;
}
<ol>
<li> First
<ol>
<li> Eleven </li>
<li> Twelve </li>
</ol>
</li>
<li> Second
<ol>
<li> Twenty-one </li>
<li> Twenty-two </li>
</ol>
</li>
</ol>
More detail about the allowed properties can be found in the Specification: https://www.w3.org/TR/css-lists-3/#marker-properties
Here is my code:
a) I have a row of buttons at the top formatted horizontally as such:
HTML:
<ul class="nav">
Work
Volunteer
Education
Skills
References
Images
</ul>
b) I have div blocks each displaying a paragraph:
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
c) I want the CSS to not display the jobs div yet:
.jobs {
display: none;
}
d) Now that I hover over the first button I want the jobs div to display:
.button1:hover+.jobs {
display: block
}
e) Repeat for all other div sections
.volunteer {
display: none;
}
.button2:hover+.volunteer {
display:block
}
You will need to markup HTML differently.
.jobs, .volunteer {
display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
display: block;
/* position the divs under the navigation links */
position: absolute;
top: 120px;
}
<ul class="nav">
<li>
Work
<div class="jobs">
<h2>h2 jobs</h2>
<h3>h3 jobs</h3>
<h4>h4 jobs</h4>
</div>
</li>
<li>
Volunteer
<div class="volunteer">
<h2>h2 volunteer</h2>
<h3>h3 volunteer</h3>
<h4>h4 volunteer</h4>
</div>
</li>
<li> Education</li>
<li> Skills</li>
<li> References</li>
<li> Images</li>
</ul>
This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<!-- and so on... -->
</div>
The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):
#details > div {
/* to hide the eleemnt(s) initially: */
display: none;
}
#details > div:target {
/* to show the relevant element once the relevant link is clicked: */
display: block;
}
#details > div[id]::after {
content: attr(id);
}
#details > div {
display: none;
}
#details > div:target {
display: block;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<li> Education
</li>
<li> Skills
</li>
<li> References
</li>
<li> Images
</li>
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<div id="education"></div>
<div id="skills"></div>
<div id="references"></div>
<div id="images"></div>
</div>
With plain JavaScript, on the other hand, it can be achieved with:
// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
// caching the 'this' element:
var self = this,
// finding the div element with a class equal to the href of the 'a' element
// (though we're stripping off the leading '#':
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
// if the event we're responding to is 'mouseover' we set the display of the
// found div to 'block', otherwise we set it to 'none':
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');
// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
// adding the same event-handler for both mouseover and mouseout:
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
function toggleRelevant(e) {
var self = this,
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
var links = document.querySelectorAll('li a');
[].forEach.call(links, function(linkElem) {
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
div[class] {
display: none;
}
div[class]::before {
content: attr(class);
color: #f00;
border: 1px solid #f00;
padding: 0.2em;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<div class="volunteer">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<!-- and so on... -->
I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :
$('.buttonX').hover(
function() {
// Styles to show the box
$('.boxX').css(...);
},
function () {
// Styles to hide the box
$('.boxX').css(...);
}
);
It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS
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.