Calendar highlight current date automatically - javascript

I'm making a calendar with HTML, CSS and JavaScript. I want it to highlight current date automatically. Here is my code:
hday();
function hday() {
var d = new Date().getDate();
document.getElementById(d).classList.add('today');
}
.today {
background: red;
}
<ul class="days">
<li id="01">1</li>
<li id="02">2</li>
<li id="03">3</li>
<li id="04">4</li>
<li id="05">5</li>
<li id="06">6</li>
<li id="07">7</li>
<li id="08">8</li>
<li id="09">9</li>
<li id="10">10</li>
<li id="11">11</li>
<li id="12">12</li>
<li id="13">13</li>
<li id="14">14</li>
<li id="15">15</li>
<li id="16">16</li>
<li id="17">17</li>
<li id="18">18</li>
<li id="19">19</li>
<li id="20">20</li>
<li id="21">21</li>
<li id="22">22</li>
<li id="23">23</li>
<li id="24">24</li>
<li id="25">25</li>
<li id="26">26</li>
<li id="27">27</li>
<li id="28">28</li>
<li id="29">29</li>
<li id="30">30</li>
<li id="31">31</li>
</ul>
However, the current date is not highlighted. From chrome developer tools, I found that "background : red" didn't apply to the date today. How to make it work?
I just started HTML and CSS, so sorry for basic Questions.


Your issue is with order of operations. You need to call the method hday() after you define it.
You have:
hday();
function hday() {
var d = new Date().getDate();
document.getElementById(d).classList.add('today');
}
You need:
function hday() {
var d = new Date().getDate();
document.getElementById(d).classList.add('today');
}
hday();
.today {
background: red;
}
<ul class="days">
<li id="01">1</li>
<li id="02">2</li>
<li id="03">3</li>
<li id="04">4</li>
<li id="05">5</li>
<li id="06">6</li>
<li id="07">7</li>
<li id="08">8</li>
<li id="09">9</li>
<li id="10">10</li>
<li id="11">11</li>
<li id="12">12</li>
<li id="13">13</li>
<li id="14">14</li>
<li id="15">15</li>
<li id="16">16</li>
<li id="17">17</li>
<li id="18">18</li>
<li id="19">19</li>
<li id="20">20</li>
<li id="21">21</li>
<li id="22">22</li>
<li id="23">23</li>
<li id="24">24</li>
<li id="25">25</li>
<li id="26">26</li>
<li id="27">27</li>
<li id="28">28</li>
<li id="29">29</li>
<li id="30">30</li>
<li id="31">31</li>
</ul>

Related

How to make one element of a list go to the top on page load?

I need one particular element of an unordered list to appear at the top of the list on page load, but not at the top of the page.
My code below works on Firefox and Safari, but not on Chrome or Opera. I use Javascript only.
Note that if I remove location.replace('#'); , the element will jump to the top of the page on page load, which is unwanted.
location.replace('#e');
location.replace('#');
#e {
color:#fff;
background:red;
}
#list {
overflow:auto;
height:100vh;
border:1px solid #000;
}
<div>LOGO</div>
<ul id="list">
<li id="a">Link a</li>
<li id="b">Link b</li>
<li id="c">Link c</li>
<li id="d">Link d</li>
<li id="e">Link e</li>
<li id="f">Link f</li>
<li id="g">Link g</li>
<li id="h">Link h</li>
<li id="i">Link i</li>
<li id="j">Link j</li>
<li id="k">Link k</li>
<li id="l">Link l</li>
<li id="m">Link m</li>
<li id="n">Link n</li>
<li id="o">Link o</li>
<li id="p">Link p</li>
<li id="q">Link q</li>
<li id="r">Link r</li>
<li id="s">Link s</li>
<li id="t">Link t</li>
<li id="u">Link u</li>
<li id="v">Link v</li>
<li id="w">Link w</li>
<li id="x">Link x</li>
<li id="y">Link y</li>
<li id="z">Link z</li>
<li id="aa">Link aa</li>
<li id="ab">Link ab</li>
<li id="ac">Link ac</li>
<li id="ad">Link ad</li>
<li id="ae">Link ae</li>
<li id="af">Link af</li>
<li id="ag">Link ag</li>
<li id="ah">Link ah</li>
<li id="ai">Link ai</li>
<li id="aj">Link aj</li>
<li id="ak">Link ak</li>
<li id="al">Link al</li>
<li id="am">Link am</li>
<li id="an">Link an</li>
<li id="ao">Link ao</li>
<li id="ap">Link ap</li>
<li id="aq">Link aq</li>
<li id="ar">Link ar</li>
<li id="as">Link as</li>
<li id="at">Link at</li>
<li id="au">Link au</li>
<li id="av">Link av</li>
<li id="aw">Link aw</li>
<li id="ax">Link ax</li>
<li id="ay">Link ay</li>
<li id="az">Link az</li>
</ul>

