I was looking to the Modules page
http://drupal.org/project/Modules
It seems its very long list of modules.. which is excellent!, but you have to scroll down a lot.. Could it be any improvement when there is a long list an Ajax fold down can be introduce and people can click on/off the title and they see the teaser/summary and the relevant links and options? -and it feels and works faster than regular scroll down page
http://www.clearnova.com/ajax/index.html
this script may give better idea as an example
also if it can be done this can be considered wider applications within Drupal core ,modules, forms, lists, categories etc. with the script on the site above.
Comments
Ajax might not be necessary
It'd might be more efficent to just have a link change the css property of the box that contains the additional information from display: none; to display: block; and vice versa.
I would think that using Ajax to get the information everytime someone clicks on a title would be much more work on the server.
fold down and up-possible with CSS? how?
jhjaggars Thanks for your post,
"to just have a link change the css property of the box that contains the additional information from display: none; to display: block; and vice versa"
I could not understand what you mean by 'css property' do you mean the theme css?? If so how? Can you be more specific? For instance how do you re code/hack;
http://drupal.org/project/Modules
page? That we can see titles listed - no teaser text by default... when user clicks on titles the teaser text and links folds down/up. Can you paste the 'css property' with spesific file css file theme/module css document?
"I would think that using Ajax to get the information everytime someone clicks on a title would be much more work on the server."
It seems with Ajax script Folded down/up without reloading the whole page. That does not mean less load to the server and faster browsing?
That's not Ajax
On your example page, the folding is not Ajax. It's simple javascript/css. When you click a title, a
toggleDiv()
function is called, which simply change the cssdisplay
property of a<div>
tag. Nothing too difficult to do.-- DamZ
toggleDiv function
thanks damz,
and it all looks fine and 'easy', but can you be more specific with an example?
I am not a php programmer unlike many guys here, I may try to go to the coding if i know specifically where and how it should be done.
- what, where is the 'our example page' you mention? Do you mean
http://www.clearnova.com/ajax/index.html?
- where the toggleDiv code above should go on Drupal?
to the modules? nodes? to the css? or page template? of Drupal
...that may also help to other people on my level of coding
~sorry if my questions sounds dumb
Simple implementation
simple
Above is a crude example of how to use the togglediv function.
Hmmm, that example above
Hmmm, that example above didn't work for me, maybe it was my browser - I'm not sure. At any rate I wrote up a more detailed example with documentation here in case anybody is looking for how to do toggle div:
http://www.drupalart.org/togglediv
I was assuming
that the above posted toggleDiv function would work a certain way.
I modified the function posted by damz and updated the example here.
togglediv it works, great! but...
Thank you zirafa, jhjaggars, damz
- all works nice on your sites and on the browser nicely
and its even better explained on zirafa's
http://www.drupalart.org/togglediv
-and i learned something from you.
yet it seems you are talking among the coders with pre assumptions of coding knowledge if you dont mind me to saying so, (with respect to you all).
Problem is how to integrate this for Drupal without prior knowledge of coding for ordinary Drupal users.
- either concrete examples and references of integration or this functionality added Drupal as a module, sniplet or to the core somehow. i believe it will be a positive addition in 'usability' point of view.
How to add a scriptaculous effect ?
Hi !
Could you explain me how to add a scriptaculous effect to this function, I'd like to use the fade effect. I've tried to use the core function of Drupal collapsible.js but it doesn't work for me...
Thank you
Scripataculous
Drupal uses JQuery that isnt compatible with Prototype, and therefore with Scripatuculous. You should take a look at jquery fading options.