Scribd
Upload
17 views48 pages

Tangled

Uploaded by

hadiking763
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views48 pages

Tangled

Uploaded by

hadiking763
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 48

1

PROJECT
2

IN THE NAME OF ALLAH


THE MOST GRACIOUS
THE MOST MERCIFUL
3

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
4

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 ________________________
5

DEDICATION

TO Our dearest parents


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

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-tomark
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
7

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.
8

First we created a new folder on the desktop and named it Slider. In this folder we
created a sub folders (Images, & Js).

Images
9

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:
10

<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>
11

<body>

</body>

</html>

This is the result in chrome:


12

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>
13

<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:85p

x;

float:left; }

#logo2

{ height:85px;

float:right;

margin-top:31px;

#top1 {
14

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>
15

<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">

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

</div>

<div class="panel">

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

</div>
16

<div class="panel">

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

</div>

<div class="panel">

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

</div>

</div>

Cascading Style Codes


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

.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 */
17

-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;


18

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


19

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=/-([\daz])/
gi,q=function(a,b){return
20

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)&&aparseFloat(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
21

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
22

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()
23

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){
24

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
25

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',
26

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

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


28

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

stepcarousel.stopautostep(config)

var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means


backwards

var pindex=config.currentpanel+steps //index of panel to stop at


29

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*/

}
30

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){

var config=stepcarousel.configholder[galleryid] config.

$belt.stop(true, true)
31

this.stepBy(galleryid, config.autostep.moveby, true)

},

stopautostep:function(config){

clearTimeout(config.steptimer) },

statusreport:function(galleryid){

var config=stepcarousel.configholder[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


32

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
33

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')){
34

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

config=stepcarousel.configholder[galleryid] if
35

(config.$paginatediv.length==1){ 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])
36

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.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
37

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
38

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){
39

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){

//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users
with JS disabled)

document.write('<style
40

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.stopautostep(config)

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){


41

oi=null

})

config=null

})

}
42

<MAIN CONTAINER>
43

Cascading Style Codes


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

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;

}
44

#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;
45

#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;

}
46

#mleft2pic{

width:160px;

height:28; }

#mleft3

{ width:420p

x; float:right;

border-

style:solid;

border-

width:1px;

padding-top:12px;

padding-bottom: 10px;

padding-left:12px;

padding-right:12px; }

#mleft3pic

{ width:420p

x; he1ght:28;

}
47

#backdiv

{ width:930px;heigt:aut

o;

THE FINAL RESULT:


48

You might also like