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);
Related
Can I use a combination of ID and elements to apply a style to a particular element?
for example:
<ul id="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
Is there a way to apply the style="font-size:small" to all the anchors that follow the UL with the ID of 'a'?
I'd think something like #a a {font-size:small} would work, but it's having no effect in the css file.
Thanks,
Jo
Yes, use the structure of the HTML to select the anchor tags:
ul li a {
font-size:small
}
Instead of using ID use class selector, so that same class name can be used to multiple ul elemements:
.a li a { /* you can also use .a a {....} */
font-size: 40px;
color: red;
}
<ul class="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
<ul class="a">
<li>
<a href=...>Hello</a>
</li>
<li>
<a href=...>Boy</a>
</li>
</ul>
<div class="menu">
<ul>
<li>
<ul class="sub-menu">
<li>
<ul class="sub-menu">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Could You please tell me how to target just first ul element with "sub-menu" class as on an example above? Every pseudo-class I know targets both "sub-menu" ul-s at the same time.
One option:
ul:not(.sub-menu) > li > .sub-menu {
...
}
<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour
This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.
I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white
I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}
You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO
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.