Suche im Forum:
Suchen


Autor Nachricht
Beitrag20.01.2009 um 16:00 (UTC)    
Titel: Klapp-Box - brauche HILFE

Hallo,

ich bitte um Hilfeeeeeeeeeeee :'(

Und zwar habe ich mal so eine Box gesehen, da drückt man drauf und die klappt runter und dann steht da der text... ich versuche das mal anhand von Bildern zu veranschaulichen:

Also, ich will das folgendermaßen haben
(Anstatt Box 1 soll nen Termin da stehen)


So, dann klickt man ins Rote Feld (am liebsten nur auf den Pfeil) und dann soll die Box aufklappen:



Ich hoffe man versteht was ich meine udn es ist realisierbar...!?

Vielen dank Smile
______________
[img:73ef5bc278]http://www.freenet-homepage.de/vfl-leiferde/vfl-leiferde/banner/bannerkomplett1.gif[/img:73ef5bc278]


Zuletzt bearbeitet von vfl-leiferde am 20.01.2009, 17:43, insgesamt einmal bearbeitet
Beitrag20.01.2009 um 16:04 (UTC)    
Titel: Re: Klapp-Box - brauche HILFEEEE! :-(

Also ich finde du hast das sehr gut gemacht habe alles sofort verstanden!!
Schau mal in http://www.google.de nach da findest du solche Seiten...
Versuche es mal mit den Suchbegriffen:

Javascripte
Javascripte und mehr..

oder solche Sachen halt...

Viel Erfolg noch!!
______________
http://www.tropischer-regenwald.de.tl/

http://www.PeakOut.de.tl/
Beitrag20.01.2009 um 16:24 (UTC)    
Titel:

Mhz... also da finde ich nichts passendes..

Kann mir hier nicht einer helfen?
______________
[img:73ef5bc278]http://www.freenet-homepage.de/vfl-leiferde/vfl-leiferde/banner/bannerkomplett1.gif[/img:73ef5bc278]
Beitrag20.01.2009 um 16:40 (UTC)    
Titel:

Schau mal bitte bei Google unter "Accordion" da findest du ausreichend Scripte.
In wie weit du die hier benutzen kannst, musst du austesten
______________

Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt
Beitrag20.01.2009 um 17:03 (UTC)    
Titel:

Hey, danke, dass hat mir schon weiter geholfen... habe eig genau das gefunden was ich brauche...

Jedoch ist da so eine Datei und ich glaube genau deswegen kann HPBK das nicht wiedergeben und zwar:
Code:
<script type="text/javascript" src="accordian.pack.js"></script>


Zuletzt bearbeitet von vfl-leiferde am 20.01.2009, 18:04, insgesamt einmal bearbeitet
Beitrag20.01.2009 um 17:08 (UTC)    
Titel:

So wie es aussieht geht das hier nicht. Was genau willst du denn mit dem Script erreichen? Sollen die Besucher auf einen Button /Bild gehen und dann öffnet sich ein Text?
______________

Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt
Beitrag20.01.2009 um 17:11 (UTC)    
Titel:

Zitat:
<script language="JavaScript" type="text/javascript">
<!--
function anzeigen(das){
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else document.getElementById(das).style.display='none';}
-->
</script>


Das muss erstmal rein, wenn du das auf mehrere Seiten machen willst, bei "Text über dem Design" einfügen, oder, wenn nur auf einer Seite, ganz oben im Quelltext der Seite. Und dann immer so:

Zitat:
<a href="javascript:anzeigen('div1');" class="klappleiste"><img src="BILD-URL" border=0></a>
<div style="display: none;" id="div1">
Der Text, der nach dem Klick erscheinen soll
</div>


Die blau markierte Zahl musst du dann jeweils ändern.
______________



Zuletzt bearbeitet von 3fragezeichen am 20.01.2009, 18:33, insgesamt einmal bearbeitet
Beitrag21.01.2009 um 04:44 (UTC)    
Titel:

Beitrag22.01.2009 um 11:32 (UTC)    
Titel:

Hallo,

danke für deinen Post in meinem Thema.
In der Beschreibung auf dem Link steht, dass man den Code nur in Verbindung mit CSS benutzen kann... Ich habe ja ein CSS Design aber muss der Code jetzt bei Text über dem Design oder in den Quelltext einer neuen Seite wie zum Beispiel .../test12345 ?

LG Miles
______________
[img:73ef5bc278]http://www.freenet-homepage.de/vfl-leiferde/vfl-leiferde/banner/bannerkomplett1.gif[/img:73ef5bc278]
Beitrag22.01.2009 um 11:42 (UTC)    
Titel:

Folgendden Code habe ich eingefügt:

Code:
<style type="text/css">

<!--
.menu
{
   background-color: #2b6ebb;
   border: 1px solid #008;
   font-family: Verdana;
   position: absolute;
   font-weight: bold;
   padding-top: 3px;
   font-size: 10px;
   cursor: pointer;
   width: 150px;
   color: #fff;
}

.item_panel
{
   border-left: 1px solid #008;
   border-right: 1px solid #008;
   clip: rect(0, 150, 0, 0);
   position: absolute;
   width: 150px;
}

.item_panel a
{
   text-decoration: none;
   cursor: pointer;
   color: #000;
}

.item
{
   background-color: #e9f0f8;
   font-family: Verdana;
   font-size: 10px;
   width: 148px;
}
//--></style><script type="text/javascript">
<!--
// www: http://www.javarea.de
// Copyright by javarea.de

// Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
var Link = new Array();

Link[0]  = '0|24.01.2009';
Link[1]  = '1|Hallenturnier der 2. Herren';
Link[2]  = '1|Freundschaftsspiel der 1. Herren in Bad Harzburg';
Link[3]  = '0|Html Hilfe';
Link[4]  = '1|selfhtml|http://|';
Link[5]  = '1|lerne html|http://|'
Link[6]  = '0|Sonst';
Link[7]  = '1|Gästebuch|http://|';
Link[8] = '1|Kontakt|http://|';
Link[9] = '0|noch mehr';
Link[10] = '1|bla bla|';

var height    = 20; // Hoehe der Menuekoepfe
var iheight   = 15; // Hoehe der Menueelemente
var bgc       = '#e9f0f8' // background color of the item
var over_bgc  = '#fff';
var tc        = '#000' // text color of the item
var over_tc   = '#004891';
var speed     = 0;
var timerID   = 0;
var width     = 152;
var N         = (document.all) ? 0 : 1;
var self_menu = new Array();

function write_menu()
{
   smc   = 0;
   mn    = 0;
   mni   = 1;
   start = -1;

   document.write('<div style="position: absolute;">');

   for (var i = 0; i < Link.length; i++)
   {
      la = Link[i].split('|');

      if (la[0] == 0)
      {
         if (start == 0)
         {
            document.write('</div>');

            h = csmc * iheight;
            tmn = mn; // - h;
            self_menu[smc] = new Array(tmn, h, 0, -2);

            smc++;
            mn--;
         }

         csmc = 0;

         document.write('<div id="down' + smc + '" class="menu" '
                      + 'style="top: ' + mn + 'px; height: ' + height + 'px;" '
                      + 'onclick="pull_down(' + smc + ', ' + mni + ');">'
                      + '  ' + la[1] + '</div>');

         self_menu[smc] = new Array(mn, height, 0, mni);

         smc++;
         mni++;
         mn += height;
         start = 1;
      }
      else
      {
         if (start == 1)
         {
            if (N)
               mn += 2;

            document.write('<div id="down' + smc + '" class="item_panel" '
                         + 'style="top: '+ mn + 'px;">');

            start = 0;
         }

         document.write('<a href="' + la[2] + '"'
                      + ((la[3] != '') ? ' target="' + la[3] + '"' : '')
                      + '><div id="d' + i + '" class="item" '
                      + 'style="height: ' + iheight + 'px;'
                      + ((N) ? ' width:150px;' : '')
                      + '" onmouseover="color(this.id);" '
                      + 'onmouseout="uncolor(this.id);">'
                      + ' ' + la[1] + '</div></a>');

         csmc++;
      }
   }

   if (start == 0)
   {
      document.write('</div>');

      h =  csmc * iheight;
      tmn = mn + 5; // - h;
      self_menu[smc] = new Array(tmn, h, 0);
      name = 'down' + (self_menu.length - 1);

      obj = document.getElementById(name);
      obj.style.borderBottomColor = '#008';
      obj.style.borderBottomWidth = '1px';
      obj.style.borderBottomStyle = 'solid';
   }

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

function color(obj)
{
   document.getElementById(obj).style.backgroundColor = over_bgc;
   document.getElementById(obj).style.color = over_tc;
}

function uncolor(obj)
{
   document.getElementById(obj).style.backgroundColor = bgc;
   document.getElementById(obj).style.color = tc;
}

function pull_down(nr, c)
{
   if (timerID == '')
   {
      to = self_menu[nr + 1][1]
      begin = nr + 2;

      if (timerID != '')
         clearTimeout(timerID);

      if (self_menu[nr + 1][2] == 0)
      {
         self_menu[nr + 1][2] = 1;

         if (nr == (self_menu.length - 2))
            to++;

         epull_down(begin, to, 0);
      }
      else
      {
         to = 0;
         self_menu[nr + 1][2] = 0;
         name = 'down' + (nr + 2);
         open_item = 0;

         for (var i = 0; i < nr; i++)
            if (self_menu[i][2] == 1)
               open_item += self_menu[i][1];

         if (N == false)
            open_item -= (c * 1);

         if (nr == (self_menu.length - 2))
         {
            val = self_menu[self_menu.length - 1][1];
            to = -1;
         }
         else
            val = parseInt(document.getElementById(name).style.top) - (open_item) - (c * height);

         epull_up(begin, to, val);
      }
   }
}

function epull_down(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) + 1;
   }

   nowv++;

   if (nowv < to)
      timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function epull_up(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) - 1;
   }

   nowv--;

   if(nowv > to)
      timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function startup(nr)
{
   write_menu();

   if (nr != 0)
   {
      for (var i = 0; i < self_menu.length; i++)
      {
         if (self_menu[i][3] == nr)
            pull_down(i, nr);

         i == self_menu.length;
      }
   }
}
//-->
</script><script type="text/javascript">
<!--
startup(1);
//-->
</script>


Zuletzt bearbeitet von vfl-leiferde am 22.01.2009, 12:44, insgesamt einmal bearbeitet
Beitrag22.01.2009 um 13:05 (UTC)    
Titel:

ich kann dir nur empfehlen solche sachen wie scripts etc extern hochzuladen und dann zu verlinken.

hier wäre ein beispiel für so ein spoiler oder dropdown div allerdings brauchst du dafür einen eigenen server auf dem du die dateien hochlädtst :

http://dynamicdrive.com/dynamicindex17/animatedcollapse.htm
______________

Beitrag22.01.2009 um 13:58 (UTC)    
Titel:

Und wenn ich sowas extern hochgeladen habe, wie kann ich das dann auf meine Seite einbinden?
Oder geht das nur mit nem Link zu ner Externen seite?
______________
[img:73ef5bc278]http://www.freenet-homepage.de/vfl-leiferde/vfl-leiferde/banner/bannerkomplett1.gif[/img:73ef5bc278]
Beitrag22.01.2009 um 13:59 (UTC)    
Titel:

du könntest es z.b mit Iframe einbinden.


Hier ein Generator für nen Iframe:
http://www.fueralles.de/Iframe-Generator.html
Beitrag22.01.2009 um 14:14 (UTC)    
Titel:

Achso okay,

sowas hatte ich mal um eine Externe Tabelle einzubinden, geht das nicht auch direkt per Code und ohne generator? Habe den Code von damals leider nicht mehr
______________
[img:73ef5bc278]http://www.freenet-homepage.de/vfl-leiferde/vfl-leiferde/banner/bannerkomplett1.gif[/img:73ef5bc278]
Beitrag22.01.2009 um 14:18 (UTC)    
Titel:

nein kein iframe einfach den code auf deine seite und an dieser stelle


<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

die links zu den 2 dateien angeben.
______________

Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de