html-lists | 易学教程

Bottom to top <ul> element arrangement

阅读更多关于 Bottom to top element arrangement

问题 I'm trying to find out how I can force elements to start from the bottom going to the top. I have searched through stackoverflow and I can't seem to get the answer that i need. This picture should explain it: This should help too: <?php require("connectdb.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;

Sorting a list by data-attribute

阅读更多关于 Sorting a list by data-attribute

问题 I have a list of people with job titles sorted by the persons’ first names, like this: <ul> <li data-azsort="smithjohn"> <a href="#"> John Smith </a> Professor </li> .. <li data-azsort="barnestom"> <a href="#"> Tom Barnes </a> Lecturer </li> </ul> I’ve added the data-azsort attribute to the <li> element, and I’d like to pop these list elements into an array, and sort

JQTouch - links in li not working after scrolling

阅读更多关于 JQTouch - links in li not working after scrolling

问题 I have a sorted list using JQTouch. The list contains about 20 li-elements containing different links. The first li's that are on the screen without scrolling are working just fine. But after I scrolled down on my iPhone the links are no longer working. Here is a snippet of the code: <ul class="rounded"> <li class="arrow"><a id="1" href="#opdracht">1. Typical Amsterdam</a></li> <li class="arrow"><a id="2" href="#opdracht">2. Route</a></li> <li class="arrow"><a id="3" href="#opdracht">3.

(JS/JQuery) Changing default value/placeholder of custom dropdown?

阅读更多关于 (JS/JQuery) Changing default value/placeholder of custom dropdown?

问题 So, here's the HTML for a custom dropdown that doesn't use a select tag. The placeholder/default value for the dropdown is "Acura", which is the first element in the list (ul). I'm trying to see if I can change the placeholder/default value for the dropdown (to say, BMW for example) without changing the order of the list of the dropdown (the makes are in alphabetical order). Make: <div class="custom-dd-wrapper builder

Nested lists with indenting dynamic paddings

阅读更多关于 Nested lists with indenting dynamic paddings

问题 Take a look at my code example at js bin: http://jsbin.com/iritep/3/edit I'd like to indent the yellow colored item without continuing my hard coded css-rule: ul li a {padding-left: 20px;} ul li ul li a {padding-left: 40px;} ul li ul li ul li a {padding-left: 60px;} ul li ul li ul li ul li a {padding-left: 80px;} /* don't want this line! */ Can I possibly make this css more dynamic without having to add the last line of css? 回答1: I'm sorry, Stackoverflow didn't allow me to comment twice in

Make ordered list collapsible

阅读更多关于 Make ordered list collapsible

问题 I have an ordered list which i want to make collapsible by default and expandable when user click on the link. https://jsfiddle.net/rkmv3rn3/17/ How can I make it work so that it works properly With following script it collapses all Parent item then fails to open them properly. $(window).load(function() { prepareList(); }); function prepareList() { $('#expList').find('li:has(ol)') .click(function(event) { if (this == event.target) { $(this).toggleClass('expanded'); $(this).children('ol')

add width li's to parent ul

阅读更多关于 add width li's to parent ul

问题 i would like to calculate the width of the li's for each submenu en then put in the ul element. example <ul> <li>level 1</li> <li> <ul style="widht:??;"> // total width li's added here 70px <li>level 2</li> // width of this li 20px <li>level 2</li>/ width of this li 50px </ul> </li> <li>level 1</li> <li>level 1 <ul style="widht:??;"> // total width li's added here 70px <li>level 2</li> // width of this li 20px <li>level 2</li>/ width of this li 50px </ul> </li> </ul> i have this so fare if ('

expanding the menu appearing underneath the gallery in IE7

阅读更多关于 expanding the menu appearing underneath the gallery in IE7

问题 I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips? page link Hovering the mouse over the menu using IE7 realize what I'm talking about. 回答1: There's a lot going on here, but I'll try to take a crack at it. First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues

Expanding list not moving container/footer

阅读更多关于 Expanding list not moving container/footer

问题 I have a website you can find here, when expanding one of the list items, I can't figure out why the the entire height of the page isn't being modified (footer doesn't move with list expansion). Any ideas? thanks in advance 回答1: The #inside div has an height property set. If you remove it, you'll get the behaviour you want. Edit It seems you're setting the height property via javascript in order to animate the div's height . In this case, after animation's been completed, you could set the

Display multiple sets of content items a from a Wordpress query with javascript

阅读更多关于 Display multiple sets of content items a from a Wordpress query with javascript

问题 I am trying to get my recent posts to display in a fading content list with java-script. I want to pull 12 of the latest posts, and then display them, 4 at a time, from most recent to least. These are my query details: <?php $my_query = new WP_Query('showposts=12'); while ($my_query->have_posts()) : $my_query->the_post(); ?> <?php if (strlen(the_title('','',FALSE)) > 80) { $title_short = substr(the_title('','',FALSE), 0, 80); preg_match('/^(.*)\s/s', $title_short, $matches); if ($matches[1])