Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

geoff777
Plugin Author
From: Benarrabá Andalucía Spain
Registered: 2008-02-19
Posts: 282
Website

Article related Javascript

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)


There are 10 types of people in the world: those who understand binary, and those who don’t.

Offline

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

wet
Developer Emeritus
From: Schoerfling, Austria
Registered: 2005-06-06
Posts: 3,330
Website Mastodon

Re: Article related Javascript

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

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,704
Website

Re: Article related Javascript

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.


TXP Builders – finely-crafted code, design and txp

Offline

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

geoff777
Plugin Author
From: Benarrabá Andalucía Spain
Registered: 2008-02-19
Posts: 282
Website

Re: Article related Javascript

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?


There are 10 types of people in the world: those who understand binary, and those who don’t.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,704
Website

Re: Article related Javascript

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.


TXP Builders – finely-crafted code, design and txp

Offline

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

geoff777
Plugin Author
From: Benarrabá Andalucía Spain
Registered: 2008-02-19
Posts: 282
Website

Re: Article related Javascript

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)


There are 10 types of people in the world: those who understand binary, and those who don’t.

Offline

Board footer

Powered by FluxBB