link auf sich selbst "#" öffnet sich nicht

nbg12 · April 15, 2015

Hallo an alle,

ich würde gerne ein kleines popup Fenster implementieren, aber sobald ich meinen Code, der lokal super funktioniert auf unser XTC Template anwende, funktioniert es nicht, das hier waren meine Code Schnipsel:

HTML:

<a href="#" class="popup_oeffnen">Popup öffnen</a>


    <div id="popup">


        <div class="schliessen"></div>


        <div id="popup_inhalt">

            <p><h2>Mega Cocktailparty am 31.12.13!</h2></p>

            <p style="text-align:justify;">

            <div style="text-align:center;"><img src="bild.jpg" alt="Cocktailparty" border="0"/><br/>

            Quelle: Flickr.com <a href="http://www.flickr.com/photos/polif/" target="_new">PabloMFernandez</a></div><br/>

            <span>Am 31.12.13 steigt die größte Party des Jahres!

            Es werden die beliebtesten Cocktails aus aller Welt von unseren Profi-Barkeepern serviert.

            Sei auch du dabei und melde dich über unser Anmeldungsformular <a href="#">hier</a> zu unserer Party an.</span></p>

        </div>


    </div>


    <div id="hintergrund"></div>

CSS:


#hintergrund {

	display:none;

	z-index:1;

	position: fixed;

	height:100%;

	width:100%;

	top:0px;

	left:0px;

	background:#000000;

}


#popup {

	display: none;

    z-index: 2;

	position: fixed;

    width:450px;

    top: 20%;

    left: 50%;

    margin-left: -250px;

	background: none repeat scroll 0 0 #FFFFFF;

    border: 8px solid #ccc;

    border-radius: 5px 5px 5px 5px;

	font-family: Verdana, Geneva, sans-serif;

	font-size: 14px;

    color: #000;

}


div.schliessen {

    position: relative;

    height: 30px;

    width: 30px;

    left: 27px;

    bottom: 24px;

    background: url("close.png") no-repeat scroll 0 0 transparent;

	float: right;

	cursor: pointer;

}


#popup_inhalt {

    margin: 8px 14px;

}

popup.js


jQuery(function($) {


	var popup_zustand = false;


	$(".popup_oeffnen").click(function() {


		if(popup_zustand == false) { 

			$("#popup").fadeIn("normal"); 

			$("#hintergrund").css("opacity", "0.7");

			$("#hintergrund").fadeIn("normal");

			popup_zustand = true;

		}


	return false;

	});


	$(".schliessen").click(function() {


		if(popup_zustand == true) {

			$("#popup").fadeOut("normal");

			$("#hintergrund").fadeOut("normal");

			popup_zustand = false;

		}


	});


});

und

die jquery-1.9.1.min.js (wäre zu lang hier zu posten)

so das ganze habe ich sauber per js.php eingebunden, wurde auch gefunden, denn die Links sind sauber im Quelltext zu sehen und ein test alert funzt auch...

die CSS wird auch übernommen, ABER

ich vermute, dass es etwas mit dem Link an sich zu tun haben muss, dass mein popup nicht erscheint, denn irgendwie wenn ich als Link Adresse einfach nur

ein # benutze, geht xtc danach auf die Startseite, also nehme ich an, dass ich da etwas mit der Verlinkung falsch mache...

Was muss ich tun, um das mein Code (wie lokal) auch in XTC funktioniert?

Muss ich die URL in einer bestimmten Form angeben... aber ich möchte ja gar nicht, dass ne neue Seite geöffnet wird sondern lediglich mein popup auf der gleichen Seite aufgeht...

Wie stell ich da am besten an?

Danke vorab!

Grüße

Alex@4tfm · April 15, 2015

Pack deinen Code mal in

