a suggestion: better usability with this Ajax script.. possible?

By ica on 25 Jul 2005 at 17:42 UTC

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

jhjaggars commented 25 July 2005 at 20:51

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?

ica commented 27 July 2005 at 04:12

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

Damien Tournoud commented 28 July 2005 at 12:21

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 css display property of a <div> tag. Nothing too difficult to do.

-- DamZ

function toggleDiv( element ) {
    var e = $(element);

    if (e) {
        e.style.display = ((e.style.display != 'block') ? 'block' : 'none');
    }
}

toggleDiv function

ica commented 1 August 2005 at 01:04

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

jhjaggars commented 2 August 2005 at 03:48

simple

Above is a crude example of how to use the togglediv function.

Hmmm, that example above

zirafa commented 3 August 2005 at 12:52

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

jhjaggars commented 3 August 2005 at 17:32

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...

ica commented 11 August 2005 at 14:42

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 ?

Anonymous (not verified) commented 8 November 2006 at 20:22

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