Archivlink: javarea.de Forum > JavaScript > Cascade Menu [Scollen]
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Cascade Menu [Scollen]

Pages: [1]
geschrieben von p!lle am 17.06.2007 - 20:16
Hallo,
ich möchte auf meiner Homepage das Cascade Menu verbauen.
Ich realisiere meine HP mit DIV's und nutze als Scrollbalken auch ein JavaScript.
Nun möchte ich in meinem Navigations-DIV das Cascade Menu verwenden. Wenn ich jedoch ein "übergroßes" Menü habe, dann kann ich leider nicht scrollen. Die Scrollbalken selbst funktionieren.

Wenn es an den JS-Balken liegen sollte, dann würde auch erstmal ne Standardlösung reichen.
Gruß J.

geschrieben von Danny am 19.06.2007 - 22:08
Na dann zeig uns mal dein Code vom Scrollbalken und dem Menü. Anders kann man schlecht helfen.

geschrieben von René am 20.06.2007 - 08:20
Zitat
 Original geschrieben von p!lle am 17.06.2007 - 20:16

Wenn es an den JS-Balken liegen sollte, dann würde auch erstmal ne Standardlösung reichen.

Für dein Menü-Div ein CSS-Eintrag = overflow: auto;

geschrieben von p!lle am 20.06.2007 - 14:00
Hier mal der reine Code mit den JS-Scrollbalken:
HTML-Quelltext
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: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<?php
    define("_BBCLONE_DIR", "bbclone/");
    define("COUNTER", _BBCLONE_DIR."mark_page.php");
    if (is_readable(COUNTER)) include_once(COUNTER);
?>

<head>
    <title>pillecup.de - Die Website für Fussballcupper!</title>
    <meta name="author" content="">
    <link rel="stylesheet" href="css/format.css" type="text/css">
    <link rel="stylesheet" href="css/flexcrollstyles.css" type="text/css" />
        <script type='text/javascript' src="javascripts/flexcroll.js"></script>
    <script type='text/javascript'>
                if (document.getElementById && document.getElementsByTagName)
                {
                        if (window.addEventListener) window.addEventListener('load', initScrollBars, false);
                        else if (window.attachEvent) window.attachEvent('onload', initScrollBars);
                }

                function initScrollBars()
                {
                        CSBfleXcroll('mycustomscroll');
                CSBfleXcroll('mycustomscroll2');
                }
        </script>
</head>

<body>
    <div class="fenster">
            <div class="gesamt">
                    <div class="abgrenzung"></div>
                    <div class="hauptteil">
                            <div class="mitte">
                        <div class="header">
                            <div class="headerli">
                                                       <object id="player_1" type="application/x-shockwave-flash" data="zanmantou.swf" width="100%" height="100%">
                                                                <param name="allowScriptAccess" value="sameDomain" />
                                                                <param name="movie" value="zanmantou.swf" />
                                                                <param name="quality" value="best" />
                                                                <param name="scale" value="noscale" />
                                                                <param name="salign" value="lt" />
                                                                <param name="wmode" value="transparent">
                                                        </object>
                                                </div>
                                 <div class="headerre"><img src="images/banner_breit_7.png" /></div>
                           </div>
                           <div class="leer"></div>
                    <div class="inhalt" style="z-index:1; position:relative;">
                        <div class="inhaltli" id="mycustomscroll">
                                                        Navigation
                                                </div>
                                 <div class="inhaltre" id="mycustomscroll2">
                                                        Willkommen! Diese Seite befindet sich im Aufbau!
                                                </div>
                    </div>
                                </div>
                        </div>
                    <div class="abgrenzung"></div>
            </div>
        </div>
</body>
</html>


Im Div "inhaltli" soll das Cascade Menu rein.
Hier die wichtige CSS-Stelle des Div's:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 

div.inhaltli
        {
            width:              223px;
            height:             100%;
            margin:             auto;
            float:              left;
            
            overflow:           hidden;
        }

Overflow: hidden muss sein, die JS-Scrollbalken funktionieren sonst nicht richtig. Und wenn jetzt "normaler" text übersteht, dann funzen sie auch.

Hier ist der Quellcode vom Cascade Menu:
http://javarea.de/include/showspf.p....amp;id=471

geschrieben von René am 20.06.2007 - 16:26
Stell ein Beispiel online in dem dein Problem zu sehen ist mit deinem Code kann keiner was anfangen.

geschrieben von p!lle am 20.06.2007 - 21:03
Hier das Problem:
http://pillecup.de/cascademenu.php
(Grafisch ist es erstmal nur übernommen worden)

Wenn ich jetzt das Menü auffahre dann gibt es keinen Scrollbalken. Wenn ich allerdings ganz viele <br /> einfüge, dann gibt es einen Scrollbalken.

Auch mit ovberflow:scroll für das div "inhaltli" klappt es nicht.

geschrieben von René am 21.06.2007 - 09:25
cascademenu.php
PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 

<?
function initScrollBars()
        {
//            CSBfleXcroll('mycustomscroll');
            CSBfleXcroll('mycustomscroll2');
        }
?>




format.css
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 

div.inhaltli
	{
    	width:              223px;
    	height:             500px; /* hier mal abändern */
    	margin:             auto;
    	float:              left;
    	
    	overflow:           auto;
	}

geschrieben von p!lle am 21.06.2007 - 10:02
Hab das mal rauskommentiert und folgendes ausprobeirt:

Fester Wert & overflow:auto
Das JS fährt über das div-Ende hinaus.

Prozentwert & overflow:auto
Das JS fährt über das div-Ende hinaus.

Fester Wert & overflow:scroll
Das JS fährt über das div-Ende hinaus.

Prozentwert & overflow:scroll
Das JS fährt über das div-Ende hinaus.

Liegt also zu 99,9% nicht an den JS-Scrollbalken, da es ja auch bei "normalem" overflow:scroll nicht funzt.

geschrieben von René am 21.06.2007 - 10:14
Also bei mir fährt nichts über das Div hinaus. Die Scrollbar wird nur länger und man muss scrollen um den Rest des Menüs zusehen.

geschrieben von p!lle am 21.06.2007 - 10:47
Bir mir komischerweise ja. Werde es mal heute Abend online testen.

EDIT: Kam gestern nicht mehr dazu, aber heute sicherlich...

geschrieben von p!lle am 23.06.2007 - 19:16
so, siehe hier:
http://pillecup.de/cascademenu.html

das div "inhaltli" ist overflow:auto, höhe beträgt feste 500px...
und es funzt leider net mit den scrollbalken...

dann noch was anderes:
ich muss dies immer auskommentieren, damit das cascademenu sich überhaupt öffnet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ist das normal?


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.