Board of Technical Education Khyber Pakhtunkhwa: DIT Project by

Board of Technical Education Khyber Pakhtunkhwa 1
DIT
Project by
Qazi Hassan
Adnan Ejaz
Khyber Pakhtunkhwa Board of

Technical Education
D.I.T 2 semester
nd
Year 2018
D.I.T 2nd semester project

IN THE NAME OF ALLAH

THE MOST GRACIOUS
THE MOST MERCIFUL

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
D.I.T 2nd semester

Board of Technical Education
Khyber Pakhtunkhwa

FINAL APPROVAL
This is to certify that we have read the thesis submitted by

Qazi Hassan & Adnan Ejaz It is our judgment that this thesis is of
sufficient standard to warrant it acceptance by the Board of Technical
Education, Khyber Pakhtunkhwa
For diploma in Information and Technology.
COMMITTEE
1. External Examiner ______________________
Mr.
2. Internal Examiner _________________________
Mr.
3. Supervisor ________________________

DEDICATION
TO Our dearest parents

Who
Motivate, support and encourage us
In every aspect of our life.

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:
 As the usage of internet is increasing day-by-day. Most product’s (software

or hardware ) provide online help for their customer’s by making a website
which will help them to understand the different feature’s of the product
and troubleshooting.
 In this project we have used different html & css tags to create a web page
and to display them in right order. To dived a page in to different section
we have used <div> tag and with css define its position on page accordingly.
 <img> tag is used to insert images and its attributes to define their width
and height.
 We also used a java query to built a slider which is the main goal of this
project.
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
1. To create a index.hml file we open noted pad from start menu.

2. From file menu we selected Save as option.
3. And save as index.html in slider folder.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</head>
<body>
</body>
</html>

This is the result in chrome:
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>
<img src=images/logo.png width=290px height=85px></div>
<div id=logo2>
<img src=images/0.png height=85px >
</div>
</div>
Cascading Style Codes

After creating divs and giving them different ids to identify them we used
following codes to style them:

#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
In <head> tag we used following codes to link js file to html :
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stepcarousel.js">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="images/a1.jpg" width=896px height=450px;>
</div>
<div class="panel">
<img src="images/1.png" width=896px height=450px;>
</div>
<div class="panel">
<img src="images/2.jpg"width=896px height=450px;>
</div>
<div class="panel">
</div>
<div class="panel">
<img src="images/4.jpg" width=896px height=450px;>
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>

After creating divs and giving them different class to identify them we used

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 900px; /*Width of Carousel Viewer itself*/
height: 450px; /*Height should enough to fit largest content's height*/
-webkit-box-sizing: border-box; /* set box model so container width and height

value includes any padding/border defined */
-moz-box-sizing: border-box;
box-sizing: border-box;
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: -29px;
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/

width: 900px; /*Width of each panel holding each content. If removed, widths
should be individually defined on each content DIV then. */
span.paginatecircle{ /* CSS for paginate circle spans. Required */
background: white;
border: 2px solid black;
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({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide',

persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/arrowl.gif', 45,

220], rightnav: ['images/arrowr.gif', -50, 220]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain

current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax',

'path_to_external_file']
})
</script>

jquery.min file codes

/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
!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
String Function Array Date RegExp Object Error".split("

