Converting a plugin to jQuery

jstubbs · 2007-12-06 07:27:29

Hi Rick, let me show you an image of what I am looking for:

For the div, I need a header (like H2), and a paragraph of text below. Ideally, I would be able to style the div (id or class) and the H2/p tags too.

Feed from a category means use a category of images, for example category=birds, which would display all the images from the birds category.

Last edited by jstubbs (2007-12-06 07:28:25)

rsilletti · 2007-12-06 16:31:27

The code above should work for this. I removed the display text att from the tag example, if you are dislaying an image you can’t use text – they are mutually exclusive in this case.

Use one rollover_src tag for each image and one rollover_dest tag for the rollover text display div. The default_text setting in rollover_dest is what the text will revert to in your display div on mouseout.

If you are thinking TXP’s gallery image display tags for category display you would have to build a custom tag for that. It’s possible to use text as assigned in captions or descriptions inside TXP for that – I’ve done it in other cases.

jstubbs · 2007-12-07 21:12:23

Hi Rick, I got your script to work and thanks for that. However, I ran into a small problem using it with aro_slideshow, which runs on mootools. Seems mootools and jquery don’t work together :-(

iblastoff pointed me in the direction of jquery’s noConflict() function, but I can’t get it to work. Wondering if you have another recommendation for me, either for another slideshow that runs on jquery, or how to get jquery and aro_slideshow working together?

Thanks for any help.

rsilletti · 2007-12-08 00:26:26

Confilcts arise due to the common use of the “$” shorthand, if you’re using the script itself you can try this
If you are using the plugin let me know and I’ll cobble up a variant that should do the same thing.

I’ve had trouble getting both libraries to work together even with noConflict, though I’m not sure I was using it right at the time. You might ensure you are using the most recent version of jQuery as well.


jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("alt"));
		},function(){
jQuery("#rollover_dest").html("Thanks for dropping by!");
	});
});

Last edited by rsilletti (2007-12-08 00:33:47)

jstubbs · 2007-12-08 08:15:34

Hi Rick, this is what I have at the moment in my header form:

<!-- JS -->
<txp:js n="mootools" />
<txp:js n="slideshow" />
<script type="text/javascript" src="<txp:site_url />textpattern/jquery.js"></script>
<txp:js n="menu" />

The first two – mootools and aro_slideshow – are stored in the stm_javascript plugin. With the above, your plugin works fine (yes, I am using your plugin, not the script, not sure what you mean there), but aro_slideshow does not work.

If I remove the jquery link, the slideshow works fine, but no ras_rollover :-(

If its possible to get both together working, I would be very happy!

Gocom · 2007-12-08 08:37:19

jsubbs,

It’s possible conflict between mootools and jquery, as they both are libraries, and in many cases they cause these things to hapen. As same hapens in example with addevent and mootools, they neither work together.

Cheers!

Last edited by Gocom (2007-12-08 08:38:44)

rsilletti · 2007-12-08 22:21:17

Try the plugin from this download page , it should be self evident.

The plugin renders a jQuery script (view source) that could be included simply as a jQuery script (above) rather than producing it from a TXP tag, much more flexible approach IMHO given that you can then manage the classes and ids affected and multiple instances of either within a single page without the restrictiveness of the plugin coding – you just have to get used to doing some basic jQuery scripting.

jstubbs · 2007-12-09 08:54:57

Thanks for that Rick. Very helpful! I inserted the new plugin and suddenly everything works – aro_slideshow and your plugin.

I assume you are referring to the following, from the page source. Is this script outputted on every TXP page regardless of TXP tags? Do we have to edit the plugin?

<script  type="text/javascript">

//<![CDATA[

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("alt"));
},function(){
jQuery("#rollover_dest").html("rollover text set in JS");
});

});

//]]>

</script>

Last edited by jstubbs (2007-12-09 08:58:34)

rsilletti · 2007-12-09 15:45:52

The ras_rollover_js tag which returns this script needs to be in the head of each template or page (after the jQuery script is called) that has classes or ids that you need to operate on. Thanks for the feedback, it’s nice to know that it works.

jstubbs · 2007-12-09 15:55:01

I appreciate the help Rick. I will post a link when the site is developed. It looks nice. Currently, having some small issues with mootools (I think) when “using aro_slideshow“http://forum.textpattern.com/viewtopic.php?pid=164410#p164410

Seems to be a bug. Stef (Bloke) is taking a look. Thanks for your plugin!

jstubbs · 2007-12-18 19:57:52

Rick, I have encountered a new problem, and it seems the plugin chokes on foreign characters.

I have this in the Head of the template:

<txp:ras_rollover_js default_text="Dude"/>

And in the Body:

