Just change the images link and download js min files
Dealquicker.com
Follow my blog with Bloglovin
$(document).ready(function(e) {
$('.draggable').resize();
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$(".draggable").draggable();
});
$(document).ready(function(e) {
$('#size2').change(function(e) {
var val=$('#size2').val();
if(val=='XXS')
{
$('#model img').css({
'width':'60%',
'margin-left':'20%'
});
}
else if( val=='XS')
{
$('#model img').css({
'width':'65%',
'margin-left':'18%'
});
}
else if(val=='XL')
{
$('#model img').css({
'width':'70%',
'margin-left':'16%' });
}
else if(val=='2XL')
{
$('#model img').css({
'width':'75%',
'margin-left':'14%' });
}
else if(val=='3XL')
{
$('#model img').css({
'width':'80%',
'margin-left':'12%' });
}
else if(val=='4XL')
{
$('#model img').css({
'width':'85%',
'margin-left':'10%' });
}
else if(val=='5XL')
{
$('#model img').css({
'width':'90%',
'margin-left':'8%' });
}
});
});
/*
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "draggable")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="draggable")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0,10);
ty = parseInt(dobj.style.top+0,10);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
<style>*{margin:auto;
padding:0px;}
.dragme{position:relative;}
.draggable {
position:relative;}
a{text-decoration:none;}
body{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration:none;
font-weight:normal;
}
span{font-size:24px;
font-weight:normal;
color:#5d5d5d;
}
.fl{margin-left:5%;
text-align:right;
}
@media screen and (max-width:480px){
header{width:100%;
background:#0069D2;
height:34px;
text-align:center;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
text-align:center;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:400px;
float:left;
//box-shadow:-2px -0px 6px 1px #000;
border-right:1px solid #444;
}
#col40{width:38%;
height:400px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#0069D2;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:90%;
height:auto;
margin:auto;
margin-top:11%;
overflow:hidden;
}
#model img{width:65%;
margin-left:25%;
height:auto;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 4.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:390px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:70%;
//width:68%;
height:auto;
margin-top:5%;
float:left;}
}
@media screen and (min-width:481px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}
#col40{width:40%;
height:500px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:59%;
height:auto;
margin:auto;
overflow:hidden;
}
#model img{width:100%;
height:auto;
margin-left:0%;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 2.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:19%;
//width:47%;
height:auto;
margin-left:-10%;}
}
@media screen and (min-width:1028px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}
#col40{width:40%;
height:500px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:90%;
height:auto;
margin:auto;
overflow:hidden;
}
#model img{width:37%;
height:auto;
margin-left:30%;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 1.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:-19%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:14%;
//width:40%;
height:auto;
margin:5% auto auto -6%;}
}
div.sc_menu_wrapper {
position: relative;
height: 371px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
//overflow: auto;
overflow-x:scroll;
overflow-y:visible;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
//border: 2px solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
}
.sc_menu a:hover {
//border-color: rgb(130, 130, 130);
//border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
width:80%;
height:auto;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
//border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
//border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}</style>
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<!--
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<meta name="viewport" content="max-width=480px , user-scalable=false;">
<meta name="viewport" content="min-width=481px , user-scalable=false;">
<meta name="viewport" content="min-width=1028px , user-scalable=false;">-->
<meta name="viewport" content="width=device-width, user-scalable=false;">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!--<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
<script>
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
//wrapper.css({'overflow': 'auto', 'z-index':'55'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
function getsizes(s)
{
if(s=="s")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XXS'>XXS</option><option value='XS'>XS</option>";
}
else if(s=="m")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XL'>XL</option><option value='2XL'>2XL</option>";
}
else if(s=="l")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='3XL'>3XL</option><option value='4XL'>4XL</option><option value='5XL'>5XL</option>";
}
else
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option>";
}
}
</script>
<style>
#size{width:70%; margin-bottom:10px;}
#size2{width:70%;}
#size option,#size2 option{padding:5px;}
</style>
</head>
<body>
<div id="main">
<header> <strong>Barcode App</strong> </header>
<div id="row">
<div id="col60">
<div id="row" style="margin-top:1%; padding-left:5%;">
<span style="text-align:center; font-style:">Dress Size</span><br/>
<select id="size" onChange="getsizes(this.value)">
<option value="">--Select--</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Extra Large</option>
</select>
<select id="size2">
<option value="">--Select--</option>
</select>
<label id="ar"></label>
<!-- <button id="button">Check</button>-->
</div>
<div id="model"> <img class="dress" src="img/womanmodel.png"/> </div>
</div>
<div id="col40">
<div class="dressname">
<div id="row">
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Menu" class="draggable" href=""><img src="img/dress/1.png" alt="Menu"/></a>
<a title="jQuery" class="draggable" href=""><img src="img/dress/3.png" alt="jQuery"/></a>
<a title="CSS" class="draggable" href=""><img src="img/dress/4.png" alt="CSS"/></a>
<a title="Vertical" class="draggable" href=""><img src="img/dress/5.png" alt="Vertical"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<!--<div id="bview"> <strong>Back View</strong> </div>
<div id="bview" class="fl"> <strong >Next</strong> </div>-->
</footer>
<!-- <script type="text/javascript">
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$(".draggable").draggable();
</script>
-->
</body>
</html>
Dealquicker.com
Follow my blog with Bloglovin
$(document).ready(function(e) {
$('.draggable').resize();
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$(".draggable").draggable();
});
$(document).ready(function(e) {
$('#size2').change(function(e) {
var val=$('#size2').val();
if(val=='XXS')
{
$('#model img').css({
'width':'60%',
'margin-left':'20%'
});
}
else if( val=='XS')
{
$('#model img').css({
'width':'65%',
'margin-left':'18%'
});
}
else if(val=='XL')
{
$('#model img').css({
'width':'70%',
'margin-left':'16%' });
}
else if(val=='2XL')
{
$('#model img').css({
'width':'75%',
'margin-left':'14%' });
}
else if(val=='3XL')
{
$('#model img').css({
'width':'80%',
'margin-left':'12%' });
}
else if(val=='4XL')
{
$('#model img').css({
'width':'85%',
'margin-left':'10%' });
}
else if(val=='5XL')
{
$('#model img').css({
'width':'90%',
'margin-left':'8%' });
}
});
});
/*
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "draggable")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="draggable")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0,10);
ty = parseInt(dobj.style.top+0,10);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
<style>*{margin:auto;
padding:0px;}
.dragme{position:relative;}
.draggable {
position:relative;}
a{text-decoration:none;}
body{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration:none;
font-weight:normal;
}
span{font-size:24px;
font-weight:normal;
color:#5d5d5d;
}
.fl{margin-left:5%;
text-align:right;
}
@media screen and (max-width:480px){
header{width:100%;
background:#0069D2;
height:34px;
text-align:center;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
text-align:center;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:400px;
float:left;
//box-shadow:-2px -0px 6px 1px #000;
border-right:1px solid #444;
}
#col40{width:38%;
height:400px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#0069D2;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:90%;
height:auto;
margin:auto;
margin-top:11%;
overflow:hidden;
}
#model img{width:65%;
margin-left:25%;
height:auto;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 4.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:390px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:70%;
//width:68%;
height:auto;
margin-top:5%;
float:left;}
}
@media screen and (min-width:481px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}
#col40{width:40%;
height:500px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:59%;
height:auto;
margin:auto;
overflow:hidden;
}
#model img{width:100%;
height:auto;
margin-left:0%;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 2.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:19%;
//width:47%;
height:auto;
margin-left:-10%;}
}
@media screen and (min-width:1028px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}
header strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}
#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}
#col40{width:40%;
height:500px;
float:left;}
.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;
}
#bottom-area{width:100%;
height:100px;
margin:auto;
}
footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}
#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}
#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}
#model{ width:90%;
height:auto;
margin:auto;
overflow:hidden;
}
#model img{width:37%;
height:auto;
margin-left:30%;
float:left;}
#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
#select option{ background:#defc8e;}
#ar{background:url(../img/ar.png) no-repeat;
float: left;
height: 10px;
margin-left: -8%;
margin-top: 1.5%;
position: relative;
width: 10px;
display:none;
}
#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}
#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:-19%;
margin-bottom:1%;
padding:2px;
display:inline-block;
}
#dressimg img{
width:14%;
//width:40%;
height:auto;
margin:5% auto auto -6%;}
}
div.sc_menu_wrapper {
position: relative;
height: 371px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
//overflow: auto;
overflow-x:scroll;
overflow-y:visible;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
//border: 2px solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
}
.sc_menu a:hover {
//border-color: rgb(130, 130, 130);
//border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
width:80%;
height:auto;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
//border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
//border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}</style>
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<!--
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<meta name="viewport" content="max-width=480px , user-scalable=false;">
<meta name="viewport" content="min-width=481px , user-scalable=false;">
<meta name="viewport" content="min-width=1028px , user-scalable=false;">-->
<meta name="viewport" content="width=device-width, user-scalable=false;">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!--<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
<script>
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
//wrapper.css({'overflow': 'auto', 'z-index':'55'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
function getsizes(s)
{
if(s=="s")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XXS'>XXS</option><option value='XS'>XS</option>";
}
else if(s=="m")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XL'>XL</option><option value='2XL'>2XL</option>";
}
else if(s=="l")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='3XL'>3XL</option><option value='4XL'>4XL</option><option value='5XL'>5XL</option>";
}
else
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option>";
}
}
</script>
<style>
#size{width:70%; margin-bottom:10px;}
#size2{width:70%;}
#size option,#size2 option{padding:5px;}
</style>
</head>
<body>
<div id="main">
<header> <strong>Barcode App</strong> </header>
<div id="row">
<div id="col60">
<div id="row" style="margin-top:1%; padding-left:5%;">
<span style="text-align:center; font-style:">Dress Size</span><br/>
<select id="size" onChange="getsizes(this.value)">
<option value="">--Select--</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Extra Large</option>
</select>
<select id="size2">
<option value="">--Select--</option>
</select>
<label id="ar"></label>
<!-- <button id="button">Check</button>-->
</div>
<div id="model"> <img class="dress" src="img/womanmodel.png"/> </div>
</div>
<div id="col40">
<div class="dressname">
<div id="row">
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Menu" class="draggable" href=""><img src="img/dress/1.png" alt="Menu"/></a>
<a title="jQuery" class="draggable" href=""><img src="img/dress/3.png" alt="jQuery"/></a>
<a title="CSS" class="draggable" href=""><img src="img/dress/4.png" alt="CSS"/></a>
<a title="Vertical" class="draggable" href=""><img src="img/dress/5.png" alt="Vertical"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<!--<div id="bview"> <strong>Back View</strong> </div>
<div id="bview" class="fl"> <strong >Next</strong> </div>-->
</footer>
<!-- <script type="text/javascript">
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$(".draggable").draggable();
</script>
-->
</body>
</html>
