Autor |
Nachricht |
-
vfl-leiferde
Wohnort: Braunschweig
|
20.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 ______________ [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
|
|
↑
|
|
|
-
tropischer-regenwald
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
20.01.2009 um 16:24 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
kdl-design
|
20.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
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
20.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
|
|
↑
|
|
|
-
kdl-design
|
20.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
|
|
↑
|
|
|
-
3fragezeichen
|
20.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
|
|
↑
|
|
|
-
coolplace
Wohnort: USB = United States of Bücken
|
21.01.2009 um 04:44 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
22.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
|
|
↑
|
|
|
-
stym
|
22.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______________
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
|
↑
|
|
|
-
green-designs
|
|
↑
|
|
|
-
vfl-leiferde
Wohnort: Braunschweig
|
|
↑
|
|
|
-
stym
|
22.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. ______________
|
|
↑
|
|
|
|