Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var answerScroll = $( "#answerScroll" );
- var answers = $( "#answers" );
- var answersList = $( "#answers > li" );
- var singleAnswer = $( "#answers > li" ).first();
- var answerScrollHeight = $( "#answerScroll" ).height();
- var questionList = $( "#questions" ).children();
- //Setup
- $( "#answerScroll" ).height(answerScrollHeight);
- $( "#answers" ).height((answerScrollHeight * 2) - (singleAnswer.height() * 2)).css({
- "margin-top": (answerScrollHeight - singleAnswer.height())
- });;
- $( "#answerScroll" ).scrollTop(answerScrollHeight - singleAnswer.height());
- // Click handler
- $( "#answers > li" ).click(function(event) {
- var self = this
- var content = event.target.innerText;
- questionList.each(function(index, node) {
- var jNode = $(node);
- var nodeRect = jNode[0].getBoundingClientRect();
- if (event.clientY >= nodeRect.top && event.clientY <= nodeRect.bottom) {
- console.log(jNode.children().first());
- if (jNode.children().first().html() == "") {
- jNode.children().first().html(content);
- self.remove();
- }
- }
- });
- });
- <!DOCTYPE html>
- <html lang="sv">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="Tillgänglighetsexempel skapat av Li Education">
- <meta name="author" content="Lin Education">
- <title>Lin Education - Tillgänglighetsexempel - Startsida</title>
- <!-- Bootstrap core CSS -->
- <link href="css/bootstrap.min.css" rel="stylesheet">
- </head>
- <body style="margin-top: 20px">
- <div class="container">
- <div class="col-xs-6">
- <ul class="list-group" id="questions">
- <li class="list-group-item">
- <span class="badge"></span>
- Cras justo odio
- </li>
- <li class="list-group-item">
- <span class="badge"></span>
- Dapibus banana okej
- </li>
- <li class="list-group-item">
- <span class="badge"></span>
- jaja okej bra bra
- </li>
- <li class="list-group-item">
- <span class="badge"></span>
- Banana hammock
- </li>
- </ul>
- </div>
- <div class="col-xs-6">
- <div id="answerScroll" style="overflow:scroll">
- <ul class="list-group" id="answers">
- <li class="list-group-item">
- A
- </li>
- <li class="list-group-item">
- B
- </li>
- <li class="list-group-item">
- C
- </li>
- <li class="list-group-item">
- D
- </li>
- </ul>
- </div>
- </div>
- </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- <script src="js/crazylist.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement