Develop Reference

How to position brackets and symbols relative to a form input grid?

So I'm fairly new to HTML and JS and i wanted to add some brackets and a equal sign around this grid of input forms in order to make it look more like a system of matrices. Idea: https://imgur.com/a/nH9xET2
I've tried positioning them on the CSS sheet with position absolute for each bracket but then if I change the matrix's size or resize the browser's window, it doesn't work. How would i do this in the CSS or in the HTML/Javascript file so the brackets rescale for bigger sizes and stay in the correct spot?
span {
font-family: 'Latin Modern Math';
position: absolute;
top: 228px;
vertical-align: text-top;
font-size: 56px;
}
.a1 {
position: absolute;
left: 40px;
}
.a2 {
position: absolute;
left: 618px;
}
.x1 {
position: absolute;
left: 679px;
}
.x2 {
position: absolute;
left: 780px;
}
.igual {
position: absolute;
left: 820px;
top: 220px;
vertical-align: text-top;
font-size: 58px;
}
.b1 {
position: absolute;
left: 882px;
}
.b2 {
position: absolute;
left: 982px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/linear" method="post">
<div class="col-auto my-1">
<select style="margin: 15px 0px 20px;" id="dim_select" name="dim_select" class="custom-select largura" onchange="change()">
<option disabled selected>Dimension</option>
{% for i in range(3, 8) %}
<option>{{ i }}</option>
{% endfor %}
</select>
</div>
<!-- MATRIZ A GERADA POR JS -->
<div id="matrizAcontainer">
</div>
<script type="text/javascript">
$(document).ready(function() {
grid(3, 3);
});
function change() {
var select = document.getElementById("dim_select");
var index = select.selectedIndex
var n = parseInt(select.value);
grid(n, n);
};
function grid(rows, cols) {
var table = '<span class="a1">[</span>';
table += "<table>";
var size = ((screen.availWidth / 2.45) / rows) + "px";
for (i = 0; i < rows; i++) {
table += '<tr class="spacing-50">';
for (j = 0; j < cols; j++) {
table += '<td>' + '<input class="matrizA" name="A' + (i + 1) + (j + 1) + '" placeholder="a' + (i + 1) + (j + 1) + '"/>' + '</td>';
}
if (i == 0) {
table += '<span class="a2">]</span>';
table += '<span class="x1">[</span>';
table += '<span class="x2">]</span>';
table += '<div class="igual">=</div>';
table += '<span class="b1">[</span>';
}
table += '<td><input class="matrizX" placeholder="x' + (i + 1) + '" disabled/></td>';
table += '<td><input class="matrizB" name="B' + (i + 1) + '" placeholder="b' + (i + 1) + '"/></td>';
table += "</tr>";
}
table += "</table>";
table += '<span class="b2">]</span>';
$("#matrizAcontainer").empty();
$("#matrizAcontainer").append(table);
$("tr").css("height", 32 + "px");
$("input").css("width", size);
$(".matrizX").css("text-align", "center");
$(".matrizX").css("margin-left", 80 + "px").css("width", 80 + "px");
$(".matrizX").css("background", "#dedddf");
$(".matrizB").css("margin-left", 120 + "px").css("width", 80 + "px");
var bracket = (32 * (rows + 1));
$("span").css("transform", "scaleY(" + (bracket / 50) + ")");
}
</script>
<button style="margin: 20px 0px 20px; width: auto;" class="btn btn-primary btn-submit" type="submit"><b>Solve</b></button>
</form>

Based on this answer.
body{
display: flex;
}
#mainDiv {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
}
#borderLeft {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
}
#borderRight {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
margin-left : 4px;
}
#mainDivRight {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
margin-left:0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div id="mainDivRight">
<div id="borderRight"></div>
</div>
Different idea:
Size the width and height as you wish, or set it to auto.
Use an svg image for the background.
div{
width:200px;
height:100px;
background: lightblue url("https://cdn1.iconfinder.com/data/icons/mathematics-line-3/48/113-512.png");
background-size: 100% 100%;
background-repeat: no-repeat;}
<div id="brackets">
</div>

How to append to 2 columns dynamically

I have many inputs and I want a solution to create a row with 2 columns and then append input to them one by one (so it's 50% for each side unless they are impar).
Atm is creating many rows. How do I do this?
$.each(inputs, function (index, input) {
$(".modal-body").append('<div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div>');
}

You can use .wrap(), and then .after().
$('input[type="text"]').wrap('<div class="first-col"></div>');
$('.first-col').after('<div class="second-col"></div>');
*{
margin: 0;
padding: 0;
}
.first-col{
display: inline-block;
background: blue;
height: 30px;
width: 200px;
margin: 20px 0 20px 0;
}
.second-col{
display: inline-block;
width: 100px;
height: 20px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="fst"/><hr/>
<input type="text" id="snd"/><hr/>
<input type="text" id="trd"/><hr/>
<input type="text" id="frt"/><hr/>

Load, save and reset jquery values using a cookie

I am working on a site, in which I had to add screen adjustments using scrollbars and I made it using this example. You can see the code below...
HTML CODE:
<h1>Image Editor with CSS Filters and jQuery</h1>
<!--Form for collecting image URL -->
<form id="urlBox" class="center">
<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing!">
<input id="go" type="button" value="Go">
</form>
<hr color="grey">
<!--Controls for CSS filters via range input-->
<div class="sliders">
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min="0" max="100" value="0">
</p>
<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min="0" max="10" value="0">
</p>
<p>
<label for="br">Exposure</label>
<input id="br" name="br" type="range" min="0" max="200" value="100">
</p>
<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min="0" max="200" value="100">
</p>
<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min="0" max="360" value="0">
</p>
<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
</p>
<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min="0" max="100" value="0">
</p>
<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
</p>
<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
</p>
<input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
</div>
<!--container where image will be loaded-->
<div id="imageContainer" class="center">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>
<p class="p">Demo by Vikas Lalwani. See article.</p>
CSS CODE:
/* General styles for the page */
* {
margin: 0;
padding: 0;
}
body {
background-color: #D2D7D3;
font-family: monospace;
margin: 0 auto;
width: 960px;
}
h1 {
margin: 25px 0 25px 0;
font-size: 40px;
text-align: center;
}
hr {
margin: 20px 0;
}
form {
text-align: center;
}
/* Styles for URL box */
.url-box {
background-color: transparent;
display: inline-block;
height: 30px;
border: none;
border-bottom: 4px solid #b3b3b1;
padding: 0px 0px 0px 20px;
margin: 0px 0px;
width: 50%;
outline: none;
text-align: center;
font-size: 15px;
font-family: monospace;
font-weight: 100;
color: #000;
}
#go {
display: inline-block;
height: 50px;
width: 50px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 50%;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
}
/* Styles for image container*/
#imageContainer {
border: 2px solid grey;
border-radius: 10px;
padding: 5px;
width: 65%;
max-width: 600px;
float: left;
margin: 20px;
}
#imageContainer img {
border-radius: 10px;
width: 100%;
}
/* Styles for sliders*/
.sliders {
float: left;
border: 2px solid grey;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
}
.sliders p {
margin: 18px 0;
vertical-align: middle;
}
.sliders label {
display: inline-block;
margin: 10px 0 0 0;
width: 100px;
font-size: 16px;
color: #22313F;
text-align: left;
vertical-align: middle;
}
.sliders input {
position: relative;
margin: 10px 20px 0 10px;
vertical-align: middle;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border-radius: 5px;
/*required for proper track sizing in FF*/
width: 150px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 7px;
background: #ABB7B7;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #4B77BE;
margin-top: -6px;
vertical-align: middle;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:hover {
cursor: pointer;
}
#reset {
display: inline-block;
height: 40px;
width: 100px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
margin: 0 0 10px 0;
}
.p {
clear: both;
text-align: center;
padding: 40px 0 40px;
}
JQUERY DODE:
//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);
//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);
// editing image via css properties
function editImage() {
var gs = $("#gs").val(); // grayscale
var blur = $("#blur").val(); // blur
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var huer = $("#huer").val(); //hue-rotate
var opacity = $("#opacity").val(); //opacity
var invert = $("#invert").val(); //invert
var saturate = $("#saturate").val(); //saturate
var sepia = $("#sepia").val(); //sepia
$("#imageContainer img").css(
"filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);
$("#imageContainer img").css(
"-webkit-filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);
}
//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);
// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
}, 0);
});
// adding an image via url box
function addImage(e) {
var imgUrl = $("#imgUrl").val();
if (imgUrl.length) {
$("#imageContainer img").attr("src", imgUrl);
}
e.preventDefault();
}
What I can't aim, is to load, save or reset values of adjustments using a cookie and jquery!!! Any idea how can I do this?
EDIT
I need an example based on this part of code:
$(document).ready(function(){
function adjustments() {
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var opacity = $("#opacity").val(); //opacity
var saturate = $("#saturate").val(); //saturate
$("#page-wrap, #preloader").css("filter", 'brightness(' + br +
'%) contrast(' + ct +
'%) opacity(' + opacity +
'%) saturate(' + saturate +
'%) ');
$("#page-wrap, #preloader").css("-webkit-filter", 'brightness(' + br +
'%) contrast(' + ct +
'%) opacity(' + opacity +
'%) saturate(' + saturate +
'%) ');
}
$("input[type=range]").change(adjustments).mousemove(adjustments);
$('#adjustments-form').on('reset', function () {setTimeout(function() {adjustments();},0);});
});

