Custom HTML, CSS and Javascript

[andlia]

Hey Armin,

This is a specific question so I wouldn't be surprised if you just glossed over this, but I have a specific customization in mind and I'm wondering if it would work with Lay Theme.

To summarize, I want to incorporate code that would allow the user to see a picture when the cursor hovers over it. An example can be found here: http://jsfiddle.net/KumcX/1899/

The code would utilize custom HTML, CSS, and Javascript. Would that be possible with Lay Theme?

If this question or similar to it has been answered already, please accept my apologies.

Thanks!

[arminunruh]

hello andlia!

You could insert html in the gridder using "more"->"+html". Then you could use custom css and custom javascript to achieve this effect. If you did not buy lay theme yet and if you want to try out if that works well with lay theme I can give you a test-account. Please let me know if you want a test account, then I will write you an email.

[andlia]

@arminunruh Yes, I wanted to know if what I wanted to create was going to work with Lay Theme before I purchased it so a test account would be perfect. Thanks Armin! :smile:

[andlia]

Hey Armin,

Thanks for offering me access to the test account. The basics of it is very intuitive and user friendly, but I can't seem to have any of my custom Javascript working.

I'm adding Frontend.module("GlobalEvents").on('projectpage', function(){ in front of it, but it still isn't working.

The console is giving me an error, saying that its an "Uncaught TypeError: $ is not a function". I tried the HTML, CSS and Javascript in JFiddle and it's working fine, so I don't know what's going on.

Thanks in advance!

Here is my code:

    $(document).mousemove(function (e) {
            $(".Ship").css({
                left: e.pageX + 15,
                top: e.pageY + 15
            });
            $(".Shit").css({
                left: e.pageX + 15,
                top: e.pageY + 15
            });
        });
        
    $('span.spec.b').hover(function(){
        $('.Ship').css('opacity', '1');
    }, function(){
        $('.Ship').css('opacity', '0');
    });

    $('span.spec.c').hover(function(){
        $('.Shit').css('opacity', '1');
    }, function(){
        $('.Shit').css('opacity', '0');
    });
});
</script>

[arminunruh]

Hey!

Please use jQuery instead of $
That should work

[andlia]

@arminunruh Wow, I feel so dumb.

That worked. Thanks for your help and allowing me to try out Lay Theme. I'll buy a license in a couple of weeks when I receive my paycheck. Thanks again!