Converting a plugin to jQuery

rsilletti · 2007-09-30 17:27:10

I’ve been using a scrap of javascript to provide for rollover text display, displaying alt text for an anchor link in another area of the page. I’ve also rendered the process down to three TXP tags that allow for flexible use of attributes. The text of the plugin looks like this rollover_txt , the plugin code (for anyone interested).

I’ve also started looking seriously at jquery, and it seems something like this should be fairly straight forward but I’m finding it difficult to get a start point with it – perhaps someone might point me in the right direction?

Mary · 2007-10-01 05:17:09

Have you checked out the jQuery docs? They’ve got a big listing of tutorials etc.

rsilletti · 2007-10-02 21:47:47

Thanks Mary, for any that are interested the API is current to 1.2 for some things. I haven’t had time to investigate very far, but the documentation is very well done.

rsilletti · 2007-10-06 03:05:08

For the interested – the javascript done using jquery.

 	$(document).ready(function() {
	$(".rollover_src").hover(function(){
		 $("#rollover_dest").html($(this).attr("alt"));
		},function(){
		 $("#rollover_dest").html("Howdy Pardener");
		  });
	});

jstubbs · 2007-11-08 21:25:03

Guess this post should be renamed ras_rollover_text and moved to plugin author assistance. The plugin is listed on the Textpattern Resources site.

Is there a demo of this plugin? And does it work with images (text appears on an image mouseover)?

rsilletti · 2007-11-09 01:22:53

It will use an image as the rollover source. This is accomplished by wrapping the image in an anchor tag with the required class. The tag as described in the help file of the plugin is confusing (having just reread it). It accepts a TXP image id as the image_source attribute and internally calls the function “image” which takes attributes of the txp tag by that name.

I don’t have an active example I can direct you to, but I can answer whatever questions you may have here.

Last edited by rsilletti (2007-11-09 01:23:47)

jstubbs · 2007-11-09 07:02:18

Thanks Rick. I have a site to make where the user wants something like the ako_boxover plugin – wondering what is the difference between your plugin and Adrian’s.

rsilletti · 2007-11-09 16:21:14

Adrian’s plugin actually creates a nicer more flexible tool tip type display, much like.
<!— Nice Titles by Stuart Langridge, et al. (http://www.kryogenix.org/code/browser/nicetitle/) —>
If that is what you are looking for it would definitely be the choice. ras_rollover_text takes the text contained in the alt attribute of an anchor tag and inserts that text using jQuery into a seperate text node in another area of the page. Source links are identified by an applied class and are activated by mouseover, text is then inserted into the dom at a text node identified by an id.
I have an earlier (and clunkier) test of the script at Textcastle at the bottom of the right sidebar if you mouse over the textpattern logo, that should give you the idea.

Last edited by rsilletti (2007-11-09 16:22:17)

jstubbs · 2007-11-09 18:43:15

Thanks Rick. I will take a look at both plugins. Reason for looking at yours is that it runs on JQuery, which is already included with TXP. Plus, Adrian has not been around for a while and his plugin uses Prototype or something like that.

jstubbs · 2007-12-04 21:58:14

Hi again Rick. I just posted in another thread that I am looking for a script that I can use with about 6 thumbnail images. Each of these images is a link, leading to a category page.

I need the hover script to deliver different text for each of the 6 images, in the SAME part of the page, a div to be exact.

I also need some default text to display before any image is hovered over. Can your plugin do this?

rsilletti · 2007-12-04 22:25:33

Yes, if what you want showing in your div element is sequentially replaced as you roll over your thumbnails. The plugin uses the image tag inside TXP and takes an id – but it wont return a thumbnail as assinged by TXP.The plugin allows for default text settings via the tags attributes for both source and destination elements.
You could use the script as written above by assigning a class to the anchor link wrapping your thumbnails of “ rollover_src” and an alt attribute containing the text you want to display in your div(whose id needs to be rollover_dest). The default text is set in the script in the mouseout function of “hover”, in the script above it reads “Howdy Pardener” this can be changed to whatever you wish.

If neither of these options quite fit I’m sure we could build something that would, let me know.

jstubbs · 2007-12-04 22:29:27

OK – I installed your plugin and it seems to be perfect in terms of setting the text to appear in a fixed position in the page. But – how would I go about having 6 thumbnails with text instead of 1?

rsilletti · 2007-12-05 03:00:07

Repeat the tag for each image, the destination div will be used by each.

jstubbs · 2007-12-05 19:37:35

Thanks Rick. Seems like your plugin is really simple and works perfectly. I find the help file a little hard to follow though – took some time to figure it out.

So – if I understand you correctly – I should set the tags to something like this:

<txp:ras_rollover_js default_text="rollover text set in JS" />
<div id="image"><txp:ras_rollover_src source_image="191.jpg" rollover_text="something" display_text="display text" html_id="text" /></div>
<div id="text">Text should go here <txp:ras_rollover_dest default_text="This is something" /></div>
</div>

And just set 6 ras_rollover_src source_image=”“ tags? Is it possible to feed a list from a category into the plugin?

I think this thread should be moved to the plugin author support forum..?

rsilletti · 2007-12-05 22:04:48

<txp:ras_rollover_js default_text=“rollover text set in JS” />
*This will set your default text on page load and include the jQuery script, this goes in the head of the document.

<txp:ras_rollover_src source_image=“191” rollover_text=“something1” html_id=“text” />

<txp:ras_rollover_src source_image=“192” rollover_text=“something2” html_id=“text” />

<txp:ras_rollover_dest default_text=“This is something” />

*The source tags would each display an image set by the source_image attribute, this is passed to TXP’s image tag as an id (number only will work), the rollover_text attribute is set as the alt attribute and this used as the rollover text.

*The rollover_dest tag creates the destination element, there should only be one of these – more than one and you get duplicate results on rollover because the destination elements are hardcoded in the tag. If you want it to be a div pass that as the wraptag attribute.

I’m hesitant about pursuing this approach because it is complicated to make sense of even as tags, and the limitations hardcoding things inside them present. I’m downplaying it in favor of direct jQuery scripting for that reason.

I’m not sure what you mean by “feed a list from a category”, but direct jQuery scripting would almost surely be the better approach for more complex operations.

Last edited by rsilletti (2007-12-06 16:23:45)

Textpattern CMS

Textpattern CMS support forum

#1 2007-09-30 17:27:10

Converting a plugin to jQuery

#2 2007-10-01 05:17:09

Re: Converting a plugin to jQuery

#3 2007-10-02 21:47:47

Re: Converting a plugin to jQuery

#4 2007-10-06 03:05:08

Re: Converting a plugin to jQuery

#5 2007-11-08 21:25:03

Re: Converting a plugin to jQuery

#6 2007-11-09 01:22:53

Re: Converting a plugin to jQuery

#7 2007-11-09 07:02:18

Re: Converting a plugin to jQuery

#8 2007-11-09 16:21:14

Re: Converting a plugin to jQuery

#9 2007-11-09 18:43:15

Re: Converting a plugin to jQuery

#10 2007-12-04 21:58:14

Re: Converting a plugin to jQuery

#11 2007-12-04 22:25:33

Re: Converting a plugin to jQuery

#12 2007-12-04 22:29:27

Re: Converting a plugin to jQuery

#13 2007-12-05 03:00:07

Re: Converting a plugin to jQuery

#14 2007-12-05 19:37:35

Re: Converting a plugin to jQuery

#15 2007-12-05 22:04:48

Re: Converting a plugin to jQuery

Board footer