tags in JS and css counter increment
Question
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Sign-Up/Login Form</title> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#leaderboard">LeaderBoard</a></li> <li class="tab"><a href="#login">MedalTally</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Shivam Sharma</mark> <small>315</small> </li> <li> <mark>Deepa B</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> </ol> </div> </div> <div id="login"> </div> </div><!-- tab-content --> </div> <!-- /form --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
*, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; } a { text-decoration: none; color: #1ab188; -webkit-transition: .5s ease; transition: .5s ease; } a:hover { color: #179b77; } .form { background: rgba(19, 35, 47, 0.9); padding: 10px; max-width: 330px; margin: 40px auto; } .tab-group { list-style: none; padding: 0; margin: 0 0 0 0; } .tab-group:after { content: ""; display: table; clear: both; } .tab-group li a { display: block; text-decoration: none; color: #a0b3b0; font-size: 20px; float: left; width: 50%; text-align: center; cursor: pointer; transition: .5s ease; } .tab-group li a:hover { background: #179b77; color: #ffffff; } .tab-group .active a { background: #1ab188; color: #ffffff; } .tab-content > div:last-child { display: none; } /*-------------------- Body --------------------*/ body { min-height: 650px; height: 200px; margin: 0; background:-webkit-radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); color: #fff; font-family: 'Open Sans', sans-serif; padding 10px; } /*-------------------- Leaderboard --------------------*/ .leaderboard { width: 300px; height: 400px; display: none; } .leaderboard ol li { position: inherit; z-index: 1; font-size: 14px; counter-increment: leaderboard; padding: 18px 10px 18px 10px; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1); transform: translateZ(0) scale(1, 1); } .leaderboard ol li::before { content: counter(leaderboard); position: absolute; z-index: 2; top: 15px; left: 15px; width: 20px; height: 20px; line-height: 20px; color: #c24448; background: #fff; border-radius: 20px; text-align: center; } .leaderboard ol li mark { position: absolute; z-index: 5; top: 0; left: 0; width: 350%; height: 100%; padding: 18px 10px 18px 50px; margin: 0; background: none; color: #fff; } .leaderboard ol li mark::before, .leaderboard ol li mark::after { position: relative; z-index: 1; left: 9px; border-top: 10px solid #c24448; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; opacity: 0; } .leaderboard ol li mark::after { left: auto; border-left: none; border-right: 10px solid transparent; } .leaderboard ol li small { position: relative; z-index: 2; display: block; text-align: right; } .leaderboard ol li::after { content: ''; position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: #fa6855; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0; } .leaderboard ol li:nth-child(1) { background: #fa6855; } .leaderboard ol li:nth-child(1)::after { background: #fa6855; } .leaderboard ol li:nth-child(2) { background: #e0574f; } .leaderboard ol li:nth-child(2)::after { background: #e0574f; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); } .leaderboard ol li:nth-child(2) mark::before, .leaderboard ol li:nth-child(2) mark::after { border-top: 6px solid #ba4741; bottom: -7px; } .leaderboard ol li:nth-child(3) { background: #d7514d; } .leaderboard ol li:nth-child(3)::after { background: #d7514d; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11); } .leaderboard ol li:nth-child(3) mark::before, .leaderboard ol li:nth-child(3) mark::after { border-top: 2px solid #b0433f; bottom: -3px; } .leaderboard ol li:nth-child(4) { background: #cd4b4b; } .leaderboard ol li:nth-child(4)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(4) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(5) { background: #cd4b4b; } .leaderboard ol li:nth-child(5)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(5) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(6) { background: #cd4b4b; } .leaderboard ol li:nth-child(6)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(6) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(7) { background: #cd4b4b; } .leaderboard ol li:nth-child(7)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(7) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(8) { background: #c24448; border-radius: 0 0 10px 10px; } .leaderboard ol li:nth-child(8)::after { background: #c24448; box-shadow: 0 -2.5px 0 rgba(0, 0, 0, 0.12); border-radius: 0 0 10px 10px; } .leaderboard ol li:nth-child(8) mark::before, .leaderboard ol li:nth-child(5) mark::after { top: -9px; bottom: auto; border-top: none; border-bottom: 8px solid #993639; } .leaderboard ol li:hover { z-index: 2; overflow: visible; } .leaderboard ol li:hover::after { opacity: 1; -webkit-transform: scaleX(1.06) scaleY(1.03); transform: scaleX(1.06) scaleY(1.03); } .leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after { opacity: 1; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Sign-Up/Login Form</title> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#leaderboard">RecentWeek</a></li> <li class="tab"><a href="#login">Overall</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Mustaque Rashid</mark> <small>315</small> </li> <li> <mark>Deepa Balasubramaniam</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> </ol> </div> </div> <div id="login"> </div> </div><!-- tab-content --> </div> <!-- /form --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
I have the above codes for the html ,css and js for a leaderboard .
Issue: 1.how can we get rid of the incremental counter in the left side of the leaderboard body.
2.how can we display the leaderboard as soon as the page loads ,not just the tags ie not just the leaderboard and medaltally tags.
3.how to include two more tags below the above tags ie below the leaderboard and medaltally.
Fiddle link for the above codes : link
1 answers
solution1
1 ACCPTED 2016-10-24 13:39:53
For the first issue. Add the following property into the .leaderboard ol li class
list-style: none;
For your second request replace the onclick jquery event handler code and replace it with the following inside the document.ready block
$(document).ready(function(){
var _this = $('.tab a:first')
var block = _this.attr('href');
if(block == "#leaderboard"){
$(block).fadeIn();
$('#login').hide();
// code to hide other tabs if added
}
});
For the 3 request: add 2 more li tags in the <ul class="tab-group"> as follows
<ul class="tab-group">
<li class="tab active"><a href="#leaderboard">LeaderBoard</a></li>
<li class="tab"><a href="#login">MedalTally</a></li>
<li class="tab"><a href="#">Third Tag</a></li>
<li class="tab"><a href="#">Forth Tag</a></li>
</ul>
Hope this helps.
[Edit]
For css to look good do the follow:
add
padding:0px !important;property in the.leaderboard olclassremove the
height: 308px;from the.leaderboardclass.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Increment and decrement counter JS
increment counter in node js mongodb
Counter not increment in vue.js
Set CSS counter-increment via jQuery
Angular JS: Increment a Counter in a Service From Controller
Decrement counter not working as expected with respect to increment counter-angular js
How to make first li value 0 and then increment by 2 using css counter?
Backbone.js once() event method: counter increment example
React.js Increment and Decrement counter not mapping correctly
Vue js counter increment/decrement function not working as expected
Related Tags