Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
J B
[RESOLVED] Frustrating jQuery problem for theme creation
January 25, 2011 8:12 AM
Answer

J B

Rank: Junior Member

Posts: 82

Join Date: August 12, 2009

Recent Posts

This issue has been a thorn in my side for the past 3 work days now, I have gone into IRC a few times, and tried to get help, but as helpful as some members were, I was unable to get a working answer.

I have created a great little theme in HTML / CSS / JS as a template, now I began the process to port it into Liferay (VM).

I created a new `fngp-theme.war` folder inside:
C:\liferay-portal-6\jboss-5.1.0\server\default\deploy\fngp-theme.war

That folder is an EXACT copy of the base 7cogs theme (to work with). So I have began dressing it up (I should mention I did this before for a plain theme, no jQuery and it worked just fine).

I modify the proper velocity templates `portal_normal.vm`, `navigation.vm`.

I setup my includes for javascript in the <head> of `portal_normal.vm`:

 1<head>
 2
 3    <title>$the_title - $company_name</title>
 4   
 5    <script src="/fngp-theme/js/cufon-yui.js" type="text/javascript"></script>
 6    <script src="/fngp-theme/js/Futura_T_Condensed_500.font.js" type="text/javascript"></script> 
 7   
 8    $theme.include($top_head_include)
 9   
10    <script src="/fngp-theme/js/jquery.min.js" type="text/javascript></script>
11
12   
13    <script>
14
15        var j = $.noConflict();
16
17        j(document).ready(function() {
18            Cufon.replace('#topHeader h1, .rcontent250 h3');
19                        alert('Ran this crap here!');
20        });
21
22    </script>       
23   
24</head>


Here is where the fun starts, Liferay/Jboss pukes at this point:

 1
 2        at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:598)
 3        at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
 4        at java.lang.Thread.run(Thread.java:662)
 5
 6[b]09:44:12,961 ERROR [IncludeTag] Current URL /web/fngp/home generates exception: Encountered ")" at fngp-theme_SERVLET_CONTEXT_/templates/portal_normal
 7.vm[line 22, column 38]
 8Was expecting one of:[/b]    <EOF>
 9    "(" ...
10    <RPAREN> ...
11    <ESCAPE_DIRECTIVE> ...
12    <SET_DIRECTIVE> ...
13    "##" ...
14    "\\\\" ...
15    "\\" ...
16    <TEXT> ...
17    "*#" ...
18    "*#" ...


This is happening due to the following line:
1var j = $.noConflict();


It turns out I guess Velocity is being confused by Javascript syntax?? So I was told to add a `\` in front of the $ variable. I did, but all that does is pretty much 'disable' jQuery.

I do not see jQuery loaded in the DOM, nor Cufon, nor do I get something simple like the `alert()` to pop up.

I cannot seem to find any reference how to do this, something is overwriting my theme includes, and I am very frustrated. It should NOT be this difficult to create a theme for Liferay.

I have also tried adding my `on pageload` to the main.js that is included in hopes that *maybe* it was designed to run from main.js? I actually get my ALERT to fire then! Progress right? But then it tells me `Cufon is not defined` and neither is `$` or jQuery.

The 2 files are RIGHT THERE... they are properly included (via firebug I can click their link and pull up their source), yet any hope of making a call to them is not possible. How do I debug this and move ahead!?
Baptiste Grenier
RE: Frustrating jQuery problem for theme creation
January 24, 2011 7:59 AM
Answer

Baptiste Grenier

Rank: Regular Member

Posts: 100

Join Date: June 30, 2009

Recent Posts

Jakub B:

This is happening due to the following line:
1var j = $.noConflict();


Don't you have/did you try to use jQuery instead of the $ object?

You could also take a look at those links:
http://www.liferay.com/web/julio.camarero/blog/-/blogs/can-i-have-different-jquery-versions-in-liferay
http://www.liferay.com/web/jonas.yuan/blog/-/blogs/building-jquery-based-plugins-in-liferay-6
http://www.liferay.com/community/forums/-/message_boards/message/6455167

Cheers,
Baptiste
Jonathan Neal
RE: Frustrating jQuery problem for theme creation
January 24, 2011 10:04 AM
Answer

Jonathan Neal

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

Recent Posts

Yeap. Velocity won't play nice with $. Use jQuery instead.
J B
RE: Frustrating jQuery problem for theme creation
January 24, 2011 10:30 AM
Answer

J B

Rank: Junior Member

Posts: 82

Join Date: August 12, 2009

Recent Posts

I tried jQuery instead of $. I also read that you can use #[[this is not parsed]]# to have velocity ignore whatever is inside it, but looks like we are using an earlier version that does not support it.

Anyway, another wasted morning later, I have tried, and what I am noticing is that Nates reference here:

http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/using-jquery-or-any-javascript-library-in-liferay-6-0

Tells me to 'just include jquery' from google code, which I have tried, yet it DOES NOT WORK. I get:

1jQuery.fadeOut is not a function
2[Break On This Error] jQuery.fadeOut('#content');


as well as Cufon not being included.

So as a last ditch effort I reorganized my <head> like so:

 1<head>
 2
 3    <title>$the_title - $company_name</title>
 4
 5    $theme.include($top_head_include)
 6   
 7    <script src="/fngp-theme/js/cufon-yui.js" type="text/javascript"></script>
 8    <script src="/fngp-theme/js/Futura_T_Condensed_500.font.js" type="text/javascript"></script>
 9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
10
11   
12</head>


NOW.. I get CUFON working!? wow... AND jQuery 'seems' to load from Googleapi hosting. (I think local is jquery.js is still getting minimized even tho I have set: com.liferay.portal.servlet.filters.minifier.MinifierFilter=false

So having jQuery load externally seems to get around the minimization of the already minimized js.

jQuery seems to be loaded into DOM, BUT I cannot run any functions like .show(), .hide(), .fadeOut(), its like they are not there to use.


Should I just submit a support ticket for this? I can't find any adequate reference for fixing this, and I'm wasting valuable time. I don't know if this is a bug or what.
Attachment

Attachment

Attachments: DOM-elements.jpg (30.4k), FB-Console.jpg (16.6k)
J B
RE: Frustrating jQuery problem for theme creation
January 25, 2011 8:12 AM
Answer

J B

Rank: Junior Member

Posts: 82

Join Date: August 12, 2009

Recent Posts

Ahh I am an idiot, I got this resolved, but I was re-reading my own question this morning and realized that my 'test' case was the culprit.

jQuery was loading correctly it turns out, with the .noConflict() function.

The problem was that I ran this:
1jq.fadeOut('#content');

which is NOT a function...
I should have done this instead (proper call to .fadeOut()) *facepalm*
1jq('#content).fadeOut();


Wow... I can't believe I overlooked that... lol

Well this is resolved then.
Marcin Susel
RE: Frustrating jQuery problem for theme creation
March 6, 2011 1:23 PM
Answer

Marcin Susel

Rank: New Member

Posts: 4

Join Date: March 2, 2011

Recent Posts

Hi Jakub,

Question for you, once cufon runs, do you see any delay between page is loaded and the font replaced?
Cufon seems to be working for me but, there is a noticeable delay and it makes it looks really weird - first portal shows up in standard font and then, maybe half a second later - it turns to my custom font...

Have you noticed anything like this? Were you able to solve it?

Thanks!
J B
RE: Frustrating jQuery problem for theme creation
March 7, 2011 12:38 PM
Answer

J B

Rank: Junior Member

Posts: 82

Join Date: August 12, 2009

Recent Posts

@Marcin,

CUFON's drawback is that very flash you mention. There is really no way around it other than reducing the number of JS on your theme / page. If you have to process ~500KB of JS, you will very likely see a large delay for CUFON to kick in. However, I have like to create lite themes, so other than a standard jQuery include, I try to minimize any JS / CSS / images.

Keeping your page lite helps reduce the CUFON load. Other tips are don't go with funky fonts that might look really different from the original.

In my example I use an Arial font, and change things like H1 -> H4 tags for headers, there is a very small jump and not noticiable my most people unless I pointed it out.

I would even venture to say you see it as a long delay because you watch for it each time.
Marcin Susel
RE: Frustrating jQuery problem for theme creation
March 7, 2011 5:04 PM
Answer

Marcin Susel

Rank: New Member

Posts: 4

Join Date: March 2, 2011

Recent Posts

Thanks for your quick reply.

I was afraid this would be the case and I did some research on other ways of using custom fonts. I found this website http://www.fontsquirrel.com/fontface/generator

I am able to do exactly what cufon would do now, without any js! No delay in redrawing because there is no redrawing. I used that site to generate my custom font files, put this in my css:

@font-face {
font-family: 'ColaborateThinRegular';
src: url('colabthi-webfont.eot');
src: url('colabthi-webfont.eot?iefix') format('eot'),
url('colabthi-webfont.woff') format('woff'),
url('colabthi-webfont.ttf') format('truetype'),
url('colabthi-webfont.svg#webfonthrAaYSXj') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
units-per-em: 360;
panose-1: 2 0 5 6 5 0 0 2 0 4;
ascent: 288;
descent: -72;
x-height: 4;
bbox: -9 -269 287 71;
underline-thickness: 18;
underline-position: -18;
stemh: 13;
stemv: 17;
unicode-range: U+0020-U+007E;
}

And then voila - I can use this font like I would an arial:

h2{ font-size:18px; text-transform:uppercase; coloremoticon4e4845;
font-family: 'ColaborateThinRegular', arial, serif; text-shadowemoticon4e4845 0px 0px 0.2em;}

Thanks again!