scroll through articles javascript

juliane · 2009-02-11 20:32:29

hi, i’m trying to implement this scrolling system that uses the keyboard (http://dropular.net) on my blog.. but it’s not fully working.

can’t i just copy and paste the javascript codes? hehe

i’m new at this whole javascript thing. so.

thank you!

juliane · 2009-02-11 20:51:16

only pressing the “right” button on the keyboard is working. cause it goes directly to the next (previous) page.

shortcut.add(“right”,function() {

window.location = “http://dropular.net/1”; $(“.number”).fadeTo(300, 1); $(“.number”).fadeTo(400, 0); $(“.number”).text(“Next”);

return false; });

the code part that works is this. then i can just change the http link.

jakob · 2009-02-11 23:29:36

You’ll need to include the relevant jquery and scroll js files in the document head, and I think you also need to set up a series of id’s in your source code which it will step between (you’ll see dropular gives each item an incremental id drop0, drop1, drop2, drop3, …). The cool thing about it, is that it doesn’t just page down, it pages down per content element, which can be different lengths. It’s using Jquery ScrollTo, so you might want to see their project page ( + docs and most recent update) for instructions on implementing it.

juliane · 2009-02-12 18:24:20

so i would have to define an id to each article on the page using this tag <a id=‘article0’></a> somewhere in the article form or default html? and then where the #drop (in the script) is defined? cause I couldn’t find it in the css file.

juliane · 2009-02-12 19:08:22

i included the scroll.js and the shortcut.js scripts in the head.. now.

so i would have to define an id to each article on the page using this tag <a id=‘article0’></a> somewhere in the article form or default html? is there a code to do this numbering automatically like <a id=‘article0’></a> for the first article on the page, <a id=‘article1’></a> for the second article on the page.. and so on?

and then where the #drop (in the script) is defined? cause I couldn’t find it in the css file.

jakob · 2009-02-12 19:51:02

is there a code to do this numbering automatically?

You can use rvm_counter to output an incrementing number, you can probably also use the in-built txp:variable function too. With rvm_counter you probably need to reset the counter to begin with (or else it continues to count upwards ad infinitum), then include it in your article form so that it increases with each article shown on the page.

and then where the #drop (in the script) is defined? cause I couldn’t find it in the css file.

You specify the id you want to use in your jquery function $.scrollTo( ..); – see the source of the page you quoted (at the bottom) to see how they did it. I’ve never used this myself, so I do recommend you read the docs I linked to above as I’m just inferring this from examining the page and general background knowledge.

juliane · 2009-03-06 23:26:52

i got the article counting working with the rvm_counter plug-in:
on the article form: <a id=‘drop<txp:rvm_counter />’></a>
on the default page: <txp:rvm_counter reset=”-1” offset=”-1” /> so it would start at 0. example: <a id=‘article0’</a> and so on.

now. when I press the “down” key it goes right to the first article. if I press it again… it should go to the next article… but it stops right there. don’t know why though. any clues?

and…

this line for example on the script:

shortcut.add(“right”,function() {

window.location = “http://dropular.net/1”; $(“.number”).fadeTo(300, 1); $(“.number”).fadeTo(400, 0); $(“.number”).text(“Next”);

return false; });

it goes to the next page. but it won’t show the “Next” text button like it shows on dropular. what’s wrong?

juliane · 2009-03-06 23:34:03

the “Next” thing actually worked now.
i put a .number on the css file to define it’s looks.

juliane · 2009-03-08 01:00:49

the <txp:rvm_counter reset=”-1” offset=”-1” /> on the default page is returning a -2 on the page. how can I not show this number on the page or just hide it?

i put this command just to reset the article counting. so I don’t want to display any numbers on the resulting page…

maniqui · 2009-03-10 00:46:13

@juliane, try this:

<!-- <txp:rvm_counter reset="-1" offset="-1" /> (output is hidden in an HTML comment) -->

Also, I recommend you to use this version of rvm_counter
The original version (the one you are using) works in a way that if the same page is called almost at the same time by two or more users, the count messes up.

The modified version I linked generates always the same count (ie. counts the same amount for every user) even when the page is being hit by many users at the same time.

Last edited by maniqui (2009-03-10 00:46:58)

gomedia · 2009-03-10 09:26:55

maniqui wrote:

Also, I recommend you to use this version of rvm_counter
The original version (the one you are using) works in a way that if the same page is called almost at the same time by two or more users, the count messes up.

Or use adi_calc which operates on TXP variables.

Textpattern CMS

Textpattern CMS support forum

#1 2009-02-11 20:32:29

scroll through articles javascript

#2 2009-02-11 20:51:16

Re: scroll through articles javascript

#3 2009-02-11 23:29:36

Re: scroll through articles javascript

#4 2009-02-12 18:24:20

Re: scroll through articles javascript

#5 2009-02-12 19:08:22

Re: scroll through articles javascript

#6 2009-02-12 19:51:02

Re: scroll through articles javascript

#7 2009-03-06 23:26:52

Re: scroll through articles javascript

#8 2009-03-06 23:34:03

Re: scroll through articles javascript

#9 2009-03-08 01:00:49

Re: scroll through articles javascript

#10 2009-03-10 00:46:13

Re: scroll through articles javascript

#11 2009-03-10 09:26:55

Re: scroll through articles javascript

Board footer