Reputation: 733
I've created a custom dropdown element.
The number of options it can have is based on a Database Table (I haven't created the Table yet). Like the number of options can be 4 or even 5 or anything for that matter.
I'll use PHP to give the number of options for the dropdown. Each of the options are in an li
tag. The li
siblings are inside the ul
tag.
I have a CSS file which animates the li
items. But instead of animating them all at once (in which case I would just animate the ul
and would get the same effect), what I want to do is to animate them one by one:
Each li
will have a delay which is progressive. For example if the first li
has a 0s
delay and a duration of 300ms
then the second will start when the first ends, that is the second li
will have a delay of 300ms
with the same duration. The duration remains the same, just the delay
changes so as to give it a follow-the-previous kind of effect.
Since I don't know the number of options in the dropdown, how am I gonna do the same? I'm assuming it would require calculations but since CSS doesn't support it, there is no way to do it using native CSS.
My best guess is to use jQuery. Am I correct?
Upvotes: 2
Views: 102
Reputation: 545
You have to use jQuery, but the hope's not over there. PHP also works (Amazed?). PHP can not only be used to as a preprocessor for HTML but also for CSS. Have a look at this link.
Another thing is SASS or SCSS or any CSS preprocessor for that matter but that only works if you know how many number of elements (in your case, li
) you have. SASS (or SCSS) have a loop construct called @for
which can loop through a range of numbers and spit out pure CSS but still it requires you to know the number of elements to know the range.
Also what you can do is make a guess about the maximum number of elements and use :nth-child(<number>)
pseudo selector repeated number of times until the maximum number. One aspect of this is that it doesn't require you to depend on jQuery but I won't use it.
So you have two choices, jQuery or PHP. Both works well.
Upvotes: 1
Reputation: 5088
is this what you want ....
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
ul li{
list-style-type: none;
display: none;
}
ul{
cursor: pointer;
}
</style>
<body>
<ul class="first"> see more
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
var thecount = $(".first").children().length; // at this point you get he binded item count
$(".first").mouseenter(function(){
for(var i=0;i<thecount;i++)
{
var needed = "ul.first li:nth-child"+"("+i+")";
var thetime = 300*i;
$(needed).slideDown(thetime);
}
});
$(".first").mouseleave(function(){
for(var i=0;i<thecount;i++)
{
var needed = "ul.first li:nth-child"+"("+i+")";
var thetime = 300*i;
$(needed).slideUp(thetime);
}
});
});
</script>
</html>
hope this will help to you.
Upvotes: 0
Reputation: 1703
I'm not sure if you want jquery, but I know how to solve this problem using jQuery. This essentially adds a delay of 300ms per iteration over your options list that you fetch from the database after appending them to the parent list.
<script type='text/javascript'>
$(document).ready(function(){
var items = ['a', 'b', 'c', 'd', 'e']; //Whatever you fetch from the database
for(var i =0; i<items.length; i++) {
var new_item = $('<p>'+items[i]+'</p>').hide();
$('#test').append(new_item); //Here test is the id of the unordered list.
new_item.delay(i*300).fadeIn(300);
}
});
</script>
And you need to include this in your HTML -
<ul id="test">
</ul>
Don't forget to include jQuery!
Upvotes: 1
Reputation: 8210
If you're not in the mood to use jQuery, or want to minimize the use of JavaScript in general, have no fear! I recently read an article about it by Lea Verou
What does this do / mean?
According to this method, you can change the style of the sibling when you're not sure how many siblings the actual DOM will posses, as in your case. You will have to write some more CSS for it, but the solution will be much, much cleaner than JavaScript cluttering.
So how does this work?
An example:
li:nth-child(1):nth-last-child(1) {
width: 100%;
}
Logic here says,"if the list-item is the first child, and also the last child, make the width 100%"
Now how to apply this in your own case?
Simply apply a style for the possibilities in the css:
ul li:nth-of-type(1) {
transition-delay: .5s;
}
ul li:nth-of-type(2) {
transition-delay: 1s;
}
ul li:nth-of-type(3) {
transition-delay: 1.5s;
}
Upvotes: 0