Thema: test-fade_1

To whom it may concern,

Im thread von Christopher war ua. die Frage, wie verschiedene Farbfades auf bestimmten tags
unabhängig voneinander ausgeführt werden können.
Im folgenden Beispiel wird das erreicht, indem jedem Object eine Methode f mit auf den
Weg gegeben wird, die ein setInterval aufruft.
Ich war darauf bedacht, die Konstruktion von javascript-Funktionalitäten vermittels
irgendwelcher evals und String-Zusammenstückelungen tunlichst zu vermeiden.
Recht intressant finde ich die unterschiedlichen Reaktionsgeschwindigkeiten der browser -
wobei ich lediglich ie6, opera7, und die moz-Gemeinde durchgetestet habe.
nn7 ist mit Abstand der schnellste, während phoenix0.5 bei der cpu-Auslastung klar die
Nase vorn hat (eigenartigerweise auch besser als der ie, und das unter win2k).
Es werden zwar in der Praxis wohl eher keine links vorkommen,
die übereinander liegen. Das geschieht hier nur aus Test-Gründen.


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Fade_ie6_op7_ns7_etc</title>
 <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
 <style type = 'text/css'>
 a{position:absolute; font-Family:impact; padding:0px;}
 
 a.n:link{color:#777777;}
 a.n:visited{color:#abcdef;}
 a.n:hover{font-weight:bold;color:#ff6600;}
 a.n:active{color:#bbbbbb;}
 
 </style>
 <script type = 'text/javascript'>
 
 // in Array Lc und Fc werden die jeweiligen Anfangs- und Endfarben als rgb-Werte eingetragen
 // existiert kein Arrayeintrag für einen Link, wird der letzte genommen, der allerdings nicht 'n' sein darf.
 // var s ist die Schnelligkeit des Fades, die browser unterscheiden sich hier erheblich.
 
 var Lc = ['n', [255,0,0], [30,30,30],  [255,255,0], 'n', 'n', [123,255,123], [0,0,0]];
 
 var Fc = ['n', [0,8,15],  [255,255,0], [0,255,255], 'n', 'n', [0,0,255],     [234,34,255]];
 
 var s = 1;
 
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 var d = document,  dl = d.getElementsByTagName('a');
 
 function F()
 {var C = function(c){return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')'},  cI = function(i){clearInterval(i)};
 
  for(var i = 0; i < dl.length; i++)
   {if(dl[i].className != 'n')
     {var aC = function(ac){if(!ac[i]){acc = []; acc = acc.concat(ac[ac.length-1])}; return ac[i] ? ac[i] : acc};
 
      dl[i].o = aC(Fc);
      dl[i].c = aC(Lc);
 
      with(dl[i]){style.color = C(dl[i].a = [c[0], c[1], c[2]])};
 
      dl[i].f = function(z)
                 {var t = this, ao = z != 1 ? t.a : t.o;
 
                  t.v = function(x){with(t)       {c[x] > ao[x] ? c[x]-- : c[x] < ao[x] ? c[x]++ : c[x] = ao[x]}};
                  t.p = function(x){with(t) return a[x] >  o[x] ? c[x]*z < (ao[x] + z)*z : c[x]*z > (ao[x] - z)*z};
 
                  t.sid = setInterval( function(){
                                        with(t){for(j in a) v(j);
                                                p(0) && p(1) && p(2) ? cI(sid) : 0;
                                                style.color = C(c)}},
                                      s);
                 };
 
      dl[i].onmouseover = function(){t = this; cI(t.sid); t.f(1)};
      dl[i].onmouseout  = function(){t = this; cI(t.sid); t.f(-1)};
     };
   };
 };
 
 // function CR und function d.onclick zu Testzwecken
 // in function CR werden links erzeugt, und die entsprechenden Einträge in die Arrays Lc und Fc vorgenommen
 // ein muntrer click ins document zeigt die definierten Farbverläufe
 
 function CR(c)
 {for( var i = 0, R = function(r, m){return Math.round(Math.random()*r) + (m ? m : 0)}; i < c; i++)
  {var cr = d.getElementsByTagName('body')[0].appendChild(d.createElement('a'));
   var iH = ''; for(var j = 0; j < 3; j++)iH += '&#' + R(216, 35) + ';';
   with(cr){innerHTML = iH;   href = '#';
            with(style){left = R(840,60); top = R(440, -10); fontSize = R(160, 60);
                        textDecoration = 'none'; zIndex = 1000-parseInt(fontSize)}};
 
   Lc.push([R(256), R(256), R(256)]);
   Fc.push([R(256), R(256), R(256)]);
  };
 };
 
 d.onclick = function(o)
 { var x = '', lf = function (a){return a[i]?a[i]:a[a.length-1]};
   for(var i =0; i< dl.length; i++)
   x += (dl[i].className != 'n' ? (iH = dl[i].innerHTML) + (iH.length > 9 ? 't' : 'tt') + lf(Lc) + '  <-> t' + lf(Fc) : 'n') + 'n';
   alert(x)};
 
 onload = function(){CR(42); F()};
 
 </script>
 </head>
 <body style='background-Color:#666666;'>
 <a href='#' class='n' style='z-index:1000;'>pnopeknil n</a>
 <a href='#'           style='top:70px;  left:90px;  z-index:1000; font-size:70px;  height:0px;'>PROBELINK 1</a>
 <a href='#'           style='top:300px; left:120px; z-index:1000; font-size:150px; height:0px;'>ploberink 2</a>
 
 <div                  style='position:absolute;top:100px;z-index:1000;'>
 <a href='#'           style='position:relative;'>palopa</a><p></p>
 <a href='#' class='n' style='position:relative;'>paloopa</a><p></p>
 <a href='#' class='n' style='position:relative;'>palooopa</a><p></p>
 <a href='#'           style='position:relative;'>papaloopap</a><p></p>
 <a href='#'           style='position:relative;'>papaloopapoo</a>
 </div>
 </body>
 </html>
 

Vielleicht kann der eine oder die andre was mehr oder weniger Sinnvolles mit anfangen.

gruß

matho

Re: test-fade_1

Hi Matho,

nochmals supergroßen Dank für das Skript. Nur jetzt funktioniert wieder was nicht! Der tooltipp unten!


Aber hier, der Code!


var d = document, Cla = [], Cda =[];
 function H(o, h1, h2)
 
 {for (var i = 0; i < (td = d.getElementsByTagName('td')).length, t = td[i]; i++)
 
 o == 1 ? (T(t, h1 ? T(t, T(t) == h1 ? h2 : Cla[i]) : Cla[i]), D(t, T(t) == h2 ? 'nix' : Cda[i])) : (Cla[i] = T(t), Cda[i] = D(t));
 
 };
 
 
 function D(d, n){return n ? d.id = n : d.id};
 function T(t, n){return n ? t.className = n: t.className};
 
 
 /**********************************************************************************
 
 NewsMenu
 
 * Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
 
 * This script was released at DHTMLCentral.com
 
 * Visit for more great scripts!
 
 * This may be used and changed freely as long as this msg is intact!
 
 * We will also appreciate any links you could give us.
 
 *
 
 * Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
 
 *********************************************************************************/
 
 
 function lib_bwcheck(){ //Browsercheck (needed)
 
 this.ver=navigator.appVersion
 
 this.agent=navigator.userAgent
 
 this.dom=document.getElementById?1:0
 
 this.opera5=this.agent.indexOf("Opera 5")>-1
 
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
 
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 
 this.ie=this.ie4||this.ie5||this.ie6
 
 this.mac=this.agent.indexOf("Mac")>-1
 
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
 
 this.ns4=(document.layers && !this.dom)?1:0;
 
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 
 return this
 
 }
 
 var bw=new lib_bwcheck()
 
 
 
 /********************************************************************************
 
 If you want to change the appearance of the text, background-colors, size or
 
 anything do that in the style tag above.
 
 
 This menu might not be as easy to adapt to your own site, but please
 
 play around with it before you mail me for help...
 
 ****************************************************************************/
 
 
 /***************************************************************************
 
 Variables to set.
 
 ****************************************************************************/
 
 
 //There are 2 ways these menus can be placed
 
 // 0 = column
 
 // 1 = row
 
 nPlace=0
 
 
 
 //How many menus do you have? (remember to copy and add divs in the body if you add menus)
 
 var nNumberOfMenus=2
 
 
 var nMwidth=56 //The width on the menus (set the width in the stylesheet as well)
 
 var nPxbetween=2 //Pixels between the menus
 
 var nFromright=0 //The first menus right position
 
 var nFromtop=0 //The top position of the menus
 
 var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div
 
 var nBgcolorchangeto='#6380BC' //The bgColor to change to
 
 var nImageheight=11 //The position the mouseover line div will stop at when going up!
 
 
 /***************************************************************************
 
 You shouldn't have to change anything below this
 
 ****************************************************************************/
 
 //Object constructor
 
 function makeNewsMenu(obj,nest){
 
 nest=(!nest) ? "":'document.'+nest+'.'
 
 this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
 
 this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
 
 this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
 
 this.moveIt=b_moveIt;this.bgChange=b_bgChange;
 
 this.slideUp=b_slideUp; this.slideDown=b_slideDown;
 
 this.clipTo=b_clipTo;
 
 this.obj = obj + "Object"; eval(this.obj + "=this")
 
 }
 
 //Objects methods
 
 
 // A unit of measure that will be added when setting the position of a layer.
 
 var px = bw.ns4||window.opera?"":"px";
 
 
 function b_moveIt(x,y){this.x=x; this.y=y; this.css.right=this.x+px; this.css.top=this.y+px;}
 
 function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}
 
 function b_clipTo(t,r,b,l){
 
 if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.right=l
 
 }else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
 
 }
 
 function b_slideUp(ystop,moveby,speed,fn,wh){
 
 if(!this.slideactive){
 
 if(this.y>ystop){
 
 this.moveIt(this.x,this.y-5); eval(wh)
 
 setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
 
 }else{
 
 this.slideactive=false; this.moveIt(0,ystop); eval(fn)
 
 }
 
 }
 
 }
 
 function b_slideDown(ystop,moveby,speed,fn,wh){
 
 if(!this.slideactive){
 
 if(this.y<ystop){
 
 this.moveIt(this.x,this.y+5); eval(wh)
 
 setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
 
 }else{
 
 this.slideactive=false; this.moveIt(0,ystop); eval(fn)
 
 }
 
 }
 
 }
 
 //Initiating the page, making cross-browser objects
 
 function newsMenuInit(){
 
 oTopMenu=new Array()
 
 zindex=10
 
 for(i=0;i<=nNumberOfMenus;i++){
 
 oTopMenu[i]=new Array()
 
 oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
 
 oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
 
 oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
 
 oTopMenu[i][1].moveIt(0,nImageheight)
 
 oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
 
 if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromright+(i*nPxbetween),nFromtop)
 
 else{
 
 oTopMenu[i][0].moveIt(nFromright,i*nImageheight+nFromtop+(i*nPxbetween))
 
 oTopMenu[i][0].css.zIndex=zindex--
 
 }
 
 oTopMenu[i][0].css.visibility="visible"
 
 }
 
 }
 
 //Moves the menu
 
 function topMenu(num){
 
 if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
 
 else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
 
 }
 
 //Changes background onmouseover
 
 function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
 
 function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
 
 
 // Calls the init function onload if the browser is ok...
 
 //if (bw.bw) onload = newsMenuInit;
 
 
 
 /////////////////////////// unteneffect1.js ///////////////////////////
 
 
 /*
 
 Slowly coming together status bar scroller
 
 Written by BengalBoy (www.angelfire.com/nt/bengaliboy/index.php)
 
 Visit http://javascriptkit.com for this script and more
 
 */
 
 
 //set message:
 
 var msg = statusbartext;
 
 
 var timeID = 10;
 
 var stcnt = 16;
 
 var wmsg = new Array(33);
 
 wmsg[0] = msg;
 
 blnk = " ";
 
 for (i=1; i<32; i++)
 
 {
 
 b = blnk.substring(0,i);
 
 wmsg[i]="";
 
 for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b;
 
 }
 
 
 function wiper()
 
 {
 
 if (stcnt > -1) str = wmsg[stcnt]
 
 else str = wmsg[0];
 
 if (stcnt-- < -40) stcnt=31;
 
 window.status = str; //nn7, moz, phoenix verlangen dringend window.status, statt nur status
 
 clearTimeout(timeID);
 
 timeID = setTimeout("wiper()",100);
 
 }
 
 
 //document.onload=wiper()
 
 
 /////////////////////////// unteneffect2.js ///////////////////////////
 
 
 var flasche;
 
 
 var yourwords = statusbartext;
 
 var flaschenspeed = 150;
 
 var control = 1;
 
 function flash()
 
 {
 
 if (control == 1)
 
 {
 
 window.status=yourwords;
 
 control=0;
 
 }
 
 else
 
 {
 
 window.status = " "; //nn7, moz, phoenix verlangen dringend window.status = " ", statt
 
 control=1; //window.status="", damit der eingegebene Text auch tatsächlich blinkt, also
 
 //sich nicht einfach mit einem munteren 'Done' oder 'Document:Done' abwechselt
 
 }
 
 flasche = setTimeout("flash();", flaschenspeed); //flasche und flaschenspeed von mir neu eingeführt,
 
 //weil var speed gibt's nachher nochmal
 
 }
 
 
 //document.onload=flash();
 
 
 /////////////////////////// unteneffect3.js ///////////////////////////
 
 
 
 // Following COPYRIGHT ©1997 Dennis & Family. All Rights Reserved.
 
 /////////////////////////// unteneffect3.js ///////////////////////////
 
 
 var snapperlapapp; //snapperlapapp von mir neu eingeführt
 
 
 // Following COPYRIGHT ©1997 Dennis & Family. All Rights Reserved.
 
 
 function snapIn(jumpSpaces,position)
 
 { var msg = statusbartext;
 
 var out = "";
 
 for (var i=0; i<position; i++) { out += msg.charAt(i) }
 
 for (i=1;i<jumpSpaces;i++) { out += " " }
 
 out += msg.charAt(position);
 
 window.status = out;
 
 if (jumpSpaces <= 1) { position++;
 
 if (msg.charAt(position) == ' ') { position++ }
 
 jumpSpaces = 100-position }
 
 else if (jumpSpaces > 3) { jumpSpaces *= .09 }
 
 else { jumpSpaces-- }
 
 if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
 
 snapperlapapp = window.setTimeout(cmd,10); } //snapperlapapp von mir neu eingeführt
 
 return true
 
 }
 
 
 
 //document.onload=snapIn(50,0);
 
 
 
 
 /////////////////////////// unteneffect4.js ///////////////////////////
 
 
 var timerTwo //timerTwo global
 
 
 function scrollit(seed) {
 
 var m1 = statusbartext;
 
 var msg=m1;
 
 var outt = " ";
 
 var ccc = 1;
 
 if (seed > 100) {
 
 seed--;
 
 cmd="scrollit("+seed+")";
 
 timerTwo=window.setTimeout(cmd,100);
 
 }
 
 else if (seed <= 100 && seed > 0) {
 
 for (ccc=0 ; ccc < seed ; ccc++) {
 
 outt+="    ";
 
 }
 
 outt+=msg;
 
 seed--;
 
 window.status=outt;
 
 cmd="scrollit("+seed+")";
 
 timerTwo=window.setTimeout(cmd,100);
 
 }
 
 else if (seed <= 0) {
 
 if (-seed < msg.length) {
 
 outt+=msg.substring(-seed,msg.length);
 
 seed--;
 
 window.status=outt;
 
 cmd="scrollit("+seed+")";
 
 timerTwo=window.setTimeout(cmd,100);
 
 }
 
 else {
 
 window.status="                     ";
 
 timerTwo=window.setTimeout("scrollit(100)",75);
 
 }
 
 }
 
 }
 
 
 //document.onload = scrollit(100)
 
 
 /////////////////////////// unteneffect5.js ///////////////////////////
 
 
 
 
 // Copyright 1996 - Tomer and Yehuda Shiran
 
 // This example will appear in our forthcoming book on JavaScript.
 
 // Feel free to "steal" this code provided that you leave this notice as is.
 
 // Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/
 
 // For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>
 
 
 // set speed of banner (pause in milliseconds between addition of new character)
 
 var speed = 10
 
 
 // decrease value to increase speed (must be positive)
 
 // set pause between completion of message and beginning of following message
 
 var pause = 1500
 
 
 // increase value to increase pause
 
 // set initial values
 
 var timerID = null
 
 var bannerRunning = false
 
 
 // create array
 
 var ar = new Array()
 
 
 // assign the strings to the array's elements
 
 ar[0] = statusbartext;
 
 
 // assign index of current message
 
 var message = 0
 
 
 // empty string initialization
 
 var state = ""
 
 
 // no value is currently being displayed
 
 clearState()
 
 
 // stop the banner if it is currently running
 
 function stopBanner() {
 
 // if banner is currently running
 
 if (bannerRunning)
 
 // stop the banner
 
 clearTimeout(timerID)
 
 // timer is now stopped
 
 timerRunning = false
 
 }
 
 
 // start the banner
 
 function startBanner() {
 
 // make sure the banner is stopped
 
 stopBanner()
 
 // start the banner from the current position
 
 showBanner()
 
 }
 
 
 // assign state a string of "0" characters of the length of the current message
 
 function clearState() {
 
 // initialize to empty string
 
 state = ""
 
 // create string of same length containing 0 digits
 
 for (var i = 0; i < ar[message].length; ++i) {
 
 state += "0"
 
 }
 
 }
 
 
 // display the current message
 
 function showBanner() {
 
 // if the current message is done
 
 if (getString()) {
 
 // increment message
 
 message++
 
 // if new message is out of range wrap around to first message
 
 if (ar.length <= message)
 
 message = 0
 
 // new message is first displayed as empty string
 
 clearState()
 
 // display next character after pause milliseconds
 
 timerID = setTimeout("showBanner()", pause)
 
 }
 
 else {
 
 // initialize to empty string
 
 var str = ""
 
 // built string to be displayed (only character selected thus far are displayed)
 
 for (var j = 0; j < state.length; ++j) {
 
 str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
 
 }
 
 // partial string is placed in status bar
 
 window.status = str
 
 // add another character after speed milliseconds
 
 timerID = setTimeout("showBanner()", speed)
 
 }
 
 }
 
 
 function getString() {
 
 // set variable to true (it will stay true unless proven otherwise)
 
 var full = true
 
 // set variable to false if a free space is found in string (a not-displayed char)
 
 for (var j = 0; j < state.length; ++j) {
 
 // if character at index j of current message has not been placed in displayed string
 
 if (state.charAt(j) == 0)
 
 full = false
 
 }
 
 // return true immediately if no space found (avoid infinitive loop later)
 
 if (full) return true
 
 // search for random until free space found (braoken up via break statement)
 
 while (1) {
 
 // a random number (between 0 and state.length - 1 == message.length - 1)
 
 var num = getRandom(ar[message].length)
 
 // if free space found break infinitive loop
 
 if (state.charAt(num) == "0")
 
 break
 
 }
 
 // replace the 0 character with 1 character at place found
 
 state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
 
 // return false because the string was not full (free space was found)
 
 return false
 
 }
 
 
 function getRandom(max) {
 
 // create instance of current date
 
 var now = new Date()
 
 // create a random number (good generator)
 
 var num = now.getTime() * now.getSeconds() * Math.random()
 
 // cut random number to value between 0 and max - 1, inclusive
 
 return num % max
 
 }
 
 
 
 //startBanner()
 
 
 //////////////////////
 
 
 // in Array Lc und Fc werden die jeweiligen Anfangs- und Endfarben als rgb-Werte eingetragen
 // existiert kein Arrayeintrag für einen Link, wird der letzte genommen, der allerdings nicht 'n' sein darf.
 // var s ist die Schnelligkeit des Fades, die browser unterscheiden sich hier erheblich.
 
 var Lc = [[71,170,255]];
 
 var Fc = [[0,0,134]];
 
 var s = 1;
 
 var d = document,  dl = d.getElementsByTagName('a');
 
 function F()
 {var C = function(c){return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')'},  cI = function(i){clearInterval(i)};
 
  for(var i = 0; i < dl.length; i++)
   {if(dl[i].className != 'n')
     {var aC = function(ac){if(!ac[i]){acc = []; acc = acc.concat(ac[ac.length-1])}; return ac[i] ? ac[i] : acc};
 
      dl[i].o = aC(Fc);
      dl[i].c = aC(Lc);
 
      with(dl[i]){style.color = C(dl[i].a = [c[0], c[1], c[2]])};
 
      dl[i].f = function(z)
                 {var t = this, ao = z != 1 ? t.a : t.o;
 
                  t.v = function(x){with(t)       {c[x] > ao[x] ? c[x]-- : c[x] < ao[x] ? c[x]++ : c[x] = ao[x]}};
                  t.p = function(x){with(t) return a[x] >  o[x] ? c[x]*z < (ao[x] + z)*z : c[x]*z > (ao[x] - z)*z};
 
                  t.sid = setInterval( function(){
                                        with(t){for(j in a) v(j);
                                                p(0) && p(1) && p(2) ? cI(sid) : 0;
                                                style.color = C(c)}},
                                      s);
                 };
 
      dl[i].onmouseover = function(){t = this; cI(t.sid); t.f(1)};
      dl[i].onmouseout  = function(){t = this; cI(t.sid); t.f(-1)};
     };
   };
 };
 
 
 
 
 ///////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////
 
 
 var d = document, iff, ee, zz = 0;
 
 
 if(d.layers) // für nn4x
 
 {captureEvents(Event.MOUSEOVER|Event.MOUSEOUT)
 
 onmouseover = AUSSETZEN;
 
 onmouseout = LOSLEGEN;
 
 };
 
 
 function AUSSETZEN(o)
 
 {ee = d.all ? event.srcElement : o.target;
 
 if(iff = (d.layers || ((d.all ? ee.tagName && ee.tagName == 'A' : ee.parentNode.tagName && ee.parentNode.nodeName == 'A'))))
 
 {window.clearTimeout(timeID); //stoppt No.1
 
 window.clearTimeout(flasche); //stoppt No.2
 
 clearTimeout(snapperlapapp); //stoppt No.3
 
 clearTimeout(timerTwo); //stoppt No.4
 
 clearTimeout(timerID); //stoppt No.5
 
 };
 
 };
 
 
 effecte = ['wiper()', 'flash()', 'snapIn(50, 0)', 'scrollit(100)', 'startBanner()'];
 
 
 function LOSLEGEN(o)
 
 {if((d.all && !d.defaultView) || d.layers || (!window.opera && d.defaultView))
 
 {if(zz == 1)AUSSETZEN(o); //für opera6 zur Sicherheit, doppelt gemoppelt hält besser
 
 var xx = Math.round(Math.random()*(effecte.length-1));
 
 if((zz == 0) || iff)eval(effecte[xx]);
 
 zz = 1;
 
 };
 
 };
 
 
 
 function ONLOAD()
 {
 F();
 if(bw.bw)newsMenuInit();
 LOSLEGEN();
 H();
 d.onmouseover = function(o){return (AUSSETZEN(o), (!d.layers && (d.defaultView || (d.all && !window.opera))? OVER(o) : void(0))) };
 d.onmouseout = function(o){return (LOSLEGEN(o), (!d.layers && (d.defaultView || (d.all && !window.opera))? OUT(o) : void(0))) };
 };
 onload = ONLOAD;
 

3

Re: test-fade_1

Moin Christopher,

eigentlich hatte ich vor, in dem neuen thread von diesen langen Monsterquelltexten
wegzukommen, weil sich da ausser uns beiden eh niemand durchquälen möchte....

Du mußt einfach diese beiden Stücke weglassen:

 , (!d.layers && (d.defaultView || (d.all && !window.opera))? OVER(o) : void(0))
 
 , (!d.layers && (d.defaultView || (d.all && !window.opera))?  OUT(o) : void(0)) 
 

weil die functions OVER und OUT ja nicht mehr vorhanden sind.


Ich habe noch ne andre Fassung von function F, die vielleicht ein wenig übersichtlicher ist:

 function F()
 {var C = function(c){return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')'},
     cI = function(i){clearInterval(i)},
     aC = function(ac){var l = ac.length-1; return ac[i] ? ac[i] : [ac[l][0], ac[l][1], ac[l][2]]},
      m = function(t, n){cI(t.sid); t.f(n)};
 
  for(var i = 0, di; i < dl.length; i++)
   if((di = dl[i]).className != 'n')
     {di.c = [];
      with(di){c[0] = aC(Lc); style.color = C(c[1] = [c[0][0], c[0][1], c[0][2]]); c[2] = aC(Fc)};
      di.f = function(z)
                 {var t = this, a = t.c[1], o = t.c[z != 1 ? 0 : 2];
 
                  t.v = function(x){with(t)           a[x] >    o[x] ? a[x]-- : a[x] < o[x] ? a[x]++ : a[x] = o[x]};
                  t.p = function(x){with(t) return c[0][x] > c[2][x] ? a[x]*z < (o[x] + z)*z : a[x]*z > (o[x] - z)*z};
 
                  t.sid = setInterval( function(){
                                        with(t){for(j in a) v(j);
                                                p(0) && p(1) && p(2) ? cI(sid) : 0;
                                                style.color = C(a)}},
                                      s);
                 };
      di.onmouseover = function(){m(this, 1)};
      di.onmouseout  = function(){m(this,-1)};
     };
 };
 