<div class="textcenter">
<txp:ras_rollover_src source_image="195" rollover_text="something1" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something2" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something3" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something4" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something5" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something6" html_id="text" />
<txp:ras_rollover_src source_image="195" rollover_text="something7" html_id="text" />
<!-- end textcenter -->
</div>
<div id="text" class="width420"><h2 class="slashes white">Linjer///</h2><p><txp:ras_rollover_dest default_text="Leter du etter ei linje med kvalitet, dyktige lærere og velutstyrte klasserom? Vi tror du finner dette på oss, en stor skole full av spennende mennesker, moderne utstyr, og et mangfoldig fagtilbud midt i en av Norges mest fremtidsrettede byer.
Kvalitet, opplevelser og praktiske erfaringer er kravene vi stiller til linjetilbudet på Solborg. Er du kreativ, nysgjerrig, sprek, teknisk, kunstnerisk, tenkende, søkende, reiselysten, ansvarsbevisst - eller har lyst til å bli det? Uansett hva du foretrekker og hvem du er skal du kunne finne et linjetilbud som passer deg på Folkehøgskole."/><p/></div>

What I would like to see is the same text that is currently in the ras_rollover_dest, be the default text that appears, i.e the contents of the ras_rollover_js default_text.

If I use the Norwegian text in ras_rollover_js default_text, the rollovers stop working and I see this error in FF firebug:

“Unterminated string literal”. Any idea on this?

jstubbs · 2007-12-18 20:32:15

Update: Now it works, think there was a linebreak in the text. Still having issues with text flickering with aro_slideshow on FF and Camino, but that’s not related to this plugin.

What I do see, also in FF and Camino, is a white background flickering (just under the ras_ text) when I hover in and out over the images. It most likely to do with aro_slideshow, but might be worth mentioning.

jstubbs · 2007-12-19 07:11:27

Rick, I need to be able to style a couple of elements within the ras_ text, like so:

<txp:ras_rollover_js default_text="Leter du etter ei linje med kvalitet, dyktige lærere og velutstyrte klasserom? Vi tror du finner dette på oss, en stor skole full av spennende mennesker, moderne utstyr, og et mangfoldig fagtilbud midt i en av Norges mest fremtidsrettede byer. Kvalitet, opplevelser og praktiske erfaringer er kravene vi stiller til linjetilbudet på oss. <br /><span class="small">Er du kreativ, nysgjerrig, sprek, teknisk, kunstnerisk, tenkende, søkende, reiselysten, ansvarsbevisst - eller har lyst til å bli det? Uansett hva du foretrekker og hvem du er skal du kunne finne et linjetilbud som passer deg.</span> "/>

You may notice the br and span tags. That’s where I need to style a couple of the text items. It does not work, wondering if this would be possible.

Last edited by jstubbs (2007-12-19 07:11:57)

rsilletti · 2007-12-20 00:37:43

The jQuery script replaces or alters the text within an element defined by an id, what you are suggesting above actually would require that you create the new elements or nodes. I don’t think javascript will interpret inserted text as new elements (I could be wrong) it would require something like innerHtml() to accomplish that.
This plugin isn’t designed to do this. You would need a new script tailored to the need.

jstubbs · 2007-12-31 19:52:10

Hi again Rick. I have out together the text for the plugin, and its working really well (not a public link yet, but soon). Just one question:

I am able to insert HTML tags in the ras_rollover like so:

<txp:ras_rollover_src source_image="206" source_url="/link" rollover_text="<h4>Test H4</h4>Bla Bla bla...

That works fine. But this does not:

<txp:ras_rollover_dest class="height150" default_text="<h4>Test H4</h4>Bla bla bla

Wondering why one works but the other does not.

By the way, after you posted above that HTML would not work, I forgot about it and told the client he could not do it. He forgot or misunderstood, and I found that HTML did work!

Textpattern CMS

Textpattern CMS support forum

#16 2007-12-06 07:27:29

Re: Converting a plugin to jQuery

#17 2007-12-06 16:31:27

Re: Converting a plugin to jQuery

#18 2007-12-07 21:12:23

Re: Converting a plugin to jQuery

#19 2007-12-08 00:26:26

Re: Converting a plugin to jQuery

#20 2007-12-08 08:15:34

Re: Converting a plugin to jQuery

#21 2007-12-08 08:37:19

Re: Converting a plugin to jQuery

#22 2007-12-08 22:21:17

Re: Converting a plugin to jQuery

#23 2007-12-09 08:54:57

Re: Converting a plugin to jQuery

#24 2007-12-09 15:45:52

Re: Converting a plugin to jQuery

#25 2007-12-09 15:55:01

Re: Converting a plugin to jQuery

#26 2007-12-18 19:57:52

Re: Converting a plugin to jQuery

#27 2007-12-18 20:32:15

Re: Converting a plugin to jQuery

#28 2007-12-19 07:11:27

Re: Converting a plugin to jQuery

#29 2007-12-20 00:37:43

Re: Converting a plugin to jQuery

#30 2007-12-31 19:52:10

Re: Converting a plugin to jQuery

Board footer