#1 Forum-Kategorien ein-und ausblenden von Wolfgang 30.09.2012 18:45

avatar

Hallo Florian,
ich habe die Funktion zum ein-und ausblenden der Foren-Kategorien vom Buiseness-Template übernommen und habe da mehrere Fragen.
1. Ist es möglich im unteren Script die Wörter "Zuklappen" und "Aufklappen" (rot gekennzeichnet) links neben der Grafik einzubauen?
Wenn man es im Script nur links davor schreibt wird nichts angezeigt.

Das Script:


<script type="text/javascript" language="javascript">
$plus = $("Aufklappen <img title='Hier können Sie die Liste Einblenden' style='position:absolute;right:20px;margin-top:2px;loat:right;width:25px;' class='toggle_img expand' src='http://files.homepagemodules.de/b2001010/a_259.png' />");
$minus = $("Zuklappen <img title='Hier können Sie die Liste Ausblenden' style='position:absolute;right:20px;margin-top:2px;float:right;width:25px;' class='toggle_img contract' src='http://files.homepagemodules.de/b2001010/a_970_7d763b7a.png' />");
$('.main').find('.boxheader').css('cursor','pointer');
$('.main').find('.cat').find('.boxheader').prepend($minus.clone());
$('.main').find('.cat').find('.boxheader').click(function(){$(this).parent().find('.boxcontent').toggle(); switchToggler($(this));});
var hidden_cats;
hidden_cats = xGetCookie('cats_h') ? xGetCookie('cats_h').split(",") : [];
function switchToggler($el){
$i = $el.find('.toggle_img');
id = $i.closest('.cat').attr('id');
int_id = id.replace('cat_','');
if($i.hasClass('expand')){$i.replaceWith($minus.clone());cur_i = hidden_cats.indexOf(int_id); hidden_cats.splice(cur_i,1); xSetCookie('cats_h',hidden_cats.join(','),365);}
else{$i.replaceWith($plus.clone());if(hidden_cats.indexOf(int_id)==-1){hidden_cats.push(int_id); xSetCookie('cats_h',hidden_cats.join(','),365);}}
}
try{
if(hidden_cats.length){ $.each(hidden_cats,function(){cat = $('#cat_'+this); if(cat.find('.toggle_img').hasClass('contract')){cat.find('.boxheader').trigger('click');}});}
}catch(e){}
</script>


Weist Du hier weiter?

Gruß
Wolfgang

#2 RE: Forum-Kategorien ein-und ausblenden von florian-zier 30.09.2012 19:36

avatar

Hallo Wolfgang, nettes Skript.
Das sieht sehr nach jQuery oder einem ähnlichen Framework aus.
Damit habe ich mich aber noch nicht so intensiv beschäftigt.
Ich habe jetzt auch nicht das ganze Skript Stück für Stück auseinandergenommen, da es sich wohl hauptsächlich um ein Style-Problem handelt.

Witzigerweise hat es beim Ansehen im IE gerade gepasst.
Habe aber IE 10 (wg. Windows 8, ja wirklich bereits verfügbar und legal => Studenten-Vorteil ).
Kann also sein, dass bei dir im IE auch etwas anderes herauskommt.


Auf jeden Fall hast du das Klappmenü ja in einem rechts gefloateten SPAN.
Das SPAN hat die Klasse "iau1" (Achtung, nicht der einzige Container mit dieser Klasse).
Im Quellcode war bei mir der erste Container noch mit der ID "span_233" versehen, aber ich schätze, das ist template-generiert.

Jedenfalls besitzt dieses SPAN, nicht in der Klasse "iau1", sondern in einem Style-Attribut die Eigenschaft "float".
Entferne einmal diese Eigenschaft, dann wird zwar der Container verrutschen, aber das erste "Forum" namens Willkommen verrutscht nicht mehr ein wenig nach links und unter die Überschrifts-Leiste.


Jetzt ist es aber schwierig, schonmal vorab eine präzise Antwort zu geben, wie du den Container dann verrutschen kannst.
Da probierst du am besten erstmal ein paar Varianten durch, falls es dann noch nicht klappt kannst du dann immer noch mit der nächstbestaussehendsten Lösung weiterarbeiten.
Dann habe ich auch wieder eine andere Grundlage mir das nochmals anzusehen.

Sofern du nicht unbedingt die Überschriftzeile aus Überschrifts- und Klapp-Container aufbauen musst, könntest du doch die Überschriftszeile wieder auf eine Zeile reduzieren.
Links machst du dann wieder die Überschrift, rechts im Container kommt dann der Klapp-Schriftzug.
Das könnte man auch ohne zwei Container nebeneinander für die Überschriftszeile erreichen.
Auch wenn dazu nochmals ein Container im Inneren benötigt wird, die Überschriftszeile selbst wäre aber wieder nur eine Zeile über die ganze Breite.

Ich werde versuchen, so ein Beispiel mal im Kleinformat aufzusetzen.
Schau einfach später nochmals im Beitrag vorbei, um dann ein Beispiel dazu im Anhang zu sehen.



Edit:
Habe nun ein Minimal-Beispiel für einen Container über die ganze Breite, welcher einen kleinen Container für den rechts ausgerichteten Schriftzug enthält.
Die IDs habe ich nicht nach Forum-Vorgaben o.ä. vergeben, sondern einfach nur, um deutlich zu machen, welcher Style zu welchem Container gehört.
Füge Teile ggf. also einfach in bestehende oder neue Klassen im Forum ein.


Womöglich funktioniert das Skript aber nur in dieser speziellen Struktur.
Meine eigenen entwickelten Spoiler hatten ja auch eine feste Struktur, um vom Button aus den versteckten Container anzuspringen und ein- bw. auszublenden.
Bist du auf so eine Struktur angewiesen, musst du eben die aktuelle beibehalten.

Jetzt bin ich während der Entwicklung noch auf etwas Interessantes gestoßen.
Es ist zugleich auch die Lösung für deinen bisherigen Ansatz.
Nach dem Floaten sollte man nämlich, sofern nicht mehr nötig, die CSS-Eigenschaft clear anwenden.
Diese gibt an, welcher Float (left, right) aufgehoben werden soll, both hebt alle Float-Eigenschaften auf.
In meinem Beispiel habe ich dafür einfach mal ein SPAN verwendet, auch BRs sind häufig verwendet, aber ein Zeilenumbruch wäre hier wohl etwas unschön.
DIV und beliebige andere Container würden genauso funktionieren, du kannst dich bei Interesse da ja mal noch woanders einlesen.

Deine Lösung wäre jetzt also:
Setze nach deinen beiden SPANs (für Auf- und Zuklappen) nochmals ein HTML-Element, mit der CSS-Eigenschaft clear:both;
Per Klasse oder Style-Attribut, wie du es eben gerne hättest.
Damit der neue Container das Design nicht ggf. behindert, kannst du neben clear auch display:none; angeben, um den Container nicht sichtbar zu machen.
Falls das clear entgegen der Erwartungen durch display außer Kraft gesetzt wird, dann blende das HTML-Element einfach nicht aus, ein leeres SPAN sieht man in der Regel sowieso nicht.

Letztendlich ist dein Layout nur so stark verrutscht, weil die clear-Anweisung nachfolgend gefehlt hat und der folgende Container noch irgendwie von float beeinflusst wurde.
Hast du dies behoben, funktioniert alles so, wie du es bisher vorgesehen hattest.

Viel Spaß!

#3 RE: Forum-Kategorien ein-und ausblenden von Wolfgang 02.10.2012 01:45

avatar

Hallo Florian,
mir ist zuerst garnicht aufgefallen, dass im FF die Titelleisten verschoben wurden sind.
Du hast Recht. Es lag an "float:right". Ich habe es gelöscht!

