How To Set The Margins (Left, Right, Top) In The Apple Style Accordion?

[Cypherinfo]

1) Script Title: Apple style Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-apple.htm

3) Describe problem: Great scripts your! I'm using it thanks to a Joomla extension.

I'm setting up a menù with two items each of which containing some formatted text and a link. I need to set the margins (left, right, top) of the formatted text describing each of the item, and I do not know how to do it.

In your example and in the documentation available on the web site of the developper wrapped your script for creating the correspomding Joomla extension there some other features but not that about the margins.

I see in this site the demo of your menù has some margins set and those would be right for my menù too.

If is it not available the possibility to set the margins may you edit your script in order to do that? I guess all of the Joomla users would be glad of it and from my side I will write a great feedback about you on the http://extensions.joomla.org about you and your extension.


Bye.



Cypherinfo.

[ddadmin]

Are you referring to the padding that surrounds the contents themselves being expanded/ contracted? By default they are merely defined inside the CSS of the demo code, or the parts in red below:

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

<div class="applemenu">
<div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
	<div class="submenu">
	Some random content here<br />
	</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
	<div class="submenu">
	Some random content here<br />
	</div>
<div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
	<div class="submenu">
	Some random content here<br />
	</div>
<div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
	<div class="submenu">
	Some random content here<br />
	<img src="http://i27.tinypic.com/sy7295.gif" />
	</div>
<div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
	<div class="submenu">
	Some random content here<br />
	</div>		
</div>

If you have access to the CSS of your site, you should be able to set this easily.

[Cypherinfo]

Hello and thank you for your interest.

I have found it is possible to set every single margin this way:

