ilch Forum » Ilch Clan 1.1 » Module und Modifikationen » Schneescript - Lösung

Geschlossen
  1. #1
    User Pic
    Alchi Mitglied
    Registriert seit
    23.03.2007
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    hallo liebe gemeinde, endlich kann ich auch mal was hilfreiches beisteuern zwinker

    es sind noch 30 tage und ca. 1 std. bis weihnachten und viele werden sich wohl so langsam gedanken um "schnee" auf der homepage machen.

    nach tagelangem suchen, hier und im übrigen internetz hab ich endlich eine lösung für ein problem gefunden.

    das hier vorgestellte "schnee-script" hat einfach nur ne geile optik.
    zunächst das script welches ich verwende (ist nicht von mir):

    <script language="JavaScript" type="text/javascript">
    <!--
    // CREDITS:
    // Snowmaker
    // By Peter Gehrig
    // Copyright (c) 2003 Peter Gehrig. All rights reserved.
    // Permission given to use the script provided that this notice remains as is.
    // Additional scripts can be found at http://www.24fun.com
    // info@24fun.com
    // 11/27/2003
    
    // IMPORTANT:
    // If you add this script to a script-library or script-archive
    // you have to add a highly visible link to
    // http://www.24fun.com on the webpage
    // where this script will be featured
    
    ///////////////////////////////////////////////////////////////////////////
    // CONFIGURATION STARTS HERE
    ///////////////////////////////////////////////////////////////////////////
    
    // Set the number of snowflakes (more than 30 - 40 not recommended)
    var snowmax = 35;
    
    // Set the colors for the snow. Add as many colors as you like
    var snowcolor = new Array('#eeeeff', '#ffffdd', '#eeeedd', '#ffffff');
    
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype = new Array('Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS');
    
    // Set the letter that creates your snowflake (recommended: *)
    var snowletter = '*';
    
    // Set the speed of sinking (recommended values range from 0.3 to 2)
    var sinkspeed = 0.6;
    
    // Set the maximal-size of your snowflaxes
    var snowmaxsize = 48;
    
    // Set the minimal-size of your snowflaxes
    var snowminsize = 10;
    
    // Set the snowing-zone
    // Set 1 for all-over-snowing
    // Set 2 for left-side-snowing
    // Set 3 for center-snowing
    // Set 4 for right-side-snowing
    var snowingzone = 1;
    
    ///////////////////////////////////////////////////////////////////////////
    // CONFIGURATION ENDS HERE
    ///////////////////////////////////////////////////////////////////////////
    
    // Do not edit below this line
    var snow = new Array();
    var marginbottom;
    var marginright;
    var timer;
    var i_snow = 0;
    var x_mv = new Array();
    var crds = new Array();
    var lftrght = new Array();
    var browserinfos = navigator.userAgent;
    var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
    var ns6 = document.getElementById && !document.all;
    var opera = browserinfos.match(/Opera/);
    var browserok = ie5 || ns6 || opera;
    
    function randommaker(range)
    {
    return Math.floor(range * Math.random());
    }
    
    function initsnow()
    {
    if (ie5 || opera)
    {
    marginbottom = document.body.clientHeight;
    marginright = document.body.clientWidth;
    }
    else if (ns6)
    {
    marginbottom = window.innerHeight;
    marginright = window.innerWidth;
    }
    
    var snowsizerange = snowmaxsize - snowminsize;
    
    for (var i = 0; i <= snowmax; i++)
    {
    crds[i] = 0;
    lftrght[i] = Math.random() * 15;
    x_mv[i] = 0.03 + Math.random() / 10;
    snow[i] = document.getElementById('s' + i);
    snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
    snow[i].size = randommaker(snowsizerange) + snowminsize;
    snow[i].style.fontSize = snow[i].size;
    snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
    snow[i].sink = sinkspeed * snow[i].size / 5;
    
    if (snowingzone == 1)
    snow[i].posx = randommaker(marginright - snow[i].size);
    
    if (snowingzone == 2)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size);
    
    if (snowingzone == 3)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
    
    if (snowingzone == 4)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
    
    snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
    snow[i].style.left = snow[i].posx;
    snow[i].style.top = snow[i].posy;
    }
    
    movesnow();
    }
    
    function movesnow()
    {
    for (var i = 0; i <= snowmax; i++)
    {
    crds[i] += x_mv[i];
    snow[i].posy += snow[i].sink;
    snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]);
    snow[i].style.top = snow[i].posy;
    
    if ((snow[i].posy >= (marginbottom - 2 * snow[i].size)) || (parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])))
    {
    if (snowingzone == 1)
    snow[i].posx = randommaker(marginright - snow[i].size);
    
    if (snowingzone == 2)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size);
    
    if (snowingzone == 3)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
    
    if (snowingzone == 4)
    snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
    
    snow[i].posy = 0;
    }
    }
    
    var timer = setTimeout('movesnow();', 50); //Wert von 10 bis 100
    }
    
    for (var i = 0; i <= snowmax; i++)
    document.write('<span id="s' + i +'" style="position: absolute; top: -' + snowmaxsize + '">' + snowletter + '</span>');
    
    if (browserok)
    window.onload = initsnow;
    //-->
    </script>


    ich habe das standart-design von Ilch, welches ich einfach kopiert und in "Ilchschnee" umbenannt und zusätzlich in den "design-ordner" kopiert habe.
    so kann ich in der "konfiguration" einfach zwischen "schnee an" und "schnee aus" umschalten.

    an welcher stelle habe ich das script eingefügt:
    man nehme den ordner "\include\designs\ilchschnee" (bei mir heißt er so) und die in diesem ordner befindliche "index.html"

    das script wird (bei mir) in der index.html an dieser stelle eingefügt:
      <div id="footer">Script Copyright by <a href="http://www.ilch.de/" target="_blank">ilch.de</a></div>
    </div>
    
    <---- schneescript --->
    
    </body>
    </html>
             <!--
    					{_list_DDDmenupoint@
    					  <strong><big>&middot;</big></strong>
                <a %1 class="box" href="%2">%3</a>
                <br />
    					}
              //-->


    desweiteren befindet sich in der index.html ganz oben folgende zeile:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

    diese wird ersetzt durch:
      <!--[if IE]>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
      <![endif]-->
    warum wird diese zeile ersetzt?

    löscht man sie einfach funzt das script zwar im "firefox" aber im "IE" haut es das design durcheinander, lässt man die zeile funzt es im "IE" aber nicht im "FF".
    die lösung ist eine "browserweiche".
    dadurch das man
    <!--[if IE]> .... <![endif]-->
    der zeile zufügt wird diese von "FF" ignoriert und vom "IE" gelesen.
    schon hat man ein schönes "schneescript" welches eigentlich in allen browsern funzen sollte.

    einziger wehrmutstropfen ist, das es im "IE" durchgehend bist unten hin schneit und im "FF" nur auf der oberen bildschirmhälfte.
    (aber damit kann ich leben)

    das geile daran ist, das man kein "bild" für die schneeflocken benötigt denn der schnee wird in verschiedenen schriftarten und farben durch
    // Set the letter that creates your snowflake (recommended: *)
    var snowletter = '*';
    dargestellt, genau so gut könnte da auch
    // Set the letter that creates your snowflake (recommended: *)
    var snowletter = 'Alchi.de';
    stehen zwinker

    MfG
    ALchi

    betroffene Homepage: Alchi.de
    Hetz mich nicht so, ich bin keine 20 mehr!
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    boehserdavid Mitglied
    Registriert seit
    26.08.2006
    Beiträge
    2.122
    Beitragswertungen
    2 Beitragspunkte
    Hey, Alchi!

    ...viele werden sich wohl so langsam...
    Also wer sich Schnee auf die Page zaubert, hat wahrscheinlich auch ne Digitale Uhr und ein PicofX als Box, und ne IntroSeite.
    Meine Meinung:
    != schöne Sache & nervt voll ab, wenn ich solche Seiten sehe, oder ausversehen raufkomme, ist der nächste Klick das X vom Tab.

    Sorry, aber das musste jetzt sein.^^

    Mit böhsen Grüßen
    BöhserDavid
    -Heute schon böhse gewesen?- Ab zur Community
    -No Support via Contact-
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Alchi Mitglied
    Registriert seit
    23.03.2007
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von boehserdavid

    Hey, Alchi!

    ...viele werden sich wohl so langsam...
    Also wer sich Schnee auf die Page zaubert, hat wahrscheinlich auch ne Digitale Uhr und ein PicofX als Box, und ne IntroSeite.
    Meine Meinung:
    != schöne Sache & nervt voll ab, wenn ich solche Seiten sehe, oder ausversehen raufkomme, ist der nächste Klick das X vom Tab.

    Sorry, aber das musste jetzt sein.^^

    Mit böhsen Grüßen
    BöhserDavid
    kein problem zwinker
    bei der suche hier im forum bin ich auf so manchen thread gestoßen wo genau dieses problem behandelt wurde, allerdings "ohne brauchbare lösung" !

    du hast jetzt deine subjektive meinung kund getan.
    ich hoffe anderen damit geholfen zu haben.
    dich scheint es ja auch interessiert zu haben, sonst wärst du ja auch die überschrift nicht angesprungen zwinker

    und danke für deine "positive" kritik.
    Hetz mich nicht so, ich bin keine 20 mehr!
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    Thx glücklich Viele haben das Problem mit FF und IE - ich kenn das aus diversen anderen Foren!

    Aber Bilder wären mir echt lieber gewesen, die kann man in Form etc. noch seinen Wünschen nach anpassen glücklich - Sollte mit deinem Code aber auch funktionieren oder nicht? Einfach den Code für das Bild einfügen - voilá!
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Alchi Mitglied
    Registriert seit
    23.03.2007
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    das problem ist wie du schon sagst nicht das script sondern der "browserkrieg".
    die meisten scripte werden wohl einwandfrei funzen.

    ich habe dieses script gewählt eben weil die schneeflocke ein textzeichen ist welches sich in verschiedenen schriftarten, farben, größen darstellen lässt und unterschiedliche fallgeschwindigkeiten hat

    der clou an der geschichte ist aber definitiv die "browserweiche".

    ZitatZitat geschrieben von boehserdavid
    ... auch ne Digitale Uhr ...

    die aber dank diesem kleinen poggi immer auf die sekunde genau die zeit anzeigt, zumindest auf meinem rechner zwinker.
    Hetz mich nicht so, ich bin keine 20 mehr!
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    boehserdavid Mitglied
    Registriert seit
    26.08.2006
    Beiträge
    2.122
    Beitragswertungen
    2 Beitragspunkte
    Sekunden genaue Uhren hab ich auf Arbeit.
    Die gehen mit 0,0000000000000......1 SekundenAbweichung von den AtomUhren. Und genaue Uhren interessieren mich nicht, weil meine Uhren zu Hause ALLE zwischen 10-15 min vor gehen.^^

    Interesse würde ich das nicht nennen, weil ich das Script schon seid fast einem Jahr auf meinem Rechner habe, ist mir mal so aufgefallen, hatte das letztes Jahr auf meiner Page, also auf meiner ersten, zum testen.

    Aber ist ein geiles Script, also von der Programmierung her, also nochmal danke, dass jetzt soviele "Schnee" auf ihre page zaubern können.
    -Heute schon böhse gewesen?- Ab zur Community
    -No Support via Contact-
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Neutralos Mitglied
    Registriert seit
    22.04.2007
    Beiträge
    118
    Beitragswertungen
    0 Beitragspunkte
    Hab jetzt leider nen Problem. Wenn ich den Doctype entferne wird das Standard Design falsch dargestellt im Firefox.
    Zum Beispiel bei User oder Kalender ist die Überschrift immer extrem groß...sonst funktionierts wunderbar!!

    Edit: Ich habe mal nen anderes Script genommen und leich verändert, sodass es einwandfrei in Firefox und IE funktioniert ohne das man den Doctype oder so verändern/weglassen muss.

    <script language="JavaScript" type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////////////
    // Script erweitert und angepasst damit es auch unter FireFox laueft von Michael
    // Konfiguration
    
    // Anzahl der Schneeflocken (sollten nicht zuviele sein, 30 - 40 geht aber locker)
    var flocken = 50;
    
    // Sinkgeschwindigkeit (zwischen 0,3 und 2 einfach mal testen was gut aussieht)
    var geschwindigkeit = 2;
    
    // relative Adresse der Schneeflocke 
    var schneeflocke = "/include/designs/ilchClan/img/snow1.gif";    
    
    // Korrekturwert um bei scrollbaren Seiten auch noch weiter nach unten zu schneien
    // Muss entsprechend der verwendeten Seite angepasst werden. 
    var scrolldown = 0
    
    // Konfiguration 
    ////////////////////////////////////////////////////////////////////////////////////
    
    // Do not edit below this line
    var schnee = new Array();
    var unterer_rand;
    var rechter_rand;
    var timer;
    var x_mv = new Array();
    var crds = new Array();
    var lftrght = new Array();
    var browserinfos = navigator.userAgent;
    var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
    var ns6 = document.getElementById && !document.all;
    var opera = browserinfos.match(/Opera/);
    var browserok = ie5 || ns6 || opera;
    
    
    function zufall(range)
    {
            return Math.floor(range * Math.random());
    }
    
    function starte_schnee()
    {
            if (ie5 || opera)
            {
                    unterer_rand = document.body.clientHeight + scrolldown;
                    rechter_rand  = document.body.clientWidth - 30; 
            }
            else if (ns6)
            {
                    unterer_rand = window.innerHeight + scrolldown;
                    rechter_rand  = window.innerWidth - 40;
            }
    
            for (var i = 0; i <= flocken; i++)
            {
                    crds[i] = 0;
                    lftrght[i] = Math.random() * 15;
                    x_mv[i] = 0.03 + Math.random() / 10;
                    schnee[i] = document.getElementById('s' + i);
                    schnee[i].sink = geschwindigkeit;
                    schnee[i].posx = zufall(rechter_rand);
                    schnee[i].posy = zufall(2 * unterer_rand - unterer_rand);
                    schnee[i].style.left = schnee[i].posx +'px';
                    schnee[i].style.top = schnee[i].posy + 'px';
            }
    
            bewege_schnee();
    }
    
    function bewege_schnee()
    {
            for (var i = 0; i <= flocken; i++)
            {
                    crds[i] += x_mv[i];
                    schnee[i].posy += schnee[i].sink;
                    schnee[i].style.left = schnee[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px';
                    schnee[i].style.top = schnee[i].posy +'px';
    
                    if ((schnee[i].posy >= (unterer_rand)) || (parseInt(schnee[i].style.left) > (rechter_rand - 3* lftrght[i])))
                    {
                    schnee[i].posx = zufall(rechter_rand);
                    schnee[i].posy = 0;
                    }
            }
    
            var timer = setTimeout('bewege_schnee();', 40); // Wert von 10 bis 100 
    //  Je höher der eingestellte Wert hier ist, desto mehr ruckeln die Flocken,
    //  allerdings werden dadurch auch weniger CPU-Ressourcen vom Browser gefressen.
    //  Hier sollte jeder die für sich passende Balance zwischen Sinkgeschwindigkeit und Timer finden.
    //  Einfach mal ein paar Kombinationen testen und im Browser und Taskmanager die Wirkung beobachten.
            
    }
    
    for (var i = 0; i <= flocken; i++)
            document.write('<span id="s' + i +'" style="position: absolute">' + '<IMG SRC="' + schneeflocke + '">' + '</span>');
    
    if (browserok)
            window.onload = starte_schnee;
    
    </script>


    Hier hab ich es her

    Habe dann im Script bei den Positionsveränderungen +'px' eingefügt und dann läuft's auch auf dem Ilchstandarddesign im Firefox. Test klick

    Vllt. hilft es ja jnd.


    Zuletzt modifiziert von Neutralos am 01.12.2007 - 13:24:16
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Alchi Mitglied
    Registriert seit
    23.03.2007
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    ne, ne, nich den doctype entfernen !!
    wir oben beschrieben wird das doctype modifiziert für den IE
    <!--[if IE]>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
      <![endif]-->

    mit einer "browserweiche", welche bewirkt das abgefragt wird: "bist du ein IE?, dann mache bitte dieses"

    dann sollte es eigentlich klappen.
    Hetz mich nicht so, ich bin keine 20 mehr!
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Neutralos Mitglied
    Registriert seit
    22.04.2007
    Beiträge
    118
    Beitragswertungen
    0 Beitragspunkte
    Löscht man sie einfach funzt das script zwar im "firefox" aber im "IE" haut es das design durcheinander, lässt man die zeile funzt es im "IE" aber nicht im "FF". 
    die lösung ist eine "browserweiche".


    Das hast du doch geschrieben. Und wenn man halt beim Standarddesign von Ilch die Browserweiche einbaut, dann verhaut er das Design. Zwar nur gering, aber im Forum oder Useranzahl wird halt die allererste Tabellenzeile extrem groß dargestellt. Deswegen meine Änderung...normalerweise ist deine Lösung natürlich besser, obowhl meien jetzt auch ohne Browserweiche mit "offizielem" Doctype funzt.
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Alchi Mitglied
    Registriert seit
    23.03.2007
    Beiträge
    42
    Beitragswertungen
    0 Beitragspunkte
    versuch einfach mal dich an die oben beschriebene anleitung zu halten.

    nimm die index-datei im design-ordner, füge die browserweiche ein und vor allem platziere das script an die stelle welche ich beschrieben habe.

    auf deiner testseite schneit es nämlich klasse "hinter" dem ilch-script
    Hetz mich nicht so, ich bin keine 20 mehr!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Module und Modifikationen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten