| Autor |
Nachricht |
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht: 
|
Verfasst Di 13.02.2007 20:25
Titel Schwierigschwierig: Aufklapp Script (?) |
  |
|
Hallo,
ich bin auf der Suche nach einem Script (Javascript, evtl. sogar nur CSS?), das es ermöglicht, innerhalb einer Seite auf einen kleinen Pfeil (o.ä.) zu klicken und darunter öffnet sich dann (auf der gleichen Seite) ein Fenster resp. Box mit weiteren Infos und Bildern. Frames sind ausgeschlossen, ggfs. aber sind iframes okay. Am besten wäre natürlich nur CSS.
Ich will natürlich kein fertiges Script, aber eine Beispielseite, die ein solches System nutzt, wäre klasse. Vielleicht gibt es auch eine PHP Lösung?
Hier ist die Seite, die ich meine: testseite. Klicke ich auf einen (noch nicht vorhandenen) Pfeil unter dem jeweiligen Bild, soll sich ein Fenster öffnen mit weiteren Infos (ähnlich diesem Fenster.
Für Abhilfe wäre ich sehr dankbar. Ich weiß einfach nicht, wonach ich suchen soll (Google), weil mir kein Begriff für das Script einfällt.
Vielen Dank und Grüße!
Alex
|
|
| |
   |
 |
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Di 13.02.2007 20:33
Titel
|
|
|
| Code: |
function switchVisibility(p_element) {
if(document.getElementById(p_element).style.visibility == 'visible') {
document.getElementById(p_element).style.visibility = 'hidden';
}
else {
document.getElementByID(p_element).style.visiblity = 'visible';
}
}
|
hab ich jetzt zwar nich getestet aber dürfte funktionieren. Wenn du das ganze noch mitm schönen effekt willst dann kannste dir auch mal moo fx ansehen 
|
|
| |
|
|
|
Anzeige
|
|
|
FalkoWa
Dabei seit: 07.02.2007
Ort: Much
Alter: 41
Geschlecht:
|
Verfasst Di 13.02.2007 20:37
Titel
|
|
|
| Pixelpole hat geschrieben: | | Code: |
function switchVisibility(p_element) {
if(document.getElementById(p_element).style.visibility == 'visible') {
document.getElementById(p_element).style.visibility = 'hidden';
}
else {
document.getElementByID(p_element).style.visiblity = 'visible';
}
}
|
|
falls "visibility" nicht funktioniert, versuch es mit "display" (block und none).
Eine reine PHP Lösung ist nicht gerade von Vorteil, da die Seite dann jedes Mal nu geladen werden muss.
Diese Lösung dürfte die beste sein.
Nur CSS klappt nicht mit dem Klicken ... da könntest Du höchstens die Box beim überfahren des Pfeils aufklappen lassen.
|
|
| |
|
|
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Di 13.02.2007 20:42
Titel
|
|
|
|
Geil. Das gucke ich mir jetzt mal in Ruhe an. Vielen vielen Dank erstmal!!
|
|
| |
|
|
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Mi 14.02.2007 01:21
Titel
|
|
|
|
Könntet Ihr mir erklären, welches der Moofix-Scripts für mich von Interesse wäre? Ich schnall das noch nicht ganz auf basis meines Vorhabens. Die Intro-Seite von Moofx enthält ja quasi das, was ich brauche bzw. erreichen will, aber aus dem Quelltext werde ich noch nicht ganz schlau.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Do 15.02.2007 19:54
Titel
|
|
|
Ich raff zwar einiges, aber das sind alles manchmal dann doch böhmische Dörfer für mich. Mein Hauptproblem dabei ist, welche Variablen verändert und welche Namen ausgetauscht werden müssen. Kenne mich mit Scriptsprachen wenig bis gar nicht aus.
Beispiel:
| Code: | <script type="text/javascript">
var stretchers = $$('div.accordion');
stretchers.each(function(item){
item.setStyles({'height': '0', 'overflow': 'hidden'});
});
window.onload = function(){ //safari cannot get style if window isnt fully loaded
var togglers = $$('h3.toggler');
var bgFx = [];
togglers.each(function(toggler, i){
toggler.defaultColor = toggler.getStyle('background-color');
//fx creation
bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
});
var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,
onActive: function(toggler, i){
bgFx[i].toColor('#e0542f');
toggler.getFirst().setStyle('color', '#fff');
},
onBackground: function(toggler, i){
bgFx[i].clearTimer();
toggler.setStyle('background-color', toggler.defaultColor);
toggler.getFirst().setStyle('color', '#222');
}
});
//anchors
function checkHash(){
var found = false;
$$('h3.toggler a').each(function(link, i){
if (window.location.hash.test(link.hash)){
myAccordion.showThisHideOpen(i);
found = true;
}
});
return found;
}
if (!checkHash()) myAccordion.showThisHideOpen(0);
//ball!
var ball = $E('#header h1');
var ballStyles = new Fx.Styles(ball, {duration: 800, transition: Fx.Transitions.elasticOut});
new Drag.Move(ball, {
onComplete: function(){
ballStyles.custom({'top': [this.element.getStyle('top').toInt(), 13], 'left': [this.element.getStyle('left').toInt(), 358]});
}
});
};
try {
Window.disableImageCache();
}catch(e){}
</script> |
Das ist direkt aus der moo.fx Seite entnommen, also dieser: http://moofx.mad4milk.net/
Vorausgesetzt, ich habe alle scripte - welche Variablen muss ich beachten?
Falls jemand eine andere Idee hat, wie ich meine Referenzseite anlegen könnte, wäre ich sehr dankbar. Ich möchte möglichst auf einer Seite bleiben und wenig mit Menüs veranstalten. Aufklappbare Fenster schienen mir bisher eine gute Lösung, aber technisch stoße ich da evtl. an meine Grenzen...
Freue mich über weitere Anregungen!
Alex
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 15.02.2007 20:07
Titel
|
|
|
Du hast ja schon einen Blick in den Quelltext geworfen, dann schau dir
doch einfach nochmal die HTML Struktur an.
| Code: | <h3 class="toggler projekt"><a href="#projekt">Projekt</a></h3>
<div class="accordion">
dein Inhalt
</div> |
Wenn du an dem Script selbst nichts änderst, brauchst du also die h3 Elemente,
im JavaScript | Code: | | var togglers = $$('h3.toggler'); |
und die div Elemente
| Code: | | var stretchers = $$('div.accordion'); |
mit den CSS Klassen "toggler"
und "accordion".
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Suche Aufklapp-JavaScript
Aufklapp menü im Dreamweaver
CSS / Aufklapp Navi -> Hover belegung?
"Aufklapp"-Funktion für News gesucht
script deaktivieren mit einem andere script?
Action Script 2 oder Action Script 3
|
|
Willkommen auf dem Portal für Mediengestalter
