How to integrate CSS into text area

[dani]

Hi Forum,

I wrote a little bit of CSS to fade in/out an image in a absolute positioned div when hovering over text.

It works in an isolated environment :
http://codepen.io/cestdani/pen/LWQNxO

but when integrated into LAY it doesn't work anymore.
http://visuel.org/XAMP/test-caption-image

Could you tell me how I could integrate this code, or suggest another way to do this?

I tried the same idea with jquery, but still doesn't work when trying to integrate.

http://codepen.io/cestdani/pen/mWXOrj
http://visuel.org/XAMP/test-caption-image-2

Thanks!
Daniel

[mariusjopen]

Hi Daniel,

thank you for writing us.

The problem is that in your isolated environment the structure of the HTML looks different like on the LayTheme page.

Here is a screenshot of your Codepen:

And here is a screenshot of your code within the LayTheme:

When you compare you see that the link with mushroom is inside a paragraph style p,

I just removed it on my browser to test what will happen and it seems to work fine now:

For you it will be rather difficult to adjust the HTML structure in Laytheme. But you can adjust your CSS code in Codepen and try to get it to work with the paragraph style around it.

I hope that helped and answered your question.

Let us know if you get stuck.

All the best!

Marius

[dani]

Hi Marius,

Thank you for the detailed response.

1. Shouldn't the javascript version work? (it references objects without looking at the specific nesting structure of the HTML).

That said, I still can't get this example to work in LAY.
http://codepen.io/cestdani/pen/mWXOrj

2. The other issue is to use absolute positioning outside of the nested HTML div. I've only seen solutions for this with javascript,

    jQuery('#div1').appendTo("body");
    jQuery('#div2').appendTo("body");
   

Can you suggest a solution to this as it will apply in many cases in the future when adding simple code features into LAY.

Here is a the updated test page with the CSS (which works, but is not absolutely positioned in the top right).
http://visuel.org/XAMP/test-caption-image

3. Is LAY ok with using $ for jQuery
   ie. $ ('#div1').appendTo("body"); instead of jQuery('#div1').appendTo("body");

The script doesn't seem to work at all, but there are no errors.
Here it is (in the Custom HTML at bottom)

<script>
jQuery(document).ready(function(){

jQuery('#div1').appendTo("body");
jQuery('#div2').appendTo("body");


jQuery("#div1").hide();
jQuery("#div2").hide();

jQuery(".show1").hover(function(){
    jQuery("#div1").fadeToggle();
});

jQuery(".show2").hover(function(){
    jQuery("#div2").fadeToggle();
});

});
</script>

Thanks,
Daniel

[mariusjopen]

Dear Daniel,

1
The Javascript version should work yes. But you cannot use the jQuery(document).ready(function(){function.

Because your Lay Theme website is a "Single Page" JavaScript application you cannot just use jQuery(document).ready(…) to execute your js because the ready event only fires once when the website loads the first time.

You need to use window.laytheme.on("newpage", function(layoutObj, type, obj){ });.

You can find a detailed documentation about this here:
http://laytheme.com/documentation.html#custom-javascript

2
The append solution might work. You need to test it with the new way of calling jQuery I mentioned above.
Another way I would try is to get the image url and place it via jQuery into an image box which is outside of the Gridder-Module.

Since this is not a default feature – we need to find a workaround like that.

3
I answered that above I think :-)

All the best and let me know if you have further questions!

Marius