update user_sdo_styles ori
set (ori.definition,ori.description,ori.geometry,ori.image,ori.type )=
(select my.definition,my.description,my.geometry,my.image,my.type
from my_user_sdo_styles my where my.NAME = ori.NAME
)
Saturday 19 September 2015
Monday 7 September 2015
Steps Tabs
CSS
.checkout-wrap {
color: #444;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar {
direction: rtl;
}
ul.checkout-bar li, ul.checkout-bar li a {
color: #ccc;
display: block;
font-size: 14pt;
font-weight: 600;
position: relative;
text-decoration:none;
}
ul.checkout-bar li:before {
background: #ddd;
color: #fff;
font-size: 14pt;
font-weight: 600;
line-height: 37px;
text-align: center;
position: absolute;
left: 20px;
height: 35px;
width: 35px;
border-radius: 50%;
top: 4px;
z-index: 20;
}
ul.checkout-bar li.active, ul.checkout-bar li.active a {
color: #027ff4 !important;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #027ff4 !important;
z-index: 22;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #92cf5c;
z-index: 22;
}
ul.checkout-bar li.visited:before {
background: #92cf5c;
z-index: 22;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar li:nth-child(7):before {
content: "7";
}
@media all and (min-width: 800px) {
.checkout-bar li:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #ddd;
content: "";
height: 5px;
width: 103%;
left: 0;
position: absolute;
top: -45px;
z-index: 0;
}
.checkout-bar li:last-child:after {
right: -5px;
width: 50%;
}
.checkout-bar li:first-child:after {
right: 50%;
width: 50%;
}
.checkout-bar li.active:after {
background-color: #027ff4 !important;
left: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar:before {
background-size: 35px 35px;
content: " ";
height: 4px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
padding: 0;
text-align: center;
width: 16%;
}
ul.checkout-bar li:before {
height: 40px;
left: 40%;
line-height: 40px;
position: absolute;
top: -65px;
width: 40px;
z-index: 17;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #92cf5c;
content: "";
height: 5px;
left: 0;
position: absolute;
top: -45px;
width: 103%;
z-index: 17;
}
ul.checkout-bar li:first-child.visited:after {
right: 50%;
width: 52%;
}
ul.checkout-bar li:last-child.visited:after {
right: -5px;
width: 52%;
}
}
function setActiveTab(tabIndx) {
try {
$(".checkout-bar").children("li").removeClass('active');
$(".checkout-bar>li").eq(tabIndx).addClass('active');
$("#multiView").children("div").hide();
$('#Tab' + (tabIndx)).show();
} catch (exc) { }
}
function setVisited(tabIndx) {
try {
$(".checkout-bar>li").eq(tabIndx).addClass('visited');
$(".checkout-bar>li").eq(tabIndx).removeClass('active');
$(".checkout-bar>li").eq((tabIndx + 1)).addClass('active');
$("#multiView").children("div").hide();
$('#Tab' + (tabIndx + 1)).show();
} catch (exc) { }
}
html:
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited">البيانات الشخصية</li>
<li class="active">بيانات الثانوية</li>
<li class="">الشهادات العلمية</li>
<li class="">الإقامات في بلد الدراسة</li>
<li class="">الوثائق المطلوبة</li>
<li class="">متفرقات</li>
</ul>
</div>
<div id="multiView">
<div id="Tab0" style="width: 100%; display: none;">
<h1> Tab 0</h1>
<div style="width: 94%; text-align: left">
<button type="button" class="btn btn-primary" onclick="saveData();
setVisited(0)">التالي</button>
</div>
</div>
<div id="Tab1" style="width: 100%;">
<h1> Tab 1</h1>
<div style="width: 94%; text-align: left">
<button type="button" class="btn btn-primary" onclick="setActiveTab(0)">السابق</button>
<button type="button" class="btn btn-primary " onclick="setVisited(1)">التالي</button>
</div>
</div>
<div id="Tab2" style="width: 100%; display: none;">
<h1> Tab 2</h1>
<div style="width: 94%; text-align: left">
<button type="button" class="btn btn-primary" onclick="setActiveTab(1)">السابق</button>
<button type="button" class="btn btn-primary" onclick="setVisited(2)">التالي</button>
</div>
</div>
<div id="Tab3" style="width: 100%; display: none;">
<h1>Tab 3</h1>
<div style="width: 94%; text-align: left">
<button type="button" class="btn btn-primary" onclick="setActiveTab(2)">السابق</button>
<button type="button" class="btn btn-primary" onclick="setVisited(3)">التالي</button>
</div>
</div>
<div id="Tab4" style="width: 100%; display: none;">
<h1>Tab 4</h1>
<button type="button" class="btn btn-primary" onclick="setActiveTab(3)">السابق</button>
<button type="button" class="btn btn-primary" onclick="setVisited(4)">التالي</button>
</div>
<div id="Tab5" style="width: 100%; display: none;">
<h1>Tab 5</h1>
<button type="button" class="btn btn-primary" onclick="setActiveTab(4)">السابق</button>
<button type="button" class="btn btn-primary" onclick="setVisited(5)">انهاء</button>
</div>
</div>
Subscribe to:
Posts (Atom)