.applemenu div.submenu, div.submenu a { /*DIV that contains each sub menu*/
background: white;
padding-left: 20px;
padding-right: 15px;
height: {$menu_height}px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #aaa;
text-decoration: none;

That is adding the: padding-left: 20px; padding-right: 15px; code.

Thank you. I'll try to suggest the developper to add that features too.


Bye.



Cypherinfo.

[Cypherinfo]

Hello, as you may notice in my attachment when I insert a web link or an e-mail address in the text of every single menù item, around them it appears a blank area that place on the text next them.

Is there a way to fix that issue?



Cypherinfo.

[ddadmin]

Since you're applying the padding to the A element within the sub menus in your CSS , and the web link/ email address is a link, additional padding will also be added to those elements. You might try explicitly removing the padding in those two elements via inline CSS, ie:

<a href="somelink.htm" style="padding:0">Some web link</a>

[Cypherinfo]

Hello, thank you; it works only with an URL link not for an e-mail address.

When I click on an e-mail address I get the following text in the e-mail address that appears:

<script language='JavaScript' type='text/javascript'> <!-- var prefix = 'ma' + 'il' + 'to'; var path = 'hr' + 'ef' + '='; var addy76554 = 'domenico.catalano' + '@'; addy76554 = addy76554 + 'igv' + '.' + 'cnr' + '.' + 'it'; document.write( '<a ' + path + '\'' + prefix + ':' + addy76554 + '\'>' ); document.write( addy76554 ); document.write( '<\/a>' ); //-->\n </script> <script language='JavaScript' type='text/javascript'> <!-- document.write( '<span style=\'display: none;\'>' ); //--> </script>This e-mail address is being protected from spambots. You need JavaScript enabled to view it <script language='JavaScript' type='text/javascript'> <!-- document.write( '</' ); document.write( 'span>' ); //--> </script>;

See the image attached. If I simply write the e-mail like this: myaddress@mydomain.com I get the issue (white space that overlap the text next it) I want to fix.

How to this time?

I'm using the following code in the Joomla module in order to set my menù; the first and the second tag are those created by the devolpper who wrapped your code to be used in a Joomla web site.

{Accordion_Menu_Apple_style 100}

<a href="http://194.119.202.161/Joomlatest/index.php?option=com_fabrik&view=table&tableid=2&calculations=0" >IGV Collection DB</a>

- Database di probabili regioni target per microRNA nelle EST dei generi Cynara e Chartamus. Il database contiene il risultato delle analisi ottenute attraverso il software RNAhybrid (Nucl. Acids Res, Vol: 34(suppl_2) Pages W451-454, 2008) sulle sequenze di EST in Cynara e Chartamus. I dati al momento non sono pubblici ed è possibile l'accesso al database dopo specifica richiesta al sequente indirizzo: <a href="mailto:domenico.catalano@igv.cnr.it" style="padding:0"> Mandami una e-mail </a> .

DB
- <b>Database di probabili regioni target per microRNA nelle EST dei generi Cynara e Chartamus. Il database contiene il risultato delle analisi ottenute attraverso il software RNAhybrid (Nucl. Acids Res, Vol: 34(suppl_2) Pages W451-454, 2008) sulle sequenze di EST in Cynara e Chartamus. I dati al momento non sono pubblici ed è possibile l'accesso al database dopo specifica richiesta al sequente indirizzo: domenico.catalano@igv.cnr.it</b> <a href="http://www.google.com" target=_blank>Google</a>
{/Accordion_Menu_Apple_style}

Cypherinfo.

[ddadmin]

It looks like your email address link is dynamically generated via JavaScript, so in order to add any style to it, you'll need to edit the script and inject the inline style inside the <a> tag of the link. For example:

<script language='JavaScript' type='text/javascript'> <!-- var prefix = 'ma' + 'il' + 'to'; var path = 'hr' + 'ef' + '='; var addy76554 = 'domenico.catalano' + '@'; addy76554 = addy76554 + 'igv' + '.' + 'cnr' + '.' + 'it'; document.write( '<a ' + path + '\'' + prefix + ':' + addy76554 + '\' + ' style=\'padding:0\'>' ); document.write( addy76554 ); document.write( '<\/a>' ); //-->\n </script> <script language='JavaScript' type='text/javascript'> <!-- document.write( '<span style=\'display: none;\'>' ); //--> </script>This e-mail address is being protected from spambots. You need JavaScript enabled to view it <script language='JavaScript' type='text/javascript'> <!-- document.write( '</' ); document.write( 'span>' ); //--> </script>;

Note the extra code in red. Hopefully I got the backslashes in correctly- it's a little hard to tell with the code above.

[Cypherinfo]

Hello, in order to summarize:

the following code (the first tag has created by the developper who wrapped your code for the Joomla CMS):

{Accordion_Menu_Apple_style 100}

<a href="http://194.119.202.161/Joomlatest/index.php?option=com_fabrik&view=table&tableid=2&calculations=0" >IGV Collection DB</a>

- Database di probabili regioni target per microRNA nelle EST dei generi Cynara e Chartamus. Il database contiene il risultato delle analisi ottenute attraverso il software RNAhybrid (Nucl. Acids Res, Vol: 34(suppl_2) Pages W451-454, 2008) sulle sequenze di EST in Cynara e Chartamus. I dati al momento non sono pubblici ed è possibile l'accesso al database dopo specifica richiesta al sequente indirizzo: "mailto:domenico.catalano@igv.cnr.it" style="padding:0".

<a href="http://site.igv.cnr.it/home/index.php?option=com_content&view=article&id=90&Itemid=11">CYNARA MIRNA TARGETDB</a>

- <b>Database di probabili regioni target per microRNA nelle EST dei generi Cynara e Chartamus. Il database contiene il risultato delle analisi ottenute attraverso il software RNAhybrid (Nucl. Acids Res, Vol: 34(suppl_2) Pages W451-454, 2008) sulle sequenze di EST in Cynara e Chartamus. I dati al momento non sono pubblici ed è possibile l'accesso al database dopo specifica richiesta al sequente indirizzo:<a href="mailto:domenico.catalano@igv.cnr.it">Mandami una e-mail</a></b>
{/Accordion_Menu_Apple_style}

generates the menù as in the image I attached.


I have then iserted here:

<a href="mailto:domenico.catalano@igv.cnr.it">Mandami una e-mail</a>

before the </a>, the code you posted previously and same issue.
I wonder if I inserted the code in the right place or is there something else to know in order to fix my issue.


Bye.



Cypherinfo.

[ddadmin]

It's hard to tell what's dynamically generated and what's not just by looking at your code above. The goal regardless though, is to ensure the email link that gets output has an inline style disabling padding, in the form:

<a href="mailto:domenico.catalano@igv.cnr.it" style="padding:0">Mandami una e-mail</a>

If the email link is dynamically generated, you have to modify the template code so the part in red is added to the output. If it's manually embedded, then obviously you'd just manually add this code in.

[Cypherinfo]

Hello,


I have tried your suggestion and I get the same e-mail message as in the attached image.

I suggest you to install the following firefox add-on to get the information you need from any site: Firebug 1,4,3, Web developper 1.8, FireCrystal 0.1.0 (Debugger).

More if you need my template I may send it in order to fix that issue.

My web site is here: Web Site

If you succeed your code (and the related wrapped Joomla extension) will be widespread in most joomla websites because it is the only compatible with Internet explorer 8!!


Bye.




Cypherinfo.