Input type=range for image/text alignment

by agib

HTML

<div id="controls">
    <p>Billedjustering (Billedboks):</p>   
<br>    
<form name="alignment">
    <div class="alignmentoption">
<label for="std"><div class="alignicon" id="alignstd"></div></label>
        <input type="radio" name="align" id="std" checked="checked"/>
    </div>
    <div class="alignmentoption">
        <label for="left"><div class="alignicon" id="alignleft"></div></label>
        <input type="radio" name="align" id="left"/>
    </div>
    <div class="alignmentoption">
    <label for="center"><div class="alignicon" id="aligncenter"></div></label>
    <input type="radio" name="align" id="center"/>
</div>
     <div class="alignmentoption">
    <label for="right"><div class="alignicon" id="alignright"></div></label>
    <input type="radio" name="align" id="right"/>
    </div>
</form>
    <br>
 <p>Margen mellem kant og nabo-elementer</p>   
        <br>
 <!--<label>Margen:</label>-->
    <div id="sliderwrapper"><input type="range" id="slider" min="0" max="60" value="6"/></div>
<div id="anchoring">    
<label>Forankring:</label>
<span id="leftedgewrapper">
    <input type="radio" name="anchor" id="leftedge" />
<label for="leftedge"><img src="http://agi.tangora.com/media/anchor-left.png"/></label>
</span>
    <span id="rightedgewrapper">
    <input type="radio" name="anchor" id="rightedge" />
<label for="rightedge"><img src="http://agi.tangora.com/media/anchor-right.png"/></label>
</span>
<span id="topedgewrapper">
    <input type="radio" name="anchor" id="topedge"/>
<label for="topedge"><img src="http://agi.tangora.com/media/anchor-top.png"/></label>
    </span>
    
</div>
</div>

<div id="content">
    
    
    <p>Nulla tincidunt, orci quis dictum iaculis, tortor risus accumsan arcu, in bibendum ligula arcu tempus magna. Sed sit amet tellus massa, et tincidunt lectus. Proin scelerisque magna est. Nulla porta metus nec odio fermentum lobortis. Integer iaculis nisl elit, sed scelerisque arcu. Vivamus enim elit, bibendum sit amet tincidunt in,...

CSS

body { font-family: arial;  }
label { margin-right: 20px; }

div.alignicon { height: 32px; width:32px; background-position:top left; }
div.alignmentoption { display:inline-block; width:46px; }
input#slider { width: 200px; margin-bottom: -50px; }
input[type="radio"] { margin-left:-10px; }

#alignstd { background-image: url("http://agi.tangora.com/media/image_left_aligned_without_wrap.png"); }
#alignleft { background-image: url("http://agi.tangora.com/media/image_left_aligned.png"); }
#aligncenter { background-image: url("http://agi.tangora.com/media/image_center_aligned.png"); }
#alignright { background-image: url("http://agi.tangora.com/media/image_right_aligned.png"); }

#sliderwrapper { display:inline-block; }

#img1 { border: 2px solid #666; padding:10px; }

#controls { margin: 20px; border: 1px #CCC solid; padding: 20px; font-size:14px; background-color: #FAFAFA; }
#controls p { font-weight:bold; text-transform:uppercase; }
#content { margin: 0 20px; font-size:12px; text-align:justify; }
#content p { margin-bottom: 10px; }
#anchoring { display:none; margin-left: 30px; }

JavaScript

var currentAlignment = "std";
var selectedImg = "#img1";
var anchor;

$(document).ready(function() {
    $("#slider").change(function() {

        AdjustContextualMargin();
    });
    $("input[name='align']").click(function() {
        currentAlignment = $(this).attr("id");
        AlignImage();
        AdjustContextualMargin();
        //HandleAnchoringSettings();
    });
/*$("input[name='anchor']").click(

    function() {
        anchor = $(this).attr("id");
        AdjustContextualMargin();

    }

    );*/
});


function AdjustContextualMargin() {
    console.log(currentAlignment);
    var marginValue = document.getElementById('slider').value;

    if (currentAlignment == "std" || currentAlignment == "center") {
        $(selectedImg).css("margin-top", marginValue + "px");
        $(selectedImg).css("margin-bottom", marginValue + "px");

    }
    else {
        $(selectedImg).css("margin-bottom", 0);
        $(selectedImg).css("margin-top", "2px");

        if (currentAlignment == "left") {

            $(selectedImg).css("margin-right", parseInt(marginValue) + 4 + "px");
            

        }
        else if (currentAlignment == "right") {
            $(selectedImg).css("margin-left", parseInt(marginValue) + 4 + "px");

        }
    }
}

function AlignImage(imgalign) {
    var alignmentSettings;

    if (currentAlignment == "left") {
        alignmentSettings = "float:left; margin-left:0;";
    }
    else if (currentAlignment == "center") {
        alignmentSettings = "margin-left:auto; margin-right:auto; display:block;";
    }
    else if (currentAlignment == "right") {
        alignmentSettings = "float:right; margin-right:0;";
    }
    else {
        alignmentSettings = "";
    }
    $(selectedImg).attr("style", alignmentSettings);
    //HandleAnchoringSettings();
}


/*
function HandleAnchoringSettings() {
    if (currentAlignment == "std" || currentAlignment == "center") {
        $("#anchoring").hide();

    }
    else {
       ...