✔ LavaLamp Hilfe beim Einbau

T

Thrillseeker

Mitglied
Hallo Leute,

ich habe mich heute hier registriert, weil ich Hilfe beim Einbau eines Menüs in ein Template brauche.

Ich verwende das folgende MCMS

Ich habe bereits ein Menü eingebaut. Dabei handelt es sich um das chromestyle.js Menü.

Bisher ist es so, dass per include die header_menü.tpl in die index_menü.tpl integriert wird.
Code:
HTML: 
{include file="$SKIN_DIR/header_menu.tpl"}

Hier nun der Code des header Menüs (header_menu.tpl)

Code:
HTML: 
<script type="text/javascript" src="chromemenu/chromejs/chrome.js"></script>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="{$JAMROOM_URL}/index.php">{jr_lang id="1" default="HOME"}</a></li>

<li><a href="#" rel="dropmenu1">UNSERE</a></li>

<!--<li><a href="#" rel="dropmenu2">Member</a></li>-->
    <li><a href="{$JAMROOM_URL}/ranking.php?mode=video_spotlight&size=0&replace[]=&replace[]=yes&header_template=video_channel_header.tpl&row_template=video_channel_row.tpl&footer_template=video_channel_footer.tpl">{jr_lang id="5" default="VIDEOS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/index.php?t=gallery">{jr_lang id="6" default="GALLERIES"}</a>&nbsp;</li>
    
    <li><a href="{$JAMROOM_URL}/index.php?t=blogs_index_newest">{jr_lang id="7" default="BLOGS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/ranking.php?mode=radio&order=5&pagebreak=10&header_template=podcast_header.tpl&row_template=podcast.tpl&footer_template=podcast_footer.tpl"><span class="arrow"></span>{jr_lang id="8" default="STATIONS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/ranking.php?mode=event&pagebreak=20&pagenum=1&header_template=event_header.tpl&row_template=event_row.tpl&footer_template=event_footer.tpl">{jr_lang id="9" default="GIGS/EVENTS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/ranking.php?mode=comment&type=artist&pagebreak=10&pagenum=1&quota[]=1&quota[]=2&quota[]=3&header_template=reviews_artists_header.tpl&row_template=reviews_artists.tpl&footer_template=reviews_footer.tpl">{jr_lang id="10" default="REVIEWS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/chart.php?chart_days=31&pagebreak=20">{jr_lang id="11" default="CHARTS"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/ranking.php?mode=vault&pagebreak=10&order=5&header_template=vault_header.tpl&row_template=vault.tpl&footer_template=vault_footer.tpl">{jr_lang id="12" default="STORE"}</a></li>
    
    <li><a href="{$JAMROOM_URL}/index.php?t=blogs_news">{jr_lang id="13" default="NEWS"}</a></li>
    <li><a href="{$JAMROOM_URL}/forum.php?band_id=0">{jr_lang id="14" default="FORUM"}</a></li>
  </ul>
</div>

  
<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="{$JAMROOM_URL}/ranking.php?mode=spotlight&row_template=artists_index.tpl">{jr_lang id="2" default="ARTISTS"}</a>

<a href="{$JAMROOM_URL}/index.php?t=members">{jr_lang id="3" default="MEMBERS"}</a>
{if $smarty.config.labels_activate == 'yes'}
    <a href="{$JAMROOM_URL}/ranking.php?mode=band&pagebreak=5&order=3&quota={$smarty.config.label_id}&header_template=labels_header.tpl&row_template=labels.tpl&footer_template=labels_footer.tpl">{jr_lang id="4" default="LABELS"}</a>
{/if}
{if $smarty.config.venues_activate == 'yes'}
    <a href="{$JAMROOM_URL}/ranking.php?mode=band&pagebreak=5&order=3&quota={$smarty.config.venue_id}&header_template=venues_header.tpl&row_template=venues.tpl&footer_template=venues_footer.tpl"">VENUES</a>
{/if}     
</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

Nun möchte ich eben das vorhandene Menü gegen ein LavaLAmp Menü austauschen und habe in diesem Zusammenhang an diese Anleitung gehalten.

Da mein CMS auf Templates basiert, habe ich in der index_header.tpl den folgenden Code eingefügt und die Dateien in das Verzeichnis hochgeladen.

Code:
HTML: 
<link rel="stylesheet" type="text/css" href="skins/ProJam_Light/LavaLamp/lavalamp_test.css" />
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/skins/ProJam_Light/LavaLamp/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/skins/ProJam_Light/LavaLamp/jquery.easing.min.js"></script>
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/skins/ProJam_Light/LavaLamp/jquery.lavalamp.min.js"></script>

Anstelle der eben beschriebenen header_menu.tpl habe ich nun eine neue header_menu_lava.tpl erstellt und die per include in die index_menu.tpl eingebunden.

Hier der Code:
Code:
HTML: 
<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Sobald ich nun die Seite aktualisiere, wird lediglich der Seitenhintergrund angezeigt. Alles andere ist verschwunden.

Was mache ich falsch? Hat jemand eine Ahnung?

Vielen Dank für Eure Hilfe!
 
Hi,

gemäß "Step 3: The Javascript" aus der Gebrauchsanweisung vermisse ich das folgende Script in deinem gezeigten Code, das der Initialisierung des Menüs dient, und daher in deinem Fall vermutlich beim Öffnen der Seite das Hintergrundbild des aktiven Menüpunkts nicht angezeigt wird:
Code: 
<script type="text/javascript">
    $(function() { $(".lavaLampWithImage").lavaLamp({ fx: "backout", speed: 700 })});
</script>


Sollte ich hier völlig daneben liegen, wäre ein Link zu deiner Seite ganz hilfreich, um nähere Ursachenforschung betreiben zu können, weshalb bei dir nur der Seitenhintergrund zu sehen ist, denn aus deinen gezeigten Quellcodeauszügen ist der Grund hierfür nicht ersichtlich.

Achja, auch wenn es in dem Script-Demo so praktiziert wird, darf ein ID-Bezeichner nicht mit einer Ziffer beginnen - siehe http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name) ;)

mfg Maik
 
Hallo,

genau hier liegt mein Problem.

Ohne das von dir gezeigte Script erscheint nur der Hintergrund der Seite, nicht der Hintergrund des Menüs.

Füge ich die folgenden Zeilen in den Head, bleibt der Bildschirm beim aufrufen der Seite komplett weis.

HTML: 
    <script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Hier der link zur Seite:

Danke
 
Naja, dieses Script mit den drei IDs "#1", "#2" und "#3" stammt aus der herunterladbaren Version, die drei Menü-Varianten enthält, blos existieren in deiner Seite keine drei Menüs mit diesen ID-Bezeichnern, sondern nur eines mit diesem Klassen- und ID-Bezeichner:
HTML: 
<ul class="lavaLampWithImage" id="1">

Daraus folgt:
Code: 
<script type="text/javascript">
        $(function() {
            $(".lavaLampWithImage").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>
oder:
Code: 
<script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>


Wobei du den ID-Bezeichner umtaufen solltest, da dieser wie erwähnt nicht mit einer Ziffer beginnen darf.

mfg Maik
 
Hallo Maik,

vielen Dank für deinen Hinweis.

Inwiefern muss ich das Script anpasen?

Folgende Anpüasung funktioniert leider nicht.

Angepsst:
HTML: 
<script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Original:
HTML: 
<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Vielen Dank nochmals
Tom
 
Liest du meine Beiträge nicht aufmerksam?

Bei mir funktioniert es tadellos.

mfg Maik
 
Hallo,

doch ich habe mir sogar sehr viel Mühe dabei gegeben-)))

Nur aus irgendwelchen Gründen sah ich beim ersten Aufruf nur deinen Text und nicht deinen angefügten Code.

Ich habe nun im Head deinen Code eingefügt. Auch habe ich id1 in id lava ambenannt.

Leider wird eine komlett weisse Seite angezeigt.

Mit war bekannt das ich kein Profi bin aber das ich so dermassen versage schmerzt mich auch-))

Danke nochmals.

Tom
 
Füg mal diese Codezeilen in deiner Seite ein (Dateipfade bitte anpassen):
Code: 
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
        $(function() {
            $(".lavaLampWithImage").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>
und verwende hierfür die Scripts im Anhang.

mfg Maik
 

Anhänge

No Way......

Blank Screen:

Konkret sind folgende tpl betroffen, die ich anpassen

Dieses Template wird per include eingefügt:
skins/ProJam_Light/header_menu_lava.tpl

Hier ist der include Befehl zu finden:
skins/ProJam_Light/index_menu.tpl

Hier die die header tpl
skins/ProJam_Light/index_header.tpl

Ich hab keinen Plan was los ist.

Nochmals vielen Dank.

Tom
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück