Nothing clickable at frontend - [Fixed in 3.2.3]

SoundHunter · 28.04.2014 22:56:33

Hi all,

After my upgrade to version 3.2 of jDownloads on Joomla 3.2 my downloads are no clickable at all.
I tried IE, Firefox and Chrome.
In IE I can start a mp3 file with the player but the download button is also not clickable.
Template: default
Text selection: impossible in all browsers in the Files layout
Text selection is possible in the Category layout.
Text selection for the rest of the Joomla installation (like the menu) is possible
Problem is with and without mp3 files/player.
PHP version: 5.3.2
MySQL version: 5.5.37
Webserver: Apache 2.2.14 (Ubuntu)
Website works on a big Dutch webhosting company

I send a PM with a link to the webpage to Arno.

Thanks for any quick response!

Best regards,

SoundHunter

SoundHunter · 28.04.2014 23:34:49

It looks like I already fixed the problem myself.

I use the Gantry Framework from Rockettheme.
In /libraries/gantry/css/grid-responsive.css on line 9 I deleted

Code Select

position: relative;
In the same file I also deleted on line 11

Code Select

position: relative;

After that it looks like that did the trick.

But why must I delete those codes?
Some little problem in the jDownloads code or in the Gantry code?

Thanks for any answer.

Best Regards,

SoundHunter

Arno · 29.04.2014 01:54:57

Hi,
you are the second user which had this problems with jD and Rockettheme.
I hope that we can find and solve this problem.

NaNels · 29.04.2014 16:48:31

Hello,

I'm using version 3.2 of jDownloads on Joomla 3.2 and just like [SoundHunter] in an earlier report, my downloads are no clickable at all.
That applies for all common webbrowsers.
PHP version: 5.3.2
MySQL version: 5.5.37
Webserver: Apache 2.2.14
I use a Rockettheme template using Gantry (framework).
What can be wrong? How exactly can I have access to the Gantry css as described in SoundHunter's solution?

Best regards,
NaNels

Gerard · 29.04.2014 20:23:41

Hi NaNels,

You can find the Gantry CSS files in the following directory:

../libraries/gantry/css/grid-responsive.css

This directory is also mentioned in the post of SoundHunter.

Gerard

ColinM · 01.05.2014 02:31:15

Hi
I have had a look at the problem and confirm it occurs.
The basis of the Gantry theme is a grid. It has many css definitions that are variants of the name 'rt-grid' It uses @media statements to select which particular definitions are used dependant on the screen size of the device.

The two lines of css in /libraries/gantry/css/grid-responsive.css that are thought to be responsible are

Code Select

body [class*="rt-grid"] {display: inline;float: left;position: relative;margin: 0;}

.rt-container {width: 1200px;margin: 0 auto;position: relative;}

The first of these is a wild card selector that basically says within the scope of <body> to </body> , which is basically the entire page, then if there is any class containing the string rt-grid such as say class="abcrt-gridxyz" then apply those css definitions in the {...}. This is a neat short hand way of being able to effectively add some css to a lot of classes.

Actually Gantry needs the position:relative; in the rt-grid classes to make it work for different devices and so on.

jDownloads works fine if the first position: relative; is left in. It is the second one in the .rt-container class that causes the 'challenge'.

Basically in that circumstance the relevant jDownloads html code that makes buttons and so on active is not generated.
The html is actually correctly generated on first load (I was using list all categories) but fails after going one level down. The correct code generates a sequence like

Code Select


<div id="rt-main" class="mb12">
    <div class="rt-container">
        <div class="rt-grid-12">
            <div class="rt-block">
                <div id="rt-mainbody">
                    <div class="component-content">
                        <div class="item-page">

The jDownloads 'code' starts with the <div class="item-page">. Note that the <div> sequence is
<div class="rt-container">
<div class="rt-grid-12">

When the position: relative; is removed from the rt-container class then the state is position:static; from the browsers defaults.

When the position:relative; is in the rt-container class then the generated html is as below

Code Select


<div id="rt-transition">
    <div id="rt-mainbody-surround"></div>
    <footer id="rt-footer-surround">
        <div id="rt-copyright">
            <div class="rt-container"></div>
        </div>
    </footer>
