Author Topic: MOVED: Infinite Scroll JS & News Module (Read 20803 times)

jtrein · « **on:** July 30, 2011, 09:55:32 PM »

Anyone,

I tried my hardest to get infinitescroll.js (http://www.infinite-scroll.com/) working on WebsiteBaker, for the News module, to no avail.

My jQuery is up-to-date and I included the scripts as usual.

What I found when searching forums on GitHub (https://github.com/paulirish/infinite-scroll/issues/5) for the project was that the "/...php?p=5" - or whatever you have your news limit set to 50, 90, etc. - is not expected from the script. By default the AJAX, or whatever, is looking for something to effect of /pages/2, /pages/2.html

There has been steps taken in the most recent version to address this, but I still can't get it working!

This would be so awesome to get working, so we don't have to use/expose the [NEXT_PAGE_LINK].

Looking forward to any experimentation!

jtrein

jtrein · « **Reply #1 on:** August 19, 2011, 06:03:47 AM »

Update: Sadly, still no good news. I can't get it working. It seems that the JS expects 2 things:

1) a number 2 in the URL for the script to kick off.
2) The mention of the word 'page' in the URL, since we're using .php URL endings, not .html (i.e. ?page=2)]

So, I even edited some of the News module where 'p' is set for ?p=...#..., to ?page=...#... . I then set the increments for the News posts per page to multiples of 2, so you would get 2 for the page number, and not the standard 5.

This is a worthwhile script that can add a great amount of interactivity to News.

Any help is appreciated. Anyone willing to make this a LibraryAdmin plugin?

Kindest,

jtrein

dbs · « **Reply #2 on:** August 19, 2011, 08:42:32 AM »

hi, why you post under "help and support"?
"jquery" would be better, hm?
it exists also a forum for libraryadmin: klick

you want infinityscroll for content_short? or content_long?

jtrein · « **Reply #3 on:** August 19, 2011, 01:28:19 PM »

Good catch and thank you

News content_short would be best, I think.

Any help is much appreciated!

dbs · « **Reply #4 on:** August 21, 2011, 10:15:03 AM »

the infinitiscroll is very hard to implement ...

i give it up for the moment.
a try with another plugin was easier. the effect is maybe (at the moment) not so pretty: look

NorHei · « **Reply #5 on:** August 21, 2011, 02:02:00 PM »

Do i get you right that you want the short text of all news , maybe a few hundered to scroll infinite on a page ?

Giving it a short thought , i think maybe its better to try whith a modified version of anynews. I schould not be too hard to modify it so it displays only one Newsentry selected by a GET paramater.

Does someone know if anynews supports displaying the images inside the news teaser ?

jtrein · « **Reply #6 on:** August 22, 2011, 02:46:58 PM »

@dbs

That is awesome, dude! You know, Infinite Scroll has plugin options that allow it to be decorated and further customized.

You make it look so easy.

Also, check this out: http://masonry.desandro.com/demos/infinite-scroll.html

jtrein · « **Reply #7 on:** August 22, 2011, 02:51:06 PM »

@NorHei

Quote from: NorHei on August 21, 2011, 02:02:00 PM

Do i get you right that you want the short text of all news , maybe a few hundred to scroll infinite on a page ?

Giving it a short thought , i think maybe its better to try with a modified version of Anynews. I should not be too hard to modify it so it displays only one news entry selected by a GET parameter.

Does someone know if Anynews supports displaying the images inside the news teaser ?

Cool idea! As it's not unusual for me to get ahead of myself, I wanted to initially make mention of the possibilities of using other modules. It would be so cool to just throw it in as a new WB plugin for LibraryAdmin. Does Blackbird manage that?

This is still racking my brain, but any help is very appreciated!

Kindest,

jtrein

dbs · « **Reply #8 on:** August 22, 2011, 04:34:42 PM »

i hope for you norhei or anybody find a solution.
my way is working, but a nice fadin-effect is missing.

jtrein · « **Reply #9 on:** August 22, 2011, 04:37:17 PM »

@dbs

Quote from: dbs on August 22, 2011, 04:34:42 PM

i hope for you norhei or anybody find a solution.
my way is working, but a nice fadin-effect is missing.

How did you implement it?

dbs · « **Reply #10 on:** August 22, 2011, 04:54:50 PM »

i have made a plugin for jqueryadmin/libraryadmin.
you know what it is or use you the register_frontend_m odfiles-methode?

jtrein · « **Reply #11 on:** August 22, 2011, 05:02:41 PM »

@dbs

Quote from: dbs on August 22, 2011, 04:54:50 PM

i have made a plugin for jqueryadmin/libraryadmin.
you know what it is or use you the register_frontend_m odfiles-methode?

I wish I knew! I'm quite novice when it comes to programming. The extent of my skillset is: HTML, CSS, some jQuery, minimal PHP, minimal MySQL

Sorry I can't better answer your question!

dbs · « **Reply #12 on:** August 22, 2011, 05:08:01 PM »

for use jquery you don't have install a modul (like jqueryadmin or libraryadmin)?
you have changed the index.php of your template?
is there in the head somthing like this?:

Code: [Select]

<?php 
if(function_exists(&#39;register_frontend_modfiles&#39;)) {
    register_frontend_modfiles(&#39;css&#39;);
    register_frontend_modfiles(&#39;jquery&#39;);
    register_frontend_modfiles(&#39;js&#39;);
}

jtrein · « **Reply #13 on:** August 22, 2011, 05:22:49 PM »

@dbs

Oh, I apologize! Well, I went crazy, one could say, and took the long way around.

I minimally rewrote the News module's view.php file. Added a WYSIWYG section to the News page and there I included my jQuery script.

So, I guess you could say I used just plain jQuery, without a module. I created a folder called 'scripts' and just threw it on my server.

No changes to my template file, except to include <script> reference to the infinitescroll.js file.

Included in my template file:

Code: [Select]

<?php
// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists(&#39;register_frontend_modfiles&#39;)) {
		register_frontend_modfiles(&#39;css&#39;);
		register_frontend_modfiles(&#39;js&#39;);
	} ?>

Kindest,

J. Trein

dbs · « **Reply #14 on:** August 22, 2011, 05:34:19 PM »

your way is also a way.

_{but wb has jquery onboard and with the lines i posted it is activated.}

in your way:
you load this script (jquery.lazyloader.j s):
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

you add this call:

Code: [Select]

<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

you change this in news options (2. field from top):

Code: [Select]

<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>

to this (copy&paste):

Code: [Select]

<pre class="pre.i-am-lazy"><!--<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>--></pre>

if this makes problems change pre.i-am-lazy to pre.lazy (2x)

you choose in options all news (not only 5 or 10)

jtrein · « **Reply #15 on:** August 22, 2011, 05:38:20 PM »

@dbs

Very interesting! Thank you very much for that.

So, I can use this method that you posted, or write a plugin for jQueryAdmin / LibraryAdmin to include InfiniteScroll.js (crazy-awesome options)?

Kindest,

J. Trein

dbs · « **Reply #16 on:** August 22, 2011, 05:43:09 PM »

use your way for today and test it
the other ways need a little bit more reading tuts and time.

jtrein · « **Reply #17 on:** August 22, 2011, 05:49:04 PM »

@dbs

Thanks! I will do that hopefully tonight, when I get home.

jtrein

jtrein · « **Reply #18 on:** September 16, 2011, 12:37:39 AM »

@dbs

Man, I'm at a loss. ~~The LazyLoader won't work in Firefox. I have vers. 6, but others reported the same behavior.~~

I'm not sure I desire LazyLoader's functionality for this, but it is a great idea.

Next steps are uncertain. Any advice? I tried again tonight with the InfiniteScroll, to no avail!

Thanks as always!

jtrein

dbs · « **Reply #19 on:** September 16, 2011, 08:39:40 AM »

i have also tried, again and again (with lazyloader incl. fade-in-effect).
without fade-in at the moment no problem.

you want lazyloader use?
with libraryadmin or jquery from wb?

with jquery from wb you need this at the end of your head (index.php in your template-folder):

Code: [Select]

 <?php 
 if(function_exists(&#39;register_frontend_modfiles&#39;)) {
     register_frontend_modfiles(&#39;css&#39;);
     register_frontend_modfiles(&#39;jquery&#39;);
     register_frontend_modfiles(&#39;js&#39;);
 }
 <script type="text/javascript" src="<?php echo WB_URL; ?>/your-script-folder/jquery.lazyloader.js"></script>
 <script type=”text/javascript” >
   $(document).ready( function()
   {
       $(’pre.i-am-lazy’).lazyLoad();
   });
 </script> 
</head>

next: backend news-page > settings > Post Loop (replace with this):

Code: [Select]

<pre class="pre.i-am-lazy"><!--<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>--></pre>

helpful?

dbs

jtrein · « **Reply #20 on:** September 16, 2011, 02:25:33 PM »

@dbs

Thanks, man! I'll give that a try and post back the results.

I also wonder if @NorhHei was onto something with this quote earlier in the forum post:

Quote

Giving it a short thought , i think maybe its better to try with a modified version of Anynews. I should not be too hard to modify it so it displays only one news entry selected by a GET parameter.

Anynews is quite versatile, too.

Your support is second to none!

Kindest,

jtrein

jtrein · « **Reply #21 on:** September 19, 2011, 07:42:13 PM »

I may try jQuery Appear. If you want to see a demo, sites such as IMDB.com use it for images at the bottom of an actor/actress landing page.

http://code.google.com/p/jquery-appear/

dbs · « **Reply #22 on:** September 19, 2011, 08:40:35 PM »

seems to be a good idea.
try this (don't forget to load the jquery.appear.js in the head):

Code: [Select]

<script type="text/javascript">
$('tr').appear(function() {
			$(this).hide();
			$(this).fadeIn(1000);
		});
</script

or test the plugin appear with jQueryAdmin/LibraryAdmin.
it will work for all 'tr'.

[gelöscht durch Administrator]

jtrein · « **Reply #23 on:** September 24, 2011, 11:55:46 PM »

@dbs

Nice! Good move, sir.

Check this out: http://someplacespecial5k.com/pages/news.php

I wonder what else we can come up with...endless possibilities.

jtrein · « **Reply #24 on:** September 24, 2011, 11:58:04 PM »

However, they're all loading into the DOM, but the effect is there. I wonder if AJAX would work, setting the News listing to, say 5, for example.

See the Append content with AJAX: http://code.google.com/p/jquery-appear/wiki/Examples

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: MOVED: Infinite Scroll JS & News Module (Read 20803 times)

NorHei