Converting a plugin to jQuery

jstubbs · 2008-10-26 07:31:24

Hi Rick, its me again :-)

I am updating the site where I use ras_rollover_text. Currently I have mootools and aro_slideshow. I am removing those two elements to use only jQuery and a slideshow which contains the following code:

<script src="<txp:site_url/>javascript/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
$(pager).find('li').removeClass('activeLI') 
.filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};
$('#left').cycle({ 
fx:     'fade', 
speed:  'slow', 
timeout: 2000,  
pagerAnchorBuilder: function(idx, slide) { 
// return selector string for existing anchor 
return '.thumbs li:eq(' + idx + ') a';
return false; 
} 
});
});
//]]>
</script>

The slideshow works fine, using jQuery 1.26 included just before the above code. For some reason, it clashes with your plugin (4.0.5.2), which produces the following code:

<script  type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("name"));
},function(){
jQuery("#rollover_dest").html("Some text here");
});
});
//]]>
</script>

In Safari Inspector, I get this error:

“Undefined value – line 44”. The corresponding line is this, in the slideshow JS:

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {

I have two questions – what could be causing the error, and secondly, do you have a recommendation for another script that will validate? Your plugin is perfect for one rollover, but in this case, the client has 6 image rollovers and the text they add causes masses of validation errors. I’d like to see if there is a better solution.

Thanks!

Last edited by jstubbs (2008-10-26 07:36:41)

Gocom · 2008-10-26 18:38:51

jstubbs wrote:

what could be causing the error

A variable that doesn’t have value or a variable that isn’t registered.

It just doesn’t have value, but it must have something to set if you wanna use it. Undefined is kinda same like false but it really isn’t. It is an error, a really common mistake usually made by guys that write Java/C#/PHP (with out error reporting: work as it returns false), and is read as a false in some browsers, but same time it causes error and might even crash browser.

In Fx/Safari it outputs simple undefined value error, but it works. In IE5.5/6 it causes runtime error (doesn’t work), and some browsers don’t even care (they just load it, untill with out warning they crash).

Fixing is somewhat simple. Just define the variable if it is undefined.

Last edited by Gocom (2008-10-26 18:42:34)

MattD · 2008-10-26 18:51:01

I think if you’re using jQuery in No Conflict mode you can’t use $ and have to use jQuery instead. So try changing your $ to jQuery

jstubbs · 2008-10-26 20:03:00

The JS is produced by ras_rollover_text, so without editing the plugin its hard to change. My other JS works fine without ras_rollover_text.

rsilletti · 2008-10-26 20:12:51

Hi Johnathan,
You clearly have the skill with jQuery to render the scripts you need without embedding them in a PHP plugin, the rollover plugin is rigid in this fashion being a special purpose plugin.

Given the code below, which is what is rendered by the plugin, as a starting point; I would place it in your template as is and check for conflicts. You are using jQuery so the no conflict code isn’t required and may be the source of the clash.

One question – are you using 6 source objects or destination objects? The source html is defined by class, you should be able to use as many of these as you need; the destination html uses an id which needs to be used once per page. The choice of extending the jQuery script to handle multiple “class-id” combinations is a choice available.

I do have a plugin that doesn’t use the no conflict code, if that solves your problem you’re welcome to it, but my recommendation to resolve the validation problems would be to use the flexibility allowed by direct access to rewriting your html as required. If my memory serves much of the problem has to do with what you are injecting into rigidly coded html rendered by the plugin.


$(document).ready(function() {
	$(".rollover_src").hover(function(){
	$("#rollover_dest").html($(this).attr("name"));
	   },function(){
	$("#rollover_dest").html("default_text");
	});
});


<a class="rollover_src"  id="" href="/index.php" name="rollover_text" >link_text</a>
or:
<a class="rollover_src"  id="" href="/index.php" name="rollover_text" ><txp:image id="1" /></a>


<p id="rollover_dest" class="ras_rollover_dest" > &nbsp;</p>

jstubbs · 2008-10-26 21:44:07

Rick, that was incredibly helpful of you. The code you placed above solved the problem. Unfortunately I do not have any JS skills – the other script I quoted was provided by Tom Reno and published on TXP Tips.

The call to ras_rollover_text is like this:

<txp:ras_rollover_src source_image="200" source_url="/adventure" rollover_text="<h2>Adventure</h2>Some more text here" html_id="text" />

Yes, there are 6 repeated tags like the above in the form I use. Part of the validation problem is that the client wishes to place lots of text with catchy headers in the rollover. That’s why I was partly looking for another solution that causes no issues.

I really have to learn more about JS…

rsilletti · 2008-10-27 02:18:22

If you can pass your text into a div as the wraptag for your destination node, the html should validate if its valid internally. The ras_rollover_dest tag should take an attribute set to “div” for wraptag. I’m guessing that the destination node is where you are having validation problems?

ras_rollover_text_v4.0.6.txt is a link to a plugin that should work as expected if the code in the above post works well.

Try this and see if it helps.

<txp:ras_rollover_dest default_text="Yourtext" wraptag="div" />

Last edited by rsilletti (2008-10-27 02:27:52)

jstubbs · 2008-10-27 07:09:51

Hi Rick, afraid it did not work :-(

This is what I have in my header form:

<txp:ras_rollover_js default_text="text here"/>

That goes inside the <head> tag.

I have another form that calls ras_rollover on the page:

<txp:ras_rollover_src source_image="200" source_url="/adventure" rollover_text="<h2>Adventure</h2>more text" html_id="text" />
<txp:ras_rollover_src source_image="202" source_url="/global-village" rollover_text="<h2>Global Village</h2>Even more text" html_id="text" />
....and 4 more ras_rollover_src tags with similar output.
<txp:ras_rollover_dest class="height150" default_text="default text here" />

After installing v4.06 I get the same errors as before – the slideshow does not work (even if I change ras_rollover_dest to: <txp:ras_rollover_dest default_text="Yourtext" wraptag="div" />).

Safari Inspector tells me that a variable is not set on line 44, same error as before.

I will test it again on localhost later today and report back tonight…

jstubbs · 2008-10-27 07:11:21

Forgot to post the HTML output:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
$(pager).find('li').removeClass('activeLI') 
.filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};
$('#left').cycle({ 
fx:     'fade', 
speed:  'slow', 
timeout: 2000,  
pagerAnchorBuilder: function(idx, slide) { 
// return selector string for existing anchor 
return '.thumbs li:eq(' + idx + ') a';
return false; 
} 
});
});
//]]>
</script>
<script  type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("name"));
},function(){
jQuery("#rollover_dest").html("text hee");
});
});
//]]>
</script>

jstubbs · 2008-10-27 07:15:05

Ouch! Sorry to say that I installed v4.0.52 by mistake – I will test out 4.06 later today and let you know how it goes…

jstubbs · 2008-10-27 20:02:36

Hi again Rick. Sorry for posting too soon this morning :-)

The latest version of the plugin works fine now with the other jQuery script, so that’s perfect. Thanks!

As to validation, adding the wraptag=“div” <txp:ras_rollover_dest default_text="Yourtext" wraptag="div" /> makes no difference. The main issue seems to be the htm_id=“text” in <txp:ras_rollover_src source_image="202" source_url="/global-village" rollover_text="<h2>Global Village</h2>Even more text" html_id="text" />

Not sure what to do about that.

rsilletti · 2008-10-27 23:23:56

The html_id is intended to be used by the image tag internal to the plugin. if you are using it recursively in your source links its used more than once on a page as an id attribute for img src.

Textbook: “html_id”: The HTML id attribute assigned to the wraptag element. If there is no wraptag then the id is assigned to the img element itself.

I would dispense with the html_id attribute altogether and use a class for any hooks you may be using with those links.

Last edited by rsilletti (2008-10-27 23:25:33)

jstubbs · 2008-10-28 20:57:47

You know, I think this has been a fundamental misunderstanding on my part – I thought that the html_id attribute pointed to the destination element, in this case div id=“text”. I now realise that the html_id is only meant for the images. Gulp!

Thanks a lot Rick!

rsilletti · 2008-10-29 00:08:29

Had I realized that you were having validation problems with the source tags I may have realized much sooner where the confusion was – sorry about that. I’ll continue to follow this thread if there is anything else that isn’t making sense.

jstubbs · 2008-10-29 07:20:10

Thanks Rick. The only improvement that I can think of now is to make it possible to included HTML tags in the destination text. Now that the html_id source tag validation issue is resolved, this is the only problem left.

Problem is, client wants to be able to add h2 tags to make certain text stand out. The original site is here (the updated site with only jQuery is currently still on localhost). You can see for yourself the validation issues – rss_live_search causes a few, and the rest are due to the h2 tags in the destination text.

If its possible to change this, wonderful, if not we’ll have to out up with the validation issues :-(

Thanks for your help as always.

Textpattern CMS

Textpattern CMS support forum

#46 2008-10-26 07:31:24

Re: Converting a plugin to jQuery

#47 2008-10-26 18:38:51

Re: Converting a plugin to jQuery

#48 2008-10-26 18:51:01

Re: Converting a plugin to jQuery

#49 2008-10-26 20:03:00

Re: Converting a plugin to jQuery

#50 2008-10-26 20:12:51

Re: Converting a plugin to jQuery

#51 2008-10-26 21:44:07

Re: Converting a plugin to jQuery

#52 2008-10-27 02:18:22

Re: Converting a plugin to jQuery

#53 2008-10-27 07:09:51

Re: Converting a plugin to jQuery

#54 2008-10-27 07:11:21

Re: Converting a plugin to jQuery

#55 2008-10-27 07:15:05

Re: Converting a plugin to jQuery

#56 2008-10-27 20:02:36

Re: Converting a plugin to jQuery

#57 2008-10-27 23:23:56

Re: Converting a plugin to jQuery

#58 2008-10-28 20:57:47

Re: Converting a plugin to jQuery

#59 2008-10-29 00:08:29

Re: Converting a plugin to jQuery

#60 2008-10-29 07:20:10

Re: Converting a plugin to jQuery

Board footer