Need Layout Tip for Glossar

[macangelo]

Hi all,

I'm trying to build up glossary:
there is not much in there yet - but ...
http://portal.directinvest.de/index.php?de_glossar
what I would like to have is the long text in the column on the right side of the listing. Does anybody have an idea how to do that?

Thanks a lot!

macangelo

[macangelo]

I can change how the listing looks and how the details look (in include/inc_module/mod_glossary/template/default/default.tmpl).

But where are these two put together? I couldn't make it in this tmpl. Every click on the page reloaded the page.

Thanks a lot

[jsw_nz]

hi macangelo,

interesting question, which i do not have the answer
- perhaps OliG can sign in and explain
- your site is very nice BTW

- am hoping OliG can provide the highlight glossary terms in front end feature as well - anyway - hoping you get your answer

- respect
john

[Oliver Georgi]

I would do it this way - a pure JavaScript Solution with Fallback in case JavaScript is disabled:

In the content part under "list view" put in nothing - means show headline and full glossary description.

Then I would use special Mootools or or other JS library to inject the DOM to handle events in case headline is clicked.

Code: Select all

	<div class="glossary_list_entry">
		[TITLE]<h2><a href="{LINK}">{TITLE}</a></h2>[/TITLE]
		<div>{TEXT}</div>
	</div>

This is the basis for finding related contents. Now everything has to be done in JavaScript.

1.) Search each div.glossary_list_entry
2.) Add onClick Event to div.glossary_list_entry h2 which disable (stop) href and
3.) get innerHTML of

Code: Select all

div.glossary_list_entry div

and put it to h2 onClick
4.) delete or hide div.glossary_list_entry div
5.) onClick event take the content and show the full glossary message in another div using innerHTML.

So this is the way I would do it.

Litte JS snippet, think at least 20 minutes of work.

Oliver

[macangelo]

This how it works - thanks to Oliver!

Create 2 files:

• glossary.js and put in template/inc_js/
  sample.tmpl and put it in include/inc_module/mod_glossary/template/

In the backend select the 'sample.tmpl' in content part of your glossary:

• Template 'sample.tmpl

And here is what you need to create the 2 files:

glossary.js

Code: Select all

window.addEvent('domready', function() {

	$$('div.glossary_list_entry').each(function(r){ 

		var h2     = r.getFirst();
		var ahref  = h2.getFirst();
		var div    = h2.getNext();
		
		if(div) {
			var inner  = div.innerHTML;
		
			ahref.addEvent('click', function(e){
				e = new Event(e);
				e.stop();
				$('onclicktext').innerHTML = '<h3>'+ahref.innerHTML+'</h3>'+inner;
			});
		
			div.remove();
		}
	});

});

sample.tmpl

Code: Select all

<!--GLOSSARY_LIST_HEAD_START//-->
[PHP]
	$GLOBALS['block']['custom_htmlhead']['mootools,js'] = '<script type="text/javascript" src="template/inc_js/mootools/mootools.js"></script>';
	$GLOBALS['block']['custom_htmlhead']['glossary.js'] = '<script type="text/javascript" src="template/inc_js/glossary.js"></script>';
[/PHP]

<div style="position:relative;padding-right:200px;">
	[FILTER]
	<div class="glossary_filter_top">
		{FILTER}
	</div>
	[/FILTER]
<!--GLOSSARY_LIST_HEAD_END//-->


<!--GLOSSARY_LIST_SPACER_START//-->
	<div class="glossary_list_space"></div>
<!--GLOSSARY_LIST_SPACER_END//-->


<!--GLOSSARY_LIST_ENTRY_START//-->
	<div class="glossary_list_entry">
		[TITLE]<h2><a href="{LINK}">{TITLE}</a></h2>[/TITLE]
		<div>{TEXT}</div>
	</div>
<!--GLOSSARY_LIST_ENTRY_END//-->


<!--GLOSSARY_LIST_FOOTER_START//-->
	[FILTER]
	<div class="glossary_filter_bottom">
		{FILTER}
	</div>
	[/FILTER]
	<div id="onclicktext" style="position:absolute;width:180px;top:0;right:0;"></div>
</div>
<!--GLOSSARY_LIST_FOOTER_END//-->



<!--GLOSSARY_DETAIL_HEAD_START//-->


<!--GLOSSARY_DETAIL_HEAD_END//-->


<!--GLOSSARY_DETAIL_ENTRY_START//-->
	<div class="glossary_list_entry">
		[TITLE]<h2>{TITLE}</h2>[/TITLE]
		<div>{TEXT}</div>
	</div>
<!--GLOSSARY_DETAIL_ENTRY_END//-->

<!--GLOSSARY_DETAIL_FOOTER_START//-->
	<div>
		<a href="{BACKLINK}">Zur&uuml;ck</a>
	</div>
<!--GLOSSARY_DETAIL_FOOTER_END//-->

After that you can do the fine tuning by adjusting the layout.

Good Luck

[update]

This is
bookmarked it Thanks!

[sustia]

Hi macangelo, this works but I can read this part of code in the screen (just above the glossary term):

Code: Select all

$GLOBALS['block']['custom_htmlhead']['mootools,js'] = ''; $GLOBALS['block']['custom_htmlhead']['glossary.js'] = '';

It's my fall?
Thanks.

[DeXXus]

Hi macangelo, this works but I can read this part of code in the screen (just above the glossary term):

Code: Select all

$GLOBALS['block']['custom_htmlhead']['mootools,js'] = ''; $GLOBALS['block']['custom_htmlhead']['glossary.js'] = '';

It's my fall?
Thanks.

Nope!
macangelo -accidentally- typed a comma in this line (after mootools -and- before js):

IS

$GLOBALS['block']['custom_htmlhead']['mootools(COMMA)js'] = '<script type="text/javascript" src="template/inc_js/mootools/mootools.js"></script>'

SHOULD BE

$GLOBALS['block']['custom_htmlhead']['mootools(PERIOD)js'] = '<script type="text/javascript" src="template/inc_js/mootools/mootools.js"></script>'

[sustia]

Thanks DeXXus, I will check it.

[Oliver Georgi]

comma or point - makes no difference - it's just a string - you can type in "Mutti-Hilf" there if you like

Be sure that you are allowed to use [PHP[/PHP] there. Maybe you have older release and it's not working like described.

But you can add <script src...> also inside of you template or maybe inline style is possible too.

Oliver

[sustia]

Perfect Oliver, that's was the problem, thank you!

[jsw_nz]

Seems glossary is a pretty good opportunity to run Ajax
to send data to right div as Macangelo has done
so I created a external call to custom php script
& used jQuery library to populate right div

Code: Select all

<a href="javascript:ajax_glossary_detail('ajax_getGlossary.php','3-7','2','Memex')">etc</a>

slight modifications to:
mod_glossary/inc/cnt.article.php

//line 178

Code: Select all

$ajax_aid_string =  returnGlobalGET_QueryString('htmlentities');
$ajax_aid_array = explode("?aid=",$ajax_aid_string);
$ajax_aid = $ajax_aid_array[1];

//line 228

Code: Select all

$content['glossary']['entries'][$_entry_key] =
str_replace('{AJAXLINK}', $_no_entry ? '#' :
'javascript: ajax_glossary_detail(\'ajax_getGlossary.php\',\''.$ajax_aid.'\',\''.$_entry_value['glossary_id'].'\',\''.urlencode($_entry_value['glossary_title']).'\');', $content['glossary']['list_entry']);

- Where {AJAXLINK} is put inside template
- and ajax_getGlossary.php is an 'ajaxified' version of index.php
- sure a similar approach is possible in mootools
- external call is nice if you have a lot of images in glossary
- and dont' want to download them in glossary listing.

works on my localhost

[godmd]

Be sure that you are allowed to use [PHP[/PHP] there. Maybe you have older release and it's not working like described.
But you can add <script src...> also inside of you template or maybe inline style is possible too.

Maybe 'allow_cntPHP_rt' in config wasn't set to 1.

What about jsw_nz's promising suggestion, will that work on any hosting webserver? (Just want to ask before I go through the trouble ... maybe someone has already tried?)

Anka