News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 11
Seite [1]
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Thema - 30.06.2011 um 18:13 Uhr
Ich habe nun mit Javascript 2 Boxen erstellt, deren Inhalt per Klick wechselbar ist.
Klappt soweit auch alles ganz gut. Habe nur ein kleines Problem.
Wenn man in der oberen Box von einem großen Inhalt auf einen kleinen Inhalt wechselt,
so bleibt die Boxengröße so lange auf der anderen größe, bis ich in der unteren Box die Buttons berühre.
Das stört mich irgendwie.

Link zur Page

Habe das folgendermaßen gelöst:

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.
1. / 2. / ... 
 
        <div class="container">
            <ul class="tabs">Match Center
               <li><a href="#tab3">Top</a></li>
               <li><a href="#tab2">Last</a></li>
               <li><a href="#tab1">Next</a></li>
            </ul>
            <div class="tab_container">
                <div id="tab1" class="tab_content">{wars:navnext}</div>
                <div id="tab2" class="tab_content">{wars:navlist2}</div>
                <div id="tab3" class="tab_content">{wars:navtop}</div>
            </div>
        </div>
            
        <div class="head_box2">Banner</div>
        <div align="center" class="inner_frame_right">{banners:navlist}</div>
        
        <div class="container2">
            <ul class="tabs2">Special Box
               <li><a href="#tab5">Votes</a></li>
               <li><a href="#tab4">New</a></li>
            </ul>
            <div class="tab_container2">
                <div id="tab4" class="tab_content2">{users:navlast}</div>
                <div id="tab5" class="tab_content2">{votes:navlist}</div>
            </div>
        </div>


layout.css:
 
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. / ... 
 
/* START Tabnavi */

ul.tabs {
  background: url(Bilder/stripe_2.jpg) repeat-x;
  color: #fff;
  font-weight: bold;
  width: 272px;
  padding: 10px 12px;
  margin: 1px 0 2px 0;
  float: right;
  text-shadow: #000 1px 1px 0px;
  list-style: none;
}
ul.tabs li {
    float: right;
}
ul.tabs li a {
    background: #000;
    color: #fff;
    padding: 3px 10px;
    font-weight: normal;
    border-radius:5px;
    -moz-border-radius:5px;
    border: 2px solid #333;
    margin: 0 0 0 5px;
}
ul.tabs li a:hover {
    background: #fff;
    color: #000;
    text-shadow: #fff 1px 1px 0px;
    border: 2px solid #999;
}

.tab_container {
    overflow: hidden;
    clear: both;
    float: right;
}
.tab_content {
    float: right;
    width: 275px;
    color: #fff;
    text-align: left;
    line-height: 24px;
    padding: 10px;
}

.tab_content a{
    color: #09f;
}
.tab_content a:hover{
    color: #fff;
}

.tab_content hr {
   margin: 8px 0;
   border: 1px dashed #555;
   line-height: 0px;
   border-width: 1px 0 0 0;
}

/* ENDE Tabnavi */
/* START Tabnavi2 */

ul.tabs2 {
  background: url(Bilder/stripe_2.jpg) repeat-x;
  color: #fff;
  font-weight: bold;
  width: 272px;
  padding: 10px 12px;
  margin: 1px 0 2px 0;
  float: right;
  text-shadow: #000 1px 1px 0px;
  list-style: none;
}
ul.tabs2 li {
    float: right;
}
ul.tabs2 li a {
    background: #000;
    color: #fff;
    padding: 3px 10px;
    font-weight: normal;
    border-radius:5px;
    -moz-border-radius:5px;
    border: 2px solid #333;
    margin: 0 0 0 5px;
}
ul.tabs2 li a:hover {
    background: #fff;
    color: #000;
    text-shadow: #fff 1px 1px 0px;
    border: 2px solid #999;
}

.tab_container2 {
    overflow: hidden;
    clear: both;
    float: right;
}

.tab_content2 {
    float: right;
    width: 275px;
    color: #fff;
    text-align: left;
    line-height: 24px;
    padding: 10px;
}

.tab_content2 a{
    color: #09f;
}
.tab_content2 a:hover{
    color: #fff;
}

.tab_content2 hr {
   margin: 8px 0;
   border: 1px dashed #555;
   line-height: 0px;
   border-width: 1px 0 0 0;
}

/* ENDE Tabnavi2 */


Und meine beiden Javascripts:

tabnavi.js:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
1. / 2. / ... 
 
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

    });


tabnavi2.js:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
1. / 2. / ... 
 
    $(document).ready(function() {

    //When page loads...
    $(".tab_content2").hide(); //Hide all content
    $("ul.tabs2 li:first").addClass("active").show(); //Activate first tab
    $(".tab_content2:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs2 li").click(function() {

        $("ul.tabs2 li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content2").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

    });



Finde das alles irgendwie noch zu unschön.
Weiss da vlt jemand wie man es besser machen könnte ?


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


www.iv-gaming.de | www.iv-artwork.de
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 30.06.2011 um 18:51 Uhr
hast du das nun schon gelöst?
Weil das von dir beschriebene Problem kann ich nicht bestätigen.


Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 2 - 30.06.2011 um 18:58 Uhr
Nein leider nicht.
Aber ich sehe gerade, dass es nicht im IE, Opera und auch nicht im Safari ist.
Habe das soweit ich sehe nur im Firefox.


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


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

Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 3 - 20.07.2011 um 05:11 Uhr
Warum muss ich eigentlich folgendes im Template nochmal aufrufen ?
Ich dachte das wäre schon automatisch in Clansphere mit drin.
Aber ohne geht es irgendwie nicht.

 
1.
2.
3.
1. / 2. / ... 
 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


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


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

Inaktiv
|
bFeeee


Just nerd



Herkunft: Hamm
Beiträge: 944
 # Antwort: 4 - 20.07.2011 um 06:43 Uhr
hm also ich sehe das problem auch .. wenn du zB auf "top" klickst dauert das 2 sec. und dann wird die untere box erst richtig geladen wieder hmm


------------------
Grüße bFeee

Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 5 - 20.07.2011 um 10:15 Uhr
20.07.2011 um 05:11 Uhr - Tress13:
Warum muss ich eigentlich folgendes im Template nochmal aufrufen ?
Ich dachte das wäre schon automatisch in Clansphere mit drin.
Aber ohne geht es irgendwie nicht.

 
1.
2.
3.
1. / 2. / ... 
 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Wer sagt das du das nochmal aufrufen musst?
Du musst einfach dein Script nachdem jquery von clansphere platzieren dann geht es auch ohne Probleme.


Inaktiv
|
bFeeee


Just nerd



Herkunft: Hamm
Beiträge: 944
 # Antwort: 6 - 20.07.2011 um 11:06 Uhr
du brauchst nicht das jquery einbinden was bei der tabnavi dabei war oder so ... falls es der fall is .. clansphere hat es ja schon ..mach ma ganz unten in der index.htm {func:javascript} und binde die tabnavi.js ein


------------------
Grüße bFeee

Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 7 - 20.07.2011 um 19:37 Uhr
OK bFeee. Ich glaube mit deiner Aussage kommen wir der Sache am nähsten.
Wie gesagt habe ich bisher die folgende zeile unten im Template gehabt.

 
1.
2.
3.
1. / 2. / ... 
 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Und wie genau sieht dann meine Zeile nach deinem Rat aus ?
Habe das jetzt einfach so gemacht:

 
1.
2.
3.
4.
5.
1. / 2. / ... 
 
 {func:javascript}
<script language="javascript" type="text/javascript" src="tabnavi.js"></script>
<script language="javascript" type="text/javascript" src="tabnavi2.js"></script>


Scheint so zu funktionieren.
Ist das richtig so ?


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


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

Inaktiv
|
bFeeee


Just nerd



Herkunft: Hamm
Beiträge: 944
 # Antwort: 8 - 20.07.2011 um 20:22 Uhr
jep wenn du es ganz unten eingetragen hast ja .. kannst ja zur sicherheit einfach mal n schnipsel aus der index.htm hier posten


------------------
Grüße bFeee

Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 9 - 20.07.2011 um 20:33 Uhr
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
1. / 2. / ... 
 
...
        
       <div id="footer">
            <a href="{url:clansphere_about}" class="about"></a>
            <a href="{url:contact_imprint}" class="imprint"></a>
            <a href="http://www.tressdesignz.de" class="tressdesignz"></a>
       </div>
        
</div>

     {func:javascript}
     <script language="javascript" type="text/javascript" src="tabnavi.js"></script>
     <script language="javascript" type="text/javascript" src="tabnavi2.js"></script>
</body>
</html>


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


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

Inaktiv
|
palle ClanSphere Team

Supporter
Supporter




Beiträge: 3073
 # Antwort: 10 - 20.07.2011 um 20:35 Uhr
<script language="javascript" type="text/javascript" src="tabnavi.js"></script>
<script language="javascript" type="text/javascript" src="tabnavi2.js"></script>

Warum zwei Scripte laden? Du kannst den Inhalt beider Dateien zusammenfassen..


------------------
I like the part where it says 'nyan'



Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 11 - 20.07.2011 um 20:40 Uhr
Habe das gerade mal gemacht. Scheint zu funktionieren. Danke !
Ich dacht, dass die sich vlt stören könnten oder so.


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


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

Inaktiv
|
Antworten: 11
Seite [1]


Sie müssen sich registrieren, um zu antworten.

ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo