drupal_add_js jQuery plugin wrapper

By NonProfit on 17 Apr 2008 at 00:33 UTC

Hi!

I'm struggling with what I know is a simple application of jQuery to a Drupal 6 site, but it is beyond me how to create the wrapper.

I chose the liScroll for my example. Based on code I found here, I created my story, (with PHP code Input format .)

 <?php drupal_add_js('/sites/all/plugins/jquery.li-scroller.1.0.js'); ?>

<ul id="ticker01"> 
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> 
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> 
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> 
    <!-- eccetera --> 
</ul> 

<script type="text/javascript">
$(function(){ 
$("ul#ticker01").liScroll(); 
}); 
</script>

The page calls the <ul>, although it's not styled.

The HTML looks like this:

<div class="content">
     
<ul id="ticker01"> 
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> 
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> 
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> 
    <!-- eccetera --> </ul> 

<script type="text/javascript">
    $(function(){ 
    $("ul#ticker01").liScroll(); 
    }); </script>  

</div>

I suspect that the problem lies in wrapping the function in <script> tags?

I've spent hours on this and can't get past step one.

Any input greatly appreciated.

Thanks!

-NP

Comments

<head>

NonProfit commented 17 April 2008 at 00:42

PS: The call is not being added to the head.

Try it this way and see if

WorldFallz commented 17 April 2008 at 00:56

Try it this way and see if it makes a diff:

<script src="/sites/all/plugins/jquery.li-scroller.1.0.js" type="text/javascript">

and this way:

drupal_add_js('/sites/all/plugins/jquery.li-scroller.1.0.js', 'inline');

===
Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime. -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

Try this:

WorldFallz commented 17 April 2008 at 00:45

Try this:

<script type="text/javascript">
$(document).ready(function()
{
    $("#ticker01").liScroll(); 
})
</script>

Also, i don't know if it matters, but I always put the script tags at the top of the page after the drupal_add_js statement.

invalid flag after regular expression

NonProfit commented 17 April 2008 at 01:24

WorldFallz, Thanks for your reply!

I now have the call in the head, so I'm a whole lot closer. Thank you!

Here's what I did:

<?php drupal_add_js('/sites/all/plugins/jquery.li-scroller.1.0.js', 'inline'); ?>

<script src="/sites/all/plugins/jquery.li-scroller.1.0.js" type="text/javascript">

<script type="text/javascript">
$(document).ready(function()
{
    $("#ticker01").liScroll();
})
</script>

<ul id="ticker01"> 
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> 
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> 
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> 
    <!-- eccetera --> 
</ul>

This causes Firebug to throw a invalid flag after regular expression error. This makes sense for script is opened twice and closed only once. But when I remove <script type="text/javascript"> or add in another </script> I still get the error.

Thanks!

-NP

You can get rid of the

WorldFallz commented 17 April 2008 at 01:35

You can get rid of the

<script src="/sites/all/plugins/jquery.li-scroller.1.0.js" type="text/javascript">

That was just for testing-- and it should be either the PHP version OR the <script> version, but not both, lol.

Ahh, that makes more sense.

NonProfit commented 17 April 2008 at 02:08

Hey WorldFallz, thank you for your help. It makes sense you'd only need to call it once. (I'd very enamored with Drupal, but it constantly makes me realize I'm a themer in a developer's world.)

OK, I dropped the line and I still can't get the jQuery to apply.
I've got two errors: invalid flag after regular expression and $("#ticker01").liScroll is not a function

Output reads as follows:

  <div class="content">
    
<script type="text/javascript">
$(document).ready(function()
{
    $("#ticker01").liScroll();
})
</script>

<ul id="ticker01"> 
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> 
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> 
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> 
    <!-- eccetera --> 

</ul> 
  </div>

I'm beginning to remember why I despised JavaScript >grin<.

-NP

How about this:

WorldFallz commented 17 April 2008 at 02:29

You're welcome-- try this:

<?php drupal_add_js('/sites/all/plugins/jquery.li-scroller.1.0.js', 'inline'); ?>
<?php drupal_add_js('$(document).ready(function(){ $("ul#ticker01").liScroll();});','inline'); ?>

<ul id="ticker01">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
    <!-- eccetera -->

</ul>

I'm beginning to remember why I despised JavaScript >grin<.

I know what you mean-- thankfully, jquery is a lot more user friendly.

Jiminie Christmas!

NonProfit commented 17 April 2008 at 03:21

Hello WorldFallz,

Jiminie Christmas! I'm not certain when I crossed the "pest" threshold, but I suspect it was several messages ago. Thanks so much for hanging in there with me.

OK, obviously with two .php commands I've got corresponding types in the head:

<script type="text/javascript">/sites/all/plugins/jquery.li-scroller.1.0.js</script>
<script type="text/javascript">$(document).ready(function(){ $("ul#ticker01").liScroll();});</script>

and only an unordered list in the body

  <div class="content">
    
<ul id="ticker01">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>

    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
    <!-- eccetera -->

</ul>  </div>

List is rendered but not styled. Two errors, invalid flag after regular expression and $("ul#ticker01").liScroll is not a function, remain...At some point, I've really got to start spelling etcetera correctly.

Thank you!

-NP

You're not a pest at all,

WorldFallz commented 17 April 2008 at 15:41

You're not a pest at all, I'm very interested in getting jquery plugins to work with drupal. In fact, I'm considering adding liScroll to my jq_eyecandy module if I can ever get it to work, lol.

Ok, we're 1/2 way there. I didn't have access to my test box last night, so I couldn't try it out myself. I just loaded it up and I'm getting the same errors are you are. The code is correct (both appear in the head) so the plugin is the problem. The second error is probably because of the first error. It's not a very complex plugin, so i'm looking at the code-- but i'm no javascript jockey, so if it's not obvious I may not be able to see the problem.

A problem with the plugin?

NonProfit commented 17 April 2008 at 17:06

Hi WorldFallz, A problem with the plugin? That doesn't seem fair! (At least now I don't feel so bad.) Thanks much for all your help. Blessings! -NP

No, it doesn't, lol. And

WorldFallz commented 17 April 2008 at 17:21

No, it doesn't, lol. And it's making me crazy. I finally got rid of the errors, but now the plugin isn't scrolling anything. I'm very skeptical that the version of the plugin linked for download is the actual version used on the demos-- there's a syntax error on one of the lines >8< Still working on it though. Worse comes to worse I'll try to dig up another scroller plugin, but I like this because it's short and sweet. Of course, it needs to work, lol.....

SUCCESS

WorldFallz commented 17 April 2008 at 18:12

Ok, I finally got it. I had to rewrite parts of the script and use the http://drupal.org/project/jquery_plugin module to load it, but I've got it working. Also, left off the "instructions" page was the fact that you had to view the source of the page and use the css there to actually get it to scroll anything. It's all done via CSS so I should have realized that. Duh.

To get it working:

download and install the http://drupal.org/project/jquery_plugin module
download the jquery.liscroll.min.js file attached to http://drupal.org/node/247991 and copy it into the jquery_plugin module directory
rename it from jquery.liscroll.min_.js_.txt back to jquery.liscroll.min.js (the upload does that automatically)

add the following code to a page to test it:

<?php jquery_plugin_add('liscroll'); ?>
<?php drupal_add_js('$(document).ready(function(){ $("ul#ticker").liscroll();});','inline'); ?>
<style type="text/css">
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff; 
width: 738px; 
height: 27px; 
margin: 0; 
padding: 0
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 
</style>
<ul id="ticker">
    <li><span>10/10/2007</span><a href="#"> The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#"> End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#"> The code that you ...</a></li>
    <!-- eccetera -->

</ul>

Ta Da!

It's all done with the CSS, so if you play around with it and you don't know what you're doing (particularly with respect to the widths), you'll break the scrolling. You can change colors, fonts, and the border no problem. I changed the width using just the hundreds (738 -> 538, 718 -> 518, 750 -> 550, etc.) and that worked ok.

I have no idea why it works with the contrib jquery_plugin_add function and not the drupal drupal_add_js function, but whatever. I'll definitely be adding this to my jq_eyecandy module once I can figure out a way to package it up in a user friendly way.

WorldFallz, Thank you, thank

NonProfit commented 19 April 2008 at 18:08

WorldFallz,

Thank you, thank you...1000X "Thank you!"

I'm going to dig into your code now!

Blessings!

-NP

Still doesn't work for me...

bhoghankz commented 28 April 2008 at 05:05

I'm currently using drupal 5.7, jQuery 1.1.2, jquery_plugin and jquery.liscroll.min.js dowloaded from your mentioned link then copy paste above code in a new block using php input format but there's no effect except border line and nothing inside.
How i can make this work ?

I'm using it on a D6 site

WorldFallz commented 28 April 2008 at 13:32

I'm using it on a D6 site with jquery 1.2-- i have no idea if the plugin works with jquery 1.1.2. I've had problems with other jquery plugins working with less than v1.2-- you might want to check the official plugin page to see if it will work with your version of jquery.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

Where is the module ??!

ClearXS commented 25 August 2010 at 03:09

See this discussion http://drupal.org/node/700040#comment-3368944 and I found this old thread that seems to have one of the nicest ways to make a newsticker/scroller

yngens commented 19 April 2008 at 19:13

Just four steps

NonProfit commented 20 April 2008 at 02:01

Hey WorldFallz, welcome yngens,

OK, it's just FOUR EASY TO UNDERSTAND STEPS and I still can't get it. Uggh!

So, I moved from my live site to a local fresh install of 6.2 with bluemarine theme.

jQuery plugins 6.x-1.2 installed and enabled

jquery.li-scroller.1.0 and jquery.liscroll.min (both recognized by Windows as JScript Script Files) in sites\all\plugins

Code from previous message copied/pasted into node body w/.PHP input format selected.

It's all running on Drupal: 6.2, MySQL 5.0.45, PHP 5.2.4, Apache/2.2.4 (Win32), WAMP 1.7.3 on a Windoze XP SP2 box.

I still end up with the unstyled list in FF2 and IE7.

In my <head>

  <script type="text/javascript" src="/sp408/misc/jquery.js?d"></script>
<script type="text/javascript" src="/sp408/misc/drupal.js?d"></script>
<script type="text/javascript" src="/sp408/sites/all/modules/jquery_plugin/jquery.liscroll.min.js?d"></script>
<script type="text/javascript">jQuery.extend(Drupal.settings, { "basePath": "/sp408/" });</script>
<script type="text/javascript">$(document).ready(function(){ $("ul#ticker").liscroll();});</script>
  <script type="text/javascript"> </script>

i see kooky "js?d" extensions? Is that a result of clean URLs being off?
and <body>

                        <div class="node">
            <span class="submitted"></span>
    <div class="taxonomy"></div>
    <div class="content"><style type="text/css">
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 738px;
height: 27px;
margin: 0;
padding: 0
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>
<ul id="ticker">
    <li><span>10/10/2007</span><a href="#"> The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#"> End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#"> The code that you ...</a></li>
    <!-- eccetera -->

</ul></div>
      </div>
              </div>

Two errors:

missing ; before statement
(no name)()sp408 (line 18)
e()jquery.js (line 13)
e()jquery.js (line 13)
e([function(), function()], function(), undefined)jquery.js (line 13)
e()jquery.js (line 13)
[Break on this error] <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">

and

$("ul#ticker").liscroll is not a function
[Break on this error] <script type="text/javascript">$(document).ready(function(){ $("ul#ticker").liscroll();});</script>

I feel bad for asking so much but I just duno what I could be doing wrong...

Thanks -NP

Sorry it took so long to

WorldFallz commented 28 April 2008 at 13:33

Sorry it took so long to answer-- I've been away from the puter for a while.

I think I"m stumped now-- everything LOOKS like it should be working based on what you posted above. The reason the list is unstyled, is because of the error (liscroll is not a function). As for what's causing that, I'm at a loss. One thing, try deleting jquery.li-scroller.1.0 (it's not necessary anymore), although it's not showing up in the header so I don't think that's the problem.

Do you have any other jquery modules or other contrib modules loaded?

Also, the site I tested with is a linux site using d6 (not 6.2), I'll try to test on my win dev box at home later and see if that makes a diff.

I also have a function addition at the end of my .js files in the header, but it's "js?c"-- not sure what that is or why it's there though.

One other thing that comes to mind-- the "missing ;" error bothers me-- that was a syntax error I found in the original liscroll file. Maybe you're still using an old copy of the liscroll function. Try this:

Delete all the liscroll files in the jquery_plugins directory.
copy the file fresh from the link in step 2 above (be sure to rename it to jquery.liscroll.min.js
be sure optimization of both css and javascript files are disabled. (admin/settings/performance)
clear the cache ( also admin/settings/performance)
recreate/submit the test page
refresh the browser (i.e. in firefox it's CTRL-F5)

Let me know how that goes....

Thanks...again

NonProfit commented 28 April 2008 at 15:46

WorldFallz, thanks so much for your help. I've been hammered with work (which is a good thing, I guess) and have not had time to work on this project. I'll report future successes or failures as time allows. Thanks so much! Blessings! -NP

No worries-- good luck (and

WorldFallz commented 28 April 2008 at 15:58

No worries-- good luck (and you're welcome).
===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz