Article related Javascript

geoff777 · 2016-02-08 18:15:22

Hi

I’m using jQuery Scrollfire.

It triggers events depending on how far down the target Element you have scrolled.
So the article can be animated to a degree.

It is very article specific and having the js in the same tab as the article is great/necessary for workflow.
I have found a hack workaround using a custom_field, two forms and rah_replace x2.

Anyway to have a place to paste article specific javascript that won’t get altered (the apostrophes get encoded.) or is this too insecure?

Last edited by geoff777 (2016-02-08 18:50:53)

wet · 2016-02-09 05:04:45

You might want to look into the notextile. block modifier.

jakob · 2016-02-09 19:29:35

Can you show us how you achieve your existing solution, and perhaps an example of the js you paste?

If you’re pasting that into a custom field (and not body or excerpt), then notextile. should not matter as custom fields aren’t processed with textile.

geoff777 · 2016-02-25 12:49:22

Hi Jakob

I’m using MaterializeCSS to trigger a “Toast” (a temporary message) … the first when Element id=“staggered-test” is 50px from the bottom of the browser the toast lasts for 2500ms or until it is swiped.
the second 150px from the bottom for 3000ms
then an image finally fills in the space 400px from the bottom of id #1

var options = [
    {selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 2500 )' },
{selector: '#staggered-test', offset: 150, callback: 'Materialize.toast("Well Done!", 3000 )' }
{selector: '#1', offset: 400, callback: 'Materialize.fadeInImage("#1")' }
  ];
  Materialize.scrollFire(options);

This needs sending through rah_replace twice to replace the apostrophes ‘ & “ which get encoded.
I did this by wrapping an article_custom tag in one rah_replace and the other rah_replace is in the form which the article_custom tag uses.

It works but it’s messy.
Can anyone suggest a “cleaner” more elegant solution?

jakob · 2016-02-25 13:21:54

So you put that in a custom_field and output it somewhere near the bottom of the page?

If so, try using the escape="" (docs) attribute when outputting the custom_field:

<txp:custom_field name="page-scrollfire" escape="" />

BTW: If you want to avoid calling txp:article_custom twice you could output the custom field in a variable further up the page, then use that variable further down in your js at the page-bottom, e.g.:

<!-- txp:article output -->
<txp:article>
  <h1><txp:title /></h1>
  <txp:body />
  …
  <!-- retrieve in txp:article container and store as variable for later use on page -->
  <txp:variable name="page-js"><txp:custom_field name="page-scrollfire" escape="" /></txp:variable>
</txp:article>

…

<!-- javascript functions -->
<script>
  $(function () {
    …
    // scrollfire directives
    <txp:variable name="page-js" />
  })
</script>

That saves an additional database query just for the custom_field.

geoff777 · 2016-02-25 14:21:40

Hi Jakob,

Thanks for the escape=”“ tip this might make the rah_replace(s) unnecessary. :-), this cleans the code/logic up a bit.

I considered using a variable and concatenating but I’m not using Textpattern as a CMS on this site more as a static HTML generator.

MaterializeCSS is really easy to use. Probably because the names of the CSS classes are logical, short and fairly easy to memorise.
So I can design on the fly from the write tab.

The only Bootstrap/Framework that has actually excited me enough to want to use it.

Last edited by geoff777 (2016-02-25 17:38:36)

Textpattern CMS

Textpattern CMS support forum

#1 2016-02-08 18:15:22

Article related Javascript

#2 2016-02-09 05:04:45

Re: Article related Javascript

#3 2016-02-09 19:29:35

Re: Article related Javascript

#4 2016-02-25 12:49:22

Re: Article related Javascript

#5 2016-02-25 13:21:54

Re: Article related Javascript

#6 2016-02-25 14:21:40

Re: Article related Javascript

Board footer