Board of Technical Education Khyber Pakhtunkhwa: DIT Project by
Board of Technical Education Khyber Pakhtunkhwa: DIT Project by
Board of Technical Education Khyber Pakhtunkhwa: DIT Project by
DIT
Project by
Qazi Hassan
Adnan Ejaz
Year 2018
A report submitted to
Board of Technical Education Khyber Pakhtunkhwa
As a partial fulfillment of requirements
For the award of Diploma of information and technology
FINAL APPROVAL
COMMITTEE
Mr.
Mr.
3. Supervisor ________________________
DEDICATION
ACKNOWLEDGMENTS
First, we pray to almighty Allah , Who gave us the power, persistence and proficiency to
complete this venture. Darood-O-Salam to the prophet (Sullulaho Halaih Hey wasallam) for
whose sale God Gracious created this universe.
We are also very grateful to all other individuals who contributed to the preparation of this
project. We thanks to our most respect able teacher ‘ur teacher name’ for his valuable
guidance throughout the project.
Next, we are very indebted to the management of our venerated institute (your center name)
for their support and guidance. Especially we express our gratitude to (your teacher name) for
his encouragement and lots of attention.
This piece of acknowledgements will be certainly incomplete if we don’t mention the up-to-
mark guide line, cooperation and support of our teachers who provided us every bit of
information that was requested .
Finally we give immeasurable thanks to our friends because much of the value of this text is due
to their support. But we alone bear the responsibility of any error that remains between the
covers.
Qazi Hassan
Adnan Ejaz
ABSTRACT
Objectives:
Software used:
Notepad, Adobe Dream Weaver cs5 & Adobe Photoshop was use for
creation of this project.
System requirement :
Any operating system that support the following browser’s (Google
chrome, Opera, Safari, Firefox and IE 10 )or latest version of any browser And
Adobe shockwave player.
First we created a new folder on the desktop and named it Slider. In this folder we
created a sub folders (Images, & Js).
Images
Images folder is created to contain all the images needed for this project in one
place.
Js
Js folder is used for containing java queries. Goal of our project is to create a slider
for a website.
Index.html
Background of Webpage
For back ground we used internal cascading style sheet. along with (bg1 image
form image folder ) and for this following codes were used.
Cascading Codes:
<style type="text/css">
body{
background-color:#40172d;
background-image: url("images/bg1.png");
background-repeat: repeat;
Html codes
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</head>
<body>
</body>
</html>
Header
As seen in the picture that header contain 2 images. Each picture can be used as
different link. First we remove the background of them with Photoshop and save
them in images folder. And used following codes to define their positions.
HTML TAGS
<div id=top1>
<div id=logo>
<div id=logo2>
</div>
</div>
#logo
width:290px;height:85px;
float:left;
#logo2
height:85px;
float:right;
margin-top:31px;
#top1
background-image: url("images/fg1.png");
background-repeat: repeat;
background-color: #8b5685;
width:888px;height:95px;
margin-left:15px;
SLIDER DIV
The main feature of this page is slider we used six images to create this slider .
1. First we create a container for our slider name and give is a class.
2. Then we used java query to define its behavior.
3. Then linked these queries to our div the help of class attribute.
4. In index.html file we also define its width and height.
Html Tags
<script src="js/jquery.min.js"></script>
<div class="belt">
<div class="panel">
</div>
<div class="panel">
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 15
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>
.stepcarousel{
-moz-box-sizing: border-box;
box-sizing: border-box;
.stepcarousel .belt{
left: 0;
top: -29px;
.stepcarousel .panel{
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 900px; /*Width of each panel holding each content. If removed, widths
should be individually defined on each content DIV then. */
background: white;
border-radius: 10px;
width: 6px;
height: 6px;
cursor: pointer;
display: inline-block;
margin-right: 4px;
margin-left:15px;
span.paginatecircle:hover{
background: gray;
span.paginatecircle.selected{
background: black;
Java Query
Following tags were used to links java queries to html file.
<script type="text/javascript">
stepcarousel.setup({
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
})
</script>
!function(a,b){"object"==typeof module&&"object"==typeof
module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)th
row new Error("jQuery requires a window with a document");return
b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var
c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnPro
perty,k={},l="1.11.1",m=function(a,b){return new
m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-
z])/gi,q=function(a,b){return
b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,t
oArray:function(){return d.call(this)},get:function(a){return
null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var
b=m.merge(this.constructor(),a);return
b.prevObject=this,b.context=this.context,b},each:function(a,b){return
m.each(this,a,b)},map:function(a){return
this.pushStack(m.map(this,function(b,c){return
a.call(b,c,b)}))},slice:function(){return
this.pushStack(d.apply(this,arguments))},first:function(){return
this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var
b=this.length,c=+a+(0>a?b:0);return
this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return
this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},m.extend=
m.fn.extend=function(){var
a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof
g&&(j=g,g=arguments[h]||{},h++),"object"==typeof
g||m.isFunction(g)||(g={}),h===i&&(g=this,h--
);i>h;h++)if(null!=(e=arguments[h]))for(d in
e)a=g[d],c=e[d],g!==c&&(j&&c&&(m.isPlainObject(c)||(b=m.isArray(c)))?(b?(b=
!1,f=a&&m.isArray(a)?a:[]):f=a&&m.isPlainObject(a)?a:{},g[d]=m.extend(j,f,c)):
void 0!==c&&(g[d]=c));return
g},m.extend({expando:"jQuery"+(l+Math.random()).replace(/\D/g,""),isReady:!0,e
rror:function(a){throw new
Error(a)},noop:function(){},isFunction:function(a){return"function"===m.type(a)}
,isArray:Array.isArray||function(a){return"array"===m.type(a)},isWindow:functio
n(a){return
null!=a&&a==a.window},isNumeric:function(a){return!m.isArray(a)&&a-
parseFloat(a)>=0},isEmptyObject:function(a){var b;for(b in
a)return!1;return!0},isPlainObject:function(a){var
b;if(!a||"object"!==m.type(a)||a.nodeType||m.isWindow(a))return!1;try{if(a.constru
ctor&&!j.call(a,"constructor")&&!j.call(a.constructor.prototype,"isPrototypeOf"))r
eturn!1}catch(c){return!1}if(k.ownLast)for(b in a)return j.call(a,b);for(b in
a);return void 0===b||j.call(a,b)},type:function(a){return
null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof
a},globalEval:function(b){b&&m.trim(b)&&(a.execScript||function(b){a.eval.call(
a,b)})(b)},camelCase:function(a){return a.replace(o,"ms-
").replace(p,q)},nodeName:function(a,b){return
a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a
,b,c){var
d,e=0,f=a.length,g=r(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break
}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else
if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in
a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return
null==a?"":(a+"").replace(n,"")},makeArray:function(a,b){var c=b||[];return
null!=a&&(r(Object(a))?m.merge(c,"string"==typeof
a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){var d;if(b){if(g)return
g.call(b,a,c);for(d=b.length,c=c?0>c?Math.max(0,d+c):c:0;d>c;c++)if(c in
b&&b[c]===a)return c}return-1},merge:function(a,b){var
c=+b.length,d=0,e=a.length;while(c>d)a[e++]=b[d++];if(c!==c)while(void
0!==b[d])a[e++]=b[d++];return a.length=e,a},grep:function(a,b,c){for(var
d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return
e},map:function(a,b,c){var
d,f=0,g=a.length,h=r(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);els
e for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return
e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof
b&&(f=a[b],b=a,a=f),m.isFunction(a)?(c=d.call(arguments,2),e=function(){return
a.apply(b||this,c.concat(d.call(arguments)))},e.guid=a.guid=a.guid||m.guid++,e):voi
d 0},now:function(){return+new Date},support:k}),m.each("Boolean Number
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 21
jQuery.noConflict()
var stepcarousel={
configholder: {},
},
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
async: true,
dataType: 'html',
error:function(ajaxrequest){
},
success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($, config)
})
},
getoffset:function(what, offsettype){
return (what.offsetParent)?
what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},
getCookie:function(Name){
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
fadebuttons:function(config, currentpanel){
config.$leftnavbutton.fadeTo('fast', currentpanel==0?
this.defaultbuttonsfade : 1)
config.$rightnavbutton.fadeTo('fast',
currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1)
if (currentpanel==config.lastvisiblepanel){
stepcarousel.stopautostep(config)
},
config.$leftnavbutton=$('<img
src="'+config.defaultbuttons.leftnav[0]+'" class="' + config.galleryid +
'_navbutton">').css({zIndex:50, position:'absolute',
left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px',
top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand',
cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+'
panels'}).appendTo('body')
config.$rightnavbutton=$('<img
src="'+config.defaultbuttons.rightnav[0]+'" class="' + config.galleryid +
'_navbutton">').css({zIndex:50, position:'absolute',
left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rig
htnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px',
cursor:'hand', cursor:'pointer'}).attr({title:'Forward
'+config.defaultbuttons.moveby+' panels'}).appendTo('body')
stepcarousel.stepBy(config.galleryid, -
config.defaultbuttons.moveby)
})
stepcarousel.stepBy(config.galleryid,
config.defaultbuttons.moveby)
})
this.fadebuttons(config, currentpanel)
}
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 26
return config.$leftnavbutton.add(config.$rightnavbutton)
},
alignpanels:function($, config){
var paneloffset=0
var $currentpanel=$(this)
return config.onpanelclick(e.target)
})
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) +
parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate
next panel offset
config.panelwidths.push(paneloffset-
config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
})
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
addpanelwidths+=(i==lastpanelindex?
config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-
config.paneloffsets[i])
if (config.gallerywidth>addpanelwidths){
var config=stepcarousel.configholder[galleryid]
if (typeof config=="undefined"){
return
stepcarousel.stopautostep(config)
stepcarousel.fadebuttons(config, pindex)
pindex=(config.currentpanel<config.lastvisiblepanel)?
config.lastvisiblepanel : 0
pindex=(config.currentpanel>0)? 0 :
config.lastvisiblepanel /*wrap around left*/
var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 :
config.beltoffset) //left distance for Belt DIV to travel to
if (config.panelbehavior.wraparound==true &&
config.panelbehavior.wrapbehavior=="pushpull" && (pindex==0 &&
config.$belt.animate({left: -
config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'},
'normal', function(){
config.$belt.animate({left: -endpoint+'px'},
config.panelbehavior.speed, function(){config.onslideaction(this)})
})
else
config.$belt.animate({left: -endpoint+'px'},
config.panelbehavior.speed, function(){config.onslideaction(this)})
config.currentpanel=pindex
this.statusreport(galleryid)
},
autorotate:function(galleryid){
var config=stepcarousel.configholder[galleryid]
config.$belt.stop(true, true)
},
stopautostep:function(config){
clearTimeout(config.steptimer)
},
statusreport:function(galleryid){
var config=stepcarousel.configholder[galleryid]
var visiblewidth=0
visiblewidth+=config.panelwidths[endpoint]
if (visiblewidth>config.gallerywidth){
break
window[config.statusvars[i]]=valuearray[i] //Define
variable (with user specified name) and set to one of the status values
stepcarousel.selectpaginate(jQuery, galleryid)
},
createpaginate:function($, config){
if (config.$paginatediv.length==1){
var $templatebutt=config.$paginatediv.find('*[data-
moveby]:eq(0)') //reference first matching button on page
var buttonhtml=$('<div>').append($templatebutt.clone()).html()
//get HTML of first matching button
config.navbuttonhtml = buttonhtml
if (isimg)
var srcs=[$templatebutt.attr('src'),
$templatebutt.attr('data-over'), $templatebutt.attr('data-select')] //remember
control's over and out, and selected image src
var moveto=Math.min(i*moveby,
config.lastvisiblepanel)
var
$controls=config.$paginatediv.html(buttonarray.join('')).find(buttontag) //replace
template link with links and return them
$controls.css({cursor:'pointer'})
config.$paginatediv.bind('click', function(e){
var $target=$(e.target)
if ($target.attr('data-moveby')){
stepcarousel.stepTo(config.galleryid,
parseInt($target.attr('data-moveto'))+1)
})
var $target=$(e.target)
if (parseInt($target.attr('data-index')) !=
config.pageinfo.curselected) //if this isn't the selected link
$target.attr('src',
srcs[(e.type=="mouseover")? 1 : 0])
})
config.pageinfo={controlpoints:controlpoints,
$controls:$controls, srcs:srcs, prevselected:null, curselected:null, isimg: isimg}
},
selectpaginate:function($, galleryid){
var config=stepcarousel.configholder[galleryid]
if (config.$paginatediv.length==1){
if (config.pageinfo.controlpoints[i] <=
config.currentpanel) //find largest control point that's less than or equal to current
panel shown
config.pageinfo.curselected=i
config.pageinfo.$controls.eq(config.pageinfo.prevselected).removeClass('sel
ected')
if (isimg){
config.pageinfo.$controls.eq(config.pageinfo.prevselected).attr('src',
config.pageinfo.srcs[0])
config.pageinfo.$controls.eq(config.pageinfo.curselected).addClass('selected
') //select current paginate link
if (isimg){
config.pageinfo.$controls.eq(config.pageinfo.curselected).attr('src',
config.pageinfo.srcs[2])
config.pageinfo.prevselected=config.pageinfo.curselected //set
current selected link to previous
},
loadcontent:function(galleryid, url){
var config=stepcarousel.configholder[galleryid]
config.contenttype=['ajax', url]
stepcarousel.stopautostep(config)
stepcarousel.init(jQuery, config)
},
config.gallerywidth=config.$gallery.width()
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0),
"offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.panelbehavior.wrapbehavior=config.panelbehavior.wrapbehavior ||
"pushpull" //default wrap behavior to "pushpull"
config.$paginatediv=$('#'+config.galleryid+'-paginate') //get
pagination DIV (if defined)
if (config.autostep)
config.autostep.pause+=config.panelbehavior.speed
config.onpanelclick=(typeof config.onpanelclick=="undefined")?
function(target){} : config.onpanelclick //attach custom "onpanelclick" event
handler
config.onslideaction=(typeof config.onslide=="undefined")?
function(){} : function(beltobj){$(beltobj).stop(); config.onslide()} //attach custom
"onslide" event handler
config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft'))
//Find length of Belt DIV's left margin
config.$statusobjs=[$('#'+config.statusvars[0]),
$('#'+config.statusvars[1]), $('#'+config.statusvars[2])]
config.currentpanel=0
stepcarousel.getremotepanels($, config)
else
},
stepcarousel.windowisresized = true
config.$gallery.unbind()
config.$belt.stop()
if (emptybelt){
config.$panels.remove()
config.$panels.unbind()
if (config.defaultbuttons.enable){
config.$leftnavbutton.remove()
config.$rightnavbutton.remove()
if (config.$paginatediv.length==1){
config.$paginatediv.unbind()
config.$paginatediv.empty()
config.$paginatediv.html(config.navbuttonhtml)
if (config.autostep)
config.autostep.status=null
if (config.panelbehavior.persist){
},
setup:function(config){
document.write('<style
type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
jQuery(document).ready(function($){
config.$gallery=$('#'+config.galleryid)
stepcarousel.init($, config)
}) //end document.ready
clearTimeout(config.windowresizetimer)
stepcarousel.stopautostep(config)
stepcarousel.resetsettings(jQuery, config)
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist",
0)
}, 200)
})
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist",
config.currentpanel)
oi=null
})
config=null
})
<MAIN CONTAINER>
div#mic
width:870px; height:auto;
position:absolute;
border-style: solid;
border-color: black;
border-width: 2px;
float:center;
background-color:#fae8f3;
margin-left:25px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
#mleft1
width:180px;
height:220px;
position:absolute;
float:left;
border-style:solid;
border-width:1px;
padding-top:12px;
padding-bottom: 10px;
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 43
padding-left:12px;
padding-right:12px;
#mleft1pic{
width:160px;
height:28;
#mleft2
width:180px;
height:220px;
float:left;
border-style:solid;
border-width:1px;
MARGIN-LEFT:200PX;
padding-top:12px;
padding-bottom: 10px;
padding-left:12px;
padding-right:12px;
#mleft2pic{
width:160px;
height:28;
#mleft3
width:420px;
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 45
float:right;
border-style:solid;
border-width:1px;
padding-top:12px;
padding-bottom: 10px;
padding-left:12px;
padding-right:12px;
#mleft3pic
width:420px;
he1ght:28;
#backdiv
width:930px;heigt:auto;