Professional Documents
Culture Documents
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
1. External Examiner
Mr.
2. Internal Examiner
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{
alone*/ left: 0;
top: -29px;
.stepcarousel .panel{
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;
}
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 18
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>
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
jQuery.noConflict()
var stepcarousel={
configholder: {},
},
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
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]
D.I.T
}, 2 semester project
nd
Board of Technical Education Khyber Pakhtunkhwa 24
getCookie:function(Name){
return document.cookie.match(re)[0].split("=")
[1] //return its
value
return null
},
setCookie:function(name, value)
{ document.cookie =
name+"="+value
},
$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)
},
D.I.T 2nd semester project
Board of Technical Education Khyber Pakhtunkhwa 25
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
through panels
var $currentpanel=$(this)
$currentpanel.bind('click',
function(e){ //bind onpanelclick() to
onclick event
if (mousedist == 0) // if this
was an actual click, instead
of swipe
return
config.onpanelclick(e.target)
})
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) +
parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate
next panel offset
})
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)
that
var config=stepcarousel.configholder[galleryid] if
(typeof config=="undefined"){
return
function stepcarousel.stopautostep(config)
var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that
means backwards
stepcarousel.fadebuttons(config,
pindex)
if (pindex>config.lastvisiblepanel &&
direction=="forward"){
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"
D.I.T 2nd semester project && (pindex==0 &&
Board of Technical Education Khyber Pakhtunkhwa 29
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.c
urrentpanel=pindex
this.statusreport(galleryid)
},
autorotate:func
tion(galleryid){
var
config=stepcarousel.configholder[galleryid]
config.$belt.stop(true, true)
this.stepBy(galleryid,
config.autostep.moveby, true)
},
{ clearTimeout(config.steptime
Board of Technical Education Khyber Pakhtunkhwa 30
},
statusreport:function(galleryid){
var config=stepcarousel.configholder[galleryid]
var visiblewidth=0
for (var endpoint=startpoint;
endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last
visible panel
visiblewidth+=config.pa
nelwidths[endpoint] if
(visiblewidth>config.gallerywidth){
break
endpoint //If
only one image visible on the screen and partially hidden,
set endpoint to startpoint
i<config.statusvars.length; i++){
window[config.statusvars[i]]=valuearray[i] //Define
D.I.T 2nd semester project
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 isimg =
$templatebutt.is('img')
var buttonhtml=$
('<div>').append($templatebutt.clone()).html()
//get HTML of first matching button
var buttontag = $
(buttonhtml).get(0).tagName
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
D.I.T 2nd semester project
for (var i=0; i<asize; i++){
Board of Technical Education Khyber Pakhtunkhwa 32
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({curs
or:'pointer'}) config.$paginatediv.bind('click',
function(e){
var
$target=$(e.target)
if ($target.attr('data-moveby'))
{ stepcarousel.stepTo(config.galleryi
d,
parseInt($target.attr('data-moveto'))+1)
})
var $target=$(e.target)
if (isimg && $target.attr('data-over')){
$target.attr('src',
Board of Technical Education Khyber Pakhtunkhwa 33
})
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){
var isimg = config.pageinfo.isimg
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)
},
$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){
stepcarousel.setCookie(config.galleryid+"persist", 0) //set initial
panel to 0, overridden w/ current panel if window.unload is invoked
},
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(co
nfig) stepcarousel.resetsettings(jQuery,
config) if (config.panelbehavior.persist)
stepcarousel.setCooki
e(config.galleryid+"persist",
0)
stepcarousel.init(jQuery,
config, 'windowresize')
}, 200)
})
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist",
config.currentpanel)
})
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;