jQuery(document).ready(function () {
$("#red").slider({
orientation: "horizontal",
range: "min",
max: 100,
value: 20,
slide: update_arrow
});
$("#arrow_size").focusout(function () {
update_arrow();
});
$("#border_size").focusout(function () {
update_arrow();
});
$("input[name='arrow_side']").change(function (e) {
update_arrow();
});
update_arrow();
});
function update_arrow() {
var border_size = $("#border_size").val();
var side_value = $("input[name='arrow_side']:checked").val();
var margin_val = "",
margin_before_val = "";
var arrow_after = $("#arrow_size").val();
var arrow_before = parseInt(border_size) + parseInt(arrow_after) + parseInt(arrow_after % 2) + Math.floor(arrow_after / 2) - 1;
var arrow_margin = $("#red").slider("value");
if (side_value == "top") {
margin_val = 'border-bottom-color: #FFFFFF;\n';
margin_val = margin_val + 'bottom: 100%;\n';
margin_val = margin_val + 'left: ' + arrow_margin + '%;\n';
margin_val = margin_val + 'margin-left: -' + arrow_after + 'px;\n';
margin_val = margin_val + 'border-width:' + arrow_after + 'px;\n';
margin_before_val = 'border-bottom-color: #2CDF7B;\n';
margin_before_val = margin_before_val + 'bottom: 100%;\n';
margin_before_val = margin_before_val + 'left: ' + arrow_margin + '%;\n';
margin_before_val = margin_before_val + 'margin-left: -' + arrow_before + 'px;\n';
margin_before_val = margin_before_val + 'border-width:' + arrow_before + 'px;\n';
}
if (side_value == "bottom") {
margin_val = 'border-top-color: #FFFFFF;\n';
margin_val = margin_val + '\ntop: 100%;\n';
margin_val = margin_val + '\nleft: ' + arrow_margin + '%;\n';
margin_val = margin_val + '\nmargin-left: -' + arrow_after + 'px;\n';
margin_val = margin_val + '\nborder-width:' + arrow_after + 'px; \n';
margin_before_val = 'border-top-color: #2CDF7B;\n';
margin_before_val = margin_before_val + 'top: 100%;\n';
margin_before_val = margin_before_val + 'left: ' + arrow_margin + '%;\n';
margin_before_val = margin_before_val + 'margin-left: -' + arrow_before + 'px;\n';
margin_before_val = margin_before_val + 'border-width:' + arrow_before + 'px;\n';
}
if (side_value == "right") {
margin_val = 'border-left-color: #FFFFFF;\n';
margin_val = margin_val + 'left: 100%;\n';
margin_val = margin_val + 'top: ' + arrow_margin + '%;\n';
margin_val = margin_val + 'margin-top: -' + arrow_after + 'px;\n';
margin_val = margin_val + 'border-width:' + arrow_after + 'px;\n';
margin_before_val = 'border-left-color: #2CDF7B;\n';
margin_before_val = margin_before_val + 'left: 100%;\n';
margin_before_val = margin_before_val + 'top: ' + arrow_margin + '%;\n';
margin_before_val = margin_before_val + 'margin-top: -' + arrow_before + 'px;\n';
margin_before_val = margin_before_val + 'border-width:' + arrow_before + 'px;\n';
}
if (side_value == "left") {
margin_val = 'border-right-color: #FFFFFF;\n';
margin_val = margin_val + 'right: 100%;\n';
margin_val = margin_val + 'top: ' + arrow_margin + '%;\n';
margin_val = margin_val + 'margin-top: -' + arrow_after + 'px;\n';
margin_val = margin_val + 'border-width:' + arrow_after + 'px';
margin_before_val = 'border-right-color: #2CDF7B;\n';
margin_before_val = margin_before_val + 'right: 100%;\n';
margin_before_val = margin_before_val + 'top: ' + arrow_margin + '%;\n';
margin_before_val = margin_before_val + 'margin-top: -' + arrow_before + 'px;\n';
margin_before_val = margin_before_val + 'border-width:' + arrow_before + 'px;\n';
}
var str = "";
str = str + '<div id="arrow_container">';
str = str + '<style type="text/css">';
str = str + '#arrow_div \n{\n';
str = str + 'font:italic bold 12px/30px Georgia, serif;\n';
str = str + 'border: ' + border_size + 'px solid #2CDF7B;\n';
str = str + 'box-shadow: 0 0 9px black;\n';
str = str + '-moz-box-shadow: 0 0 9px black;\n';
str = str + '-webkit-box-shadow: 0 0 9px black;\n';
str = str + 'width: 100px;\n';
str = str + 'height: 100px;\n';
str = str + 'background-color: white;\n';
str = str + 'display:block;\n';
str = str + 'margin-left: 150px;\n';
str = str + 'position: relative;\n';
str = str + '\n}\n';
str = str + '#arrow_div:before, #arrow_div:after \n {\n';
str = str + 'content:" ";\n';
str = str + 'border: solid transparent;\n';
str = str + 'margin: 0px;\n';
str = str + 'padding: 0px;\n';
str = str + 'position: absolute;\n';
str = str + 'pointer-events: none;\n';
str = str + '}\n';
str = str + '#arrow_div:after \n{';
str = str + '\n\tborder-color: rgba(255, 255, 255, 0);\n';
str = str + margin_val;
str = str + '}\n';
str = str + '#arrow_div:before \n{\n';
str = str + 'border-color: rgba(44, 223, 123, 0);\n';
str = str + margin_before_val;
str = str + '}\n';
str = str + '</style>';
str = str + '<div id="arrow_div">This sample for Arrow</div>';
str = str + '</div>';
$("#arrow_container").html(str);
str = str.replace('<div id="arrow_container">', ' ');
str = str.replace('<style type="text/css">', ' ');
str = str.replace('</style>', ' ');
str = str.replace('<div id="arrow_div">This sample for Arrow</div>', ' ');
str = str.replace('</div>', ' ');
str = str.replace('</div>', ' ');
str = str.replace(/[;]/g, ';<br /> ');
str = str.replace(/[{]/g, '{<br /> ');
str = str.replace(/[}]/g, '}<br /> ');
$("#arrow_style").html(str);
}
<div id="test">
<div id="radio_container">
<div id="input_caption">Arrow Size:
<input type="text" name="arrow_size" id="arrow_size" size="2" value="10" />px</div>
<div id="input_caption">Border Size:
<input type="text" name="border_size" id="border_size" size="2" value="10" />px</div>
<div id="input_caption">Arrow Side</div>
<div id="input_radio">
<input type="radio" value="top" name="arrow_side" checked="checked" />Top</div>
<div id="input_radio">
<input type="radio" value="right" name="arrow_side" />Right</div>
<div id="input_radio">
<input type="radio" value="bottom" name="arrow_side" />Bottom</div>
<div id="input_radio">
<input type="radio" value="left" name="arrow_side" />Left</div>
<div id="red"></div>
</div>
<br style="line-height: 150px;" />
<div id="arrow_container">
<div id="arrow_div">This sample for Arrow</div>
<style type="text/css">
#arrow_div {
font:italic bold 12px/30px Georgia, serif;
border: 2px solid #2CDF7B;
box-shadow: 0 0 9px black;
-moz-box-shadow: 0 0 9px black;
-webkit-box-shadow: 0 0 9px black;
width: 100px;
height: 100px;
background-color: white;
display:block;
margin-left: 150px;
position: relative;
}
#arrow_div:before, #arrow_div:after {
content:" ";
border: solid transparent;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 100%;
pointer-events: none;
}
#arrow_div:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFFFFF;
border-width: 5px;
left:50%;
margin-left: -5px;
}
#arrow_div:before {
border-color: rgba(44, 223, 123, 0);
border-bottom-color: #2CDF7B;
border-width: 11px;
left: 50%;
margin-left: -11px;
}
</style>
<br style="line-height: 50px;" />
</div>
<br style="line-height: 20px;" />
<div id="input_caption"><a href="http://techisquest.blogspot.com/">Technology Quest</a></div>
<div id="arrow_style"></div>
</div>
#radio_container {
margin: 0px;
padding: 0px;
width: auto;
height: auto;
background-color: #FFFFFF;
display: block;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
box-shadow: 0 0 9px black;
-moz-box-shadow: 0 0 9px black;
-webkit-box-shadow: 0 0 9px black;
position: relative;
}
#radio_container #input_caption {
display: block;
padding: 5px;
text-decoration: underline;
}
#radio_container #input_radio {
display: inline;
padding-right: 5px;
}
#arrow_div {
font:italic bold 12px/30px Georgia, serif;
border: 2px solid #2CDF7B;
box-shadow: 0 0 9px black;
-moz-box-shadow: 0 0 9px black;
-webkit-box-shadow: 0 0 9px black;
width: 200px;
height:150px;
background-color: white;
display:block;
margin-left: 150px;
position: relative;
}
#arrow_container {
font:italic bold 12px Georgia, serif;
border: 2px solid #FFFFFF;
width: 100%;
line-height: 15px;
height: 200px;
margin: 5px;
float: left;
background-color: white;
display:block;
position: relative;
}
#arrow_style {
font:italic bold 12px Georgia, serif;
border: 2px solid #FFFFFF;
box-shadow: 0 0 9px black;
-moz-box-shadow: 0 0 9px black;
-webkit-box-shadow: 0 0 9px black;
width: auto;
line-height: 15px;
height: auto;
background-color: white;
display:block;
float: left;
position: relative;
}
#input_caption a
{
font:italic bold 18px/30px Georgia, serif;
text-decoration: none;
}
#red {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}