You can manage cookies (get, add,update, etc..) in your script using one of these two examples:
https://github.com/js-cookie/js-cookie
https://github.com/carhartl/jquery-cookie
Then simply:
Check for the cookie existence on page load:
If cookie is available then load properties,
If cookie don't exist - create a new cookie with the current properties.
An example (using jQuery cookie plugin)
Setting a cookie and storing some data:
// prepare and store data
var props = {
name:'John',
age:'31'
};
$.cookie('_storeProperties', JSON.stringify(props) );
Retrieve cookie and parse saved data:
var props = $.parseJSON( $.cookie('_storeProperties') );
// do something with the data..
Another approach (which I would prefer) would be using localStorage.
You can read a bit about localStorage in the following link:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
EDIT ON OP REQUEST
This is not a complete code, just showing you how to utilize what I have explained on your own scenario, customize to fit your needs:
function adjustments() {
// creating an initial properties object
var props = {
br : $("#br").val(), // brightness
ct : $("#ct").val(), // contrast
opacity : $("#opacity").val(), //opacity
saturate : $("#saturate").val(), //saturate
};
// try to fetch stored properties from a cookie
var propsCookie = $.cookie('_storeProperties');
// we have previous settings stored
if(propsCookie){
// load them
props = $.parseJSON( propsCookie );
}else{
// no previous settings stored, lets store ours
$.cookie('_storeProperties', JSON.stringify(props) );
}
// use the props object as: props.br , props.ct, etc..
// your code
}
Hope it helps a bit!

Customizing HTML range input with a floating DIV that contains current value

I'd like to create a range slider that has a div element follow the range thumb. This div element would contain the current value of the range input. How would I go about doing something like this? I've looked into styling the slider but don't know how I could add an actual element onto the thumb. It would look something like this, excuse my terrible drawing abilities:
Edit: The following div should update while slider is being dragged.
UPDATE: I got a pretty good prototype going but cant seem to get it to follow the slider perfectly. It gets off center by a few pixels depending on where it is along the track. Heres my codepen
UPDATED CODE
HTML
<div id="slider-cntnr">
<input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)"/>
<div id="slider-follow">
<div id="slider-val-cntnr">
<span id="slider-val"></span>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
#slider-cntnr {
width: 50%;
margin: 40px;
position: relative;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow {
margin-left: -14px;
background-color: black;
width: 30px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
#slider-val-cntnr {
background-color: white;
width: 25px;
height: 20px;
}
JS
var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');
var updateFollowerValue = function(val) {
follower_val.innerHTML = val;
follower.style.left = val + '%';
};
updateFollowerValue(slider.value);

If you're not supporting old browsers, you can take advantage of the
<input type="range">
and some JavaScript to follow it along. See my Codepen: http://codepen.io/abhisharma2/pen/wMOpqz

An example with custom output
It's updating while you drag the input.
var el, newPoint, newPlace, offset;
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
// Select all range inputs, watch for change
$("input[type='range']").change(function() {
// Cache this for efficiency
el = $(this);
// Measure width of range input
width = el.width();
// Figure out placement percentage between left and right of input
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -1;
// Prevent bubble from going beyond left or right (unsupported browsers)
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint; }
// Move bubble
el
.next("output")
.css({
left: newPlace,
marginLeft: offset + "%"
})
.text(el.val());
})
// Fake a change to position bubble at page load
.trigger('change');
output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 40px;
height: 30px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 15px/30px Georgia;
bottom: 175%;
left: 0;
margin-left: -1%;
}
output:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #999999;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
form {
position: relative;
margin: 50px;
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
reference https://css-tricks.com/value-bubbles-for-range-inputs/

Basically ypu can go with something like this:
Important points are;
Don't forget to position your wrapper as relative.
Give your following badge absolute position, and for centering, negative margin-left value as your badge's width / 2. (If your badge is 50px, give margin-left -25px);
Range slider must has 100% width.
HTML:
<div class="range-slider">
<input type="range" min="0" max="100" step="1" />
<div class="range-badge"></div>
</div>
CSS:
.range-slider{
position: relative;
width: 200px;
}
.range-slider > input.range{
width: 100%;
}
.range-slider > .range-badge{
position: absolute;
left: 0%;
top: 20px;
background: #000;
color: #fff;
width: 20px;
text-align: center;
margin-left: -10px;
padding: 5px 0;
}
JS:
$(document).ready(function(){
var badge = $('.range-badge');
$('.range').on('change', function(){
var current = $(this).val();
badge.text(current).animate({
'left': current+'%'
});
});
});
Test here:
https://jsfiddle.net/dmnzugh8/6/

How to add tick marks along jQuery Mobile slider

I have found a similar question asked here:
Add tick marks to jQuery slider?
But this deals with the jQuery-UI library and not jQuery Mobile, I'm not sure how well it would crossover.
What I would like to do is to add 5 tick marks along the slider rail of my jQuery Mobile slider widgets- # 0%, 25%, 50 %, 75%, 100%
How would I go about doing this?
Edit:
I have implemented Sia's solution but now there are some weird line thickness issues I am noticing.
Here is a picture of my sliders with the ticks via Sia's solution:
As you can see, some of the ticks have varying thickness and they seem to repeat in this way for each slider... The css and html for these ticks is exactly the same as Sia's answer save for the inclusion of numbers below the ticks
Here is the relevant JS code:
$(document).on("pageinit",function(){
var ticks2 = "<div class='tick' id='ticka'></div>"
ticks2 += "<div class='tick' id='tickb'></div>";
ticks2 += "<div class='tick' id='tickc'></div>";
ticks2 += "<div class='tick' id='tickd'></div>";
ticks2 += "<div class='tick' id='ticke'></div>";
ticks2 += "<div class='tick' id='tickf'></div>";
ticks2 += "<div class='tick' id='tickg'></div>";
ticks2 += "<div class='tick' id='tickh'></div>";
$("div.ui-slider-track").append(ticks2);
...
}
And the CSS:
.tick {
width: 1px;
background-color:#3388cc;
height:100%;
position:absolute;
bottom:0px;
}
#ticka{
margin-left:11.1%;
}
#tickb{
margin-left:22.2%;
}
#tickc{
margin-left:33.3%;
}
#tickd{
margin-left:44.4%;
}
#ticke{
margin-left:55.5%;
}
#tickf{
margin-left:66.6%;
}
#tickg{
margin-left:77.7%;
}
#tickh{
margin-left:88.8%;
}