Although there is probably a smoother way to do it, here is the javascript that solves my issue:
location.replace('#e');
setTimeout(function() {
location.replace('#');
}, 1);

how to hide child elements child elements in jQuery

I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});

Get all list items that do not have a data attribute that starts with value

I have a list of elements that each have a data-name attribute. I want to select all elements that do not start with the prefix "arc" and hide them.
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>
I have tried to use $('#slides li[data-name^="arc"]') but it selects the opposite of what it need.

Use :not():
$('#slides li:not([data-name^="arc"])')
$('#slides li:not([data-name^="arc"])').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slides">
<li data-name="arc_1">...</li>
<li data-name="arc_2">...</li>
<li data-name="biz_1">...</li>
<li data-name="biz_2">...</li>
<li data-name="cas_1">...</li>
<li data-name="cas_2">...</li>
<li data-name="cas_3">...</li>
<li data-name="prd_1">...</li>
</ul>

Text number to existing list elements using javascript loop

I wanted to text numbers to existing list elemensts. for example:
I have the elements like this. I have created diffrent list item in to my application. But I have text numbers orderly in to it.
<div class="section-01">
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
</div>
<div class="section-02">
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li"></li>
<li class="numbers-li"></li>
<li class="numbers-li"></li>
</ul>
</div>
I wanted to add numbers to all list (.numbers-li) orderly like this:
Result should be like this
<div class="section-01">
<ul class="numbers-wrap">
<li class="numbers-li">1</li>
<li class="numbers-li">2</li>
<li class="numbers-li">3</li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li">4</li>
<li class="numbers-li">5</li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li">6</li>
<li class="numbers-li">7</li>
<li class="numbers-li">8</li>
</ul>
</div>
<div class="section-02">
<ul class="numbers-wrap">
<li class="numbers-li">9</li>
<li class="numbers-li">10</li>
<li class="numbers-li">11</li>
<li class="numbers-li">12</li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li">13</li>
<li class="numbers-li">14</li>
<li class="numbers-li">15</li>
</ul>
<ul class="numbers-wrap">
<li class="numbers-li">16</li>
<li class="numbers-li">17</li>
<li class="numbers-li">18</li>
</ul>
</div>
Also please let me know how to text only odd numbers into it

try like this:
$(document).ready(function(){
$('li').each(function(index){
$(this).text(parseInt(index,10)+ 1);
})
});
note: here $(this).text(parseInt(index)+ 1) also can be used, but you should always use base value when you are using parseInt otherwise it may lead you to some undesired results.

try this
$('.numbers-li').each(function(index){
$(this).text(parseInt(index,10) + 1);
})
Update (for odd numbers. can be used to print even numbers by changing oddum = 2)
var oddnum = 1;
$('.numbers-li').each(function(index){
$(this).text(oddnum);
oddnum = oddnum + 2;
})

Use JavaScript to Wrap Unique Groups of Elements with DIVs

I am using a WordPress plugin that dynamically creates the following list on the fly:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
I need to wrap specific lis in unique divs like this:
<ul>
<div id="main">
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</div>
<div id="carbs">
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</div>
<div id="spice">
<li class="spices"></li>
<li class="herbs"></li>
</div>
<div id="other">
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</div>
</ul>
I've read about using the wrapall() function but I can't find instructions on how to wrap a group of elements that do not have the same class.

Assuming that you take the time to define the relationship between the class-names and the eventual id under which they should appear, and that you use valid HTML, the following plain JavaScript works (albeit I think it could be refined):
var grouped = {
'main' : ['proteins','seafood','dairy','veggies','fruit'],
'carbs' : ['nuts-seeds','grains','pasta'],
'spice' : ['spices','herbs'],
'other' : ['technique','special','servings']
};
function groupBy(el, map) {
var els,
newList = document.createElement('ul'),
newListItem = document.createElement('li'),
tmpList, tmpLI;
for (var key in map) {
if (map.hasOwnProperty(key)){
els = el.querySelectorAll('.' + map[key].join(', .'));
tmpList = newList.cloneNode();
tmpLI = newListItem.cloneNode();
tmpLI.appendChild(tmpList);
tmpLI.id = key;
for (var i = 0, len = els.length; i < len; i++){
tmpList.appendChild(els[i]);
}
el.appendChild(tmpLI);
}
}
}
groupBy(document.querySelector('ul'),grouped);
JS Fiddle demo.
The above function converts:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
Into:
<ul>
<li id="main">
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</ul>
</li>
<li id="carbs">
<ul>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</ul>
</li>
<li id="spice">
<ul>
<li class="spices"></li>
<li class="herbs"></li>
</ul>
</li>
<li id="other">
<ul>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
</li>
</ul>

Categories