Ich habe jetzt die Grafik hinter Zuklappen/Aufklappen gesetzt und die Breite der Grafik im Script auf "0.1px" gesetzt.
Da ich die Titelleiste unterteilt, und kein <td>...</td> eingesetzt habe, hat es ziehmlich lange gedauert sie richtig darzustellen.
Setzt man <td>.. </td> ein, funktioniert der Klappmechanismus nicht ohne weiteres.
Eine Kombination aus Span- und Div-Container und eine Anpassung der Breiten, war hier eine Lösung.

****************************************************************************

Ist es möglich,
außer der Kategorie auch zusätzlich die Leiste verschwinden zu lassen?
Man bräuchte dann einen zusätzlichen Button, der die betreffenden Cookies löscht oder alle geschlossenen Kategorien einmal anstöst und sie dadurch öffnet.


Verschiebt man den folgenden Div-Container über die Titelleiste "<div class="boxcontent">" funktioniert das Ausblenden. ......

Hier das vereinfachte HTML-Script zur Übersicht:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Kategorien im Standard-Template ein- und ausblenden</title>

<script type="text/javascript" src="http://107447.homepagemodules.de/script64.js"></script>
<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/...ry-1.4.2.min.js"></script>

</head>
<body>

<table width="10%">
<tr>
<td class="main ">

<div class="box cat" id="cat_100">
<div class="boxcontent">
<div class="boxheader"><a name="category100" class="cat">Kategorie 1</a></div>
<!-- <div class="boxcontent"> -->

Text - Kategorie 1

</div>
</div>
</div></td></tr>
</table>


<table width="10%">
<tr>
<td class="main ">

<div class="box cat" id="cat_200">
<div class="boxheader"><a name="category200" class="cat">Kategorie 2</a></div>
<div class="boxcontent">

Text - Kategorie 2

</div>
</div>
</div>

</td>
</tr>
</table>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type='text/javascript'>
$plus = $("<img style='margin:3px;float:right;' class='toggle_img expand' src='http://files.homepagemodules.de/b2001010/a_489.gif' alt='Ausklappen' title='Ausklappen' />");
$minus = $("<img style='margin:3px;float:right;' class='toggle_img contract' src='http://files.homepagemodules.de/b2001010/a_488.gif' alt='Einklappen' title='Einklappen' />");
$('.main').find('.boxheader').css('cursor','pointer');
$('.main').find('.cat').find('.boxheader').prepend($minus.clone());
$('.main').find('.cat').find('.boxheader').click(function(){$(this).parent().find('.boxcontent').toggle(); switchToggler($(this));});
var hidden_cats;
hidden_cats = xGetCookie('cats_h') ? xGetCookie('cats_h').split(",") : [];
function switchToggler($el){
$i = $el.find('.toggle_img');
id = $i.closest('.cat').attr('id');
int_id = id.replace('cat_','');
if($i.hasClass('expand')){$i.replaceWith($minus.clone());cur_i = hidden_cats.indexOf(int_id); hidden_cats.splice(cur_i,1); xSetCookie('cats_h',hidden_cats.join(','),365);}
else{$i.replaceWith($plus.clone());if(hidden_cats.indexOf(int_id)==-1){hidden_cats.push(int_id); xSetCookie('cats_h',hidden_cats.join(','),365);}}
}
try{
if(hidden_cats.length){ $.each(hidden_cats,function(){cat = $('#cat_'+this); if(cat.find('.toggle_img').hasClass('contract')){cat.find('.boxheader').trigger('click');}});}
}catch(e){}
</script>
 



</body>
</html>




Bis dann
Wolfgang

#4 RE: Forum-Kategorien ein-und ausblenden von florian-zier 02.10.2012 10:14

avatar

Wäre es denn möglich, einfach die Display-Eigenschaft der ganzen Kategorie auf none zu setzen.
Ich habe da jetzt auf die schnelle SPANs folgender Art entdeckt:

1
2
3
 
<span class="box cat" id="cat_42">
...
</span>
 


Genauer kann ich da zur Zeit nicht nachschauen.
Vielleicht klappt es ja aber bereits damit.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz