jQuery Scrollable help needed!!

93 Posts

garthswest Reply #1, 16 years, 1 month ago

Hi All,

I have a client you wishes us to use http://flowplayer.org/tools/scrollable/# for their website.

The problem is there is only one html page and all scrolling content is housed within this file.

My question is, how do i make all page content editable and still retain the scrolling effect?

Thanks

Edit: Correct URL: http://flowplayer.org/tools/demos/scrollable/home.htm

93 Posts

garthswest Reply #2, 16 years, 1 month ago

Hi,

Is anyone able to help with this.
I could create multiple TV’s but then all editing would be one in only one document resource, which would sort of defeat the object of the document tree.

2,314 Posts

anonymized-26931 Reply #3, 16 years, 1 month ago

I could create multiple TV’s but then all editing would be one in only one document resource, which would sort of defeat the object of the document tree.

then use Ditto to generate the content

93 Posts

garthswest Reply #4, 16 years, 1 month ago

Hi sharkbait,

Thanks for your reply.
Still relatively new to MODx, could you please give me an idea of what you mean.

Thanks

2,314 Posts

anonymized-26931 Reply #5, 16 years, 1 month ago

refrence all necessary scrollable js & css files in your template. create a Chunk e.g. {{scrollable}} (check the Scrollable manual about the html structure)

		<div>
			<h2>[+pagetitle+]</h2>
			<div>[+content+]</div>
		</div>

assuming "4" is your parent folder, displaying content from 4 resources ...place something like this where you want the Scrollable to appear

<div class="items">
[[Ditto? &parents=`4` &tpl=`scrollable` &display=`4`  ]]
</div>

http://www.pogwatch.com/ditto/ditto-basic.html
http://ditto.modxcms.com/

93 Posts

garthswest Reply #6, 16 years, 1 month ago

Ok, i think i’m with you.

So doing this should work:
1. I can remove all the scrollable code from the template and place each one in a separate Chunk eg:{{scrollable1}}, {{scrollable2}} etc...
2. And reference it in the template using Ditto.

But what about resources that have no children, which could be the case for some pages. Can i just remove &display=`4` from the ditto call?

2,314 Posts

anonymized-26931 Reply #7, 16 years, 1 month ago

I can remove all the scrollable code from the template and place each one in a separate Chunk eg:{{scrollable1}}, {{scrollable2}} etc...

you only need one chunk

But what about resources that have no children, which could be the case for some pages. Can i just remove &display=`4` from the ditto call?

depends on how many itemsyou want to have displayed ...see available parameters: http://www.pogwatch.com/ditto/ditto-parameters.html

93 Posts

garthswest Reply #8, 16 years, 1 month ago

Hi sharkbait,

Thanks for your help but i’m just not getting it.
My documents structure is this: Home, Mission, Services, Projects, Contacts

The code for each page is this:

        <!-- home -->
        <div class="tool" style="background: transparent url(assets/templates/ninja/images/home.jpg) no-repeat scroll -20px -30px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

            <div class="details">
                [*description*]
            </div>

            <div class="demos" style="width: 225px;">

                <h2>[*longtitle*]</h2>

                
                    <p>[*content*]
</p>
</div>

        </div>

The above is duplicated for each page in the navigation, all housed in on single HTML file.
I put all the above scrollable code in a Chunk {{scrollable}}. then im the template replaced the code with:

[[Ditto? &documents=`1,50,51,52,53,54,6`  ]]

Just can’t get this to work!!

2,314 Posts

anonymized-26931 Reply #9, 16 years, 1 month ago

add &tpl=`scrollable` to your Ditto call and change [*description*] -> [+description+], [*longtitle*] -> [+longtitle+] etc. in the chunk

93 Posts

garthswest Reply #10, 16 years, 1 month ago

ok, something’s happening.

Now all pages are shown underneath each other. So i can scroll down through each page and the horizontal scroll function only works at the top of the page.