Sia has given you a nice solution. In addition, you can look at this blog entry for some ideas on enhancing the slider widget (full disclosure, I wrote it):
Fun with the Slider Widget
There is an example of adding tick marks and you could also consider the example of the color DIVs with labels in the slider track. Here is a fiddle with the 2 techniques included:
DEMO
<div id="tickMarks" >
<label for="theSlider2">Slider with Tick marks:</label>
<input type="range" name="theSlider2" id="theSlider2" min="0" max="100" value="60" />
</div>
<br /><br />
<div id="tickMarks2" >
<label for="theSlider3">Slider Background Ranges:</label>
<input type="range" name="theSlider3" id="theSlider3" min="0" max="100" value="55" />
</div>
The javascript dynamically creates the background DIVs and inserts them into the slider track:
$(document).on("pagecreate", "#page1", function () {
var ticks = '<div class="sliderTickmarks "><span>0%</span></div>';
ticks += '<div class="sliderTickmarks "><span>25%</span></div>';
ticks += '<div class="sliderTickmarks "><span>50%</span></div>';
ticks += '<div class="sliderTickmarks "><span>75%</span></div>';
ticks += '<div class="sliderTickmarks "><span>100%</span></div>';
$("#tickMarks .ui-slider-track").prepend(ticks);
var colorback = '<div class="sliderBackColor color1">0-24%</div>';
colorback += '<div class="sliderBackColor color2">25-50%</div>';
colorback += '<div class="sliderBackColor color3">50-75%</div>';
colorback += '<div class="sliderBackColor color4">75-100%</div>';
$("#tickMarks2 .ui-slider-track").prepend(colorback);
});
The CSS for tickmarks leaves the DIVs transparent and adds a right border to the middle DIVS for the vertical tick marks. The inner SPANS are moved using relative poritioning to below the track. For the color DIVs, we add background colors and some corner rounding to the first and last DIVs so they match the rounding of the track:
.sliderTickmarks{
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span{
position: relative;
left: 100%;
top: 125%;
margin-left: -10px;
font-size: 12px;
font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child{
border-right: 0;
width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
border-right: 0;
}
.sliderBackColor{
height: 100%;
width: 25%;
float: left;
color: white;
text-align: center;
font-size: 10px;
font-weight: normal;
text-shadow: 0px 1px 2px #333;
}
.color1 { background-color: #D6AA26;}
.color2 { background-color: #93A31C;}
.color3 { background-color: #408156;}
.color4 { background-color: #30374F;}
.ui-slider-track > div.sliderBackColor:first-child{
border-top-left-radius: 0.3125em;
border-bottom-left-radius: 0.3125em;
}
.ui-slider-track > div.sliderBackColor:last-of-type{
border-top-right-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}

This is probably not the most elegant solution but I think it's what you are looking for
Example: http://jsfiddle.net/gravitybox/5tfPj/
js
$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");
});
css
.tick {
width: 1px;
background-color:#999999;
height:5px;
position:absolute;
bottom:0px;
}
#number0{
margin-left:0%;
}
#percent25, #number25{
margin-left:25%;
}
#percent50, #number50{
margin-left:50%;
}
#percent75, #number75{
margin-left:75%;
}
#number100{
margin-left:100%;
}
.number {
position:absolute;
top:18px;
left:-5px;
bottom:0px;
font-size:10px;
color:#999999;
}