Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 9
Seite [1]
alexteam


Try to beat me




Beiträge: 186
 # Thema - 10.11.2010 um 17:21 Uhr
Hallo Community,

Ich habe versucht diese Navigation in ein Design einzubinden. Local auf dem Rechner funktioniert es ohne Probleme aber wenn ich es ins Clansphere (meine Seite) hochlade geht sie nicht mehr.

Hier dir Navi http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
Hier meine Seitehttp://zschau.bplaced.net/
Inaktiv
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
 # Antwort: 1 - 11.11.2010 um 10:55 Uhr
da sind syntax fehler drin:

.animate(m[0] 'top' - m[1] '140px' - ,500,'easeOutBack')

im original sieht das so aus:

.animate({'top':'140px'},500,'easeOutBack' )

der erste paramter von animate() muss ein hash sein.


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

Inaktiv
|
alexteam
Thread-Ersteller


Try to beat me




Beiträge: 186
 # Antwort: 2 - 11.11.2010 um 19:15 Uhr
In der orginal steht es so drin. Clansphere wandelt es automatisch so um. Was kann ich tun?
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack' )
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
}
&#125.bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
}
}


Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 3 - 11.11.2010 um 20:34 Uhr
Benutze den 13. Button von links (hab extra gezählt) im Editor hier, der da heist: php-Quelltext. Damit wird der Code nicht grundsätzlich geändert sondern noch schön eingefärbt. Funktioniert auch für html und javascript!


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
alexteam
Thread-Ersteller


Try to beat me




Beiträge: 186
 # Antwort: 4 - 11.11.2010 um 21:09 Uhr
Ich meine das Clansphere es in der index.htm umwandelt. Also in der Templates Datei nicht hier im Forum.
In der Index.htm steht es so drin wie Schiri es geschrieben habe, und sobal ich das auf den Server auf meine Seite lade steht es eben falsch da.
Also Local
 
1.
1. / 2. / ... 
 .animate({'top':'140px'},500,'easeOutBack' )

und auf der Seite dann so.
 
1.
1. / 2. / ... 
 .animate(m[0] 'top' - m[1] '140px' - ,500,'easeOutBack')


Was kann ich tun?


Inaktiv
|
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
 # Antwort: 5 - 12.11.2010 um 11:40 Uhr
achso, du solltest dne ganzen js-code natürlich in eine externe .js datei auslagern und dann nur per

<script src="PFAD/ZUR/DATEI.js"></script> einbinden


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

Inaktiv
|
alexteam
Thread-Ersteller


Try to beat me




Beiträge: 186
 # Antwort: 6 - 12.11.2010 um 13:03 Uhr
Ok habe ich auch gemacht und es gibt keine Veränderungen. Die Navigation geht nicht.
Habe es mit <script type="text/javascript" src="script.js"></script> im head eingebunden.
So sieht meine script.js +-

 
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.
1. / 2. / ... 
 $(function() {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#sdt_menu > li').bind('mouseenter',function(){
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }    
                    });
                }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');
                    
                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });



Hier die index.htm +-
 
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.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
1. / 2. / ... 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test Navigation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>    
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <style>
            body{
                background:#333 url(bg.jpg) repeat top left;
                font-family:Arial;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin-top:150px;
            }
            h1.title{
                text-indent:-9000px;
                background:transparent url(title.png) no-repeat top left;
                width:633px;
                height:69px;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
            <ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#">
                        <img src="images/2.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">About me</span>
                            <span class="sdt_descr">Get to know me</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/1.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Portfolio</span>
                            <span class="sdt_descr">My work</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                            <a href="#">Websites</a>
                            <a href="#">Illustrations</a>
                            <a href="#">Photography</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="images/3.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Inspiration</span>
                            <span class="sdt_descr">Where ideas get born</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/4.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Photos</span>
                            <span class="sdt_descr">I like to photograph</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/5.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Blog</span>
                            <span class="sdt_descr">I write about design</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/6.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Projects</span>
                            <span class="sdt_descr">I like to code</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                        <a href="#">Job Board Website</a>
                        <a href="#">Shopping Cart</a>
                        <a href="#">Interactive Maps</a>
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">back to the Codrops Tutorial</a>
                <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157622090180990/">Images by tibchris</a>
            </span>
        </div>
    </body>
</html>


Zuletzt editiert von alexteam am 12.11.2010 um 13:04 Uhr (2x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 7 - 12.11.2010 um 15:30 Uhr
js wird doch nun unten eingebunden, oder nicht ?


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


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

Inaktiv
|
Ramires ClanSphere Team

Supporter
Supporter



Herkunft: Waldeck
Beiträge: 1900
 # Antwort: 8 - 12.11.2010 um 15:33 Uhr
oder in der neuen version mit {func:javascript} vor oder hinter den eigenen skripten im head,...


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

Verschwende keine Energie an Dinge die Du nicht ändern kannst...
Inaktiv
|
alexteam
Thread-Ersteller


Try to beat me




Beiträge: 186
 # Antwort: 9 - 12.11.2010 um 19:30 Uhr
Ok das mit {func:javascript} wußte ich nicht und es hat geklappt. Danke euch! Kann geschlossen werden.


Inaktiv
|

Dieses Thema wurde von Ramires ClanSphere Team PM geschlossen.
Antworten: 9
Seite [1]