Suche "Text Toggle Slider" - Text klappt auf/zu - "Weiterlesen" Effekt

Marcolino · 15. April 2013

Ich habe schon wieder ein Problem und ich komme damit zu Euch ...
wie immer (aber vor allem weil ich auch denke, dass wäre mal eine Idee
für die Entwickler von Website X5):

Ich soll auf EINER (Web-)seite, einen Text bringen -
der eigentlich fast 6 Seiten lang ist.
Man wünscht sich deshalb einfach
6 Zeilen auf der Seite, die jeweils auf-/zuklappen und den jeweiligen Text freigeben.

- Also 6 Toggle-Slider "Weiterlesen" - Buttons.
- Immer wenn EIN Button angeklickt wird,
sollten der Button/Text der vorher geöffnet war,
sich automatisch wieder schließen: Man kann also immer nur einen Abschnitt lesen.
- Schriftart: Verdana, Schriftgröße 10 FETT, Schriftfarbe schwarz, transparenter Hintergrund

Ich habe mich bei Codecanyon umgeschaut und auch gegooglt.
Aber finde nichts passendes oder es ist zu kompliziert für mein bescheidenes Wissen.

u.a. habe ich sowas gefunden, was zu 99% dem entspricht was ich suche:

Spoiler anzeigen

stammt von dort:

Spoiler anzeigen

Würde mir bitte jemand helfen, sowas codemäßig mit jquery
auf die Beine zu stellen!? Vielleicht hat das ja hemand von Euch schon gemacht
oder kennt sich damit aus?

Hier wohl auch ein einfacherer "Generator", aber ich denke das ist nicht das was ich suche:

Spoiler anzeigen

Marcolino · 15. April 2013

... noch was: Wenn man den ERSTEN LINK AUS MEINEM ERSTEN Spoiler clickt ist rechts oben in der Ecke ein Fenster.
Clickt man es, erscheint dort der Code(!?):

Spoiler anzeigen

zwoemti · 15. April 2013

ersteres ist doch genau das was du willst, oder irre ich mich?

Auf jeden Fall solltest du mit dem HTML Objekt arbeiten. Alles andere wird Mist.

Ist auch nicht so schwer das umzusetzen.

hab mal ein Beispiel Projekt erstellt.

Marcolino · 15. April 2013

Cool Mario!
Ja genau das ERSTE ist exakt was ich gesucht habe
und kommt Deinem ja vollkommen identisch.

Hättest Du vielleicht ein 4tes bzw. 5tes
toggle Zeilenbeispiel z.B.:
Nur für ein Foto und ein weiteres
für ein Foto links um das rechts Text ein steht.

Das wäre klasse und ich würde die Möglichkeiten besser verstehen
bzw. hätte mehr Spielraum.

zwoemti · 15. April 2013

am besten gehts mit inline Style...

Marcolino · 15. April 2013

Danke DIr viel Mals! Daran habe ich die Nacht zu werkeln...
Morgen zu dem Ergebnis mehr!!!

Marcolino · 16. April 2013

... hm damit habe ich aber nun das automatische schließen der "vorherigen toggle-zeile" kaputt gemacht.
jetzt bleiben alle offen.

bernie · 16. April 2013

Marcolino

Lass doch mal das Projekt anschauen...

andy67 · 16. April 2013

Was genau soll noch nicht stimmen ?

HAbe es ausprobiert und es geht der nächste auf und der alte zu !

Das einzige was ist, es sollte beim Aufruf der Seite eins automatisch offen sein und nicht alle zusammengeklappt.

andy67 · 16. April 2013

Ist im Prinzip einfach wenn man ein paar CSS Befehle kennt.

CSS

#box-toggle span {
color: #CC1100; "oder rot eintragen"
cursor: pointer;
display: block;
font-family: verdana;
font-size: 12px;
font-weight: bold;
}

Alles anzeigen

bernie · 16. April 2013

Hallo
Wo Du denn html code reinschreibst hast oben rechts noch einen Reiter. Denn klickst an - da komnt er rein.

Marcolino · 16. April 2013

... okay das habe ich jetzt soweit!

Headlines habe ich auf 18px vergrößert.
Und habe 95% with

Spoiler anzeigen

... jetzt versuche ich mal die HEADLINES zu ändern
und den Klapptext auf 12px

Marcolino · 16. April 2013

Also ich bekomme das nicht hin,
dass jede TOGGLE-HEADLINE einen anderen Titel bekommt.

Hatte es so versucht, aber habe da wohl einen Denkfehler: SIEHE ANHANG

Ihr würdet mir sehr helfen, wenn Ihr mir Code-Fehler e-mailen bzw.
hier posten würdet.

And last but not least:
> Weiss jemand wie man es so einrichten kann,
dass bei Seitenaufruf der erste Toggle bereits geöffnet ist!?

Marcolino · 16. April 2013

... is heute Tatort-Nacht

Gast#gibsnichtmehr#910 · 16. April 2013

Hi, Marcolino,

eine Site die Neugierig macht, auch 'Hörende'. Wenn du es hinbekommst jedem Toggle einen extra Text zu geben, muss nicht zwingend der erste Text geöffnet sein, du musst nur Titel finden die Interesse wecken. Der Text von Toggle 1 ist Klasse, aber... sehr viel Text. Du bietest viel auf kleinem Raum. Interntet-User lesen nicht gern! Jedes einzelne Wort in dem Text hat eine tiefe Bedeutung, aber... kürzer trifft besser. Ich hoffe ich trete dir nicht auf die Schlappen. Ich habe selbst mit Menschen mit Handycap zu tun und weiß um die Beweggründe.

zwoemti · 16. April 2013

Wenn dann musst du gleich sagen was du alles haben willst - rumgedoktore am vorhandenen was eigentlich richtig ist und dann doch nicht ist unprodutkiv! Und nun nochmal.....

CSS BEREICH vom HTML Objekt!

CSS

h4 {
color: #b10325;
font-family: verdana;
font-size: 18px;
font-weight: bold;
padding: 3px 0;
text-align:center;
}
p{font-family: verdana;
font-size: 14px;
font-weight: bold;
padding:5px 0;
}
a.show_hide:link, .show_hide{background-color:transparent;color:#b10325;text-decoration:underline;font-family: verdana;
font-size: 18px;
font-weight: bold; }
a.show_hide:visited{background-color:transparent;color:#b10325;text-decoration:underline;font-family: verdana;
font-size: 18px;
font-weight: bold; }
a.show_hide:hover, a.show_hide:active, .show_hide:hover, .show_hide:active{background-color:transparent;color:#b10325;text-decoration:underline;font-family: verdana;
font-size: 18px;
font-weight: bold; }

Alles anzeigen

dort werden die Absätze formatiert und die Überschrift im letzten Teil werden die Punkte 1 - 6 je nach Link formatiert - ist alles gleich eingestellt.....

das kommt dann in den HEAD der Seite

HTML

