<style>
.bx-wrapper .bx-caption span {
padding:5px !important;
}
.ui-tabs {
zoom: 1;
}
.ui-tabs .ui-tabs-nav {
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
.ui-tabs .ui-tabs-nav li {
position: relative;
float: left;
margin: 0 3px -2px 0;
padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
background-color:#188EC6;
display: block;
/*padding: 10px 20px;*/
padding: 10px 10px;
background: #f0f0f0;
border: 2px #ccc solid;
border-bottom-color: #ccc;
outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
/*padding: 10px 20px 12px 20px;*/
padding:10px 5px 12px 2px;
background: #fff;
border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
clear: both;
border: 2px #ccc solid;
/*padding: 10px;*/
padding: 7px;
padding-bottom: 5px;
padding-left: 16px;
padding-left: 12px;
padding-right: 3px;
padding-top: 5px;
}
.ui-tabs .ui-tabs-hide {
display: none;
}
.bx-viewport {
/*height: 190px !important;*/
height:155px !important;
/*width: 311px !important;*/
/*width: 273px !important;*/
}
.listyle {
/*width: 50% !important;*/
width:250px !important;/*For tab view of images*/
}
.pstyle {
width: 219px;
padding-top: 6px;
text-align: center;
font-weight: bold;
color: #0072C6;
}
.bx-wrapper {
margin: 0px auto 0px !important;
}
.bx-wrapper .bx-pager {
width: 311px !important;
display: none;
}
.bx-wrapper .bx-caption {
position: relative !important;
width: 200px !important;
text-align: center !important;
/*font-size: x-large !important;*/ /*Aishwarya*/
font-size:17px !important; /*Aishwarya*/
background: #6DA30F;
/*margin-left: 22px;*/
margin-left: -2%;
margin-top:-25px; /*Aishwarya*/
}
.bx-wrapper .bx-prev {
/*left: 10px;*/
left:-46px !important;
background: url(../_layouts/15/IG.DMSIP.SP.HomePage/Images/controls.png) no-repeat 0 -32px !important;
}
.bx-wrapper .bx-next {
/*right: 10px;*/
right: -48px !important;
background: url(../_layouts/15/IG.DMSIP.SP.HomePage/Images/controls.png) no-repeat -43px -32px !important;
}
/*.bx-wrapper .bx-viewport {
left:-10px !important;
}*/
</style>
<script>
var sliderone = 2; var slidertwo = 1;
//jQuery.noConflict();
var sp_Imag = [];
var category = '';
$(document).ready(function () {
var slider = '';
var fieldsToRead = "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='ID' /><FieldRef Name='Category' /><FieldRef Name='Title' /><FieldRef Name='NavigationUrl' /></ViewFields>";
var query = "<Query>" +
"<Where>" +
"<IsNotNull>" +
"<FieldRef Name='ID' />" +
"</IsNotNull>" +
"</Where>" +
"</Query>";
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Projects",
CAMLViewFields: fieldsToRead,
CAMLQuery:query,
completefunc: function (xData, Status) {
var decItemCount = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
if (decItemCount > 0) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var image = $(this).attr("ows_EncodedAbsUrl");
var title = $(this).attr("ows_Title");
var navURL = $(this).attr("ows_NavigationUrl");
var category = $(this).attr("ows_Category")
if (title == undefined)
title = "";
if (navURL == undefined) {
navURL = "#";
target = "_self";
}
else {
target = "_blank";
}
//sp_Imag.push(navURL,target,title,image,category);
if ($(this).attr("ows_Category") == "Ongoing") {
//alert("Ongoing Projects" + image);
$("#ulOngoing").append('<li class="listyle"><a href="' + navURL + '" target="' + target + '"><img style="height:150px;width:100%;margin-left:-2%" title="' + title + '" src="' + image + '"/></a></li>');
//("#ulOngoing").append('<li class="listyle"><a href="' + navURL + '" target="' + target + '"><img style="height:150px;width:200px;padding-left:22px;" title="' + title + '" src="' + image + '"/></a></li>');
}
if ($(this).attr("ows_Category") == "Completed") {
//alert("Completed Projects" + image);
$("#ulCompleted").append('<li class="listyle"><a href="' + navURL + '" target="_blank"><img style="height:150px;width:100%;margin-left:-2%" title="' + title + '" src="' + image + '"/></a></li>');
// $("#ulCompleted").append('<li class="listyle"><a href="' + navURL + '" target="_blank"><img style="height:150px;width:200px;padding-left:22px;" title="' + title + '" src="' + image + '"/></a></li>');
}
});
}
else {
alert("Yet to update the projects");
//document.location.href = '/sites/pprop/';
}
}
});
$("#ulOngoing").addClass('bxslider');
//$("#ulCompleted").removeClass('bxslider');
$('.tabhead').css({
'padding': '10px 5px 12px 2px',
'background': '#fff',
'border-bottom-style': 'none'
});
//$(".ui-tabs").tabs();
$(".tabhead1").click(function () {
$('#tab-1').hide();
$('#tab-2').show();
$('.tabhead1').css({
'padding': '10px 5px 12px 2px',
'background': '#fff',
'border-bottom-style': 'none'
});
$('.tabhead').css({
'display': 'block',
'padding':'10px 10px',
'background': '#f0f0f0',
'border':'2px #ccc solid',
'border-bottom-color': '#ccc',
'outline':'none'
});
// if (slidertwo != 2) {
$("#ulOngoing").removeClass('bxslider');
$("#ulCompleted").addClass('bxslider');
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 4,
slideWidth: 250,
slideMargin: 10,
captions: true,
auto: true,
autoControls: false,
autoHover: true,
pause: 3000,
speed: 10000,
nextImage: '../_layouts/15/images/Slider/control_double_right.png',
prevImage: '../_layouts/15/images/Slider/control_double_left.png',
nextText: '',
prevText: '',
});
if (slidertwo == 2) {
$('#ulCompleted').parent().removeClass("bx-viewport");
$('#ulCompleted').parent().parent().removeClass("bx-wrapper");
}
slidertwo = 2;
// }
});
$(".tabhead").click(function () {
$('#tab-1').show();
$("#ulCompleted").removeClass('bxslider');
$("#ulOngoing").addClass('bxslider');
$('#tab-2').hide();
$('.tabhead').css({
'padding': '10px 5px 12px 2px',
'background': '#fff',
'border-bottom-style': 'none'
});
$('.tabhead1').css({
'display': 'block',
'padding': '10px 10px',
'background': '#f0f0f0',
'border': '2px #ccc solid',
'border-bottom-color': '#ccc',
'outline': 'none'
});
// if (sliderone != 2) {
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 4,
slideWidth: 250,
slideMargin: 10,
captions: true,
auto: true,
autoControls: false,
autoHover: true,
pause: 3000,
speed: 10000,
nextImage: '../_layouts/15/images/Slider/control_double_right.png',
prevImage: '../_layouts/15/images/Slider/control_double_left.png',
nextText: '',
prevText: '',
});
if (slidertwo == 2) {
$('#ulOngoing').parent().removeClass("bx-viewport");
$('#ulOngoing').parent().parent().removeClass("bx-wrapper");
}
sliderone = 2;
});
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 4,
slideWidth: 250,
slideMargin: 10,
captions: true,
auto: true,
autoControls: false,
autoHover: true,
pause: 3000,
speed: 10000,
nextImage: '../_layouts/15/images/Slider/control_double_right.png',
prevImage: '../_layouts/15/images/Slider/control_double_left.png',
nextText: '',
prevText: '',
onSliderLoad: function () {
//$('#ulCompleted').empty();
//$('#tab-2').style('display', 'none');
$('#tab-2').hide();
}
});
});
</script>
<div id="slider">
<div class="ui-tabs">
<ul class="ui-tabs-nav">
<li class="current"><a class="tabhead" href="#tab-1">Ongoing Projects</a></li>
<li ><a class="tabhead1" href="#tab-2">Completed Projects</a></li>
</ul>
<div class="tab">
<div id="tab-1" class="ui-tabs-panel">
<ul id="ulOngoing" >
</ul>
</div>
<div id="tab-2" class="ui-tabs-panel">
<ul id="ulCompleted">
</ul>
</div>
</div>
</div>
</div>
https://drive.google.com/file/d/0B1Q1lNQ7xZ5tdTdWcmF3cjgwUlk/view?usp=sharing
No comments:
Post a Comment