Slide-Effekt ohne Framework

SilentSight · 15.01.2011, 12:32

Hallo Leute,

mich interessiert schon seit längerem wie die Frameworks die Effekte wie Slide erzeugen, wo man dann sogar noch genau bestimmen kann wie lang der Effekt andauern soll.
Gründe, dass ich kein Framework benutzen will ist einmal der Lerneffekt (ich will wissen was passiert

) und zweitens will ich nicht unbedingt ein 50KB-Javascript einbinden nur um diesen einen Effekt zu nutzen.

Folgendes hab ich mir mal zusammengeschrieben:

PHP-Code:

  function slideArea(areaId)
{
    var div = document.getElementById(areaId);
    div.style.display = "block";
    
    var oldHeight = div.offsetHeight;
    
    div.style.height = 0;
    
    var timer = window.setInterval(function()
    {
        var curHeight = parseInt(div.style.height);
        if (curHeight < oldHeight) {
            div.style.height = (curHeight + 6);
        } else {
            window.clearInterval(timer);
        }
    }, 1);
}

Diese Variante hat 2 Probleme:
1. Ich kann die Effekt-Zeit nicht einstellen, also wie lang ein Effekt andauern soll (außerdem wird der Slide-Effekt von verschiedenen Browsern verschieden schnell ausgeführt)
2. Hab ich 3 div-Boxen, die darüber einblenden will, aber bei der untersten wird komischerweise der Effekt nicht angewendet.

Hier mal noch ein HTML-Dokument zum Ausprobieren:

PHP-Code:

  <html>
    <head>
        <title></title>
        
        <script type="text/javascript">
            function slideArea(areaId)
            {
                var div = document.getElementById(areaId);
                div.style.display = "block";
                
                var oldHeight = div.offsetHeight;
                
                div.style.height = 0;
                
                var timer = window.setInterval(function()
                {
                    var curHeight = parseInt(div.style.height);
                    if (curHeight < oldHeight) {
                        div.style.height = (curHeight + 6);
                    } else {
                        window.clearInterval(timer);
                    }
                }, 1);
            }
        </script>
        
        <style type="text/css">
            div#navigation {
                float: left;
                width: 250px;
                margin-top: 4em;
            }

            div#navigation div.navBox {
                display: block;
                clear: left;
                float: left;
                width: 250px;
                margin-bottom: 1em;
                background-color: #ffffff;
            }

            div#navigation div.navBox a {
                display: block;
                margin: 20px 0;
                padding-left: 10px;
                font-size: 1.2em;
            }

            div#navigation div.navbox div.content {
                display: none;
            }

            div#navigation div.navBox div.content a {
                padding-left: 20px;
            }
        </style>
    </head>

    <body>
        <h1>Kalender 2011</h1>

        <div id="navigation">
            <div class="navBox">
                <div class="title">
                    <a href="javascript:slideArea('linkArea1');">Übersicht</a>
                </div>
                
                <div class="content" id="linkArea1">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            
            <div class="navBox">
                <div class="title">
                    <a href="javascript:slideArea('linkArea2');">Übersicht</a>
                </div>
                
                <div class="content" id="linkArea2">
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                    <a href="#">Link 6</a>
                </div>
            </div>
            
            <div class="navBox">
                <div class="title">
                    <a href="javascript:slideArea('linkArea3');">Übersicht</a>
                </div>
                
                <div class="content" id="linkArea3">
                    <a href="#">Link 7</a>
                    <a href="#">Link 8</a>
                    <a href="#">Link 9</a>
                </div>
            </div>
        </div>
    </body>
</html>

Ich wäre euch für eure Hilfe sehr dankbar.

mfg
SilentSight

Dark Guardian · 15.01.2011, 14:11

Die größe des Frameworks ist eher Nebensache.

30kb für jQuery sind zu DSL Zeiten ein schlechter Witz. Die meisten Leitungen können das 10fache dieser Datei in einer Sekunde übertragen.

Für langsamere Leitungen gibt es den Browsercache. .js Dateien ändern sich selten sodass man ihnen mittels mod_expires problemlos mehrere Wochen Cachehaltungsdauer zusprechen darf.

Zum Problem:
Die Geschwindigkeit kannst du über die Anzahl Pixel pro Interval sowie der Zeit die es braucht bis das nächste Interval ausgeführt wird bstimmen. Momentan steht diese auf 1ms was SEHR schnell ist und warscheinlich auch für die unterschiedliche Browserdarstellung verantwortlich sein wird.

Aber das nimmt dir ein Framework alles an Problemen ab. Ein weiterer Vorteil eines Frameworks ist es das der JS Code kürzer und damit, auch für andere Entwickler, übersichtlicher wird.

Chriz · 15.01.2011, 14:16

Riskier doch mal einen Blick in die jQuery-Lib.

SilentSight · 15.01.2011, 14:59

Erstmal danke für die Antworten.
@Dark Guardian:
Klar ist die Größe des Frameworks egal.
Die Sache mit der Geschwindigkeit war mir auch klar (;
Aber ich wollte halt gern wissen ob das so umgesetzt werden sollte oder ob's dafür andere performantere Methoden gibt bzw. ob jemand weiß wie die Frameworks das in etwa umsetzen.
Wie gesagt zum Selbstlernzweck.

@Chriz:
Die ganzen Frameworks wie jQuery und Mootools kenn ich, aber wie im Titel schon genannt, ich wollte es halt zumindest einmal selbst machen.

Chriz · 15.01.2011, 15:15

Zitat:

Zitat von SilentSight

@Chriz:
Die ganzen Frameworks wie jQuery und Mootools kenn ich, aber wie im Titel schon genannt, ich wollte es halt zumindest einmal selbst machen.

Naja selbst machen wollen und dann hier fragen?! Ein Blick in die Implementierung der Animation-Funktionen anderer Libs schadet trotzdem nicht. Aber musst du wissen, ist für mich genauso eine unnötige Aufgabe wie Emailheader schreiben. Du wirst in Zukunft auf diesem unteren Niveau nicht mehr programmieren müssen, die Abstraktion ist Quasistandard.

So ich halt mich jetzt mal raus aus dem Thread, dir trotzdem viel Glück.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Framework Wahl - Produktivurteile	cydox	PHP Einsteiger	14	31.12.2010 18:50
MVC Framework gesucht	elf	PHP Einsteiger	10	30.12.2010 22:20
Webentwickler (PHP, Zend Framework, Ruby on Rails) sucht neue Projekte	tbuehl	Beruflich	0	04.10.2010 15:18
Framework, für mich(ja oder warten?), wenn ja welches?	ArtiHl	Off-Topic Diskussionen	7	24.09.2010 18:59
Was nützt mir ein Framework (CakePHP)	Deltachaos	Software-Design	10	08.05.2010 19:00
Kohana Framework / CakePHP / Zend	ramses	PHP-Fortgeschrittene	6	29.09.2009 01:38
Scriptangebot Expression Forge Communication Framework [pre-alpha test]	eXpression	Scriptbörse	8	24.09.2009 16:27
Release 1.10 des Adventure PHP Framework (APF) veröffentlicht	dr.e.	Beitragsarchiv	0	04.09.2009 16:26
Release 1.10-RC2 des Adventure PHP Framework (APF) veröffentlicht	dr.e.	Beitragsarchiv	2	21.07.2009 11:22
Release 1.10-RC1 des Adventure PHP Framework (APF) veröffentlicht	dr.e.	Beitragsarchiv	5	19.07.2009 21:03
Zend Studio for Eclipse und Zend Framework	KeKs0r	PHP-Fortgeschrittene	5	15.12.2008 15:10
Lerne Grundlagen \| Quellensammlung	cycap	PHP Einsteiger	0	12.11.2008 16:23
BrickOO :: PHP Framework	Hroudtwolf	Scriptbörse	14	06.05.2008 12:04
Zend Framework	Melchior	PHP-Fortgeschrittene	29	13.03.2008 21:12

15.01.2011, 12:32
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	Slide-Effekt ohne Framework Hallo Leute, mich interessiert schon seit längerem wie die Frameworks die Effekte wie Slide erzeugen, wo man dann sogar noch genau bestimmen kann wie lang der Effekt andauern soll. Gründe, dass ich kein Framework benutzen will ist einmal der Lerneffekt (ich will wissen was passiert ) und zweitens will ich nicht unbedingt ein 50KB-Javascript einbinden nur um diesen einen Effekt zu nutzen. Folgendes hab ich mir mal zusammengeschrieben: PHP-Code: function slideArea(areaId) { var div = document.getElementById(areaId); div.style.display = "block"; var oldHeight = div.offsetHeight; div.style.height = 0; var timer = window.setInterval(function() { var curHeight = parseInt(div.style.height); if (curHeight < oldHeight) { div.style.height = (curHeight + 6); } else { window.clearInterval(timer); } }, 1); } Diese Variante hat 2 Probleme: 1. Ich kann die Effekt-Zeit nicht einstellen, also wie lang ein Effekt andauern soll (außerdem wird der Slide-Effekt von verschiedenen Browsern verschieden schnell ausgeführt) 2. Hab ich 3 div-Boxen, die darüber einblenden will, aber bei der untersten wird komischerweise der Effekt nicht angewendet. Hier mal noch ein HTML-Dokument zum Ausprobieren: PHP-Code: <html> <head> <title></title> <script type="text/javascript"> function slideArea(areaId) { var div = document.getElementById(areaId); div.style.display = "block"; var oldHeight = div.offsetHeight; div.style.height = 0; var timer = window.setInterval(function() { var curHeight = parseInt(div.style.height); if (curHeight < oldHeight) { div.style.height = (curHeight + 6); } else { window.clearInterval(timer); } }, 1); } </script> <style type="text/css"> div#navigation { float: left; width: 250px; margin-top: 4em; } div#navigation div.navBox { display: block; clear: left; float: left; width: 250px; margin-bottom: 1em; background-color: #ffffff; } div#navigation div.navBox a { display: block; margin: 20px 0; padding-left: 10px; font-size: 1.2em; } div#navigation div.navbox div.content { display: none; } div#navigation div.navBox div.content a { padding-left: 20px; } </style> </head> <body> <h1>Kalender 2011</h1> <div id="navigation"> <div class="navBox"> <div class="title"> <a href="javascript:slideArea('linkArea1');">Übersicht</a> </div> <div class="content" id="linkArea1"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="navBox"> <div class="title"> <a href="javascript:slideArea('linkArea2');">Übersicht</a> </div> <div class="content" id="linkArea2"> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> <div class="navBox"> <div class="title"> <a href="javascript:slideArea('linkArea3');">Übersicht</a> </div> <div class="content" id="linkArea3"> <a href="#">Link 7</a> <a href="#">Link 8</a> <a href="#">Link 9</a> </div> </div> </div> </body> </html> Ich wäre euch für eure Hilfe sehr dankbar. mfg SilentSight


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.01.2011, 14:11
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Die größe des Frameworks ist eher Nebensache. 30kb für jQuery sind zu DSL Zeiten ein schlechter Witz. Die meisten Leitungen können das 10fache dieser Datei in einer Sekunde übertragen. Für langsamere Leitungen gibt es den Browsercache. .js Dateien ändern sich selten sodass man ihnen mittels mod_expires problemlos mehrere Wochen Cachehaltungsdauer zusprechen darf. Zum Problem: Die Geschwindigkeit kannst du über die Anzahl Pixel pro Interval sowie der Zeit die es braucht bis das nächste Interval ausgeführt wird bstimmen. Momentan steht diese auf 1ms was SEHR schnell ist und warscheinlich auch für die unterschiedliche Browserdarstellung verantwortlich sein wird. Aber das nimmt dir ein Framework alles an Problemen ab. Ein weiterer Vorteil eines Frameworks ist es das der JS Code kürzer und damit, auch für andere Entwickler, übersichtlicher wird. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

15.01.2011, 14:16
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Riskier doch mal einen Blick in die jQuery-Lib. __________________ "Nuschel ich?" - "Was?"

15.01.2011, 14:59
SilentSight Erfahrener Benutzer Registriert seit: 27.04.2008 Beiträge: 107	Erstmal danke für die Antworten. @Dark Guardian: Klar ist die Größe des Frameworks egal. Die Sache mit der Geschwindigkeit war mir auch klar (; Aber ich wollte halt gern wissen ob das so umgesetzt werden sollte oder ob's dafür andere performantere Methoden gibt bzw. ob jemand weiß wie die Frameworks das in etwa umsetzen. Wie gesagt zum Selbstlernzweck. @Chriz: Die ganzen Frameworks wie jQuery und Mootools kenn ich, aber wie im Titel schon genannt, ich wollte es halt zumindest einmal selbst machen.