<script type="text/javascript">
$(document).ready(function(){
$('.imHTMLObject').css({
'height': '100%',
'overflow': 'visible'
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>

Alles anzeigen

und das ins HTML Objekt

HTML

<a class="show_hide" href="#" rel="#slidingDiv">1. Der Hintergrund</a>
<div id="slidingDiv" class="toggleDiv">
<h4>Warum Sie ein DGS-Wochenende besuchen sollten </h4>
<p>
Als „Im Land der Stille“ (Originaltitel: Le pays des sourds) 1992 gerade in den europäischen Kinos anlief, ahnte der Regisseur Nicolas Philibert noch nicht, welche gewaltige Resonanz er damit auslösen würde. Fakt aber ist: Dieses „Land“ existierte nur 99 Minuten lang auf der Leinwand bzw. Bildschirm. Wir Gehörlose haben kein eigenes Land. Viel mehr existiert unsere Gehörlosen-& DGS-Kultur - „versteckt“ - in allen Ecken dieses Landes. Wir Gehörlose haben nicht nur unsere eigene Sprache & Gemeinschaft, sondern auch unsere eigene „Regierung“, eigene Gesellschaftsnorme & Verhaltenskodexe, eigene Sitten & Bräuche, eine eigene Ethik & historische Geschichte, eigene Poesien, Gedichte, Lieder, Theater- & Erzählformen, bis hin zu eigenen Redewendungen & Humor.
</p>
<p>
Wenn man dies alles genauer kennenlernen und mit allen Sinnen am eigenem Leib erfahren möchte, aber man einfach keinen sozialen Kontakt zu Gehörlosen hat, dann heißt das Urteil: Ihre bloße Teilnahme an Gebärdenkursen reicht einfach nicht aus. Sie werden sich niemals dem „Land der Gehörlosen“ wirklich nähern. - So ist das bei allen Fremdsprachen, die man lernen möchte. Es ist nun Mal nicht damit getan, täglich auf dem Weg zur Arbeit im Auto, alle Lektionen vom Sprechers seines Audio-CD-Sprachkurses nachzuplappern. Es ist eine SEHR GUTE Basis, ohne Zweifel - aber es fehlt ganz einfach die Authentizität, die Realität des „Miteinanderseins“ und die Chance darin „einzutauchen“. Man kann nicht schwimmen vom Zuschauen lernen, ohne SELBT je den „Sprung ins kalte Wasser“ gewagt zu haben.
</p>
<p>
Wenn Sie also denken, dass Sie sich bereits eine „mehr oder weniger“ gute Basis der DGS angeeignet haben und Sie das Bedürfnis verspüren (fernab jeglichen „Drucks“ der Gesellschaft und/oder Ihrer Gebärdensprachschule) unter gleichgesinnten hörenden & gehörlosen Menschen in einem Kurz-Urlaub zu weilen, dann ist unser DGS-Wochenende genau das Richtige für Sie!
</p>
</div>
<br />
<a class="show_hide" href="#" rel="#slidingDiv_2">2. Die Regeln</a>
<div id="slidingDiv_2" class="toggleDiv" style="display: none;">
<h4>Die Faustregel eines jeden DGS-Wochenendes </h4>
<p>
Wir werden an allen DGS-Wochenenden uns ausschließlich mit Hilfe der Gebärdensprache verständigen. Drei Tage lang ist die Lautsprache (bis auf gewisse „Pausen“ oder an gewissen Zonen/Orten innerhalb unserer Location) STRENG VERBOTEN. Eine Nichteinhaltung wird mit einer Haushaltsarbeit bestraft (die wir natürlich vorher gemeinsam entscheiden). Liest sich strenger als es ist, DENN: Sie werden durchgehend von einer Handvoll gehörlosen Berufsdozenten und Privatpersonen, sprichwörtlich an die Hand genommen - geführt bis entführt. Sie werden erstaunt sein, wie schnell all das was Sie gelernt haben, plötzlich aus Ihnen heraussprudelt: Ihre eingerosteten Hände und Gesichtsmuskeln, werden ganz schnell zum Leben erweckt. Und sollten Sie mal beim Sprechen erwischt und „bestraft“ werden: Seien Sie sich sicher - Sie, genauso wie alle anderen Teilnehmer/innen, werden aus dem Lachen nicht mehr rauskommen. Und: Irgendwann trifft es sowieso JEDEN ;o) - Egal ob hörend oder taub.</p>
</div>
<br />
<a class="show_hide" href="#" rel="#slidingDiv_3">3. Das Programm</a>
<div id="slidingDiv_3" class="toggleDiv" style="display: none;">
<h4>Unser Service (je nach Wetter & Location) </h4>
<p>
Gesellschaftsspiele INNEN im Gesellschaftsraum - ein kurzes „Spiel ohne Grenzen“ DRAUSSEN in der Natur oder gar: Beides!? Erkundungswanderungen & evtl. ein Lagerfeuer nach guter Pfadfindermanier. Wer dazu keine Lust hat, kann genauso gut Faulenzen - es besteht keinerlei Pflicht auf körperliche Aktion.
</p>
<p>
Und natürlich geht IHR, liebe Teilnehmer/innen auch einkaufen (Achtung: Sprechverbot!) oder werdet mit anderen bis ähnlichen Kommunikationssituationen konfrontiert. Hinterher KOCHEN oder GRILLEN wir zusammen, genauso wie wir zusammen den Haushalt (nach Frühstück/ Abendbrot) in Schuss halten. Selbstverständlich geben die Dozenten Euch auch Unterrichtsstunden, wie z.B. Wie man das Fingeralphabet leichter nutzen kann oder Hintergründe der idiomatischen Gebärden und Idiome, Dialekte, Namensgebärden, Poesie/Gedichte, Rollenwechsel, Konversationskurs u.v.m
</p>
<p>
Abends nach dem gemeinsamen Essen, öffnen wir das eine oder andere Fläschchen bei einem geselligen Abend und/oder schauen uns Spielfilme von/mit Gehörlosen (u.a. mit Untertitel) an, wie z.B. „Gehörlos so, was!?“ (Komödie mit S. Genc & M. Lipski) oder „Die DDDR - die gehörlose Deutsche Demokratische Republik“ (Dokumentation über die DDR-Zeit der Gehörlosen) oder schauen uns verschiedene Gebärdensprachpoesien bis hin zu Sketchen an. Kurz: Filme die GENUG neues Wissen, wie Fragen aufwirbeln werden und die wir in aller Ruhe ausdiskutieren können.
</p>
</div>
<br />
<a class="show_hide" href="#" rel="#slidingDiv_4">4. Die Bauernhaus</a>
<div id="slidingDiv_4" class="toggleDiv" style="display: none;">hier kommt dein Text rein</div>
<br />
<a class="show_hide" href="#" rel="#slidingDiv_5">5. Die Bedingungen</a>
<div id="slidingDiv_5" class="toggleDiv" style="display: none;">hier kommt dein Text rein</div>
<br />
<a class="show_hide" href="#" rel="#slidingDiv_6">6. Die Daten</a>
<div id="slidingDiv_6" class="toggleDiv" style="display: none;">hier kommt dein Text rein</div>
<script>
$(document).ready(function(){
$('.show_hide').showHide({
speed: 400, // speed you want the toggle to happen
});
});
</script>

Alles anzeigen

Der Anfang ist gemacht den Rest bekommst auch selbst hin - hab nur den Text übernommen ohne HTML Sonderzeichen zu erstellen!

zwoemti · 16. April 2013

zwoemti · 16. April 2013

ach ja ist von hier

jQuery Show / Hide Plugin | Papermashup.com

Gast#gibsnichtmehr#910 · 16. April 2013

zwoemti
SuperKlasse!
Ich arbeite mit einigen Softwarepaketen. So eine Unterstützung wie hier, speziell deine, habe ich in meiner Laufbahn noch nicht erlebt.
DANKE ( ich lerne ja bei allen Posts mit)

Marcolino · 16. April 2013

WOW!!!
GRAZIE ZWOEMTI!!
Das ist es!!!

Labelle: Du hast ja Recht, ich schreibe gerne
Das Problem ist, dass es denen gefallen hat.
Soll "vorläufig" so bleiben und mit der Zeit schrumpfen
> "Software-Paketen"? Zum Beispiel?

Labelle 2: Ja, Zwoemti & seine Admins/Moderatoren
sind wirklich spitze! Einigen von uns haben die schon
im alten Forum mächtig unter die Arme gegriffen:

OLD FORUM

Euch allen nochmal lieben Dank für die
tat- und schreib-kräftige Unterstützung!

Dann mal ran ans Studieren & Probieren

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Suche "Text Toggle Slider" - Text klappt auf/zu - "Weiterlesen" Effekt

Teilen

Tags