Toon posts:

Positionering layer lukt niet..

Pagina: 1
Acties:
  • 37 views sinds 30-01-2008

maandag 22 augustus 2005 16:52

Acties:

Verwijderd

Topicstarter
Hallo mensen!

Samen met een vriend ben ik een website aan het maken van onze vakantie..
Nu leek t ons leuk om sliding layers te gebruiken..
Het intergreren van de layers is mij wel gelukt.. alleen omdat ik niet zoveel scripting knowhow heb zit ik toch met een probleem..

Wat ik ook verander.. het lukt me niet om de layers een stuk van de linkerkant van het scherm te sliden.. Ik wil het namelijk naast een plaatje laten sliden, maar ik krijg t gewoon NIET voor elkaar..

Ik hoop dat jullie mij hiermee kunnen helpen, want het geeft me echt grijze haren!

De codes:

HTML
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

<html>

<head>
<title>Korosi 7 Crew Main Site</title>

<style type="text/css">
body { font: 14px/1.3 verdana, arial, helvetica, sans-serif }
h1 { font-size:18px }   
a:link { color:#33c }   
a:visited { color:#339 }    

/* specs for layers that slide. */
div.glide { 
    position:absolute; visibility:hidden; 
    left:0; top:;
    width:280px; z-index:200;
    background-color:#dee7f7;
}
  
div.glide p { margin:.6em .8em 1em .6em } 
</style>    
<script src="src/dw_lib.js" type="text/javascript"></script>
<script src="src/dw_glide.js" type="text/javascript"></script>
<script type="text/javascript">

// change speed of slide here
var slide_in_speed = 600;   // millisecond duration of slide into view
var slide_out_speed = 500;// millisecond duration of slide out of view

function initGlideLayers() {
  var glideLyrs = new Array();
  
  // Set up your layers here
  // arguments: id, left=0 (offset calculated based on width), top
  glideLyrs[0] = new dynObj('glideDiv0', 0, 200);
  glideLyrs[1] = new dynObj('glideDiv1', 0, 200);
  glideLyrs[2] = new dynObj('glideDiv2', 0, 200);
  glideLyrs[3] = new dynObj('glideDiv3', 0, 200);
  
  for (var i=0; glideLyrs[i]; i++) {
        // hold original left position 
        glideLyrs[i].xOff = -(glideLyrs[i].w + 10);
        glideLyrs[i].shiftTo( glideLyrs[i].xOff, glideLyrs[i].y );
        glideLyrs[i].show();
  }
  slideEm('glideDiv0'); // Slide first one into view 
}

var curGlideLyr;
function slideEm(id) {
  var oldLyr, newLyr;
  // if link for current layer clicked, slide it out of view 
    if (curGlideLyr == id) { 
    oldLyr = dynObj.getInstance(curGlideLyr);
        oldLyr.slideTo(oldLyr.xOff, null, slide_out_speed, -1);
    curGlideLyr = ""; return; 
  }
    // if layer currently in view, set up to slide new one into view
    // after current one slides away
    if (curGlideLyr) {
    oldLyr = dynObj.getInstance(curGlideLyr);
        oldLyr.onSlideEnd = function() { 
            dynObj.holder[curGlideLyr].slideTo(10, null, slide_in_speed, -1); 
            this.onSlideEnd = function() { if (this.el) this.el = null } 
        }
        // slide current layer out of view
        oldLyr.slideTo(oldLyr.xOff, null, slide_out_speed, -1);
    } else {    // if no layer currently in view
    newLyr = dynObj.getInstance(id);
    newLyr.slideTo(10, null, slide_in_speed, -1);
  }
    curGlideLyr = id;
}
</script>
</head>

<body onload="initGlideLayers()" onunLoad="javascript:window.close()" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="glideDiv0" class="glide">
<p>Nou dit zou de home moeten worden.. beetje gelul over de site..</div>

<div id="glideDiv1" class="glide">
<p>Dit moet een page zijn waarop iedere persoon van de crew wat kwijt kan.. incl foto natuurlijk</div>

<div id="glideDiv2" class="glide">
<p>Nou hier moeten de fotoz komen</div>

<div id="glideDiv3" class="glide">
En hier moeten we een gastenboek in organiseren!</div>
<table id="Tabel_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0" position="absolute">
    <tr>
        <td colspan="3">
            [img]"afbeeldingen/index_01.gif"[/img]</td>
    </tr>
    <tr>
        <td rowspan="7">
            [img]"afbeeldingen/index_02.gif"[/img]</td>
        <td>
        <a href="javascript://" onclick="slideEm('glideDiv0')">
            [img]"afbeeldingen/index_03.gif"[/img]</a></td>
        <td rowspan="7">
            [img]"afbeeldingen/index_04.gif"[/img]</td>
    </tr>
    <tr>
        <td>
            [img]"afbeeldingen/index_05.gif"[/img]</td>
    </tr>
    <tr>
        <td>
        <a href="javascript://" onclick="slideEm('glideDiv1')">
            [img]"afbeeldingen/index_06.gif"[/img]</a></td>
    </tr>
    <tr>
        <td>
            [img]"afbeeldingen/index_07.gif"[/img]</td>
    </tr>
    <tr>
        <td>
        <a href="javascript://" onclick="slideEm('glideDiv2')">
            [img]"afbeeldingen/index_08.gif"[/img]</a></td>
    </tr>
    <tr>
        <td>
        <a href="javascript://" onclick="slideEm('glideDiv3')">
            [img]"afbeeldingen/index_09.gif"[/img]</a></td>
    </tr>
    <tr>
        <td>
            [img]"afbeeldingen/index_10.gif"[/img]</td>
    </tr>
</table>

</body>
</html>


dw_lib.js
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

dynObj.holder = {}; 
// constructor
function dynObj(id,x,y,w,h) {
  var el = dynObj.getElemRef(id);
  if (!el) return;  this.id = id; 
  dynObj.holder[this.id] = this; this.animString = "dynObj.holder." + this.id;
  var px = window.opera? 0: "px";
    this.x = x || 0;    if (x) el.style.left = this.x + px;
    this.y = y || 0;    if (y) el.style.top = this.y + px;
    this.w = w || el.offsetWidth || 0;  this.h = h || el.offsetHeight || 0;
    // if w/h passed, set style width/height
    if (w) el.style.width = w + px; if (h) el.style.height = h + px;
}

dynObj.getElemRef = function(id) { 
  var el = document.getElementById? document.getElementById(id): null;
  return el;
} 

dynObj.getInstance = function(id) {
  var obj = dynObj.holder[id];
  if (!obj) obj = new dynObj(id);
  else if (!obj.el) obj.el = dynObj.getElemRef(id);
  return obj;
}

dynObj.prototype.shiftTo = function(x,y) {
  var el = this.el? this.el: dynObj.getElemRef(this.id)? dynObj.getElemRef(this.id): null;
  if (el) {
    if (x != null) el.style.left = (this.x = x) + "px";
    if (y != null) el.style.top = (this.y = y) + "px";
  }
}

dynObj.prototype.shiftBy = function(x,y) { this.shiftTo(this.x+x, this.y+y); }

dynObj.prototype.show = function() { 
  var el = this.el? this.el: dynObj.getElemRef(this.id)? dynObj.getElemRef(this.id): null;
  if (el) el.style.visibility = "visible"; 
}
dynObj.prototype.hide = function() { 
  var el = this.el? this.el: dynObj.getElemRef(this.id)? dynObj.getElemRef(this.id): null;
  if (el) el.style.visibility = "hidden"; 
}


// for time-based animations
// resources: www.13thparallel.org and www.youngpup.net (accelimation)
var dw_Bezier = {
  B1: function (t) { return t*t*t },
  B2: function (t) { return 3*t*t*(1-t) },
  B3: function (t) { return 3*t*(1-t)*(1-t) },
  B4: function (t) { return (1-t)*(1-t)*(1-t) },
  // returns current value based on percentage of time passed
  getValue: function (percent,startVal,endVal,c1,c2) {
    return endVal * this.B1(percent) + c2 * this.B2(percent) + c1 * this.B3(percent) + startVal * this.B4(percent);
  }
}

// adapted from accelimation.js by Aaron Boodman of www.youngpup.net
dw_Animation = {
  instances: [],
  add: function(fp) {
    this.instances[this.instances.length] = fp;
    if (this.instances.length == 1) this.timerID = window.setInterval("dw_Animation.control()", 10);
  },
  
  remove: function(fp) {
    for (var i = 0; this.instances[i]; i++) {
        if (fp == this.instances[i]) {
            this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
            break;
        }
    }
    if (this.instances.length == 0) {
        window.clearInterval(this.timerID); this.timerID = null;
    }
  },
  
  control: function() {
    for (var i = 0; this.instances[i]; i++) {
        if (typeof this.instances[i] == "function" ) this.instances[i]();
      else eval(this.instances[i]);
    }
  }
}


dw_glide.js
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// acc is number between -1 and 1 ( -1 full decelerated, 1 full accelerated, 0 linear, i.e. no acceleration)
dynObj.prototype.slideTo = function (destX,destY,slideDur,acc,endFn) {
  if (!document.getElementById) return;
  this.slideDur = slideDur || .0001; var acc = -acc || 0;
  if (endFn) this.onSlideEnd = endFn;
  // hold destination values (check for movement on 1 axis only)
    if (destX == null) this.destX = this.x; else this.destX = destX;
  if (destY == null) this.destY = this.y; else this.destY = destY;
  this.startX = this.x; this.startY = this.y;
    this.st = new Date().getTime();
    // control points for bezier-controlled slide (see www.youngpup.net accelimation)
  this.xc1 = this.x + ( (1+acc) * (this.destX-this.x)/3 );
    this.xc2 = this.x + ( (2+acc) * (this.destX-this.x)/3 );
  this.yc1 = this.y + ( (1+acc) * (this.destY-this.y)/3 );
    this.yc2 = this.y + ( (2+acc) * (this.destY-this.y)/3 );
    this.sliding = true;
  this.onSlideStart();
  dw_Animation.add(this.animString + ".doSlide()");
}

dynObj.prototype.doSlide = function() {
    if (!this.sliding) return;  
    var elapsed = new Date().getTime() - this.st;
    if (elapsed < this.slideDur) {
    var x = dw_Bezier.getValue(elapsed/this.slideDur, this.startX, this.destX, this.xc1, this.xc2);
    var y = dw_Bezier.getValue(elapsed/this.slideDur, this.startY, this.destY, this.yc1, this.yc2);
        this.shiftTo( Math.round(x) ,Math.round(y) );
        this.onSlide();
    } else {    // if time's up
    dw_Animation.remove(this.animString + ".doSlide()");
        this.shiftTo(this.destX,this.destY);
        this.onSlide();
        this.sliding = false;
        this.onSlideEnd();
    }
}

dynObj.prototype.slideBy = function(dx,dy,slideDur,acc,endFn) {
    var destX=this.x+dx; var destY=this.y+dy;
    this.slideTo(destX,destY,slideDur,acc,endFn);
}

dynObj.prototype.onSlideStart = function () {}
dynObj.prototype.onSlide = function () {}
dynObj.prototype.onSlideEnd = function () { if (this.el) this.el = null; }

maandag 22 augustus 2005 16:56

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

a) javascript hoort in Webdesign & Graphics
b) wij geven geen support op gevonden/geripte scripts - daarvoor moet je de maker van dat script maar lastigvallen

1 tip: leer gewoon zelf javascript...

Intentionally left blank

Dit topic is gesloten.