Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Converting a plugin to jQuery
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.
Offline
#50 2008-10-26 20:12:51
- rsilletti
- Moderator
- From: Spokane WA
- Registered: 2004-04-28
- Posts: 707
Re: Converting a plugin to jQuery
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" > </p>Offline
Re: Converting a plugin to jQuery
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…
Offline
#52 2008-10-27 02:18:22
- rsilletti
- Moderator
- From: Spokane WA
- Registered: 2004-04-28
- Posts: 707
Re: Converting a plugin to jQuery
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)
Offline
Re: Converting a plugin to jQuery
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…
Offline
Re: Converting a plugin to jQuery
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>Offline
Re: Converting a plugin to jQuery
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…
Offline
Re: Converting a plugin to jQuery
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.
Offline
#57 2008-10-27 23:23:56
- rsilletti
- Moderator
- From: Spokane WA
- Registered: 2004-04-28
- Posts: 707
Re: Converting a plugin to jQuery
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)
Offline
Re: Converting a plugin to jQuery
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!
Offline
#59 2008-10-29 00:08:29
- rsilletti
- Moderator
- From: Spokane WA
- Registered: 2004-04-28
- Posts: 707
Re: Converting a plugin to jQuery
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.
Offline
Re: Converting a plugin to jQuery
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.
Offline