Internet Forum / Hilfen für Einsteiger in HPM Foren

Kleine nützliche Java Scripts

#1 von wolf.andres , 30.05.2007 18:32

Auf der Seite von xeam.de habe ich einige nützliche, interessante, aber auch lustige Java Scrips gesehen. Alle Scrips lassen sich herunterladen!
Nützlich fürs Forum und für die Homepage.


Hier kommen sie:

Außergewöhnliche Analoguhr:
http://www.xeam.de/content.php?id=7

Animierter Seitentitel:
http://www.xeam.de/content.php?id=16

Bilderzoom:
http://www.xeam.de/data/41/bilder_zoom.html

Text mit Mausverfolgung:
http://www.xeam.de/content.php?id=97

Sehr ausgefallene Willkommens-Animation:
http://www.xeam.de/content.php?id=82

Elastischer Text:
http://www.xeam.de/content.php?id=20

Reaktionszeit testen:
http://www.xeam.de/data/26/reaktionstest.html


Bis dann
wolf.andres




Forum
Homepage

 
wolf.andres
Beiträge: 99
Registriert am: 04.02.2007

zuletzt bearbeitet 06.04.2009 | Top

RE: Kleine nützliche Java Scrips

#2 von Berno , 29.07.2007 18:43

Die Mausverfolgung ist nice!!!

Danke


cya

Berno

-Ich liebe Menschen, die frei heraussprechen was sie denken, vorausgesetzt sie denken dasselbe wie ich.
-Ritter des Rechts
-Frontplayer (Wo ich bin ist vorne und schanzen spart Blut)
-Hells Angels Banger
-Gang Banger

 
Berno
Beiträge: 8
Registriert am: 29.07.2007


RE: Kleine nützliche Java Scrips

#3 von Daniel , 01.08.2007 20:57

Wollte das mit dem animierten seitentitel machen aber wo füge ich das ein?

Daniel  
Daniel
Beiträge: 17
Registriert am: 19.07.2007


RE: Kleine nützliche Java Scrips

#4 von wolf.andres , 02.08.2007 17:24


Hallo Daniel,

Nachtrag:
Das Script "Animierter Seitentitel" wird im Bereich zwischen <body> + </body> im Templeate eingetragen.

Hier der Pfad: Admin > Templeate > edit > Obere Leiste

Bis dann und viel Spass
Wolfgang




Forum
Homepage

 
wolf.andres
Beiträge: 99
Registriert am: 04.02.2007

zuletzt bearbeitet 03.08.2007 | Top

RE: Kleine nützliche Java Scrips

#5 von Daniel , 02.08.2007 21:20

ich glaube ich bin zu blöd das geht nicht,sieht so aus

<HTML>
<HEAD><script type="text/javascript">

// --------------------------------------------------
// --- (c) 2002/2005 XEAM.de ------------------------
// --------------------------------------------------

var speed=500;
var tmp=window.document.title;

function title (a)
{
window.document.title=(a%2==0)?(tmp):(tmp.toUpperCase ());
window.setTimeout ("title ("+(a+1)+")", speed);
}

title (0);

</script>{{meta_refresh}}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<META NAME="keywords" CONTENT="{{hpmtext}}">
<META NAME="description" CONTENT="{{hpmtitle}}">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="{{link_css}}">
<link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss">
<TITLE>{{html_title}}</TITLE>
</HEAD>

Daniel  
Daniel
Beiträge: 17
Registriert am: 19.07.2007


RE: Kleine nützliche Java Scrips

#6 von wolf.andres , 03.08.2007 12:28

Hallo Daniel,
ich habe es erneut ausprobiert und konnte mir nicht vorstellen, warum es jetzt nicht funktionieren sollte!?
Viele Scripte werden im "Header-Bereich", zwischen <head> + </head> eingefügt.
Ausgerechnet das Script "animierter Seitentitel" funktioniert nur im "Body-Bereich", also zwischen <body> + </body>. Sorry.


Einfach das Script in "Admin > Template > edit > Obere Leiste" nach den folgenden Zeilen eintragen:

<TITLE>{{html_title}}</TITLE>
</HEAD>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">


........S c r i p t ........


Noch eine kleine Info zum Script:
Ein Verändern des Grün gekennzeichneten Wertes verändert die Blinkgeschwindigkeit.
Ein Vergrößern des Rot gekennzeichneten Wertes, verändert das Blinkverhältnis.