</div>

- no sign of the component code at all. Suggest someone brings this to the attention of Rocket Theme

Modification Please see post below giving a possible solution from within jDownloads The problem is all to do with the stacking order. However I still believe Rocket Theme as a reputable outfit should not cause an impact on Component suppliers in the effective environment they provide. One would hope that they would aim at a 'neutral' scheme as do other template providers.

Colin

SoundHunter · 02.05.2014 22:19:08

Good findings GolinM!

I did some further research and found a user that uses Jumi, an other Joomla component.
This component had the same problems as jDownloads do with Gantry.
This user contacted RocketTheme and they send their solution here: http://2glux.com/forum/jumi/jumi-compatible-with-the-gantry-framework-t2402.html
I tested this out to change in the second line (line 11 with the .rt-container) the word relative to inherit.
So change line 11 in .../libraries/gantry/css/grid-responsive.css:

Code Select

.rt-container {width: 1200px;margin: 0 auto;position: relative;}

To:

Code Select

.rt-container {width: 1200px;margin: 0 auto;position: inherit;}

Looks good enough to me.
It also looks like the already now of this problem at RocketTheme...

Best Regards,

SoundHunter

ColinM · 04.05.2014 19:14:31

Hi
I have found a solution that will work without any changes to the Rocket Theme Gantry template.

It involves modifying jdownloads_fe.css which is in components/com_jdownloads/assets/css/ Part of the reason for looking further was the wide use of Rocket Theme templates and what I perceive as their probable unwillingness to change!

Now the jDownloads front end html starts with
<div class="item-page"> NB this will be changing in a later release to <div class="jd-item-page"> where it is planned that all the css classes and ids needed by the front end will have a pre-fix of 'jd-' so as not to be reliant on the template css for detail layout.

So include the following in jdownloads_fe.css

Code Select


/* fix if template uses position:relative; in its containing div  */
/* for future releases */
.jd-item-page {
    position: relative;
    z-index: 1;
}
/* for current beta release */
.item-page {
    position: relative;
    z-index: 1;
}

There is a small chance that this mod could possibly affect some modal type views with video samples or pictures and so on. It needs investigating. The key will be to use a higher z-index value for those items but note z-index only applies when there is a positioning element.

Colin

Arno · 05.05.2014 13:52:24

Hi Colin,

QuoteI have found a solution that will work without any changes to the Rocket Theme Gantry template.

awesome message! Shall i insert the posted css additions for the next update?
I hope i can publish it at the evening. Or must i also do something else?

ColinM · 05.05.2014 17:31:02

Arno
Yes we can go with this as it should be quite safe.

But I hope Rocket theme will sometime change the Gantry Template. Did you see my PM sent to Gerard?

Colin

Arno · 05.05.2014 17:56:55

Colin,
yes i have seen it, well done.

A last question: i need only the zwo additional css classes? So we should use the jD-item-page solution first in a later release? No problem.
I will do it.

SoundHunter · 05.05.2014 18:30:33

Great if this will be fixed in the upcoming beta release.
Will directly do some testing once the release is there.

Thanks both for working hard on this bug!

Regards,

SoundHunter

SoundHunter · 05.05.2014 23:05:37

I installed the new jDownloads 3.2.3 beta and tested this out.
Seems like it works great with Gantry now!

Thanks again for this fix!

Best Regards,

SoundHunter

ColinM · 06.05.2014 10:44:34

Arno
I think that we should introduce all the jd prefixes in the CSS at the earliest opportunity as this will maximise the testing

but I will respect your view as it is you who has the most work to do with bug fixing!

Colin
PS have not yet downloaded latest version so you may have done some already

Arno · 06.05.2014 10:47:13

Hi Colin,

Quotebut I will respect your view as it is you who has the most work to do with bug fixing!

We can do it in next beta release, no problem.

jDownloads Support Forum

News:

Nothing clickable at frontend - [Fixed in 3.2.3]

SoundHunter

SoundHunter

Arno

NaNels

Gerard

ColinM

SoundHunter

ColinM

Arno

ColinM

Arno

SoundHunter

SoundHunter

ColinM

Arno