<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Ignite UI for jQuery Required Combined CSS Files-->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!--Ignite UI for jQuery Required Combined JavaScript Files-->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<style>
#main
{
border: solid 1px black;
height: 270px;
}
#main > img
{
height: 250px;
float: left;
}
#shoeInfo
{
margin-left: 190px;
}
#brand
{
color: #ccc;
}
#shoeInfo p
{
margin-top: 20px;
}
#cost
{
border: solid 1px black;
border-top: 0px;
height: 100px;
padding-top: 20px;
}
#promo
{
float: left;
margin-left: 20px;
}
#promo > p
{
margin-bottom: 5px;
}
#cost > p
{
float: right;
margin-right: 20px;
font-size: 16px;
}
.info
{
color: #808080;
vertical-align: top;
}
.tip
{
height:16px;
width:16px;
vertical-align: top;
margin:0 2px 0 5px;
}
.notifier-message
{
float: right;
width: 400px;
}
@media only screen and (max-width:480px)
{
#main
{
height: 30%;
}
#shoeSize, #shoeColor, #quantity, #promoCode
{
width: 150px;
}
#cost
{
height: 120px;
}
#cost > p
{
font-size: 14px;
margin-top:20px;
}
}
</style>
</head>
<body>
<h2>Order details</h2>
<div id="main">
<img src="../images/shoe.jpg" />
<div id="shoeInfo">
<h3>Product: <span id="brand">CHEAP HIGH QUALITY MEN'S SHOES BRAND 2015</span></h3>
<div>
<p>Shoe size (37-46)</p>
<div id="shoeSize"></div>
<img class="tip" id="tip1" src="/images/helpnav/help.png" />
<div class="notifier-message">
<span class="info" id="info1">To get the warning message, enter larger size than 46 or smaller then 37.</span>
</div>
</div>
<div>
<p>Shoe Color</p>
<div id="shoeColor"></div>
<img class="tip" id="tip2" src="/images/helpnav/help.png" />
<div class="notifier-message">
<span class="info" id="info2">To get the warning message, enter a value that is not present in the dropdown list.</span>
</div>
</div>
<div>
<p>Quantity</p>
<div id="quantity"></div>
<img class="tip" id="tip3" src="/images/helpnav/help.png" />
<div class="notifier-message">
<span class="info" id="info3">To get the warning message, click the spin arrows until you reach the limit.</span>
</div>
</div>
</div>
</div>
<div id="cost">
<div id="promo">
<p>Enter promo code (up to 6 symbols)</p>
<div id="promoCode"></div>
<img class="tip" id="tip4" src="/images/helpnav/help.png" />
<span class="info" id="info4">To get the warning message paste a text longer than 6 symbols.</span>
</div>
<p>Price before shipping: $53.</p>
</div>
<script>
$(function () {
var colors = ["blue", "red", "brown"];
$("#shoeSize").igNumericEditor({
minValue: 37,
maxValue: 46
});
$("#shoeColor").igTextEditor({
listItems: colors,
isLimitedToListValues: true
});
$("#quantity").igNumericEditor({
dataMode: 'int',
buttonType: "spin",
minValue: 1,
maxValue: 3,
spinDelta: 1,
spinWrapAround: true
});
$("#promoCode").igTextEditor({
maxLength: 6
});
$(".info").hide();
$("#tip1").click(function () { $("#info1").toggle(); });
$("#tip2").click(function () { $("#info2").toggle(); });
$("#tip3").click(function () { $("#info3").toggle(); });
$("#tip4").click(function () { $("#info4").toggle(); });
});
</script>
</body>
</html>