$(document).ready(function(){

/* hier */

}

in script.js, erstmal um sicher zu sein, dass das script (an korrekter Stelle) eingebunden wird.

nbg12 · April 15, 2015

Pack deinen Code mal in
$(document).ready(function(){

/* hier */
}

in script.js, erstmal um sicher zu sein, dass das script (an korrekter Stelle) eingebunden wird.

danke für deine Antwort, aber ich hab ja

einen Alert in einem test.js auch schon versucht und das

hat wunderbar geklappt, deshalb dachte ich eigentlich, dass

es nicht am java script code liegt oder was denkst du?

Wirklich seltsam, dass ich als Linkziel ein Rautezeichen als Eigenverweis nutze und

er mich einfach nach dem Klick auf die Startseite leitet, weil dann wird ja gar nicht das popup geladen oder?

Kann es sein, dass da XTC irgendwie in die Verlinkungsstruktur eingreift? und das Ganze deshalb

nicht klappt?

Danke schon mal

Alex@4tfm · April 15, 2015

Na ja, was mit zuerst ins auge springt ist, dass der Shop $(... benutzt, statt jQuery(... . Bin mir nicht sicher ob das ein Problem sein kann, glaube nicht.

Dann würde ich mal einen alert in die click events legen um zu schauen ob der Code überhaupt jemals an diese stelle kommt.

Grundsätzlich denke ich auch, dass toggle() ( http://api.jquery.com/toggle/ ) für euer nutzen vielleicht besser ist.

Und zu guter letzt:

Kann es sein, dass ein klick auf <a href="#" class="popup_oeffnen"></a> die Seite reloaden lässt? Das darf natürlich nicht passieren, sollte bei deinem code aber der Fall sein.

nbg12 · April 16, 2015

Na ja, was mit zuerst ins auge springt ist, dass der Shop $(... benutzt, statt jQuery(... . Bin mir nicht sicher ob das ein Problem sein kann, glaube nicht.

nein, das hab ich schon gecheckt...

Dann würde ich mal einen alert in die click events legen um zu schauen ob der Code überhaupt jemals an diese stelle kommt.

ein Alert klappt wunderbar überall

Grundsätzlich denke ich auch, dass toggle() ( http://api.jquery.com/toggle/ ) für euer nutzen vielleicht besser ist.

habe ich noch nicht ausprobiert, werde ich aber...

Und zu guter letzt:
Kann es sein, dass ein klick auf <a href="#" class="popup_oeffnen"></a> die Seite reloaden lässt? Das darf natürlich nicht passieren, sollte bei deinem code aber der Fall sein.

JA!!! Das ist glaub ich eher das Problem... genau das! weil er läd dann immer neu und dann geht gar nichts mehr...

--> Aber hier in unserer Product.html bei den ganzen image thumbnails klappt das mit dem Verweis auf sich selbst auch wunderbar habe ich gesehen, ist auch so ne Art inlinePopup, was dann nen neuen DIV Layer läd glaube ich

Hier der Code:

<div class="span4">

                                    <div class="product-images">

                                        <div class="box">

                                            <div class="primary" id="zoom">

										    <img src="{img img=$products_image type=m_info path_only=true}" data-zoom-image="{img img=$products_image type=m_popup path_only=true}" alt="{$products_name|escape:"html"}" />

                                            </div>

											{if $more_images !=''}

                                            <div class="thumbs" id="gallery">

                                                <ul class="thumbs-list">

                                                    <li>

                                                       [B][COLOR="Red"] <a class="active" href="#" data-image="{img img=$products_image type=m_info path_only=true}" title="Chaser Overalls" data-zoom-image="{img img=$products_image type=m_popup path_only=true}">

                                                            <img src="{img img=$products_image type=m_thumb path_only=true}" alt="{$products_name|escape:"html"}" />

                                                        </a>[/COLOR][/B]

                                                    </li>

													{foreach name=aussen item=img_data from=$more_images}

                                                    <li>

                                                        <a  href="#" data-image="{img img=$img_data.file type=m_info path_only=true}" title="{$products_name|escape:"html"}" data-zoom-image="{img img=$img_data.file type=m_popup path_only=true}">

                                                            <img src="{img img=$img_data.file type=m_thumb path_only=true}" alt="{$products_name|escape:"html"}" />

                                                        </a>

                                                    </li>

												{/foreach}




                                                </ul>

                                            </div>

											{/if}

                                            <div class="social">

                                             {hook key=products_images_tpl}	

                                            </div>

                                        </div>

                                    </div>

                                </div>

Das ist ja auch ein Link auf sich selbst und da klappts wunderbar...

Hab ich aber auch erst eben entdeckt... jetzt werde ich mir mal den Link schnappen und versuchen an anderer Stelle (also in unserem Warenkorb auch einen Link zu platzieren, der ein Popup auslößt, nur ganz so einfach ist das irgendwie nicht)

will ja einfach ein kleines Popup über den ganzen Bildschirm (ähnlich wie light- oder thickbox, nur ohne Bild sondern mit ner meldung "Ihr Artikel wurde erfolgreich in den Warenkorb gelegt" ---> "weiter shoppen" ---> "zur Kasse"

Wird ja wohl nicht so schwer sein, habe ja schon einges an super Samples gesehen, aber wie gesagt funktioniert nicht in den xtc Files, weil es immer wieder neu reloaded und dann auf die Startseite verweist.... obowhl ein "#" als Ziel im Link definiert ist...

Ich tüftel mal weiter in der Zeit...

Für jeden Tip bin ich,wie immer, dankbar!

Greetz

nbg12 · April 16, 2015

Hab jetzt auch mal das hier ausprobiert:

{literal}

script src="https://code.jquery.com/jquery-1.10.2.js"></script>

script>

$( "button" ).click(function() {

$( "p" ).toggle();

});

</script>

{/literal}

<button>Toggle</button>

<p>Hello</p>

also da ist ja jetzt keinerlei Verlinkung drinnen (also kein reload oder sowas wegen dem "#")

...und trotzdem funzt es nicht, wir haben natürlich noch andere

jquery .js files die wir laden, die habe ich aber auch mal sicherheitsh. komplett auskommentiert um sicher zu gehen, dass

auch nur das .toogle() js geladen wird. Hat auch nix geholfen. Das kann doch nicht sein oder? -.-

--> Bei mir steht nur "Hello" und wenn ich auf den BUtton klicke, passiert nix

nicht wundern "<" musste ich weglassen, sonst hätte ich den Post nicht absenden können, wurde geblockt!

oldbear · April 16, 2015

da muss ich dem Alex zustimmen, den ganzen Kram selber zu machen, wenn das xt_cart_popup zum kleinen Preis zu haben ist, ist die Mühe nicht wert

Grüsse

nbg12 · April 16, 2015

ja das stimmt zwar schon

ABER, es kann ja nicht sein, dass ein ganz einfacher Code wie dieser hier:

..\script.js



$(document).ready(function(){

// code:

	$( "button" ).click(function() {

		$( "p" ).toggle();

	});

[/PHP]

beliebige Datei:

[PHP]<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>[/PHP]

bei uns nicht funktionieren?!?

Es geht ja nicht nur um die Sache mit dem Warenkorb, sondern auch mal um normale Infoboxen oder einfach inlinePopups mit Jquery...

hat jmnd noch ne Idee, woran das liegen könnte?

danke schon mal

nbg12 · April 16, 2015

also ich hab jetzt mal im grid das Ganze ausprobiert, funktioniert wunderbar...

nur im eigenen Template nicht

Worauf deutet das? Das ein anderes geladenes JS vielleicht die Zeilen die ich versuche einzupflegen blockieren bzw. überschreiben oder so?

ich versuch mal all anderen js auszukommentieren... mal sehen

nbg12 · April 16, 2015

mann o mann...

Tagelang nen Fehler suchen und dann fällt mir erst gerade auf, dass die

scripts.js nicht in der js.php eingebunden war... Gibts hier kein Smiley mit nem Hammer auf nen Kopf schlagennnnnnn :D

Trotzdem Danke an alle!

besonders Alex!

nbg12 · April 16, 2015

weiß jemand noch, wie ich einen Link so definieren kann, dass er die Seite nicht reloaded sondern z.b. einfach auf sich selbst zeigt wie ein '#'

ich google in der Zeit weiter meine Finger wund

??

Danke vorab!

Sign In

link auf sich selbst "#" öffnet sich nicht

Recommended Posts

nbg12

Link to comment

Share on other sites

Alex@4tfm

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

Alex@4tfm

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

oldbear

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

nbg12

Link to comment

Share on other sites

Archived

Browse

Activity