JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>mindmap plugin</title>

          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript" src="mindmap.js"></script>

          <link rel="stylesheet" media="screen" type="text/css" href="chrome.css" />
     </head>
     <body>
    <div class="main">
      <ul>
        <li id="show"><a class="click" href="#">Rohan</a>
        </li>
      </ul>
    </div>
    width: <span id="widthSpan"></span> px
    <br />
    height: <span id="heightSpan"></span> px
    <br>
    <h1>WE ARE MEASURING THE WIDTH OF THE BROWSER SIZE. YOU MAY HAVE TO MODIFY FOR A DIV</h1>
    </body>
</html>

CSS

body {
    background-color:#999;
}

ul {
    list-style-type: none;
}

.main {
    border : 3px solid #fff;
    top: 0px;
    left: 0px;
}

#show {
    border : 3px solid #ff0000;
    width: 50%;
}

a {
    color:#fff;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    background:#3399ff;
    border: 2px solid white;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 7px 7px 7px 7px;
    border: 5px 5px 5px 5px;
    word-spacing:5px;
    vertical-align: 0px;
}

JavaScript

$(document).ready(function(){

  $('#heightSpan').html($(window).height());
  $('#widthSpan').html($(window).width());

  $(window).on('resize', function(){
    $('#heightSpan').html($(window).height());
    $('#widthSpan').html($(window).width());

    var top = Math.round($(window).height()/2);
    var left = Math.round($(window).width()/2);

    console.log(top + "," + left);

    $(".main").css("top", top);
    $(".main").css("top", top);

  });

  $("a.click").click(function () {
      console.log("works");
  });


});