jQuery Mouseover Box in Oxshortdesc einbauen

Deutsches Forum
1

Ich wüde gerne diesen Code in die oxshortdesc einbauen:

http://jsfiddle.net/9RxLM/

Dazu habe ich

  1. das html in die oxshortdesc getan (und mit [{$oDetailsProduct->oxarticles__oxshortdesc->value|html_entity_decode}] dafür gesorgt, daß html auch verstanden wird, und das tut es auch.

  2. in die oxd.css den css-Code getan.

  3. eine Datei in meinen js-Ordner getan (mit den JavaScript) (out/azure/src/js/widgets/meine_datei.js) und habe sie im productmain.tpl mit [{oxscript include=“out/azure/src/js/widgets/meine_datei.js”}] in den Block [{block name=“details_productmain_shortdesc”}] getan. Hab es auch mit relativem Pfad zur .js-Datei versucht.

Aber leider geht es nicht. Firebug Debugger meldet nichts. Weiß jemand, woran es liegt?

2

[QUOTE=MichaelH;161692]habe sie im productmain.tpl mit [{oxscript include=“out/azure/src/js/widgets/meine_datei.js”}][/QUOTE]


[{oxscript include="js/widgets/meine_datei.js"}]

Grüße
Rafig

3

Vielen Dank für Deine Hilfe! Es geht jetzt, die Box wird angezeigt!

Leider kann ich aber keine cms-Seite in die Box mit

<div class="tiptextdescription"> [{oxcontent ident="51d5e7f190383138da091cf6058b1e97"}]</div>

einfügen.
Es erscheint nur [{oxcontent ident=“51d5e7f190383138da091cf6058b1e97”}] in der Box. Vielleicht hilft mir das weiter:

http://php.net/manual/en/language.basic-syntax.phpmode.php.
Ansonsten kann ich varchar von oxshortdesc erhöhen, und alles immer wieder in die oxshortdesc schreiben.

4 

[{capture assign="myJS" name="myJS"}]
    $('#logo').on('hover', function(){
    alert('[{oxcontent ident="oxdeliveryinfo"}]');
    });
[{/capture}]
[{oxscript add=$myJS}]

Grüße
Rafig

5

Smarty:


[{oxifcontent ident="51d5e7f190383138da091cf6058b1e97" object="oCont"}]
[{oxscript include="js/widgets/meine_datei.js"}]  
 <div class="description">[{$oCont->oxcontents__oxcontent->value}]</div>
[{/oxifcontent}]

CSS:


div.description {
display: none;
}

jQuery (meine_datei.js):


$( document ).ready(function() {
    $(".tiptext").mouseover(function() {
    $(this).children(".description").css({
    "opacity":"0",
    "display":"block"
    }).show().animate({opacity:1});
    }).mouseout(function() {
    $(this).children(".description").css({
    "opacity":"1",
    "display":"none"
    }).show().animate({opacity:0});
    });
});

Grüße
Rafig

6

Mit oxifcontent geht es! Super klasse, danke!

Das Mobile theme macht aber leider keine box. Dort ist nur

[{$oCont->oxcontents__oxcontent->value}]

zu lesen.
Hat jemand eine Idee, wie ich die box ins Mobile-Theme bekomme?

Jetzt geht’s. Mobile-Theme hat ja eigene Tpls. Und da steht der Block [{block name=“details_productmain_shortdesc”}] im header.tpl.

7

$(“.tiptext”).mouseover(function()

wie viele Smartphones mit einer Maus hast Du bisher gesehen?

Such mal nach jquery und Touch-Events. das wird dann im Mobile-Theme besser passen.

8

Vielen Dank Euch allen für die Hinweise!
So funktioniert’s:

$(".tiptext").on("tap", function () {
    $(this).children(".tiptextdescription").toggle();
})

Und man muß noch den das css in die Mobile-eigene oxid.css tun, sonst ist die Box erst ausgeklappt und wird durch den tap eingeklappt (also verkehrt herum). Übrigens gibt es auch in dem Template der Listen-Ansicht noch diesen oxshrtodesc-block, der angepaßt werden muß. Ein gutes Mittel übrigens, um ein Smartphone mit Firefox Developper zu imitieren ist die App “User Agent Switcher” und dann zusätzlich noch “Responsive Design View” aktivieren mit “Simulate touch events”.