hi,

i have a custom code to show an info-box by mouseover. For that i use the following code:

<script type="text/javascript" language="JavaScript">

var offsetx=20
var offsety=0

function InfoBoxAusblenden() {
      document.getElementById('InfoBox').style.visibility = "hidden";
}

function InfoBoxAnzeigen(e,Inhalte,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
        
        document.getElementById("BoxInhalte").innerHTML = Inhalte;
        document.getElementById('InfoBox').style.left = (PositionX+offsetx)+"px";
        document.getElementById('InfoBox').style.top = (PositionY+offsety)+"px";
        document.getElementById('InfoBox').style.visibility = "visible";
}

</script>

<style type="text/css">

#InfoBox {
visibility:hidden;
position:absolute;
top:10px;
left:10px;
z-index:1;

/* diese Angaben können Sie anpassen */
width:300px;
background-color:#FDFEFF;
border:4px solid #0090E0;
}

/* weitere Box in der Info-Box für padding */
#BoxInnen {
padding:15px;
}

/* Formatierung Texte in der Info-Box */

#BoxInhalte {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color:#5F5F5F;
line-height:130%;
}

</style>

<!-- Anfang DIV für die InfoBox -->

<div id="InfoBox" style="z-index:1; visibility:hidden;">
<div id="BoxInnen"><span id="BoxInhalte">&nbsp;</span></div>
</div>

<!-- Ende DIV für die InfoBox -->

<br><br>

<a onmouseover="InfoBoxAnzeigen(event,'Hier steht Text<br>noch eine Textzeile Text<br>und eine dritte Zeile',20,-30);" onmouseout="InfoBoxAusblenden();" href="javascript:void(0)">MouseOver für mehr Info</a>
<br><br>
<a onmouseover="InfoBoxAnzeigen(event,'Text für die Infobox',20,-30);" onmouseout="InfoBoxAusblenden();" href="http://www.mydomain.net/">Link</a>

the Javascript i load from an .js file from my child Theme.

For the HTML i use the avia codeblock.

The code works fine on other websites, but not on my enfold site. Can you plz have look?

`

• This topic was modified 9 years, 7 months ago by Chris_85.

I have created a masonry with several images that represent the cover of a brochure. Upon selecting (clicking on) the image I don’t want the image to be opened in a lightbox but to open a PDF file. I use the Real3D Flipbook plugin for this.

I am able to use the provided shortcode on the Masonry itself but then clicking on an image will always open the same PDF file. How can I set the shortcode on an individual image within the masonry?
The creator of the Real3D Flipbook plugin provided me with this: “add custom css class to each image, either from the admin or with some javascript code”.
Does any know how can achieve this or how to use javascript for this? (I am newbie….)

Related to my question I came across another topic talking about the same thing () and tried that code but am not sure where I can then put the custom css on an individual image.

Hallo Enfold Team,

I have a question concerning the link in the private content: The desktop view has a transparent header. If I scoll down, a white bar over the logo and the menu shows up – that’s perfect. I would like to have it exactly the same for the mobile view. There is now just a white bar behind the logo – and the green graphic is down below.

Can you help me please?
By the way, a really great theme!!

King regards,

Great theme.

Anyway, I’m using cf7. On the page I’m editing at the moment (localhost) I have a colour section at top, with a 3/5 and 2/5 container inside. Both contain text boxes. In the 2/5 which sits to the right of the 3/5 I have the CF7 shortcode in the textbox. The cf7 form is two columns. When the screen reaches 480px or less I want the columns to become one as two columns are to small for the placeholder text to be visible.

It works fine when the 2/5 section (with the cf7 form in) drops below the 3/5 section but doesn’t respond until then, even when the form is well under 480px, so just stays as a two column form. I’ve tried the below and other various combinations but can’t get it to work. Any ideas please? Thanks.

@media only screen and (min-width: 480px) {
#top .col-half {
width: 50% !important;
}
}

• This topic was modified 9 years, 7 months ago by alibear11.