"),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function r(a){var
b=a.length,c=m.type(a);return"function"===c||m.isWindow(a)?!1:1===a.nodeType
&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var
s=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+-new
Date,v=a.document,w=0,x=0,y=gb(),z=gb(),A=gb(),B=function(a,b){return
a===b&&(l=!0),0},C="undefined",D=1<<31,E={}.hasOwnProperty,F=[],G=F.po
p,H=F.push,I=F.push,J=F.slice,K=F.indexOf||function(a){for(var
b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-
1},L="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|is
map|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",N="(?:\\\\.
|[\\w-]|[^\\x00-
\\xa0])+",O=N.replace("w","w#"),P="\\["+M+"*("+N+")(?:"+M+"*([*^$|!~]?=)"+
M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+O+"))|)"+M+"*\\]",Q=":("+N+"
)(?:\$(('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+P+")*)|.*)\$|)",
R=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),S=new
RegExp("^"+M+"*,"+M+"*"),T=new
RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new
RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(Q),W=new
RegExp("^"+O+"$"),X={ID:new RegExp("^#("+N+")"),CLASS:new
RegExp("^\\.("+N+")"),TAG:new
RegExp("^("+N.replace("w","w*")+")"),ATTR:new
RegExp("^"+P),PSEUDO:new RegExp("^"+Q),CHILD:new
RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\$"+M+"*(even|odd|(([+-
]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\$|)","i"),bool:new

Stepcarousel file codes
jQuery.noConflict()
var stepcarousel={
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img

src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please
wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons

(0=completely transparent, 1=completely opaque)
swipethreshold: [50, 300], // distance traveled within x milliseconds before it

is considered a swipe [pixels, milliseconds]
configholder: {},
getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val

as an integer
return (val=="auto")? 0 : parseInt(val)
},

getremotepanels:function($, config){ //function to fetch external page

containing the panel DIVs
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
url: config.contenttype[1], //path to external content
async: true,
dataType: 'html',
error:function(ajaxrequest){
config.$belt.html('Error fetching content.<br />Server

Response: '+ajaxrequest.responseText)
},
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){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for

target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its

value
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)
},

addnavbuttons:function($, config, currentpanel){
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')
config.$leftnavbutton.bind('click', function(){ //assign nav button

event handlers
stepcarousel.stepBy(config.galleryid, -
config.defaultbuttons.moveby)
})
config.$rightnavbutton.bind('click', function(){ //assign nav button

event handlers
stepcarousel.stepBy(config.galleryid,
config.defaultbuttons.moveby)
})
if (config.panelbehavior.wraparound==false){ //if carousel viewer

should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, currentpanel)
}
return config.$leftnavbutton.add(config.$rightnavbutton)
},
alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of

each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({float: 'none', position: 'absolute', left:

paneloffset+'px'}) //position panel
$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
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-
config.paneloffsets[config.paneloffsets.length-2]) //remember panel width

})
config.paneloffsets.pop() //delete last offset (redundant)
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
for (var i=config.$panels.length-1; i>=0; i--){
addpanelwidths+=(i==lastpanelindex?
config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-
config.paneloffsets[i])
if (config.gallerywidth>addpanelwidths){
config.lastvisiblepanel=i //calculate index of panel that
var config=stepcarousel.configholder[galleryid]
if (typeof config=="undefined"){
//alert("There's an error with your set up of Carousel Viewer

\""+galleryid+ "\"!")
return
if (!isauto) //if stepBy() function isn't called by autorotate() function
var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that

means backwards
var pindex=config.currentpanel+steps //index of panel to stop at
if (config.panelbehavior.wraparound==false){ //if carousel viewer

should stop at first or last panel (instead of wrap back or forth)

pindex=(direction=="back" && pindex<=0)? 0 :

(direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex
if (config.defaultbuttons.enable==true){ //if default nav buttons

are enabled, fade them in and out depending on if at start or end of carousel
stepcarousel.fadebuttons(config, pindex)
else{ //else, for normal stepBy behavior
if (pindex>config.lastvisiblepanel && direction=="forward"){
//if destination pindex is greater than last visible panel,

yet we're currently not at the end of the carousel yet
pindex=(config.currentpanel<config.lastvisiblepanel)?
config.lastvisiblepanel : 0
else if (pindex<0 && direction=="back"){
//if destination pindex is less than 0, yet we're currently

not at the beginning of the carousel yet
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 &&

direction=='forward' || config.currentpanel==0 && direction=='back')){ //decide

whether to apply "push pull" effect
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){
config.$belt.stop(true, true)
this.stepBy(galleryid, config.autostep.moveby, true)
},
stopautostep:function(config){
clearTimeout(config.steptimer)

},
statusreport:function(galleryid){
if (config.statusvars.length==3){ //if 3 status vars defined
var startpoint=config.currentpanel //index of first visible panel
var visiblewidth=0
for (var endpoint=startpoint;

endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last
visible panel
visiblewidth+=config.panelwidths[endpoint]
if (visiblewidth>config.gallerywidth){
break
startpoint+=1 //format startpoint for user friendiness
endpoint=(endpoint+1==startpoint)? startpoint : endpoint //If

only one image visible on the screen and partially hidden, set endpoint to startpoint
var valuearray=[startpoint, endpoint, config.panelwidths.length]
for (var i=0; i<config.statusvars.length; i++){
window[config.statusvars[i]]=valuearray[i] //Define
variable (with user specified name) and set to one of the status values
config.$statusobjs[i].text(valuearray[i]+" ") //Populate

element on page with ID="user specified name" with 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 controlpoints=[], controlsrc=[], buttonarray=[],

moveby=$templatebutt.attr("data-moveby") || 1
var asize=(moveby==1? 0:1) +

Math.floor((config.lastvisiblepanel+1) / moveby) //calculate # of pagination links
to create
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
for (var i=0; i<asize; i++){

var moveto=Math.min(i*moveby,
config.lastvisiblepanel)
buttonarray.push(buttonhtml.replace(/>/, ' data-

index="'+i+'" data-moveto="'+moveto+'" title="Move to Panel '+(moveto+1)+'">')
+'\n')
controlpoints.push(moveto) //store panel index each

control goes to when clicked on
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)
})
config.$paginatediv.bind('mouseover mouseout', function(e){
var $target=$(e.target)
if (isimg && $target.attr('data-over')){
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 isimg = config.pageinfo.isimg
for (var i=0; i<config.pageinfo.controlpoints.length; i++){
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
if (config.pageinfo.prevselected!=null){ //deselect previously

selected link (if found)
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){
config.contenttype=['ajax', url]
stepcarousel.resetsettings($, config, true)
stepcarousel.init(jQuery, config)

},
init:function($, config, triggertype){
config.gallerywidth=config.$gallery.width()
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0),
"offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$belt=config.$gallery.find('.'+config.beltclass) //Find Belt DIV

that contains all the panels
config.$panels=config.$gallery.find('.'+config.panelclass) //Find Panel

DIVs that each contain a slide
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.oninit=(typeof config.oninit=="undefined")? function(){} :

config.oninit //attach custom "oninit" event handler

config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft'))
//Find length of Belt DIV's left margin
config.statusvars=config.statusvars || [] //get variable names that will

hold "start", "end", and "total" slides info
config.$statusobjs=[$('#'+config.statusvars[0]),
$('#'+config.statusvars[1]), $('#'+config.statusvars[2])]
config.currentpanel=0
stepcarousel.configholder[config.galleryid]=config //store config

parameter as a variable
if (config.contenttype[0]=="ajax" && typeof

config.contenttype[1]!="undefined" && triggertype != 'windowresize') //fetch ajax
content?
stepcarousel.getremotepanels($, config)
else
stepcarousel.alignpanels($, config) //align panels and initialize

gallery
},
resetsettings:function($, config, emptybelt){
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()
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){
//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake

of users with JS disabled)
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
jQuery(window).bind('resize', function(){ // when window is resized,

refresh carousel
clearTimeout(config.windowresizetimer)
config.windowresizetimer = setTimeout(function(){ // call

resize function just once
stepcarousel.resetsettings(jQuery, config)
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist",
0)
stepcarousel.init(jQuery, config, 'windowresize')
}, 200)
})
jQuery(window).bind('unload', function(){ //clean up on page unload
stepcarousel.resetsettings($, config, true)
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist",
config.currentpanel)
jQuery.each(config, function(ai, oi){
oi=null

})
config=null
})

<MAIN CONTAINER>


After creating divs and giving them different ids to identify them we used
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;
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-left:12px;
padding-right:12px;
#mleft2pic{
width:160px;
height:28;
#mleft3
width:420px;
float:right;
border-style:solid;
border-width:1px;
padding-top:12px;
padding-left:12px;
padding-right:12px;
#mleft3pic
width:420px;
he1ght:28;
#backdiv
width:930px;heigt:auto;

THE FINAL RESULT:

Board of Technical Education Khyber Pakhtunkhwa: DIT Project by

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Board of Technical Education Khyber Pakhtunkhwa: DIT Project by

Încărcat de

Drepturi de autor:

Formate disponibile

Board of Technical Education Khyber Pakhtunkhwa 1

Khyber Pakhtunkhwa Board of

D.I.T 2nd semester project

IN THE NAME OF ALLAH

D.I.T 2nd semester project

D.I.T 2nd semester

D.I.T 2nd semester project

This is to certify that we have read the thesis submitted by

1. External Examiner ______________________

2. Internal Examiner _________________________

D.I.T 2nd semester project

TO Our dearest parents

D.I.T 2nd semester project

D.I.T 2nd semester project

 As the usage of internet is increasing day-by-day. Most product’s (software

D.I.T 2nd semester project

D.I.T 2nd semester project

1. To create a index.hml file we open noted pad from start menu.

D.I.T 2nd semester project

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

D.I.T 2nd semester project

This is the result in chrome:

D.I.T 2nd semester project

<img src=images/logo.png width=290px height=85px></div>

<img src=images/0.png height=85px >

Cascading Style Codes

D.I.T 2nd semester project

D.I.T 2nd semester project

In <head> tag we used following codes to link js file to html :

<script type="text/javascript" src="js/stepcarousel.js">

<div id="mygallery" class="stepcarousel">

<img src="images/a1.jpg" width=896px height=450px;>

<img src="images/1.png" width=896px height=450px;>

<img src="images/2.jpg"width=896px height=450px;>

<img src="images/3.png" width=896px height=450px;>

<img src="images/4.jpg" width=896px height=450px;>

<img src="images/5.png" width=896px height=450px;>

<img src="images/6.png" width=896px height=450px;>

Cascading Style Codes

D.I.T 2nd semester project

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 900px; /*Width of Carousel Viewer itself*/

height: 450px; /*Height should enough to fit largest content's height*/

-webkit-box-sizing: border-box; /* set box model so container width and height

position: absolute; /*leave this value alone*/

float: left; /*leave this value alone*/

margin: 10px; /*margin around each panel*/

D.I.T 2nd semester project

span.paginatecircle{ /* CSS for paginate circle spans. Required */

border: 2px solid black;

D.I.T 2nd semester project

galleryid: 'mygallery', //id of carousel DIV

panelclass: 'panel', //class of panel DIVs each holding content

autostep: {enable:true, moveby:1, pause:3000},

panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide',

defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/arrowl.gif', 45,

statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain

contenttype: ['inline'] //content setting ['inline'] or ['ajax',

D.I.T 2nd semester project

jquery.min file codes

D.I.T 2nd semester project

String Function Array Date RegExp Object Error".split("

position: relative; /leave this value alone/

overflow: scroll; /leave this value alone/

width: 900px; /Width of Carousel Viewer itself/

height: 450px; /Height should enough to fit largest content's height/

position: absolute; /leave this value alone/

float: left; /leave this value alone/

margin: 10px; /margin around each panel/