Comment functionality test

by laustdeleuran

HTML

<menu>
    <fieldset>
        <label>Font size</label>
        <input type="range" min="75" max="150" value="100" id="font-size" />
    </fieldset>
    <fieldset>
        <label>Line length</label>
        <input type="range" min="50" max="100" value="75" id="line-length" />
    </fieldset>
    <fieldset>
        <label for="show-comments">Show comments</label>
        <input type="checkbox" id="show-comments" checked="checked" />
    </fieldset>
    <fieldset id="color">
        <label>Color scheme:</label>
        <label for="color-default"><input name="color" id="color-default" type="radio" checked="checked" value="default" />Default</label>
        <label for="color-dark"><input name="color" id="color-dark" type="radio" value="dark" /> Dark</label>
        <label for="color-light"><input name="color" id="color-light" type="radio" value="light" />Light</label>
    </fieldset>
</menu>
<div class="container">
    <div class="comments" id="comments">
        <div class="comment text" data-id="1">
            <p>Det her er vigtigt!</p>
        </div>
        <div class="comment text" data-id="2">
            <p>Det her er et rent postulat</p>
        </div>
        <div class="comment text" data-id="3">
            <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>
        </div>
    </div>
    <div class="content text" id="text">
        <div class="inner" id="inner">
            <h1>HTML Ipsum Presents</h1>
                   
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris <span class="comment"...

CSS

/*=BASELINE*/
menu, label, fieldset, div { margin:0; padding:0; }
body {
  font-family:Georgia, Times, "Times New Roman", serif;
  font-size:62.5%;  
}
/*=CONTROLS*/
menu {
    background:#333;
    box-shadow:0 0 5px rgba(0,0,0,0.5), inset 0 -15px 30px rgba(0,0,0,0.25);
    color:#fff;
    text-shadow:0 -1px 1px #000;
    font-size:1.4em;
    padding:0.5em;
    overflow:hidden;
    position:relative;
    z-index:2;
}
menu fieldset,
menu label,
menu input {
    display:block;
    float:left;
    line-height:1.5em;
    height:1.5em;
    margin:0 1em 0 0;
}
menu input {
    cursor:pointer;
}
menu label[for] {
    cursor:pointer;
}
menu label input {
    margin-right:0.25em;
}
/*=CONTAINER*/
.container {
    overflow:hidden;
    font-size:1.4em;
    background:#f7f4dd url(http://dev.ljd.dk/resources/text-back-gradient.png) center top no-repeat;
    color:#555;
    position:relative;
    z-index:1;
}
    /*=THEMES*/
    .container.dark {
      background:#000;
      color:#eee;
    }
    .container.light {
      background:#fff;
      color:#333;
    }
/*=TEXT*/
.content {
    padding:2em;
    overflow:hidden;
}
.content .inner {
    width:75%;
    margin:0 auto;
}
.content.show-comments .comment {
    border-bottom:1px dotted #a70000;
    color:#a70000;
    cursor:help;
}
.content.show-comments .comment.highlight {
    background:rgba(200,0,0,0.25);
}
    /*=TYPOGRAPHY*/
    .text {
        line-height:1.5em;
    }
    .text h1, 
    .text h2, 
    .text h3 {
        font-size:2em;
        line-height:1.5em;
        margin-top:0.75em;
    }
    .text h1:first-child, 
    .text h2:first-child, 
    .text h3:first-child {
        margin-top:0;
    } 
    .text h2 {
        font-size:1.5em;
        line-height:1.875em;
    }
    .text h3 {
        font-size:1.285714285714286em;
        line-height:2.035714285714286em;
    }
    .text a {
        color:#0060b2;
    }
    .text strong,
    .text b { 
        font-weight:bold;
    }
    .text em,
    .text i {
       ...

JavaScript

// Smart Resize Plugin  - http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function(h,b){var g=function(a,b,d){var c;return function(){var e=this,f=arguments;c?clearTimeout(c):d&&a.apply(e,f);c=setTimeout(function(){d||a.apply(e,f);c=null},b||100)}};jQuery.fn[b]=function(a){return a?this.bind("resize",g(a)):this.trigger(b)}})(jQuery,"smartresize");

$(document).ready(function(){
    // Comments
    var redrawComments = function(){
        var commentContainer = $('#comments'),
        textComments = $('#text .comment'),
        curId;
        
        // Set up comment box height
        $('#comments').css('min-height',$('#text').height());
        
        // Reset positions
        $('#comments .comment').removeAttr('style')
        
        // Loop through text comments and set position
        textComments.each(function(i, el){
            var $textComment = $(el),
            elId = $textComment.attr('data-id');
            if (curId != elId) {
                curId = elId;
                // Find corresponding comment
                var $comment = $('#comments .comment[data-id="'+elId+'"]');
                if ($comment[0]) {
                    var commentOffsetTop = $comment.offset().top,
                    textCommentOffsetTop = $textComment.offset().top;
                    if (textCommentOffsetTop - commentOffsetTop > 0) {
                        $comment.css('margin-top',textCommentOffsetTop - commentOffsetTop);
                    }
                }
            }
        });
    };
    redrawComments();
    $(window).smartresize(redrawComments);
    
    // Comment hover effects
    $('#comments .comment').each(function(){
        var $this = $(this),
        $bundle = $this.add($('#text .comment[data-id="'+$this.attr('data-id')+'"]'));
        $bundle.hover(function(){
            $bundle.toggleClass('highlight');
        });
    });
    
    // Controls
    (function(){
        // Font size
       ...