var speed=500;


window.document.title=(a%2==0)?(tmp):(tmp.toUpperCase ());


PS:
Ich habe den Fehler im Beitrag korregiert!


Bis dann
wolf.andres




Forum
Homepage

 
wolf.andres
Beiträge: 99
Registriert am: 04.02.2007

zuletzt bearbeitet 03.08.2007 | Top

RE: Kleine nützliche Java Scrips

#7 von wolf.andres , 21.08.2007 12:20

Mausverfolgung individuell einstellbar


Zitat von Berno
Die Mausverfolgung ist nice!!!
Danke


Hallo Berno,
habe die Mausverfolgung erweitert.
Unter anderem den Buchstabenabstand vergrößert (Der erste Buchstabe war auf der rechten Seite leicht abgeschnitten).

Neue Einstellungen unter "var":
1. Buchstabenabstand einstellbar (wsize)
2. Schriftbreite (fweight)
3. Schriftstil einstellbar (fstyle)
4. Rahmenbreite einstellbar (bwidth)
5. Rahmenfarbe einstellbar (bcolour)
6. Rahmentyp einstellbar (bstyle)
7. Innenabstand einstellbar (pright, pleft, ptop, pbottom)
8. Einfügen einer Hintergrundfarbe (bgcolour)
9. Einfügen eines Hintergrundbildes (image)

  • Die einzelnen Funktionen sind jeweils hinter den Befehlen beschrieben

  • Durch hinzufügen eines Hintergrundes ist der Schriftzug wesendlich besser zu erkennen!

  • Will man ein Hintergrundbild oder Farbverlauf einfügen, sollten sie möglichst weboptimiert sein! (Ladegeschwindigkeit)

  • Also kein Hintergrundbild mit einer Auflösung von 800px600px verwenden!

  • Für eine Schriftgröße von 30px ist ein Hintergrundbild von ca.35x35px angebracht!!!

  • Hintergrundbilder, Rahmenformatierung und Innenabstand, kommen erst bei großen Schriften richtig zu Geltung!

  • Die Formen der 3D-Rahmen zeigen sich erst ab einer Rahmenstärke von 3px!


  • Hier das Script:


    <script type="text/javascript">
    if ((document.getElementById) &&
    window.addEventListener || window.attachEvent){

    (function(){

    //Schrift-Einstellungen > Anfang

    var msg = 'Hilfe, Tricks & Tipps'; // Text
    var font = 'arial'; // Schriftart - Arial, Arial Black, Comic Sans MS, Courier New, Impact, Verdana
    var size = 13; // Schriftgröße - Angabe in px
    var fstyle = 'normal'; // Schriftstil - italic, oblique, normal
    var fweight = '100'; // Schriftdicke - 100, 200, 300, 400, 500, 600, 700, 800, 900
    var pleft = 0; // Linker Innenabstand in px
    var pright = 0; // Rechter Innenabstand in px
    var ptop = 0; // Oberer Innenabstand in px
    var pbottom = 0; // Unterer Innenabstand in px
    var wsize = 1.0; // Buchstabenabstand - Min. 1.0 ohne Rahmen, mit Rahmen +0.1 pro 1px Rahmenbreite, bei pright > 0 = anpassen
    var colour = '#FCC803'; // Schriftfarbe
    var bsize = 1; // Rahmenbreite - Angabe in px
    var bstyle = 'none'; // Rahmentyp - none (keine Rahmen), solid, dotted, dashed, double, groove, ridge, inset, outset
    var bcolour = '#0000FF'; // Rahmenfarbe
    var bgcolour = '#0C06B0'; // Hintergrundfarbe
    var image = ' '; // Hintergrundbild - z.B. 'http://www.bilder-hochladen.net/files/1tys-74.gif'
    var delay = 0.45; // Verzögerung - kleine Werte, starke Verzögerung - Wert= 0.01 bis 0.99
    var speed = 40; // Geschwindigkeit - kleine Werte, hohe Geschwindigkeit - Werte= größer 1
    var yOffSet = 25; // Y-Abstand zum Mauszeiger in px
    var xOffSet = 25; // X-Abstand zum Mauszeiger in px

    //Schrift-Einstellungen > Ende

    var d = document;
    msg = msg.split("");
    var n = msg.length;
    var y = 0;
    var x = 0;
    var yp = [];
    var xp = [];
    var yd = [];
    var xd = [];
    var temp = [];
    var idx = document.getElementsByTagName('div').length;
    var scy = 0;
    var scx = 0;
    var dom = (typeof window.pageYOffset == "number");

    d.write('<div style="position:absolute;top:0px;left:0px;">'
    +'<div style="position:relative">');

    for (i = 0; i < n; i++){
    d.write("<div id='letters"+(idx+i)+"' style='position : absolute;"
    +"top : 0px;left : 0px;"
    +"height : auto;width : "+size+"px;"
    +"text-align : center;"
    +"background-image: url("+image+");"
    +"border : "+bsize+"px;"
    +"border-style : "+bstyle+";"
    +"border-color : "+bcolour+";"
    +"background-color : "+bgcolour+";"
    +"padding-left : "+pleft+"px;"
    +"padding-right : "+pright+"px;"
    +"padding-top : "+ptop+"px;"
    +"padding-bottom : "+pbottom+"px;"

    +"font : "+size+"px "+font+";color : "+colour+";font-weight : "+fweight+";font-style : "+fstyle+";'>"+msg[i]+"</div>");}

    document.write('</div></div>');

    function scroll(){
    if (dom){
    scy = window.pageYOffset;
    scx = window.pageXOffset;
    }
    else{
    scy = d.documentElement.scrollTop||d.body.scrollTop;
    scx = d.documentElement.scrollLeft||d.body.scrollLeft;
    }
    }

    function mouse(e){
    e = e||window.event;
    y = yOffSet + ((e.pageY-scy)||e.clientY);
    x = xOffSet + ((e.pageX-scx)||e.clientX);
    }

    function assign(){
    for (i = 0; i < n; i++){
    temp[i].top = Math.floor(yp[i]) + 'px';
    temp[i].left = Math.floor(xp[i]) + (i*(size * wsize)) + 'px';
    }
    }

    function ripple(){
    yp[0] = yd[0]+=((y+scy)-yd[0]) * delay;
    xp[0] = xd[0]+=((x+scx)-xd[0]) * delay;
    for (var i = 1; i < n; i++){
    yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
    xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
    }
    scroll();
    assign();
    setTimeout(ripple,speed);
    }

    function init(){
    for (i = 0; i < n; i++){
    yp[i] = 0;
    xp[i] = 0;
    yd[i] = 0;
    xd[i] = 0;
    temp[i] = d.getElementById("letters"+(idx+i)).style;
    }
    ripple();
    }

    if (window.addEventListener){
    window.addEventListener("load",init,false);
    document.addEventListener("mousemove",mouse,false);
    }
    else if (window.attachEvent){
    window.attachEvent("onload",init);
    document.attachEvent("onmousemove",mouse);
    }
    })();
    }

    </script>



    Die Mausverfolgung in Aktion (sehenswert): http://www.future-andres.de/forum/Mausverfolgung2.html

    Mein Forum: http://104774.homepagemodules.de/


    Gruß
    Wolf




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 30.08.2007 | Top

    RE: Kleine nützliche Java Scrips

    #8 von Agnes , 01.09.2007 00:33

    Wo füge ich den Code der Mausverfolgung ein?


    http://www.kleinhundliebhaber.de/

     
    Agnes
    Beiträge: 39
    Registriert am: 20.08.2007


    RE: Kleine nützliche Java Scrips

    #9 von wolf.andres , 01.09.2007 01:56

    Zitat von Agnes
    Wo füge ich den Code der Mausverfolgung ein?

    He Agnes,
    einfach das Script unter "Admin > Template > [edit] > Obere Leiste" zwischen <head> + </head> einfügen.

    Gruß
    Wolf




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007


    RE: Kleine nützliche Java Scrips

    #10 von Agnes , 01.09.2007 13:39

    Leider funktioniert das immer noch nicht.

    Habe den Code:

    <script type="text/javascript">

    // Ripple Text by Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript

    if ((document.getElementById) &&
    window.addEventListener || window.attachEvent){

    (function(){

    var msg = "Kleinhund - Liebhaber.";
    var font = 'verdana';
    var size = 12;
    var colour = '#ff0000';
    var delay = 0.35; // Must be less than 1
    var speed = 40; // setTimeout - run speed
    var yOffSet = 25;
    var xOffSet = 25;

    //---End user config.

    var d = document;
    msg = msg.split("");
    var n = msg.length;
    var y = 0;
    var x = 0;
    var yp = [];
    var xp = [];
    var yd = [];
    var xd = [];
    var temp = [];
    var idx = document.getElementsByTagName('div').length;
    var scy = 0;
    var scx = 0;
    var dom = (typeof window.pageYOffset == "number");

    //Explorer only - double div anti scrollbar hack!
    d.write('<div style="position:absolute;top:0px;left:0px;">'
    +'<div style="position:relative">');

    for (i = 0; i < n; i++){
    d.write("<div id='letters"+(idx+i)+"' style='position : absolute;"
    +"top : 0px;left : 0px;"
    +"height : auto;width : "+size+"px;"
    +"text-align : center;"
    +"font : "+size+"px "+font+";color : "+colour+"'>"+msg[i]+"</div>");
    }

    document.write('</div></div>');

    function scroll(){
    if (dom){
    scy = window.pageYOffset;
    scx = window.pageXOffset;
    }
    else{
    scy = d.documentElement.scrollTop||d.body.scrollTop;
    scx = d.documentElement.scrollLeft||d.body.scrollLeft;
    }
    }

    function mouse(e){
    e = e||window.event;
    y = yOffSet + ((e.pageY-scy)||e.clientY);
    x = xOffSet + ((e.pageX-scx)||e.clientX);
    }

    function assign(){
    for (i = 0; i < n; i++){
    temp[i].top = Math.floor(yp[i]) + 'px';
    temp[i].left = Math.floor(xp[i]) + (i*(size * 0.7)) + 'px';
    }
    }

    function ripple(){
    yp[0] = yd[0]+=((y+scy)-yd[0]) * delay;
    xp[0] = xd[0]+=((x+scx)-xd[0]) * delay;
    for (var i = 1; i < n; i++){
    yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
    xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
    }
    scroll();
    assign();
    setTimeout(ripple,speed);
    }

    function init(){
    for (i = 0; i < n; i++){
    yp[i] = 0;
    xp[i] = 0;
    yd[i] = 0;
    xd[i] = 0;
    temp[i] = d.getElementById("letters"+(idx+i)).style;
    }
    ripple();
    }

    if (window.addEventListener){
    window.addEventListener("load",init,false);
    document.addEventListener("mousemove",mouse,false);
    }
    else if (window.attachEvent){
    window.attachEvent("onload",init);
    document.attachEvent("onmousemove",mouse);
    }
    })();
    }

    </script>


    zwischen <head> + </head> eingefügt.

    Habe einen anderen Text eingefügt ( Kleinhund - Liebhaber

    Muss ich in den Code noch etwas verändern? Blicke da leider nicht so durch.

    Zwischen <head> + </head> habe ich noch sowas stehen :

    {{meta_refresh}}
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Language" content="de">
    <META NAME="keywords" CONTENT="{{hpmtext}}">
    <META NAME="description" CONTENT="{{hpmtitle}}">
    <META NAME="robots" CONTENT="INDEX,FOLLOW">
    <link rel="stylesheet" type="text/css" href="{{link_css}}">
    <link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss">
    <TITLE>{{html_title}}</TITLE>


    Muss das komplet weg ? Oder kann das da stehen bleiben?


    Danke


    http://www.kleinhundliebhaber.de/

     
    Agnes
    Beiträge: 39
    Registriert am: 20.08.2007

    zuletzt bearbeitet 01.09.2007 | Top

    RE: Kleine nützliche Java Scrips

    #11 von wolf.andres , 01.09.2007 15:14


    He,
    habe Dein komlettes Script unter "<TITLE>{{html_title}}</TITLE>" bei mir mal eingetragen.
    Es funktioniert im IE7, FF, Opera und NS.

    Hast Du bestimmte Funktionen deaktiviert, wie "Scripte" oder "ActiveX-Steuerelemente"?
    Oder ganz einfach! - Die Seite neu aufgerufen?
    Welchen Browser hast Du?

    Bis dann
    Wolf




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 01.09.2007 | Top

       

    Uhren für HPM-Foren
    Super DropDown Menü im Flash-Format





    Powered by Forum Hosting  
    Xobor Forum Software von Xobor
    Einfach ein eigenes Forum erstellen