:: ClanSphere :: Free OpenSource Clan CMS :: - Forum

Antworten: 25

Seite [1] 2 >

Rouven89

Going for pro

Beiträge: 539

# Thema - 22.08.2011 um 01:52 Uhr

hey… habe schon diverse seiten im internet durchsucht und nichts passendes gefunden… außer paar css befehle die eig nur für den internet explorer geeignet sind, um einen scrollbalken farblich zu verändern… ich möchte auf meiner seite die spielerfotos in einer scrollbar anzeigen lassen, läuft auch alles soweit nur würde ich den scrollbalken farblich gerne anpassen und zwar so das es für jeden browser dargestellt werden kann…

es wäre suuuper nett wenn jemand mir sagen könnte wie man das umsetzt… oder wie man einen eigenen scrollbalken entwickeln kann, sofern überhaupt möglich(es geht mir nicht um den scrollbalken auf der rechten seite)

hier der link (mittig von der page) : http://rouv3n.ro.funpic.de/scwiesens/herren.php?mod=static&action=view&id=45

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Zuletzt editiert von Yeee am 22.08.2011 um 01:54 Uhr (1x Editiert)

Inaktiv

SlayR

Geekboy

Herkunft: Calbe (Saale)
Beiträge: 1133

# Antwort: 1 - 22.08.2011 um 06:18 Uhr

Sieh Dir mal dieses jquery Plugin genauer an: http://www.myjqueryplugins.com/jScrollbar

------------------

--- CLANSPHERE ---
Professional clan care starts here

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 2 - 22.08.2011 um 11:08 Uhr

hey…sauber genau das ist es was ich gesucht habe - danke

noch eine frage hätte ich da…vlt weißt du das ja so auf anhieb.. bei einer normalen scrollbar kann man ja mit overflow-x und y: die richtung bestimmen wo die scrollbar hinscrollen soll (vertical oder horizontal) …kann man das bei jquery auch mit so einem einfachen befehl machen? habe die css shcon durchsucht.. da wird ja overflow versteckt damit die eigene scrollbar verwendet werden kann.. und in dem code [http://www.myjqueryplugins.com/jScrollbar/demo/viewJS finde ich auch nichts was die position der scrollbar definiert…

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Inaktiv

SCHIRI

Weltmeister

Herkunft: Hamburg
Beiträge: 5299

# Antwort: 3 - 22.08.2011 um 11:15 Uhr

Der Javascript-Code sieht aus, als wäre das erstmal nur eine vertikale Scrollbar.

------------------
www.laszlokorte.de

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 4 - 22.08.2011 um 11:25 Uhr

ah hab genau das gefunden was ich brauche.. http://jqueryui.com/demos/slider/#side-scroll

edit:

hey habe das jetzt soweit angepasst.. nur irgendwie funktioniert das nicht mit csp? weil wenn ich das so online stelle funktioniert die scrollbar : siehe hier: http://rouv3n.ro.funpic.de/scwiesens/templates/test/herren.htm

und wenn ich das einbinden will dann wird die scrollbar nicht angezeigt siehe hieR: http://rouv3n.ro.funpic.de/scwiesens/herren.php?mod=static&action=view&id=41

jemand eine idee woran das liegen könnte? hatte das problem früher schonmal …deswegen hatte ich die jquery seite wieder verworfen..aber wäre echt geil wenn das funktionieren würde..da ich noch paar sachen davon einbauen wollte

kann das sein das irgendein script das neue jquery script aufhebt?

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Zuletzt editiert von Yeee am 22.08.2011 um 12:23 Uhr (1x Editiert)

Inaktiv

SlayR

Geekboy

Herkunft: Calbe (Saale)
Beiträge: 1133

# Antwort: 5 - 22.08.2011 um 13:16 Uhr

Meines wissens nach hat Clansphere ein Problem mit jquery-ui. "Normale" jquery plugins laufen sauber, jedoch lässt sich ui aus irgendeinem Grund nicht zur Zusammenarbeit überreden.

------------------

--- CLANSPHERE ---
Professional clan care starts here

Inaktiv

SCHIRI

Weltmeister

Herkunft: Hamburg
Beiträge: 5299

# Antwort: 6 - 22.08.2011 um 13:21 Uhr

wieso das? sollte eigentlich funktionieren. Es muss nur darauf geachtet werden, jQueryUI nach jQuery einzubinden und dass jQueryUI nicht unbedingt auf Ajax ausgelegt ist und da evtl etwas getrickst werden muss

------------------
www.laszlokorte.de

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 7 - 22.08.2011 um 13:28 Uhr

ähm.. wie muss man denn JQueryUI nach Jquery einbinden .. wäre echt geil wenn das möglich wäre..da ich mich schonmal mit der seite auseinandergesetzt habe..nur leider hatte ich damals das selbe problem..

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Inaktiv

palle

Supporter

Beiträge: 3073

# Antwort: 8 - 22.08.2011 um 13:31 Uhr

{func:javascript}
Plugins etc

------------------

I like the part where it says 'nyan'

Inaktiv

SCHIRI

Weltmeister

Herkunft: Hamburg
Beiträge: 5299

# Antwort: 9 - 22.08.2011 um 13:46 Uhr

standardmäßig wird jQuery von clansphere direkt vor dem </body>-Tag eingefügt. Wie Palle aber schon geschrieben hat, kannst du mit diesem Platzhalter selbst bestimmen, wo jQuery eingebunden werden soll und muss dann eben alles andere danach einbinden.

------------------
www.laszlokorte.de

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 10 - 22.08.2011 um 14:14 Uhr

hey…ich weiß nicht ob ich das richtig mit dem platzhalter verstanden habe…aber ich habe folgenden code jetzt in den body eingefügt

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

1. / 2. / ...

{func:javascript}
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryscroll.js"></script>
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<style>
    .scroll-pane { overflow: auto; width: 980px; float:left; }
    .scroll-content { width: 2870px; float: left;background-color:#fff; }
    .scroll-content-item { width: 120px; height: 170px; float: left; margin-left: 10px; font-size: 1.0em;  text-align: center; }
    * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
    .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
    .scroll-bar-wrap .ui-slider { background: none; border:0; height: 1.4em; margin: 0 auto;  }
    .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
    .scroll-bar-wrap .ui-slider-handle { top:.4em; height: 0.5em;}
    .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
</style>


<div class="scroll-pane">
    <div class="scroll-content">
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Jürgen Schlüter" title="Jürgen Schlüter"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Edzard Djürken" title="Edzard Djürken"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Dennis Schilling" title="Dennis Schilling"/></div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Mathias Berends" title="Mathias Berends"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Dieter Claver" title="Dieter Claver" /> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Jan-Niklas" title="Jan-Niklas Mühlenbrock"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Jörg Schoon" title="Jörg Schoon"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Renko Wowrek" title="Renko Wowrek"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Marco Harms" title="Marco Harms"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Tobias Janssen" title="Tobias Janssen"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Christoph " title="Christoph Willms"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Hendrik Andreas" title="Hendrik Andreas"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Benjamin Schmidt" title="Benjamin Schmidt"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Stefan Schilling" title="Stefan Schilling"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Rouven Pajewski" title="Rouven Pajewski"/></div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Uwe Janssen" title="Uwe Janssen"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Marc Schäfer" title="Marc Schäfer"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Mark Woltzen" title="Mark Woltzen"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Eike Schweers" title="Eike Schweers"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Eike Stöter" title="Eike Stöter"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Volker Posselt" title="Volker Posselt"/> </div>
        <div class="scroll-content-item ">
        <img src="spieler/nopic.png" alt="Simon Janssen" title="Simon Janssen"/>  </div>
    </div>
    <div class="scroll-bar-wrap ui-widget-content ">
        <div class="scroll-bar"></div>
    </div>
</div>

so funktioniert es aber leider nicht…liegt bestimmt daran das es so nicht gemeint war oder?
ich habe auch noch ausprobiert das :

1.
2.
3.

1. / 2. / ...

vor den shcließenden body tag zu schreiben
die div-container ganz normal an die stelle wo es hin soll und die css und style sachen in den head… geht ebenfalls nicht…

hm

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Inaktiv

SCHIRI

Weltmeister

Herkunft: Hamburg
Beiträge: 5299

# Antwort: 11 - 22.08.2011 um 14:26 Uhr

das
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
musst du weglassen, weil das von clansphere durch den {func:javascript}-Platzhalter ja schon eingefügt wird.

Das CSS sollte natürlich wieder in den Head der Seite oder in eine externe CSS-Datei, die dann im Head einbebunden wird.
Der HTML-Code muss natürlich auch an die Stell, wo er hin soll.

Du muss also nur das hier:

{func:javascript}
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryscroll.js"></script>

vor den </body>-Tag schreiben.

------------------
www.laszlokorte.de

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 12 - 22.08.2011 um 14:33 Uhr

danke schonmal

also auf meinem iphone wird es jetzt angezeigt… komischerweise auf meinem laptop noch nicht..habe auch schon den cache geleert… wird es bei euch schon angezeigt?

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Zuletzt editiert von Yeee am 22.08.2011 um 14:47 Uhr (3x Editiert)

Inaktiv

gent0s

Try to beat me

Beiträge: 138

# Antwort: 13 - 22.08.2011 um 14:57 Uhr

also bei mir wird der scrollbar eingezeigt

------------------

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 14 - 22.08.2011 um 15:00 Uhr

Also auf deiner Funpic-Testseite sehe ich das neue Feature.

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 15 - 22.08.2011 um 15:09 Uhr

http://rouv3n.ro.funpic.de/scwiesens/herren.php?mod=static&action=view&id=41 hier das ist der link..da müsste es angezeigt werden.. aufm iphone läufts 1a ..da wird der scrollbalken dunkelgrau /grau angezeigt so wie hier auf der testseite: http://rouv3n.ro.funpic.de/scwiesens/templates/test/herren.htm und auf meinem lappi noch nicht..

@ tress und gent0s .. wird bei euch der scrollbalken auf dem ersten link auch so dargestellt wie bei dem 2. link?

edit:
seh ich das richtig das jetzt eig "nur" die css datei nicht richtig gelesen wird? also zumindestens nicht richtig von allen endgeräten.. da es auf meinem handy läuft und auf meinem lappi zwar auch aber nicht mit dem entsprechenden design...

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Zuletzt editiert von Yeee am 22.08.2011 um 15:14 Uhr (1x Editiert)

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 16 - 22.08.2011 um 15:18 Uhr

Ja fast. Es ist alles gleich, bis auf die Farbe, wenn man den Balken scrollt und los lässt.
Dann ist bei Link 1 der Button-BG hell grau mit weisser border
und bei Link 2 der BG Waldgrün mit blauer border.

------------------

www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 22.08.2011 um 15:19 Uhr (2x Editiert)

Inaktiv

gent0s

Try to beat me

Beiträge: 138

# Antwort: 17 - 22.08.2011 um 15:19 Uhr

bei mir wird der scrollbalken nur auf dem link angezeigt: http://rouv3n.ro.funpic.de/scwiesens/herren.php?mod=static&action=view&id=41 bei deiner testseite nicht

------------------

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 18 - 22.08.2011 um 15:20 Uhr

Auch mit Strg+F5 nicht ?
Welcher Browser (Ich FF6) ?

Habe jetzt nochmal mit den anderen aktuellen Browsern (Safari, Chrome, Opere, IE) geguckt.
Es geht überall !!!

------------------

www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 22.08.2011 um 15:22 Uhr (1x Editiert)

Inaktiv

Rouven89
Thread-Ersteller

Going for pro

Beiträge: 539

# Antwort: 19 - 22.08.2011 um 15:43 Uhr

hmm gut oder auch nicht gut… komisch..warum das teilweise angezeigt wird und teilweise nicht…

perfekt! so muss es auch sein..da ich den link1 nochmal verändert habe..aber wieso mein browser (safari) das nicht anzeigen will versteh ich nicht:/

edit:es geht nun

danke an alle!! echt top!

------------------
http://sc-wiesens.de/

Der Sport Club "13 Eichen" Wiesens

Zuletzt editiert von Yeee am 22.08.2011 um 15:50 Uhr (4x Editiert)

Inaktiv

Koffein

Going for pro

Beiträge: 536

# Antwort: 20 - 27.08.2011 um 18:07 Uhr

Ich würde den Scrollbalken in meiner Shoutbox gerne verändern. Hab dazu mal das Plugin was SlayR gepostet hat versucht.
http://www.myjqueryplugins.com/jScrollbar
Habe die Daten wie folgt auf meiner Page hochgeladen:
/templates/ckdesign/JScrollbar.jquery.css
/templates/jquerey/ALLE.js Dateien
/templates/grafiken/scrollbar/ALLE relevanten Bilder

Habe die CSS Datei angepasst, damit der neue Bilderpfad passt.
Habe die javascripte wie folgt in der index.htm geladen (im head):
...mehr

1.
2.
3.
4.
5.
6.

1. / 2. / ...

     {func:javascript}
    <script type="text/javascript" src="../../mods/members/js/animatedcollapse.js"></script>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery/jquery-mousewheel.js"></script>
    <script type="text/javascript" src="jquery/jScrollbar.jquery.js"></script>

Jetzt hab ich aber Probleme die Scrollbar auch richtig in die Shoutbox einzubinden, kann mir da jemand helfen?
Hier die navlist.tpl der Shoutbox, ich denke es muss ja irgendwo im oberen Block aufgerufen werden, weil diese ja die Einträge anzeigt. Habe zwar schon versucht per <div id="..." das ganze umzusetzten sowie es in der Beschreibung steht, funktioniert aber nicht so wie ich es will...

mehr...

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

1. / 2. / ...

<div style="overflow:auto; height:{height:shoutbox}px;padding-top:0px" id="cs_shoutbox_navlist2">
{loop:shoutbox}
  <div style="text-align:right; color:#{color:shoutbox};">{shoutbox:shoutbox_name} <font size="1">({shoutbox:shoutbox_date})</font></div>
  <div style="padding-right:3px;padding-top:2px;text-align:right">{shoutbox:shoutbox_text}</div>
  <hr style="width:100%" />
  <br />
  {stop:shoutbox}
</div>
<br />

<form method="post" id="shout_navlist" name="shout_navlist" action="{form:url}">
<div style="display:none;"><input type="hidden" name="cs_xsrf_key" value="39d378b4f57498ab73c844705b0caae3" /></div>

<div style="display:none;"><input type="hidden" name="cs_xsrf_key" value="a8f41ef4340e63a7e9e77c8f97d91ff0" /></div>

<div style="display:none;"><input type="hidden" name="cs_xsrf_key" value="819f41b6f2fded1ca0d07e939488bc4e" /></div>

<fieldset style="border: 0; padding: 0;text-align:right">
  <div style="text-align:right"><input style="text-align:right" type="text" name="sh_nick" value="{form:nick}" onfocus="if(this.value=='Nick') this.value=''" onblur="if(this.value=='')this.value='Nick'" maxlength="40" size="15" /> {characters_left:shoutbox}<br />
  <textarea  name="sh_text" id="sh_text" cols="15" rows="0" class="form" maxlength="500" onkeydown="CheckLen(this)" onkeyup="CheckLen(this)" onfocus="CheckLen(this)"  wrap="VIRTUAL"  onchange="CheckLen(this)">

{if:captcha}
<input type="text" name="captcha" value="" maxlength="3" size="3" /> {captcha:img}
{stop:captcha}<br /> </div>
<div style="text-align:center"><input type="submit" name="submit" value="Speichern" /> </div>
<input type="hidden" name="uri" value="{form:uri}" />
</fieldset>
</form>
<br />
{abcode:smileys}

Musste das son bisschen komisch darstellen, weil das Forum den Php Code umwandeln wollte und hier eine Eingabe erfolgt wäre

Wäre nett wenn sich das mal jemand anschauen könnte und mir sagen kann wie ich das machen muss.

Zuletzt editiert von Koffein am 27.08.2011 um 18:09 Uhr (1x Editiert)

Inaktiv

Antworten: 25

Seite [1] 2 >

Sie müssen sich registrieren, um zu antworten.

Forum - Thema
Nächstes Thema ->
Forum -> Support -> Allgemein (Support) -> eigenen scrollbalken erstellen