Lexi Help
Die neuesten Themen
» Mein altes Forum zurückbekommen
von Bigtuber Heute um 19:18

» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Heute um 17:05

» Begriff : "merken"
von Ray Heute um 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Heute um 11:07

» Servamp Forum
von Raine Kamiya Gestern um 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Gestern um 20:56

» Private Nachrichten
von inde Gestern um 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

» Forumseite mit Mailware verseucht ?
von inde Mo 19 Sep 2016 - 20:31

Partner
free forum

Problem mit eigenem script!

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Problem mit eigenem script!

Beitrag von Haru am Di 10 Mai 2011 - 21:45

N’abend zusammen
Ich schon wieder, Nachdem sich mein letztes Problem so schnell erledigt hatte, bin ich schon wieder am experimentieren. Und zwar habe ich mir mittels Javasrcipt eine kleine Spielerei für Links zusammen gebastelt.
Kurz: das ganze ist jeweils ein Link (den ich als ‚Kategorie’ benutze) der sich bei einem Mouseover erweitert und die Links zeigt, die in dieser Kategorie sitzen, und ein Banner. An Sich läuft das auch alles glatt und so vie es soll, das einzige was mich momentan rätseln lässt, sind die Hintergrundgrafiken. Diese werden beim Neuladen der Seite angezeigt (ohne weiteren zusammen Hang oder so) obwohl sie erst erscheinen sollten sobald der HoverEffekt einsetzt- Das verwirrenste an der ganzen Sache ist das dies eben nur beim Neuladen so ist. Bleibt man auf der Seite und hat einmal den Effekt aktiviert, verschwindet der Hintergrund wie er eigentlich soll und zeigt den Hintergrund auch nur wieder wenn man erneut auf den Link geht.
Nach dem Neuladen:
so wie es eigentlich soll/ist:
beim Hover:

Link zum Testforum: http://naruto-rpg-fan.forum2ouf.com/
Für den Fall das jemand in einen der Codes schauen möchte/muss, hab ich schon mal alle drei herrausgesucht und werde die unten anhängen. Also wenn irgendjemand eine Idee hat, woran das liegen könnte, würde ich mich natürlich sehr freuen^^

Lg Haru

HTML Code:
Code:
 <ul id="smnavi_menu" class="smnavi_menu">

            <li>
               <a href="#">
                  <img src="http://i53.tinypic.com/27y21ac.jpg" alt=""  />
                  <span class="smnavi_active" style="background: url('http://i52.tinypic.com/21erdqb.jpg')bottom left #111;"></span>
                  <span class="smnavi_wrap" style="width:100px;">
                     <span class="smnavi_link">
                         Forum
                     </span>
                  </span>
               </a>
               <div class="smnavi_box">
                     <a href="http://anime-schul-rpg.forumieren.de/t298-allgemeine-forenregeln-fur-unsere-seite">Die Regeln </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t299-haftungsausschluss">Credits, Wer was wo</a>
                     <a href="http://anime-schul-rpg.forumieren.de/f3-help-feedback">! Hilfe ! </a>
                     <a href="http://anime-schul-rpg.forumieren.de/faq">FAQ… </a>
                     <a href="http://anime-schul-rpg.forumieren.de/memberlist">Mitglieder – Wir</a>
                    </div>
                </li>

             <li>
               <a href="#">
                  <img src="http://i54.tinypic.com/91hxki.jpg" alt=""  />
                  <span class="smnavi_active" style="background: url('http://i51.tinypic.com/16777gk.jpg') bottom left #111;"></span>
                  <span class="smnavi_wrap" style="width:100px;">
                     <span class="smnavi_link">
                         Bewerbungen
                     </span>
                  </span>
               </a>
               <div class="smnavi_box">
                     <a href="http://anime-schul-rpg.forumieren.de/t521-bewerbungsvorlage">Vorlage gefällig ? </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t834-reservierungen">STOPP wir haben genug! </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t723-aufnahmestopps">Reservierungen … </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t822-namensubersicht">Namenliste – die gibt’s schon </a>
                     <a href="#">benutze Avatare </a>
                    </div>
                </li>
            
                <li>
               <a href="#">
                  <img src="http://i53.tinypic.com/5pes6h.jpg" alt=""  />
                  <span class="smnavi_active" style="background: url('http://i51.tinypic.com/20l15xc.jpg') bottom left #111; border: 1px solid #cfcfcf; border-top: 0px solid #cfcfcf; border-right: 0px solid #cfcfcf; border-bottom: 0px;"></span>
                  <span class="smnavi_wrap" style="width:100px;">
                     <span class="smnavi_link">
                         School
                     </span>
                  </span>
               </a>
               <div class="smnavi_box">
                     <a href=" http://anime-schul-rpg.forumieren.de/t517-profile-und-facher">Profile, Fächer, Sport </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t518-schulpersonal">Lehrer, ohne die geht’s nicht! </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t515-das-honey-system">Honey-System? Achso … </a>
                     <a href="http://anime-schul-rpg.forumieren.de/t869-klassenlisten">Klassenlisten – wer ist wo? </a>
                    </div>
                </li>
            
             <li>
             <div class="smnavi_weg">...............</div>
            </li>
            
            </ul>
CSS Code:
Code:

ul.smnavi_menu{
  font-size:12px;
  list-style:none;
  width:150px
}

ul.smnavi_menu a{
  outline:none;
  text-decoration:none
}

ul.smnavi_menu li{
  cursor:pointer;
  float:left;
  height:55px;
  position:relative;
  width:100px}

ul.smnavi_menu li a img{
  border: 1px solid #cfcfcf;
  border-right: 3px solid lightseagreen;
  border-bottom: 0px solid #cfcfcf;
  left:85px;
  position:absolute;
  width:0;
  z-index:4;
}

ul.smnavi_menu li span.smnavi_wrap{
  height:60px;
  left:0;
  top:100px;
  width:210px;
  height:170px;
}

.smnavi_wrap{
border: 1px solid #cfcfcf;
border-top: 0px solid #cfcfcf;
border-right: 0px solid #cfcfcf;
border-bottom: 0px;
}

ul.smnavi_menu li span.smnavi_active{
  height:171px;
  left:0;
  position:absolute;
  top:171px;
  width:210px;
  z-index:3;
}



ul.smnavi_menu li div.smnavi_box a,ul.smnavi_menu li span span.smnavi_descr,ul.smnavi_menu li span span.smnavi_link{
  margin-left:15px;
  text-shadow:1px 1px 1px #000;
  text-transform:uppercase}
 
ul.smnavi_menu li span span.smnavi_link{
  clear:both;
  color:#fff;
  float:center;
  font-size:24px;

 }

ul.smnavi_menu li div.smnavi_box{
  background-color: #fcfcfc;
  border: 1px solid #cfcfcf;
  border-top: 0px solid #cfcfcf;
  border-right: 3px solid lightseagreen;
  display:none;
  height:170px;
  left:0;
  margin-left:20px;
  overflow:hidden;
  padding-left:20px;
  position:absolute;
  top:170px;
  width:210px;
  z-index:2
}

ul.smnavi_menu li div.smnavi_box a{
  clear:both;
  color:#ef5136;
  float:left;
  line-height:20px;
}

ul.smnavi_menu li div.smnavi_box a:first-child{
  margin-top:15px
}

ul.smnavi_menu li div.smnavi_box a:hover{
  color: lightseagreen;
}

.smnavi_weg{
  display:none;
}
JS:
Code:

<script type="text/javascript">$(document).ready(function() {$('#faqs h3').each(function() {var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();tis.click(function() {state = !state;answer.slideToggle(state);tis.toggleClass('active',state);});});});            $(function() {$('#smnavi_menu > li').bind('mouseenter',function(){var $elem = $(this);$elem.find('img').stop(true).animate({'width':'420px','height':'170px','left':'0px'},400,'easeOutBack').andSelf().find('.smnavi_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.smnavi_active').stop(true).animate({'height':'170px'},300,function(){var $sub_menu = $elem.find('.smnavi_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('.smnavi_box');if($sub_menu.length)$sub_menu.hide().css('left','0px');$elem.find('.smnavi_active').stop(true).animate({'height':'0px'},300).andSelf().find('img').stop(true).animate({'width':'0px','height':'0px','left':'85px'},400).andSelf().find('.smnavi_wrap').stop(true).animate({'top':'25px'},500);});});</script>

Haru
Neuling
Neuling

Weiblich Beiträge : 44
Anmeldedatum : 08.03.09

Nutzerprofil anzeigen

Nach oben Nach unten

Re: Problem mit eigenem script!

Beitrag von Zuckerpuppe am Mi 11 Mai 2011 - 10:21

Hallo Smile

wo genau hast du das Java-Script denn eingesetzt? Und woher hast du das? Hast du mal nen Link zu der Seite, wo du das her hast?

Nur zur Info: ich bin wirklich kein Script-Profi und weiß nicht, ob ich dir helfen kann. Aber allgemein wäre es gut, wenn man wüsste, wo das Script eingesetzt worden ist. Daher frage ich jetzt mal nach.

Vielleicht kann ja dann jemand helfen, der sich mit Scripten wirklich gut auskennt Wink

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Nutzerprofil anzeigen

Nach oben Nach unten

Re: Problem mit eigenem script!

Beitrag von Haru am Mi 11 Mai 2011 - 11:00

Morgen Zuckerpuppe,
Ich wollte dir hier grade eine Antwortschreiben, das das Scrip direkt im indexbody sitzt und eigentlich auch läuft wie es laufen soll. Als mir der Fehler direkt ins Auge gesprungen ist. Wie ich bereits vermute habe, lag es nämlich nicht am Script selber, sondern an meinen CSS Einstellungen. Ich hatte in meiner active-box die Größe definiert, weswegen sie natürlich auch mit dieser Größe angezeigt wurde (inklusive des Hintergrunds) und nicht wie eigentlich gewollt: erst nicht und später dann.
Von daher würde ich mal sagen: Danke Embarassed für den kleinen doch ausreichenden Anstups den ich gebraucht hatte ^^

lg Haru

Haru
Neuling
Neuling

Weiblich Beiträge : 44
Anmeldedatum : 08.03.09

Nutzerprofil anzeigen

Nach oben Nach unten

Re: Problem mit eigenem script!

Beitrag von Zuckerpuppe am Mi 11 Mai 2011 - 12:51

Das ist ja super, dass du den Fehler gefunden hast Smile

Hast du übrigens wirklich sehr gut gemacht..

Da das Problem gelöst ist, mach ich hier mal wieder zu...

-closed-

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten