Lift using JQuery and JCarousel
5 views
Skip to first unread message
wapgui
Apr 3, 2009, 4:32:43 AM4/3/09
to Lift
Hi,
had anybody success including the JCarousel plugin into Lift.
Here is my default.html
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml"
xmlns:lif="http://liftweb.net/">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1"/>
<title>jCarousel Examples</title>
<lift:CSS.blueprint/>
<lift:CSS.fancyType/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script id="jquery" type="text/javascript" src="classpath/
jquery.js"></script>
<script id="json" type="text/javascript" src="classpath/json.js"></
script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></
script>
<link rel="stylesheet" type="text/css" href="css/
jquery.jcarousel.css"/>
<link rel="stylesheet" type="text/css" href="css/skin.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type='text/javascript' src='http://getfirebug.com/releases/
lite/1.2/firebug-lite-compressed.js'></script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>This is the most simple usage of the carousel with no
configuration options.</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg"/></li>
<li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg"/></li>
<li><img src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg"/></li>
<li><img src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg"/></li>
<li><img src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg"/></li>
<li><img src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg"/></li>
<li><img src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg"/></li>
<li><img src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg"/></li>
<li><img src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg"/></li>
<li><img src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg"/></li>
</ul>
</div>
<lift:bind name="content"/>
</body>
</html>
and this is my index.html
<lift:surround with="default" at="content">
</lift:surround>
The generated page is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-us" xmlns:lif="http://liftweb.net/" xmlns="http://
www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-
type" />
<title>jCarousel Examples</title>
<link href="/classpath/blueprint/screen.css" type="text/css"
rel="stylesheet" media="screen, projection" />
<link href="/classpath/blueprint/print.css" type="text/css"
rel="stylesheet" media="print" />
<!--[if IE]><link rel="stylesheet" href="/classpath/blueprint/
ie.css" type="text/css" media="screen, projection"><![endif]-->
<link href="/classpath/blueprint/plugins/fancy-type/screen.css"
type="text/css" rel="stylesheet" media="screen, projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="classpath/jquery.js" type="text/javascript"
id="jquery"></script>
<script src="classpath/json.js" type="text/javascript" id="json"></
script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></
script>
<link href="css/jquery.jcarousel.css" type="text/css"
rel="stylesheet" />
<link href="css/skin.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-
compressed.js" type="text/javascript"></script>
<script type="text/javascript" src="/ajax_request/liftAjax.js"></
script></head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>This is the most simple usage of the carousel with no
configuration options.</p>
<ul class="jcarousel-skin-tango" id="mycarousel">
<li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg" /></li>
<li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg" /></li>
<li><img src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg" /></li>
<li><img src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg" /></li>
<li><img src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg" /></li>
<li><img src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg" /></li>
<li><img src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg" /></li>
<li><img src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg" /></li>
<li><img src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg" /></li>
<li><img src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {lift_successRegisterGC();});
var lift_page = 'F378086025088YCR';
// ]]>
</script></body>
</html>
I think the double jQuery(document).ready(function() causes the
problem, but I found no way to include my definitions at the bottom
off the page.
Cheers
Torsten
had anybody success including the JCarousel plugin into Lift.
Here is my default.html
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml"
xmlns:lif="http://liftweb.net/">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1"/>
<title>jCarousel Examples</title>
<lift:CSS.blueprint/>
<lift:CSS.fancyType/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script id="jquery" type="text/javascript" src="classpath/
jquery.js"></script>
<script id="json" type="text/javascript" src="classpath/json.js"></
script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></
script>
<link rel="stylesheet" type="text/css" href="css/
jquery.jcarousel.css"/>
<link rel="stylesheet" type="text/css" href="css/skin.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type='text/javascript' src='http://getfirebug.com/releases/
lite/1.2/firebug-lite-compressed.js'></script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>This is the most simple usage of the carousel with no
configuration options.</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg"/></li>
<li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg"/></li>
<li><img src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg"/></li>
<li><img src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg"/></li>
<li><img src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg"/></li>
<li><img src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg"/></li>
<li><img src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg"/></li>
<li><img src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg"/></li>
<li><img src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg"/></li>
<li><img src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg"/></li>
</ul>
</div>
<lift:bind name="content"/>
</body>
</html>
and this is my index.html
<lift:surround with="default" at="content">
</lift:surround>
The generated page is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-us" xmlns:lif="http://liftweb.net/" xmlns="http://
www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-
type" />
<title>jCarousel Examples</title>
<link href="/classpath/blueprint/screen.css" type="text/css"
rel="stylesheet" media="screen, projection" />
<link href="/classpath/blueprint/print.css" type="text/css"
rel="stylesheet" media="print" />
<!--[if IE]><link rel="stylesheet" href="/classpath/blueprint/
ie.css" type="text/css" media="screen, projection"><![endif]-->
<link href="/classpath/blueprint/plugins/fancy-type/screen.css"
type="text/css" rel="stylesheet" media="screen, projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="classpath/jquery.js" type="text/javascript"
id="jquery"></script>
<script src="classpath/json.js" type="text/javascript" id="json"></
script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></
script>
<link href="css/jquery.jcarousel.css" type="text/css"
rel="stylesheet" />
<link href="css/skin.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-
compressed.js" type="text/javascript"></script>
<script type="text/javascript" src="/ajax_request/liftAjax.js"></
script></head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>This is the most simple usage of the carousel with no
configuration options.</p>
<ul class="jcarousel-skin-tango" id="mycarousel">
<li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg" /></li>
<li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg" /></li>
<li><img src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg" /></li>
<li><img src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg" /></li>
<li><img src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg" /></li>
<li><img src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg" /></li>
<li><img src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg" /></li>
<li><img src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg" /></li>
<li><img src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg" /></li>
<li><img src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {lift_successRegisterGC();});
var lift_page = 'F378086025088YCR';
// ]]>
</script></body>
</html>
I think the double jQuery(document).ready(function() causes the
problem, but I found no way to include my definitions at the bottom
off the page.
Cheers
Torsten
marius d.
Apr 3, 2009, 4:03:29 PM4/3/09
to Lift
Hmm ... I'd be very surprised if the the presence of the multiple
ready function calls would cause this. Virtually you can have as many
as you want. But what is the exact problem ?
I could probably take a look tomorrow.... and maybe make a lift widget
out of it.
Br's,
Marius
P.S.
You can render stuff in any place you want using various ways. For
instance:
1. Use a snippet
2. Use lift:embed
3.You can post process resulting xml before it is sent to client (a
pretty uncommon need)
I I'd really doubt that this would represent the solution.
> <html xml:lang="en-us" xmlns:lif="http://liftweb.net/" xmlns="http://www.w3.org/1999/xhtml"><head>
ready function calls would cause this. Virtually you can have as many
as you want. But what is the exact problem ?
I could probably take a look tomorrow.... and maybe make a lift widget
out of it.
Br's,
Marius
P.S.
You can render stuff in any place you want using various ways. For
instance:
1. Use a snippet
2. Use lift:embed
3.You can post process resulting xml before it is sent to client (a
pretty uncommon need)
I I'd really doubt that this would represent the solution.
wapgui
Apr 4, 2009, 11:18:36 AM4/4/09
to Lift
The problem is how the carousel looks like. It shows all the picture
one below the other. I know this effect, then normaly JQuery is
missing. But I can try it as snippet or lift:embed.
Cheers
Torsten
one below the other. I know this effect, then normaly JQuery is
missing. But I can try it as snippet or lift:embed.
Cheers
Torsten
marius d.
Apr 4, 2009, 2:30:58 PM4/4/09
to Lift
might be that blueprint's css ul/li styles are conflicting with list
styles that JCarousel is using? Try to not use:
<lift:CSS.blueprint/>
<lift:CSS.fancyType/>
... and see if things get improved.
Br's,
Marius
styles that JCarousel is using? Try to not use:
<lift:CSS.blueprint/>
<lift:CSS.fancyType/>
... and see if things get improved.
Br's,
Marius
wapgui
Apr 4, 2009, 4:43:03 PM4/4/09
to Lift
Nope, there is no difference. Maybe I can find it out with the good
old try and error method.
old try and error method.
Chad Skinner
Apr 4, 2009, 10:32:06 PM4/4/09
to lif...@googlegroups.com
If you believe this to be a style issue, I would recommend downloading firefox and installing the "Web Developer Tools" plugin. One of the options it presents is edit CSS and you can add or remove stylesheet rules to see which is causing the conflict.
-- Chad
marius d.
Apr 5, 2009, 2:35:40 AM4/5/09
to Lift
I tried it last night but I'm getting a JS error in the clipping
function ... I need todig more on this. Try firebug ...
Br's,
Marius
On Apr 5, 5:32 am, Chad Skinner <chadwskin...@gmail.com> wrote:
> If you believe this to be a style issue, I would recommend downloading
> firefox and installing the "Web Developer Tools" plugin. One of the options
> it presents is edit CSS and you can add or remove stylesheet rules to see
> which is causing the conflict.
> -- Chad
>
> ...
>
> read more »
function ... I need todig more on this. Try firebug ...
Br's,
Marius
On Apr 5, 5:32 am, Chad Skinner <chadwskin...@gmail.com> wrote:
> If you believe this to be a style issue, I would recommend downloading
> firefox and installing the "Web Developer Tools" plugin. One of the options
> it presents is edit CSS and you can add or remove stylesheet rules to see
> which is causing the conflict.
> -- Chad
>
>
> read more »
marius d.
Apr 5, 2009, 3:48:36 AM4/5/09
to Lift
Holy cow ... this one is weird. In the jcarousel() function we have
the following condition:
if (e.nodeName == 'UL' || e.nodeName == 'OL')
{
}
the problem was capitalization test. Replacing UL with ul in the above
test made it work. But this is a hack ... Still putting this at the
begining of jcarousel() function:
console.log(e.nodeName);
in the stattic example it yields UL ...capitalized but in the lift app
it is always ul. Still in the source markup in both examples they are
<ul> non capitalized. I tried to put the exact doctypein the simpl
static example as I have in the lift application. So I don't have an
explanation why foir the static examples I'm getting camel case node
name and for the online one I'm getting the lower case.
However if you use <UL> inyour markup should work.
Br's,
Marius
> ...
>
> read more »
the following condition:
if (e.nodeName == 'UL' || e.nodeName == 'OL')
{
}
the problem was capitalization test. Replacing UL with ul in the above
test made it work. But this is a hack ... Still putting this at the
begining of jcarousel() function:
console.log(e.nodeName);
in the stattic example it yields UL ...capitalized but in the lift app
it is always ul. Still in the source markup in both examples they are
<ul> non capitalized. I tried to put the exact doctypein the simpl
static example as I have in the lift application. So I don't have an
explanation why foir the static examples I'm getting camel case node
name and for the online one I'm getting the lower case.
However if you use <UL> inyour markup should work.
Br's,
Marius
>
> read more »
marius d.
Apr 5, 2009, 4:05:43 AM4/5/09
to Lift
I guess jcarousel developers should have taking care of case
insentitiveness ...
Br's,
Marius
> ...
>
> read more »
insentitiveness ...
Br's,
Marius
>
> read more »
marius d.
Apr 5, 2009, 4:15:36 AM4/5/09
to Lift
Oh ... here is a potential explanation.
For xhtml 1.0 spec the nodenames are returned by nodeName property as
they are declared. For HTML they are always camel case in nodeName
property.
Now Lift by default returns Content-Type: application/xhtml+xml in the
HTTP header whereas JCarousel online examples Content-Type: text/html
despite the fact that they declaring doc type as being xhtml. So I
think that their examples are treated as html and not xhtml by browser
hence leading to UL camel cased. For the offline static example I
think the browser is just considering it a HTML and not realy xhtml
for some reason.
So you can probably file a bug to JCarousel so that JCarousel folks to
fix it. It is a trivial fix anyways.
Br's,
Marius
> ...
>
> read more »
For xhtml 1.0 spec the nodenames are returned by nodeName property as
they are declared. For HTML they are always camel case in nodeName
property.
Now Lift by default returns Content-Type: application/xhtml+xml in the
HTTP header whereas JCarousel online examples Content-Type: text/html
despite the fact that they declaring doc type as being xhtml. So I
think that their examples are treated as html and not xhtml by browser
hence leading to UL camel cased. For the offline static example I
think the browser is just considering it a HTML and not realy xhtml
for some reason.
So you can probably file a bug to JCarousel so that JCarousel folks to
fix it. It is a trivial fix anyways.
Br's,
Marius
>
> read more »
wapgui
Apr 5, 2009, 2:30:44 PM4/5/09
to Lift
Thank you guys, you made my day. I planed to investigate this js error
tomorrow on my work place.
I changed the definitions inside the js because the change in the html
break the pictures, only 2 are shown.
Cheers
Torsten
> ...
>
> read more »
tomorrow on my work place.
I changed the definitions inside the js because the change in the html
break the pictures, only 2 are shown.
Cheers
Torsten
>
> read more »
Reply all
Reply to author
Forward
0 new messages