[Suche] Codinghilfe für meine Page

Dieses Thema im Forum 'Smalltalk' wurde von Togul gestartet, 14 März 2006.

  1. Togul Guest

    Moin,


    ich möchte auf meiner Seite ( www.meibaum.net ) eine Shoutbox "einfliegen" bzw. als Verschiebbares Layer über allen anderen liegen haben. Sozusagen ein Fenster im Fenster. Lösung ohne Popup und die Position als "onTop" vom User veränderbar und standardmäßig immer Oben Rechts egal welche Auflösung im Eck. Wie ist sowas zu realisieren? Javascript? Leider habe ich nur Php/Html Erfahrungen. Bitte helft mir :)
  2. Stepho HeavyBullshitSupportTeam

    Togul goes thread creating frenzy!
  3. menne Spammer

    hmmm sollte mit normalem dhtml + bisserl javascript regelbar sein aber lange nixmit gemacht. problematisch koennte das bewegbare sein, aber auch net wirklich. daracon duerfte da atm etwas fitter sein :>


    bye menne
  4. Daracon (._.)( I: )(.-.)( :I )(._.)

    jo hab da schon sowas halb fertiges gefunden.... muss mir das noch mal genauer angucken
  5. Togul Guest

  6. flip HeavySpamSupportTeam

    geht das nit mit position:absolute; ?
  7. Togul Guest

    hmmm kenne den befehl / tag nichtmal, ist das html?
  8. flip HeavySpamSupportTeam

    css dürfte das sein, so kannste nen div absolut (= ohne ausrichtung an nem annern element) positionieren.
  9. Franticc Guest

    das ist aber insofern mit vorsicht zu geniessen da wenn das ding oben rechts sein soll du dann immer die auflösung abfragen bzw sinnvoller das scrolling mitloggen musst.
    hab sowas auch mal geschrieben und benutzt. ich kuck auch ma die tage ob ich das noch finde.
  10. menne Spammer

    hmmm franticc nicht wirklich oder? hmm

    also fuer rehctsbuendig wuerde nen div uebenrganzen screen und eins drinnen darin rehcts oben ausgerichtet. aber stimmt beim scrollen nach unten wird das dann zu nem problem, wobei mir das vom page design eh misfallen wuerde wenn das div mit scrollt weil es zangsweise dann aetzend sachen verdecken wird die es nich verdecken soll also sauberes desing ist das dann nicht mehr, aber ob togul auf sowas wert legt ^^

    bye menne
  11. Franticc Guest

    Ich bin jetzt mal intuitiv davon ausgegangen daß er seine seite größtenteils mit konventionellen mitteln (tabellen) aufgebaut hat und nicht komplett in CSS mit layern.
    Wenn ich mich da täusche isses natürlich einfacher nen Layer beliebig zu positionieren.
  12. menne Spammer

    selbst wenn ers mit tabelle gemacht hat wer hindetr ich dran die tabelle einfahc in nen alles umspanneden layer zu schmeissen ^^

    bye menne
  13. Togul Guest

    Die Seite ist zu 80% aus Tabellen und 20% aus Layern aufgebaut.


    Ein fertiges "Codeschnippsel" für so eine Lösung hat niemand parat, oder? Das wichtige ist ja, dass ich in das "Verschiebbare Ding" nachher die Shoutbox includen kann. Es soll nichtnur Text rein.
  14. Togul Guest

    *push*


    also niemand hatte eine funktionierende gute idee?

    hab meine seite mal auf sommermodus umgestellt ^^
  15. Mojave Guest

    Das ist nicht wirklich eine Frage von Idee. Das ist simples CSS.

    Ein Beispiel: http://mc.cirikovic.de/ie7/togul.html

    im Grunde reicht es, wenn Du die Tabelle oder was auch immer du willst, in ein DIV packst, dass den Style hier zb hat: z-index:1000; position:fixed; right:50px; top:50px;

    sähe dann so aus:
    <div id="shoutbox" style="z-index:1000; position:fixed; right:50px;top:50px; "> wasauchimmerfürn HTML code(auch dynamisch änderbar) </div>

    das reicht schon und das objekt klebt oben rechts mit 50px abstand und scrollt mit (perfekt ohne ruckeln). Naja, zumindest in Firefox&Co sowie dem IE7. IE5&6 ist deutlich problematischer, denn der beherrscht position:fixed nicht. Ne ganz praktische Lösung dafür (die ich in dem Beispiel eingesetzt habe), gibts bei http://dean.edwards.name/IE7/. da gibts auch ein Beispiel für position:fixed.
    Du musst dann nur beachten, dass die CSS-style-codes nicht in das tag des DIVs dürfen, sondern im header definiert werden müssen (siehe mein Beispiel). Es ist aber halt ein Workarround wie so oft für den IE5/6. Man hat halt die Wahl: Will man das Feature, dann muss man so nen Mist akzeptieren oder man verzichtet. Das funktioniert nun ohne dass Du ausser CSS/HTML irgendwas machen musst.

    Nun soll das Ding einfliegen... das ist schon kniffliger, wenn man keine Ahnung hat. Da brauchst Du dann Javascript in jedem Fall, aber nur sehr primitives. NUr kommt das dann in die Quere mit dem workaround, also macht man am besten gleich alles immer mit javascript:

    Auch ein simples Beispiel: http://mc.cirikovic.de/ie7/togul3.html

    Das ist nun nicht mehr fix positioniert, sondern absolut (das verstehen alle). Die komplette positionierung läuftn un über javascript, wodurch du performance frisst - auf alten kisten kann das schief gehen, wenn javascript aus ist, geht gar nix auf keinem browser. Weiteres Problem: IE 5.5 zb benutzt andere variablen für positionen usw. ich hab das in dem Beispiel implementiert für IE6, FF usw, aber für 5.5 bräuchte ich dann nochmal ein IF usw. kein Bock jetzt ;)

    Über die parameter von timeout / setinterval kannst du dann zb die flüssigkeit der bewegungen einstellen (und die performance vollkommen killen etc.).
  16. bunka VIP

    also ich habe zwar nur ganz wenig ahnug von dem zeugs da aber ich würde das so machen wie im 1. bsp vom majave :D
  17. Mojave Guest

    mir ist noch was eingefallen:
    http://mc.cirikovic.de/ie7/togul4.html

    das ist auch ein workaround und ein bisschen tricky, aber man kann damit das fixed hinbekommen ohne javascript auch ab IE5.5+ und noch animationen zusätzlich damit benutzen. Es ist die stabilste Lösung, wenn man mit einer trickserei leben kann:


    dafür baut man den inhalt der seite in ein DIV
    das sieht so aus dann:

    <html>
    <body>
    <div id="content"> der ganze inhalt der seite </div>
    <div id="shoutbox"> der code der shoutbox </div>
    </body>
    </html>

    so, der witz ist nun, dass man in den normalen browsern einfach positon:fixed benutzt im stylesheet und alles ist prima.

    im header ist aber nach dem normalen stylesheetkram ein <!--[IF IE]> CSS kram für IE speziell <![endif]-->
    darin deaktiviert man nun per CSS das scrolling von html und body, aktiviert das scrolling für das content-DIV und setzt die shoutbox auf absolute.

    Der Witz ist jetzt, dass man sich nicht mehr über die seite bewegt beim scrollen, sondern die seite in einem DIV bewegt wird. also im grunde schiebt man den inhalt an einem fenster vorbei statt das fenster über den inhalt zu bewegen. darum ist das absolute positionierte Objekt immer an der gleichen stelle.


    Bleibt trotzdem zu erwähnen, dass workarounds halt leider workarounds sind und bei den 6 billionen browsern meist irgendeiner Probleme macht. Weiss zb nicht, wie ein MAC IE damit auskommt.
  18. Togul Guest

    Super danke für die Arbeit! Ich schau mir das gerade alles an. Ich glaub Methode 2 und 3 hören sich am besten an. Muss ich jeweils den Code der Shoutbox einschreiben oder kann ich die auch einfach <? include ... ?> reinhauen...?
  19. Mojave Guest

    die letzte (togul4.html) ist jedenfalls die kompatibelste und robusteste.

    Und ja klar, Das <div id="shoutbox"></div> ist ein container. da kannst du reinschreiben was du willst. Du kannst auch sowas machen (javascript)


    function setShoutBoxContent( text) {
    element = document.getElementById( 'shoutbox' );
    element.innerHTML = text;
    }

    <input type="button" value="test1" onclick="javascript:setShoutBoxContent( 'test1' );" />
    <input type="button" value="test2" onclick="javascript:setShoutBoxContent( 'test2' );" />

    So baut man zb contextmenüs oder trees oder was auch immer. Dann kommen halt noch events dazu usw, aber im grunde gehts halt nur darum, dass du einen container hast, den du bewegen und unsichtbar/sichtbar mchen kannst und dessen Inhalt vollkommen beliebig ist (html, javascript, whatever, funktioniert alles).

    Du kannst sogar noch mehr Spielerrei einbauen mit containern: Du lässt eine Funktion alle Sekunde aufrufen, die einen xmlhttp-request ausführt (Stichwort AJAX - asynchron javascript). Der ruft eine PHP Seite von dir auf, die den aktuellen inhalt der shoutbox generiert und den schreibst du in den container. Dadurch hast du dann sowas wie einen chat ohne dass die seite reloaden müsste. Nur der Inhalt dieses DIVs wird konstant neugeladen. (damit kann man zb auzch formulareingaben in der datenbank prüfen, bevor der benutzer überhaupt auf absenden gedrückt hat oder man programmiert hochkomplexe Anwendungen. Das Forum hier benutzt auch etliche xmlhttp requests - zb beim ändern eines postings).
  20. Togul Guest

    Sauber, klappt fast perfekt.

    Code:
    <HTML>
    <HEAD>
    <TITLE>Wenn jetzt Sommer w&auml;r...? www.meibaum.net</TITLE>
    <META NAME="Title" CONTENT="meibaum.net - ich bin wieder da!">
    <META NAME="Author" CONTENT="Meick Meibaum">
    <META NAME="Publisher" CONTENT="Meick Meibaum">
    <META NAME="Copyright" CONTENT="Meick Meibaum">
    <META NAME="Revisit" CONTENT="After 3 days">
    <META NAME="Keywords" CONTENT="MEICK, MEIBAUM, CS, COUNTERSTRIKE, WOW, WORLD OF WARCRAFT, BREMEN, WALLE ">
    <META NAME="Description" CONTENT="Private Homepage von Meick Meibaum">
    <META NAME="Abstract" CONTENT="Private Homepage von Meick Meibaum">
    <META NAME="page-topic" CONTENT="Spiel">
    <META NAME="page-topic" CONTENT="Private Homepage">
    <META NAME="audience" CONTENT=" Alle ">
    <META NAME="Robots" CONTENT="INDEX,FOLLOW">
    <META NAME="Language" CONTENT="Deutsch">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"stylesheet" href="main.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
    <!--
    .Stil3 {font-style: italic}
    .Stil4 {
        font-size: 10pt;
        font-weight: bold;
        font-style: italic;
    }
    .Stil6 {font-size: xx-small}
    .Stil8 {
        color: #003399;
        font-weight: bold;
    }
    .Stil9 {font-size: xx-small; color: #003399; }
    a:hover {
        color: #E7E7E7;
    }
    a:link {
        color: #003399;
    }
    a:visited {
        color: #003399;
    }
    a:active {
        color: #E7E7E7;
    }
    .Stil11 {color: #003399}
    .Stil17 {font-size: xx-small; color: #003399; font-weight: bold; }
    body {
        background-image: url(images/index_51.gif);
        background-color: #F4F4F4;
    }
    .Stil18 {color: #003399}
    .Stil21 {color: #003399; font-weight: bold; }
    -->
     <!-- compliance patch for microsoft browsers -->
     <style type="text/css">
       body { }
       #shoutbox { 
       width:150px;  
       z-index:1000; 
       position:fixed;
       top:50px;
       right:50px;   
       background-color:#E0DFE3; 
       }
     </style>
     <!--[if IE]>
      <style type="text/css">
       body, html { overflow:hidden; height:100%; margin:0px; padding:0px; }
       #content { width:100%; height:100%; overflow: auto; }
       #shoutbox { position:absolute; right:50px; top:50px; background-color:#007700; }
     </style>
     <![endif]-->
    </HEAD>
    <BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <div align="center">
      <table width="786" border="0" align="center" bordercolor="#999999">
        <tr>
          <td width="780"><div align="center">
            <table width="780" border="0" cellspacing="0" cellpadding="0">
            <?php
            $xt_title = 'Meibaum.net - ich bin wieder da!';
            include('/xt_stats/xt_counter.php');
            ?>
              <tr>
                <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="143">
                    <param name="movie" value="http://www.meibaum.net/2.swf">
                    <param name="quality" value="high">
                    <embed src="http://www.meibaum.net/2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="143"></embed>
                </object></td>
              </tr>
            </table>
            <table width="780" border="0" cellspacing="0" cellpadding="0" background="images/index_14.gif">
              <tr>
                <td width="752" class="v11r"><a href="http://www.meibaum.net/trillian/index.php?uid=1"><img src="http://www.meibaum.net/trillian/status.php?uid=1" alt="A" border="0"></a></td>
                <td width="28" align="center" valign="middle"><div align="right"><a href="http://wwp.icq.com/scripts/search.dll?to=121431320"></a><a href="mailto:meick@meibaum.net"></a><a href="#"></a><span class="Stil18"><a href="mailto:meick@meibaum.net" onClick="imwindow('icq', '35', 500, 450); return false;"><img src="images/index_17.gif" alt="B" width="27" height="35" border="0"></a></span></div></td>
              </tr>
            </table>
            <table width="780" border="0" cellspacing="0" cellpadding="0">
              <tr valign="top">
                <td width="159" bordercolor="#E7E7E7" background="images/index_20.gif"><table width="96%" border="0" cellpadding="0" cellspacing="0" background="images/index_20.gif">
                    <tr>
                      <td background="images/index_20.gif" bgcolor="#E0DFE3" class="t11g"><div align="left">
                          <div align="center">
                            <table width="100%" height="100%"  border="0">
                              <tr>
                                <td><div align="center"><span class="Stil4">
                                    <?php
                                    include_once("rnd_pic.php");
                                    ?>
                                </span></div></td>
                              </tr>
                              <tr>
                                <td><p align="left" class="Stil6"><span class="Stil21">Name:</span> Meick Meibaum</p></td>
                              </tr>
                              <tr>
                                <td><div align="left"><span class="Stil6"><span class="Stil21">Wohnort:</span> Bremen (Walle) </span></div></td>
                              </tr>
                              <tr>
                                <td><div align="left"><span class="Stil6"><span class="Stil21">Geburtsdatum:</span> 08.06.87 </span></div></td>
                              </tr>
                              <tr>
                                <td><div align="left"><span class="Stil6"><span class="Stil21">Schule:</span> Altes-Gymnasium </span></div></td>
                              </tr>
                              <tr>
                                <td><div align="left"><span class="Stil6"><span class="Stil21">Motto:</span> &quot;Versteh ich nicht...!&quot;</span></div></td>
                              </tr>
                              <tr>
                                <td><div align="left"><span class="Stil6"><span class="Stil21">Handy:</span> 01799175437 </span></div></td>
                              </tr>
                              <tr>
                                <td><p align="left" class="Stil6"><span class="Stil21">Familienstand:</span> vergeben ;) </p></td>
                              </tr>
                              <tr>
                                <td><table width="100%" border="0">
                                    <tr>
                                      <td><div align="center"><span class="Stil17">Mein <span class="Stil18">Lieblingsgetr&auml;nk</span>?</span></div></td>
                                    </tr>
                                    <tr>
                                      <td width="125"><span class="Stil18">&bull;</span> Haake-Beck Pils</td>
                                    </tr>
                                    <tr>
                                      <td><span class="Stil18">&bull;</span> Baileys on Ice</td>
                                    </tr>
                                    <tr>
                                      <td><span class="Stil18">&bull;</span> Wasser?!</td>
                                    </tr>
                                </table></td>
                              </tr>
                              <tr>
                                <td><table width="100%" border="0">
                                    <tr>
                                      <td><div align="center"><span class="Stil17">Mein Lieblingsessen? </span></div></td>
                                    </tr>
                                    <tr>
                                      <td><div align="left"><span class="Stil18">&bull;</span> Nuddelsalat</div></td>
                                    </tr>
                                    <tr>
                                      <td height="14"><div align="left"> <span class="Stil18">&bull;</span> Pizza</div></td>
                                    </tr>
                                    <tr>
                                      <td><div align="left"><span class="Stil18">&bull;</span> Reis (!)</div></td>
                                    </tr>
                                </table></td>
                              </tr>
                              <tr>
                                <td height="302"><table width="100%" border="0">
                                    <tr>
                                      <td><p align="center" class="Stil9"><strong>Meine Hobbys?</strong></p></td>
                                    </tr>
                                    <tr>
                                      <td width="125"><div align="left">
                                          <div align="left"><span class="Stil18">&bull;</span> Party </div>
                                      </div></td>
                                    </tr>
                                    <tr>
                                      <td height="15"><div align="left"><span class="Stil18">&bull;</span> Freundin treffen *g* </div></td>
                                    </tr>
                                    <tr>
                                      <td><div align="left">
                                          <div align="left">
                                            <div align="left"><span class="Stil18">&bull;</span> Schlaafen... ;) </div>
                                          </div>
                                      </div></td>
                                    </tr>
                                  </table>
                                    <table width="100%" border="0">
                                      <tr>
                                        <td><div align="center" class="Stil9"><strong>Mein Wochenende? </strong></div></td>
                                      </tr>
                                      <tr>
                                        <td width="125"><span class="Stil18">&bull;</span> Discos, Bars &amp; Clubs</td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> bei Freunden...</td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> in meinem Bett...</td>
                                      </tr>
                                    </table>
                                  <table width="100%" border="0">
                                      <tr>
                                        <td><div align="center" class="Stil9"><strong>Meine Lieblingsf&auml;cher? </strong></div></td>
                                      </tr>
                                      <tr>
                                        <td width="125"><span class="Stil18">&bull;</span> Geschichte </td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> Sport </td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> hmm... sonst nix :D </td>
                                      </tr>
                                    </table>
                                  <table width="100%" border="0">
                                      <tr>
                                        <td><div align="center" class="Stil9"><strong>Andere sollten haben... </strong></div></td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> ... Authenzit&auml;t</td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> ... Loyalit&auml;t</td>
                                      </tr>
                                      <tr>
                                        <td><span class="Stil18">&bull;</span> ... Freundlichkeit</td>
                                      </tr>
                                    </table>
                                  <p>&nbsp;</p></td>
                              </tr>
                              <tr></tr>
                              <tr>
                                <td><table width="100%" border="0">
                                    <tr>
                                      <td height="15" class="Stil17"><div align="center">Meine Overallcharts </div></td>
                                    </tr>
                                    <tr>
                                      <td height="7"><div align="left">
                                          <p><a href="http://www.last.fm/user/Togul/?chartstyle=Meick"><img src="http://imagegen.last.fm/Meick/oartists/Togul.gif" border="0" alt="Togul's Last.fm Overall Artists Chart" /></a> </p>
                                      </div></td>
                                    </tr>
                                    <tr>
                                      <td height="7"><div align="center"><span class="Stil21"><span class="Stil17">Meine Wochencharts </span></span></div></td>
                                    </tr>
                                    <tr>
                                      <td height="16"><div align="left">
                                          <p class="Stil21"><a href="http://www.last.fm/user/Togul/?chartstyle=Meick"><img src="http://imagegen.last.fm/Meick/artists/Togul.gif" border="0" alt="Togul's Last.fm Weekly Artists Chart" /></a> </p>
                                      </div></td>
                                    </tr>
                                </table></td>
                              </tr>
                            </table>
                          </div>
                        <div align="center" class="Stil6"> </div>
                        <div align="center" class="Stil6"> </div>
                        <div align="center" class="Stil6"> </div>
                        <div align="center"> </div>
                        <div align="left">
                            <div align="left">
                              <div align="left">
                                <div align="left">
                                  <div align="center" class="Stil6"> </div>
                                </div>
                              </div>
                            </div>
                        </div>
                      </div></td>
                    </tr>
                </table></td>
                <td width="621" bgcolor="#FFFFFF"><?
                    switch($inhalt)
                                    {
                                    case "news": include("pnews_v2/news.php"); break;
                                    case "bilder": include("Fotos/index.html"); break;
                                    case "lmo": include("lmo/lmo.php"); break;
                                    default: include("pnews_v2/news.php"); break;
                                    }
                    ?></td>
              </tr>
            </table>
            <table width="780" border="0" cellspacing="0" cellpadding="0" height="34" background="images/index_48.gif">
              <tr>
                <td background="images/index_14.gif"><div align="center"><span class="v11r Stil3">&copy;2003-2006 <a href="http://www.meibaum.net">Meibaum.net</a></span> (version 6.1) </div></td>
              </tr>
            </table>
          </div></td>
        </tr>
      </table>
    </div>
    <script language="JavaScript">
        var Voffset = 50;
        var shoutboxdiv = document.getElementById('shoutbox');
        var ypos = shoutboxdiv.offsetHeight * (-1);
        var ie=document.all && navigator.userAgent.indexOf("Opera")==-1;
        
        //die box über dem bildrand plazieren und sichtbar machen
          shoutboxdiv.style.top = ypos +'px';
          shoutboxdiv.style.display = 'block';    
        
          function moveit() {
            if (ypos < 50 ) {
                ypos += 4;
                shoutboxdiv.style.top = ypos +'px';
                setTimeout ('moveit()',20);
            }
          }
        setTimeout ('moveit()',200);
    </script>
    <div id="shoutbox">
      <table width="100%" height="100%" border="0" align="left" cellpadding="0" cellspacing="0" style="">
        <tr>
          <td nowrap background="images/index_52.gif"><iframe src="http://422043.myshoutbox.com/" width="150" height="600" frameborder="1" allowTransparency="false"></iframe>
        </tr>
      </table>
    </div>
    </BODY>
    </HTML>
    
    

    würdest du nochmal einen Blick drüber werfen, wie ich manches Entknoten kann und die Seite kleiner kriege? Immerhin 19kb, ist doch recht viel für die index.php + images. Dein geschultes Auge sieht da sicher mehr ;D.

    Extern eingebunden noch ein paar CSS sachen...
    Code:
    /* Body */
    Body {
    background: #FFFFFF;
    font-family: tahoma;
    color: #000000;
    font-size: 8pt;
    }
    img { border: 0;}
    /* Hyperlinks */
    a:link {
    text-decoration: none; color: #003399;
    }
    a:visited {
    text-decoration: none; color:  #003399;
    }
    a:hover {
    text-decoration: none; color: #003399;
    }
    /* Tables */
    td{
    font-size:8pt;
    }
    td.tablehead {
    background-image: url(images/index_15.gif);
    color: #ffffff;
    font-weight: bold;
    }
    td.tablebody {
    background-color: #FFFFFF;
    }
    td.tablebody2 {
    background-color: #E7E7E7;
    }
    /* Table Hyperlinks */
    td.tablehead a:link {
    color: #003399;
    }
    td.tablehead a:visited {
    color: #003399;
    }
    td.tablehead a:hover {
    color: #003399;
    }
    
    /* Formular */
    input {
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    border: 0px solid #94BFFF;
    color: #000000;
    }
    #formfield, option, textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 0px solid #94BFFF;
    background-color: #FFFFFF;
    color: #000000;
    }