slider noob: Zahlen durch bullets ersetzen

[iuna123]

Liebe Contao-community,

Ich habe den noob-slider auf einer Seite eingesetzt und das funktioniert tadellos.
Die play und stop Funktion hab ich mittels CSS mit Buttons ersetzt.

Jetzt würde ich noch gerne die Zahlen (zum Blättern) mit Bullets ersetzen.
Da steh ich aber leider an. Mittels CSS kann ich das in dem Fall glaub ich nicht ändern

Das ganze steht in einem <span>
<span class="ce_noobSlide_button ce_noobSlide_controls> Zahl </span>
Wenn ich die Zahl mittels display: none ausblenden würde, dann würde man auch kein Hintergrundbild sehen.
Hat jemand eine Idee für mich?

zu sehen unter
www.danielakoller.at/pool/

Vielen Dank schon mal im voraus
Liebe Grüße
Daniela

[cliffparnitzky]

Moin Daniela,

aktuell sieht man dort ja schon Bullets, aber die sind offenbar im Bild.

Du kannst die <span> Elemente aber super verwenden. Die Schrift bekommst du weg mittels

font-size: 0;

oder

text-indent: -100000px;

Dann kannst du deine Bullets als Hintergrundgrafik drauf packen und dem .active sogar ein separates Bild geben.

Grüße, Cliff

[iuna123]

Hallo Cliffen ;o)
Auf die Idee bin ich nicht gekommen! Super - werd ich gleich mal ausprobieren ;o)
Und ja - die bullets sind einstweilen auf dem Bild drauf ;o)

Vielen Dank!
Liebe Grüße
Daniela

[iuna123]

Ahhh - so genial ;o))
funktioniert bestens!
Vielen vielen Dank!

Eines verstehe ich noch nicht - vielleicht hast du da auch eine Idee:
beim letzten Bild verschwinden die bullets.
hab aber keine ahnung warum

Liebe Grüße
Daniela

[cliffparnitzky]

Ahhh - so genial ;o))
funktioniert bestens!
Vielen vielen Dank!

Super gern geschehen.

Eines verstehe ich noch nicht - vielleicht hast du da auch eine Idee:
beim letzten Bild verschwinden die bullets.
hab aber keine ahnung warum

Tja, das wiess ich leider auch nicht warum das passiert.
Sieht mir irgendwie nach dem Effekt aus, der da was macht.

Kenne den noob slider auch nicht. Weiß deshalb nicht was man da so einstellen kann.

Mit Firebug betrachtet kann ich jedenfalls nicht erkennen, wann die Bullets ausgeblendet werden.

Sorry.

Grüße, Cliff

[iuna123]

Hallo Cliff,
danke trotzdem fürs nachschaun. Ich seh mit dem Firebug auch nichts.
Aber vielleicht find ich was bei den Einstellunge (könnte sein, dass ich da was übersehen hab)
Ansonsten geh ich davon aus das das irgendwie mit dem script zusammenhängt!
Danke trotzdem nochmal!
Liebe Grüße
Daniela

[cliffparnitzky]

Ja, und wenn du es nicht weg bekommst probier den [coin-slider] nochmal aus.

Der hat fast die gleichen Features (ohne Play und Pause) ... sieht dem Rest aber absolut ähnlich.

Grüße, Cliff

[Andreas]

text-indent: -100000px;

Ich meine das ginge nur bis 32768. Wenn man sich die Zahl nicht merken kann dürften 32000 auch genügen.

[iuna123]

Ja, und wenn du es nicht weg bekommst probier den [coin-slider] nochmal aus.

Der hat fast die gleichen Features (ohne Play und Pause) ... sieht dem Rest aber absolut ähnlich.

Grüße, Cliff

Play und Pause ist aber erwünscht
Ich teste noch ein bisschen ;o)

EDIT: testen erfolglos abgeschlossen. Vielleicht doch im Script? Da kenn ich mich aber zuwenig aus.

[Andreas]

Grad mal in 2.11.2 getestet. Ich sehe aber alle SPANs mit den Zahlen. Habe allerdings auch nur 2. Hast du mal einen Link?

[jubel]

Eines verstehe ich noch nicht - vielleicht hast du da auch eine Idee:
beim letzten Bild verschwinden die bullets.
hab aber keine ahnung warum

Also ich sehe bei dir zweimal drei Bullets, leicht versetzt übereinander und drei Slider.
ss_slider.jpg
Die Bullets laufen sauber von 1 bis 3 durch.

Viellicht hilft dir das ja weiter...

[iuna123]

@andreas: was für einen link?
zu meinem slider?
www.danielakoller.at/pool/

@jubel:
ja es kommen alle drei bilder - ABER beim letzten gibt es kein bullet. Die versetzten sind, weil auf dem bild selbst dise bullets noch drinnen sind (kommen natürlich weg) - bei bild 1 und 2 sieht man die wirklichen bullets, die ich eingebaut habe - aber wenn bild 3 kommt ist es weg

ich werd jetzt mal ein 4tes Bild einbauen um zu schaun, ob es immer beim letzten ist (was ich stark vermute)

Liebe Grüße
Daniela

[jubel]

bei bild 1 und 2 sieht man die wirklichen bullets, die ich eingebaut habe - aber wenn bild 3 kommt ist es weg

Ich sehe beim dritten während des Wechsels auch kurz den vollen Bullet, nur verschwindet er danach, wenn das Bild voll da ist, wieder auf den zweiten. Sieht merkwürdig aus.

[iuna123]

So hab jetzt mal ein viertes Bild dazu gegeben - das Verhalten bleibt gleich - ab 3 sind die bullets nicht mehr zu sehen! seltsam oder?

[Andreas]

Sorry, du hattest ja schon einen Link

Setz mal den z-index für .control_buttons höher, dann geht's. Auf jeden Fall sind die SPANs im Quelltext immer alle vorhanden.

[iuna123]

Hallo Andreas,
das war es ;o) - hab den buttons einen höheren gegeben - was aber falsch war. Eh klar - eigentlich
Vielen Dank!!!!!!!!!
Liebe Grüße
Daniela

[Andreas]

Was lange währt...

Ja, ich hatte den z-index auf den Buttons gesehen, der dürfte aber keine Auswirkung haben, da die Buttons ja nicht absolut positioniert sind und zudem display inline sind.

[iuna123]

Ich war ursprünglich am richtigen weg - aber dann doch am falschen ort ;o)
Danke nochmals! ;o)

[iuna123]

Also bei meinen Browsern am PC sind die Seitenzahlen schön verschwunden. Allerdings nicht am MAC mit Safari.
Kann das jemand nachvollziehen? Und eventuell eine Idee, wie ich die wegbekomme????

Wäre über einen Tipp sehr dankbar!
Hab sowohl font-size: 0 und text-indent angegeben.

Liebe Grüße
Daniela

[Andreas]

Habe leider keinen Mac, aber vielleicht hilft ja noch color:transparent; oder padding-top:100px; mit ner festen Höhe und overflow:hidden evtl. in Verbindung mit display:block; und float:left;

Wundert mich allerdings, dass text-indent nicht funzt. font-size könnt ich mir noch vorstellen, dass es gesperrt ist durch die Mindestschriftgrößeneinstellung.

[jubel]

Hab auch keinen Mac, aber am iPad sieht es richtig aus!

[Karl S.]

Hallo iuna123,

laut dieser Quelle http://www.thestyleworks.de/download...llreferenz.pdf ist text-indent nur auf Block-Level-Elemente, Inline-Blocks und Tabellenzellen anwendbar, also nicht auf einen span... evtl. hilft folgende Anweisung:

span.ce_noobSlide_button.ce_noobSlide_controls {
	display: inline-block;
	text-indent: -9999px;
}

Safari boykottiert meines Wissens die Schriftgroße 0px


Viele Grüße


Karl

[Andreas]

...text-indent nur auf Block-Level-Elemente...

Stimmt, macht ja auch Sinn, da es für Absätze gedacht ist. Hier noch der offizielle Link http://www.w3.org/TR/CSS2/text.html#indentation-prop

[iuna123]

Vielen Dank euch! ;o)
kann es leider erst am MOntag testen - da ich selber auch keinen Mac habe ;o)
ich sag euch Bescheid!!! ;o)
Liebe Grüße
Daniela

[iuna123]

das war des rätsels lösung ;o)))
vielen Dank ;o)))