phpBB.de

Verfasst: **18.03.2014 22:56**

Hallo Freunde,

ich habe schon überall bei Google gesucht, aber leider nichts gefunden.
Habe mir via CSS ein schönes Drup-Down-Menu für meine Smilies zugelegt. Das Problem ist jedoch, dass der Scrollbalken fehlt. Siehe den Screenhot:
http://www.kurzehosenforum.com/scroll.png

Ich habe sehr viele Smilies und der Platz würde nie für eine Seite reichen, ich brauche also unbedingt einen Scroll-Balken.
Hier der Quelltext in der /styles/prosilver/posting_editor:

Code: Alles auswählen

<center>
<div id="menu">
<ul>
      <li class="topmenu">
        <a href="">Smilies aufklappen</a>
        <ul>
          <li class="submenu">


<!-- IF S_SMILIES_ALLOWED and .smiley -->
             <!-- BEGIN smiley -->
                <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
             <!-- END smiley -->
          <!-- ENDIF -->
          <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
             <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
          <!-- ENDIF -->

          </li>
        </ul>
      </li>

</ul>
  </div>
</center>

und der CSS-Code in der colours.css:

Code: Alles auswählen

#menu {
  font-size:9px;
  position:static;
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  width:170px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  border:1px solid #77d7ff;
  border-collapse:collapse;
  color:#008bed;
  font-weight:bold;
  text-decoration:none;
  background-color:#008bed;
  margin:0;
}

.submenu a{
  font-size:9px;
  width:170px;
  position:relative;
  clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#99d4f3 !important;
}

.topmenu:hover ul {
  display:block;
  z-index:500;
}

wäre echt super, wenn ihr mir weiterhelfen könntet.
Vielen Dank für eure Bemühungen!

Verfasst: **19.03.2014 01:38**

Hi,

finde im CSS: .submenu a

Ergänze den Selektor um folgende Eigenchaften:

Code: Alles auswählen

max-height: 340px;
overflow-y: scroll;

Oder für Aufgeweckte: http://css-tricks.com/examples/LongDropdowns/

LG

Verfasst: **19.03.2014 13:48**

HabNurNeFrage hat geschrieben:Oder für Aufgeweckte: http://css-tricks.com/examples/LongDropdowns/

WOW!

Das ist ja sogar noch viel besser.
Was für einen Code muss ich da im CSS eingeben, dass es so aussieht wie in dem Menu 1? Also so, dass er schnell scrollt..
Stand da ja leider nicht.

Danke!

Verfasst: **19.03.2014 17:30**

Hallo
Eine Anleitung dazu findest du hier.

Verfasst: **19.03.2014 18:49**

Kirk hat geschrieben:Hallo
Eine Anleitung dazu findest du hier.

Danke!

Leider ist die Beschreibung in dem Link sehr schlecht. Noch dazu auf Englisch.
So wie ich das sehe, handelt es sich um ein Java-Script. In welche Datei muss ich den Java-Code denn einfügen? Ich gehe mal davon aus, in der overall_header? Habe ich gemacht. Geht aber leider nicht.

Die CSS-Datei scheint ja nicht wichtig zu sein. Denn dort geht es nur um die Grafik. Und die habe ich ja bereits definiert. Und die 3. Datei bezieht sich lediglich auf den HTML-Quellcode für das Menu. Auch das habe ich ja bereits.

Verfasst: **19.03.2014 19:02**

Du brauchst alles oder musst deinen Code 1:1 anpassen, sonst läuft das natürlich nicht. Das CSS macht viel mehr, als nur ein paar Farben ergänzen. Vielleicht solltest du mal anfangen, ein paar Grundlagen in CSS und HTML zu lernen, als dir ständig alles vorkauen zu lassen.

Verfasst: **19.03.2014 19:26**

Hi.

alles, also das jQuery JavaScript und das CSS und das HTML funktionieren nur zusammen.
Du müsstest Dein CSS wieder ausbauen und das CSS von dort aus der Anleitung Deinen Bedürfnisen anpassen.
Die beiden Blöcke Level one und Level Two von hier http://css-tricks.com/examples/LongDrop ... /style.css sind nötig.
Dein jetziges HTML im Smiley-Menü passt auch nicht dazu.

Erforderliche Schritte:

1) jQuery erstmal grundsätzlich im Page-Header verfügbar machen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2) zusätzliches jQ (egal wo, ggf. auch im Header) einbauen, also das, was Du schon aus der Anleitung (dort im dunklen Kasten) übernommen hast:

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[
 hier der jQ Code aus der Anleitung
//]]>
</script>

3) CSS von hier einbinden http://css-tricks.com/examples/LongDrop ... /style.css (nur das nach LEVEL ONE bis zum Ende)

4) Dein Smiley-Menü-HTML anpassen. Hier kann ich nur raten und vermute, dass es so sein könnte:
Finde:

Code: Alles auswählen

<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>

Umschließe das wie folgt: <li> Fund hier </li>

Dann noch so lange ausprobieren, biss das gewünschte Ergebnis erzielt wird.

Tipp: Ein Projekt so lange verfolgen, bis es ziemlich gut umgesetzt ist und nicht viele kleine Baustellen ins Template einbauen

LG

Verfasst: **20.03.2014 21:47**

Danke für die ausführliche Anleitung!

Hab mich sehr gefreut.
Doch leider scheint da irgendwie der Wurm drin zu sein. Funktioniert einfach nicht. Obwohl ich es genau 1:1 so gemacht habe wie beschrieben.
Dadurch, dass es sowieso nicht funktionierte habe ich den beigelegten CSS-Code NICHT mit kopiert, sondern stattdessen den Code genommen, der auch für mein Menu vorgesehen ist (Name: "Menu").
Selbstverständlich habe ich dann auch den Namen in der Java-Script-Datei auf "Menu" geändert. Original in der Beschreibung war der Name des Menus "Dropdown".
Aber wie gesagt, auch wenn ich es 1:1 so mache wie beschrieben, klappt es nicht.
In der CSS wird ja sowieso nur das Design angegeben. Der eigentliche Effekt spielt sich doch in der Java-Script-Datei ab. Um diese Datei geht es ja eigentlich hauptsächlich.
Hier sind alle 3 Codes, vielleicht könntest mal kurz drüber gehen und mir sagen, ob Dir was auffällt.. Dankeschön!

html (Code in der posting_editor.html):

Code: Alles auswählen

<script type="text/javascript">
// <![CDATA[
	onload_functions.push('apply_onkeypress_event()');

// ]]>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>
	<script type="text/javascript" language="javascript" src="/jquery.dropdown.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


</script>

<div id="menu">
<ul>
      <li class="topmenu">
        <a href="">Smilies aufklappen</a>
        <ul>
          <li class="submenu">

          <!-- IF S_SMILIES_ALLOWED and .smiley -->
             <!-- BEGIN smiley -->
                <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
             <!-- END smiley -->
          <!-- ENDIF -->
          <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
             <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
          <!-- ENDIF -->


          </li>
        </ul>

  </div>

CSS in der colours.css:

Code: Alles auswählen

#menu {
  font-size:9px;
  position:static;
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  width:170px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  border:1px solid #008bed;
  border-collapse:collapse;
  font-weight:bold;
  text-decoration:none;
  background-color:transparent;
  margin:0;
}

.submenu a{
  font-size:9px;
  width:170px;
  position:static;
  clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#99d4f3 !important;
}

.topmenu:hover ul {
  display:block;
  z-index:500;
}

und die Java-Script-Datei. Hier habe ich einfach das "dropdown" gegen "menu" ausgetauscht:

Code: Alles auswählen

var maxHeight = 400;

$(function(){

    $(".menu > li").hover(function() {

         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });

    // Add down arrow only to menu items with submenus
    $(".menu > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });


});

Verfasst: **20.03.2014 22:28**

Hi,

um das umzusetzen, muss alles genau stimmen.
CSS bestimmt nicht nur die Optik, sondern in großem Maße auch das Verhalten.

Ein besonderes Augenmerk muss auf die Arten und Verschachtelung der HTML Elemente, deren Klassen und/oder ID Bezeichnungen gelegt werden.
Andernfalls weiß das Javascript nicht, wo es zugreifen, ändern und animieren soll.

Wenn CSS, JavaScript und HTML nicht genau aufeinder abgestimmt sind, passiert bestenfalls nur nicht was man erwartet, meist funktioniert aber gar nichts mehr.

LG

Verfasst: **20.03.2014 23:21**

Ok, danke!
Ich hab dann Deinen 2. Vorschlag umgesetzt und dies hier eingefügt:

Code: Alles auswählen

  max-height: 340px;
  overflow-y: scroll;

Leider klappt auch das nicht. Denn jetzt schaut es so aus- Klick:
http://www.kurzehosenforum.com/smilie-sc.png

Ist das mit dem Smilie-Code etwa nicht kompatibel? :

Code: Alles auswählen

    <div id="menu">
    <ul>
          <li class="topmenu">
            <a href="">Smilies aufklappen</a>
            <ul>
              <li class="submenu">

<!-- IF S_SMILIES_ALLOWED and .smiley -->
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->
              <!-- ENDIF -->
              <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
                 <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
              <!-- ENDIF -->


              </li>
            </ul>

      </div>

phpBB.de

Wie kann ich einen Scroll-Balken einbauen?

Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?

Re: Wie kann ich einen Scroll-Balken einbauen?