Converting a plugin to jQuery

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!

rsilletti · 2007-12-31 20:27:11

Are you sure you don’t have those reversed? One is inserted with jQuery(rollover_text) and is applied as text to the text node, the other(default_text) is assembled by the php and returned as html by the function. Again, I could be wrong, javascript isn’t my strength.

jstubbs · 2007-12-31 20:46:54

Hi Rick. Here is what I have:

<txp:ras_rollover_src source_image="206" source_url="/link" rollover_text="<h4>Test H4</h4>This text edited for brevity." html_id="text" />
<txp:ras_rollover_dest class="height150" default_text="<h4>Test1</h4>This is some text." /></div>

In the Head of the document:

<txp:ras_rollover_js default_text="<h4>Test2</h4>and some more text..."/>

The txp:ras_rollover_dest text displays fine. The txp:ras_rollover_js displays under what will be the text displayed (txp:ras_rollover_dest) when hovering over the images. All the txp:ras_rollover_js is quite large, but I guess it could be because its an H4 tag within a P tag. Still, I could get past that if I could get the txp:ras_rollover_js text to display in the same place as the rest.

The problem goes away when I remove the txp:ras_rollover_js H4 tags.

FYI!

rsilletti · 2007-12-31 21:58:44

Have you tried using the wraptag attributes to remove the undesirable p tags ? ( wraptag=’‘ ), both the src and dest tags have that choice available. You can always wrap the whole TXP tag if you need to.

Last edited by rsilletti (2007-12-31 21:59:43)

jstubbs · 2008-01-01 10:56:42

Hi Rick,

ras_rollover_js has one attribute – default_text – according to your plugin help. I tried adding a wraptag attribute but I saw a TXP tag error for the wraptag.

Issue for me is the ras_rollover_dest tag. The image rollovers are fine. (I have 6 images with rollovers).

If I add an H4 tag into the ras_rollover_dest, the ras_rollover_dest text always displays under the ras_rollover_src text.

Seems to me that when an H4 is entered like so: “ras_rollover_dest default_text=”<h4>Test</h4>Bla bla…”, the #ras_rollover is not applied. When I remove the H4 from the default_text, the #ras_rollover is applied, so the text show up in the right place.

Hope this is explained well…..

rsilletti · 2008-01-01 17:20:08

The js tag doesn’t have a wraptag attribute, it doesn’t output html it renders the javascript script. The src and dest tags do.

If I had to guess I would say that TXP is closing the tag at the end of the first h4 closure as per the parser’s function, that drops out the rest of the tag info and disables the tag. You might try asy_wondertag to get around that, but my recommendation, and I would pass this on to your clients to avoid any inconvenience, would be to stick with straight text when passed as attributes.
When I was first developing this I tried passing image tags into the DOM without much success and settled for the text approach for the plugin and added what follows to the help file to suggest better options inline. Things get far to complicated trying to make everything work from within the plugin itself.

Excerpt from the help file
The choice of using html tags in your templates (if you want to rollover heading tags for instance) can be accomplished by using<br />
“ras_rollover_src” as the class, the “alt” attribute for your rollover text, and an html id of “ras_rollover_dest” for your destination element<br />
This can provide finer control and more options in some cases.

jstubbs · 2008-01-05 22:24:50

Hi Rick, thanks for all your help with getting me to setup a site with your plugin. I posted the results here

The plugin is on the front page of the site – the 6 images to the right of the page.

The only issue I see is that there are lots of validation errors – any idea how we could reduce them?

Textpattern CMS

Textpattern CMS support forum

#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

#31 2007-12-31 20:27:11

Re: Converting a plugin to jQuery

#32 2007-12-31 20:46:54

Re: Converting a plugin to jQuery

#33 2007-12-31 21:58:44

Re: Converting a plugin to jQuery

#34 2008-01-01 10:56:42

Re: Converting a plugin to jQuery

#35 2008-01-01 17:20:08

Re: Converting a plugin to jQuery

#36 2008-01-05 22:24:50

Re: Converting a plugin to jQuery

Board footer