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?

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

Board footer