Eine beachtenswerte Sache in javascript ist, ob (und wann) eine tatsächlich neue,
unabhängige Kopie eines Objects bzw. einer Variablen erzeugt wird, oder eine bloße 'Referenz'.
Ich muß mal schaun, vielleicht gibt's noch 'ne schnellere Variante.

gruß

matho

P.S

Editier' doch vielleicht die Zeilen bei function topMenu so um,
daß man nicht so weit seitlich scrollen muß.

Re: test-fade_1

Hi, ich habe noch ein Problem. Die Function F verhält sich nicht mit der Function des Nav-Menüs. Ich habe schon viel probiert, Variablen und Function umbenannt, aber es funktioniert aber nichts!

Das Problem ist augenscheinlich nicht zu sehen. Wenn man aber Ã?ber das Menü (rechts oben) mit der Mausrfährt, passiert nicht. Wenn ich nun die Function F im Onload auskommentiere,  wird beim MOUSEOVER die Unterseite des Menüs schwarz gehovert!

Hier eine verkürzte Versiuon des Codes:


<html><head><style>
 
 .clTopMenu       {position:absolute; width:56px; height:150px; clip:rect(0px, 56px, 14px, 0px); background-color:#eeeeee; z-index:31; visibility:hidden;}
 .clTopMenuBottom {position:absolute; width:56px; height:3px; clip:rect(0px, 56px, 3px, 0px); top:11; background-color:#cecfce; z-index:2;}
 .clTopMenuText   {position:absolute; width:91px; left:5px; top:15px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#eeeeee; z-index:1;} 
 
 </style><script>
 //////////////////////
 
 
 // in Array Lc und Fc werden die jeweiligen Anfangs- und Endfarben als rgb-Werte eingetragen
 // existiert kein Arrayeintrag für einen Link, wird der letzte genommen, der allerdings nicht 'n' sein darf.
 // var s ist die Schnelligkeit des Fades, die browser unterscheiden sich hier erheblich.
 
 var Lc = [[71,170,255]];
 
 var Fc = [[0,0,134]];
 
 var s = 1;
 
 var d = document, dl = d.getElementsByTagName('a');
 function F()
 {var C = function(c){return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')'},
     cI = function(i){clearInterval(i)},
     aC = function(ac){var l = ac.length-1; return ac[i] ? ac[i] : [ac[l][0], ac[l][1], ac[l][2]]},
      m = function(t, n){cI(t.sid); t.f(n)};
 
  for(var i = 0, di; i < dl.length; i++)
   if((di = dl[i]).className != 'n')
     {di.c = [];
      with(di){c[0] = aC(Lc); style.color = C(c[1] = [c[0][0], c[0][1], c[0][2]]); c[2] = aC(Fc)};
      di.f = function(z)
                 {var t = this, a = t.c[1], o = t.c[z != 1 ? 0 : 2];
 
                  t.v = function(x){with(t)           a[x] >    o[x] ? a[x]-- : a[x] < o[x] ? a[x]++ : a[x] = o[x]};
                  t.p = function(x){with(t) return c[0][x] > c[2][x] ? a[x]*z < (o[x] + z)*z : a[x]*z > (o[x] - z)*z};
 
                  t.sid = setInterval( function(){
                                        with(t){for(j in a) v(j);
                                                p(0) && p(1) && p(2) ? cI(sid) : 0;
                                                style.color = C(a)}},
                                      s);
                 };
      di.onmouseover = function(){m(this, 1)};
      di.onmouseout  = function(){m(this,-1)};
     };
 };
 
 
 
 ///////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////
 
 var d = document, Cla = [], Cda =[];
 function H(o, h1, h2)
 
 {for (var i = 0; i < (td = d.getElementsByTagName('td')).length, t = td[i]; i++)
 
 o == 1 ? (T(t, h1 ? T(t, T(t) == h1 ? h2 : Cla[i]) : Cla[i]), D(t, T(t) == h2 ? 'nix' : Cda[i])) : (Cla[i] = T(t), Cda[i] = D(t));
 
 };
 
 
 function D(d, n){return n ? d.id = n : d.id};
 function T(t, n){return n ? t.className = n: t.className};
 
 
 /**********************************************************************************   
 NewsMenu 
 *   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
 *   This script was released at DHTMLCentral.com
 *   Visit for more great scripts!
 *   This may be used and changed freely as long as this msg is intact!
 *   We will also appreciate any links you could give us.
 *
 *   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> 
 *********************************************************************************/
 
 function lib_bwcheck(){ //Browsercheck (needed)
     this.ver=navigator.appVersion
     this.agent=navigator.userAgent
     this.dom=document.getElementById?1:0
     this.opera5=this.agent.indexOf("Opera 5")>-1
     this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
     this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
     this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
     this.ie=this.ie4||this.ie5||this.ie6
     this.mac=this.agent.indexOf("Mac")>-1
     this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
     this.ns4=(document.layers && !this.dom)?1:0;
     this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
     return this
 }
 var bw=new lib_bwcheck()
 
 
 /********************************************************************************
 If you want to change the appearance of the text, background-colors, size or
 anything do that in the style tag above.
 
 This menu might not be as easy to adapt to your own site, but please
 play around with it before you mail me for help...
 ****************************************************************************/
 
 /***************************************************************************
 Variables to set.
 ****************************************************************************/
 
 //There are 2 ways these menus can be placed
 // 0 = column
 // 1 = row
 nPlace=0
 
 
 //How many menus do you have? (remember to copy and add divs in the body if you add menus)
 var nNumberOfMenus=2
 
 var nMwidth=56 //The width on the menus (set the width in the stylesheet as well)
 var nPxbetween=2 //Pixels between the menus
 var nFromright=0 //The first menus left position
 var nFromtop=0 //The top position of the menus
 var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div 
 var nBgcolorchangeto='#6380BC' //The bgColor to change to
 var nImageheight=11 //The position the mouseover line div will stop at when going up!
 
 /***************************************************************************
 You shouldn't have to change anything below this
 ****************************************************************************/
 //Object constructor
 function makeNewsMenu(obj,nest){
     nest=(!nest) ? "":'document.'+nest+'.'                    
        this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;        
     this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;            
     this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
     this.moveIt=b_moveIt;this.bgChange=b_bgChange;
     this.slideUp=b_slideUp; this.slideDown=b_slideDown;
     this.clipTo=b_clipTo;
     this.obj = obj + "Object";     eval(this.obj + "=this")        
 }
 //Objects methods
 
 // A unit of measure that will be added when setting the position of a layer.
 var px = bw.ns4||window.opera?"":"px";
 
 function b_moveIt(x,y){this.x=x; this.y=y; this.css.right=this.x+px; this.css.top=this.y+px;}
 function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}
 function b_clipTo(t,r,b,l){
     if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.right=l
     }else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
 }
 function b_slideUp(ystop,moveby,speed,fn,wh){
     if(!this.slideactive){
         if(this.y>ystop){
             this.moveIt(this.x,this.y-5); eval(wh)
             setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
         }else{
             this.slideactive=false; this.moveIt(0,ystop); eval(fn)
         }
     }
 }
 function b_slideDown(ystop,moveby,speed,fn,wh){
     if(!this.slideactive){
         if(this.y<ystop){
             this.moveIt(this.x,this.y+5); eval(wh)
             setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
         }else{
             this.slideactive=false; this.moveIt(0,ystop); eval(fn)
         }
     }
 }
 //Initiating the page, making cross-browser objects
 function newsMenuInit(){
     oTopMenu=new Array()
     zindex=10
     for(i=0;i<=nNumberOfMenus;i++){
         oTopMenu[i]=new Array()
         oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
         oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
         oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
         oTopMenu[i][1].moveIt(0,nImageheight)
         oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
         if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromright+(i*nPxbetween),nFromtop)
         else{
             oTopMenu[i][0].moveIt(nFromright,i*nImageheight+nFromtop+(i*nPxbetween))
             oTopMenu[i][0].css.zIndex=zindex--
         }
         oTopMenu[i][0].css.visibility="visible"
     }
 }
 //Moves the menu
 function topMenu(num){
     if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
     else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
 }
 //Changes background onmouseover
 function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
 function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
 
 //Calls the init function onload if the browser is ok...
 // if (bw.bw) onload = newsMenuInit;
 
 ///////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////
 
 
 
 
 function ONLOAD()
 {
 F();
 if(bw.bw)newsMenuInit();
 };
 onload = ONLOAD;
 </script>
 </head><body>
 
 
 <a href="xyz">Testlink</a>
 <div id=divTopMenu2 class=clTopMenu>
 <a href=../chat/ onmouseover=menuOver(2) onmouseout=menuOut(2) onclick="window.location.href='../chat/'" onfocus=if(this.blur)this.blur();>
 <img src=../daten/navchat.gif height=11 alt="" border=0 align=top></a>
 <div id=divTopMenuText2 class=clTopMenuText></div>
 <div id=divTopMenuBottom2 class=clTopMenuBottom></div></div>
 <div id=divTopMenu1 class=clTopMenu>
 <a href=# onmouseover=menuOver(1) onmouseout=menuOut(1) onclick="topMenu(1); return false;" onfocus=if(this.blur)this.blur();><img src=../daten/navkontakt.gif height=11 alt="" border=0 align=top></a>
 <div id=divTopMenuText1 class=clTopMenuText><a href=../andere/mail.php class="n" style="color: #000000; font-size: 10px;">EMail</a> <br><br> <a href=../gaestebuch/ class="n" style="color: #000000; font-size: 10px;">Gästebuch</a></div>
 <div id=divTopMenuBottom1 class=clTopMenuBottom></div></div><div id=divTopMenu0 class=clTopMenu><a href=# onmouseover=menuOver(0) onmouseout=menuOut(0) onclick="topMenu(0); return false;" onfocus=if(this.blur)this.blur();>
 <img src=../daten/navandere.gif height=11 alt="" border=0 align=top></a>
 <div id=divTopMenuText0 class=clTopMenuText><a href=../andere/sitemap.php class="n" style="color: #000000; font-size: 10px;">SiteMap</a><br><br><a href=../andere/impressum.php class="n" style="color: #000000; font-size: 10px;">Impressum</a></div><div id=divTopMenuBottom0 class=clTopMenuBottom></div>
 
 </body></html>
 

Viele Grü�e aus Bad Oeynhausen und schöne Pfingsten,


Chrissi


PS: Irgendwie frage ich mehr als ich antworten schreibe... Aber ich habe trotzdem probiert, erst das Problem selbst lösen!

5

Re: test-fade_1

N'abend + schöne Pfingsten dito!

Ich kann nix Unerwartetes entdecken - soll heißen, mir mangelt es am Problembewusstsein.

function F verhält sich wie geplant.

Was soll denn passieren? Die Überschriften des menus bestehen doch
aus images, und die Einträge innerhalb des menus sind class='n' -
ich würde da auf nichts sonderlich Spektakuläres zu hoffen wagen.

Spendier' Deinen Quelltexten bei Gelegenheit doch mal n'paar t und n.
Das lockert das Gesamtbild vielleicht ein bissel auf und verhütet
Haar -und Augenausfall.

gruß

matho

Re: test-fade_1

Hi,

kopier mal den Quelltext in eine *.html-Datei. Wenn du dann __über__ ein Bild des Menüs fährst, sollte die unterseite des Menüs per JavaScript gehovert werden. (kein Bilderwechsel sonder ein Farbtausch des "Bottomdivs". So ein Div ist z.B. <div id=divTopMenuBottom2 class=clTopMenuBottom></div>). Dies funktioniert aber nicht. Wenn ich aber die Function F() aus dem ONLOAD auskommentiere, funktioniert der Hover.

Das ist sicher wieder so ein einfaches Problem, aber ich komme trotzdem nicht dahinter!

Grüße aus BO,

Chrissi

7

Re: test-fade_1

N'abend Christopher

Tjanun, was heißt schon einfach - das ist relativ.
Für mich ist das natürlich einfach, für Dich ist
es das momentan nicht.
Ich helfe Dir gern - wer wüßte das besser als Du.
Allerdings: wenn wir so weitermachen, ist das keine
Hilfe für Dich. Ich hab nie im Leben 'Pädagoge' sein
wollen (grauslich), und ich werde jetzt nicht damit
anfangen, indem ich Dich belehre.
Ich werde Dir aber sagen, was ich persönlich (ganz
schlicht - nur ich für mich allein) von Dir erwarte:
Setz Dich hin, oder leg Dich hin, oder geh spaziern,
oder was auch immer Du gern tust, und lös das Problem
in Deinem eignen Kopf.
Und wenn Du dann drauf kommst, bist Du mit Recht
vielleicht ein bißchen stolz auf Dich - und genau
das soll so sein.
Ich habe Dir inzwischen so viele Ansätze geliefert,
daß jetzt lediglich ein wenig konzentrierte Arbeit
Deinerseits verlangt ist - aber ohne die geht's nicht.

Bei Deiner nächsten Frage bin ich wieder dabei
(wenn's was Neues ist), aber das mußt Du selbst machen.
Ich wäre gespannt auf einen präzisen, knapp formulierten
Quelltext von Dir, der das Problem auf einen der
möglichen Punkte bringt.

gruß

matho