Categories and downloads scrollbar

[mrm92]

Hello and many thanks for this work that helped me a lot.
I'm a newbie and i need a scrollbar for the list view of categories and downloads in the main page.
Which file I need to modify and if it's not a problem, what is the best code to do that?
I use the default layout. Thanks

[ColinM]

Hi
You can do this by adding in the  css code starting at .jd-item-page {into your jdownloads_custom.css file. You can set the height to a suitable value.  Note most people use the page navigation facilities.

Note in the jD Config FrontEnd tab you can limit the number of Downloads per page and you can also add navigation at both the start and end of each page.  If you decide to go to pure scrolling then you will also need to set Number of entries per Downloads page: field to 0 to disable the pagination.

You might find the following article helpful
http://www.jdownloads.net/documentations/item/custom-css

Code Select Expand

/* Custom CSS File for jDownloads
   If this file already exist then jDownloads does not overwrite it when installing or upgrading jDownloads.
   This file is loaded after the standard jdownloads_fe.css.
   So you can use it to overwrite the standard css classes for your own customising.
*/
.jd-item-page {
height: 500px;
overflow: scroll;
}
Colin

[mrm92]

Hi,
thank you for your detailed reply.
I found that is best use overflow-y to have the scrollbar only for the height and sorry if I seem insistent.. But is there a way to have the scrollbar only for the visualization of file and categories? and leave the header and subtitle without the scrollbar, so as to make them ever visible?

I would also like to integrate a breadcrumbs into the header or subtitle, is there a way to do that?

Thank you very much, I really appreciate your work.

[ColinM]

Hi
The overflow-y relies on css3 so it might affect some older browsers.  Maybe overflow:auto is a better bet.

I would also like to integrate a breadcrumbs into the header or subtitle, is there a way to do that?

Not really but you could have a template position immediately above the main 'article' area into which you assign the breadcrumbs module.  Alternatively try the NoNumber modules anywhere extension.

Adding the scroll bar to the Downloads only section is possible.  A little more complex.  First you need to make a copy of whatever files layout you are using.
Articles in the Layout section explain this http://www.jdownloads.net/documentations/category/editing-layouts

The objective is to put an enclosing <div wrapper block around all the Downloads part.  It is not totally obvious initially what should be done but once seen it is clear.

Here I am using a copy of "!Standard Files Layout v2.5" which gets called "Standard Files Layout v2.5 (2)" when you make a copy.  You need to make the copy the Active layout.  Next go to the main part of the Layout
and edit the top section to be something like below where I have highlighted the part I have added

Code Select Expand

{files_title_begin}<div  style="background-color:#EFEFEF; padding:6px;">
{files_title_text}flM-v25</div><div  class="jd-colin-wrapper">{files_title_end}

<table class = "{featured_class}" width="100%" border="0" cellpadding="5" cellspacing="5" style="background:#F8F8F8;border-bottom:1px solid #cccccc;">
     <tr valign="top">


Next go to the Header/Footer section and edit as below

Code Select Expand

</div><table class="jd_footer" style="width:100%;">   
    <tr>
        <td style="width:100%; vertical-align:top">
            <div class="jd_page_nav" style="text-align:right">flF-v25{page_navigation}</div>
        </td>
    </tr>
</table>
<div style="text-align:left" class="back_button">{back_link}</div>

The added css is then like before

Code Select Expand

.jd-colin-wrapper {
height: 500px;
overflow: scroll;
}

Note I have not tried this with any other files layout - I would be careful with the layouts that use checkboxes as they insert extra code.
Also note that we are presently modifying all the layouts to be <div rather than <table based but the principles are the same.

Colin

[mrm92]

Thank you very much Colin,
you are always very accurate!
The NoNumber plugin works very well and it solved my problem of breadcrumbs.

I tried your code and it works, then I played on it and I found that works better (don't know why) by adding it only on Categories Layout. Meanwhile I passed to 3.2 layout so I did not confused by <table and <div.
So the only code (apart the css custom code) that now i modified is the main of Categories Layout 3.2 and this is the code:

Code Select Expand

{cat_title_begin}<div  class="jd-colin-wrapper">{cat_title_end}
{cat_info_begin}
<div class="jd_cat_main" style="border-bottom: none; ">
    <div style="padding:5px;font-weight: bold; float: left; vertical-align: top; ">{cat_pic}{cat_title}</div>
    <div style="padding:13px; float: right; vertical-align: center; "> {sum_files_cat} | {sum_subcats}</div>
</div>
<div  style="float: left;">{cat_description}</div>
<div class="jd_clear_left">{tags}</div>
  <hr class="jd_cat_end" />
{cat_info_end}

With that code the scroll work fine in subcategories and files, but doesn't work only in the MAIN category home, does not show up.. i tried played up with anothers jd_ but the only results was a scroll in the scroll ecc... I just need to know if it can work on main categories

Thank you very much

[ColinM]

Hi
The situation with layouts is a trifle complex as it is meant to be simple for users to adapt colours and so on whilst maintaining the structure.  So different parts of different layouts get used in various conditions. So could you checkout what happens if you use 'list all categories' type menu or 'list all downloads' type.  You may also need to modify the Category layout as well to handle the main cats listing.  Presume you left the closing div in the active files layout footer.

I am just about to release a whole update on the v3.2 layouts and associated custom css.  The structure will be the same but there is more commonality and use of classes.  Incidentally what devices and browsers have you test on?

Colin
PS It would help us if we get really top ratings on the Joomla! JED  Perhaps I am biased but I think jD is the best and most flexible download manager so it is good for others to know!!

[mrm92]

Understood, then I play a bit with the layouts and otherwise we will see in future updates if I can solve this little problem.

I only test it on updated browsers (personally I use last Firefox), but probably we'll use only last browsers (Chrome, IE11/12, Firefox), because it's an internal site (not web).
We must see if in the future someone will connect via smartphone (or tablet).

PS I rated you on JED with high rate, because I hope this component would be updated, and it's free, so you've my total estimate! 

[ColinM]

Thanks

[mrm92]

Hi
always about the problem of yesterday, i noticed that the back link button stays in the overflow.. I don't understand why this is happening, because if the back button is in the footer, why it remains in the "jd-colin-wrapper"??
I need for a better layout that the back link stays in the footer of the main page.

Thanks

[ColinM]

Hi
So I can see what is going on better could you send me by Private Message (white square next to name) the address of your site - I should not need to login
Colin

[ColinM]

Hi
I have now made a comprehensive set of changes for scrolling.  The Back button is outside the scrolling as is the pagination so that one can have both scrolling and pagination.

The changes needed and the relevant css to be added are shown below.  You should also remove the scrolling from class .jd-item-page . Note that jd-colin-wrapper is no longer used so that should also be removed.  Please leave in the 'annotation' so as I can check what is happening.

Please also let me know when you have made the changes  - have assumed you are using the new div layouts.  Note special case with Categories sub paginated layout.

Colin
-----------------------------------------------------------------------------------------------------------------------------------------------
Layouts scrolling Parts added are shown in bold for clarity.  All fooer parts are identical except for the comment
-----------------------------------------------------------------------------------------------
Category Main

Code Select Expand

{cat_title_begin}<div  class="jd-category-scrolling-wrapper">
<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}CAT-Ms</div>{cat_title_end}
Category Footer

Code Select Expand

</div> <!-- end of jd-category-scrolling-wrapper -->
<div class="jd_footer jd_page_nav">{page_navigation}CAT-Fs</div>
<div class="jd_back_button" style="">{back_link}</div>
---------------------------------------------------------------------------------------------
Categories Main

Code Select Expand

{cat_title_begin}<div  class="jd-categories-scrolling-wrapper">
<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}catsMs</div>{cat_title_end}

Categories Footer

Code Select Expand

</div> <!-- end of <div  class="jd-categories-scrolling-wrapper"> -->
<div class="jd_footer jd_page_nav" style="">{page_navigation}CatsFs</div>
<div style="" class="jd_back_button">{back_link}</div>
--------------------------------------------------------------------------------------------------
Special Categories Layout for Paginated sub cats
Before Layout

Code Select Expand

{cat_title_begin}
<div style="background-color:#EFEFEF; padding:6px; width: 100%; box-sizing: border-box;">{subcats_title_text}CLP-BLs</div>
<div id="pageNavPosition" class="pageNavPosition"> </div>
{cat_title_end}
<div class="jd_clear"></div>
<div id="results" class="jd_subcats_main jd-subcats-scrolling-wrapper" style="border-bottom: 1px solid #cccccc;" />
----------------------------------------------------------------------------------------------------

Files main

Code Select Expand

{files_title_begin}<div  class="jd-files-scrolling-wrapper">
<div class="jd_files_title " style="">{files_title_text} FSdMs</div>
{files_title_end}

Files footer

Code Select Expand

</div> <!-- end of jd-files-scrolling-wrapper -->
<div class="jd_footer jd_page_nav" style="">FFsDs{page_navigation}</div>
<div style="" class="jd_back_button">{back_link}</div>
-------------------------------------------------------------------------------------------------------
CSS

Code Select Expand

/*  section for having scrolling as well as page navigation  */
.jd-categories-scrolling-wrapper,
.jd-subcats-scrolling-wrapper,
.jd-category-scrolling-wrapper,
.jd-files-scrolling-wrapper {
   max-height: 400px;
   overflow: auto;
}
.jd-subcats-scrolling-wrapper {
   height: 100px;  /*  height set low for testing purposes, would normally be say 150px */
}

--------------------------------------------------------------------------------

[mrm92]

Hi,
WOW, finally the scroll works in the main categories menu! Thank you!
But the back button still remains in the scroll, now I see if I can understand the problem!

EDIT
If in "Special Categories Layout for Paginated sub cats Before Layout"
I remove

Code Select Expand

{cat_title_begin}
<div style="background-color:#EFEFEF; padding:6px; width: 100%; box-sizing: border-box;">{subcats_title_text}CLP-BLs</div>
<div id="pageNavPosition" class="pageNavPosition"> </div>
{cat_title_end}
In the home categories the back button is outside the scroll, but in the subcategories and files still remains in the scroll.

[ColinM]

Hi
I will look at it again on your site.  It was OK on my test site 

As a precaution in case I need to modify the CSS could you send me Super User access please Also I will be able to import/export Layouts.
Colin

[ColinM]

Hi
I have loaded some new layouts on your site and updated the CSS.  Think it all works now that t I found my error!
Please see pics attached.  I changed some height values to a lower number to maske sure thigs di scroll.
In the layouts that support scrolling there are lines like

Code Select Expand

<div  class="jd-categories-scrolling-wrapper" style="max-height: 150px;">

Sometimes it is max-height and sometimes it is height.  The value specified such as the 150px above specify the height at which scrolling kicks in.

There are probably a couple of things to improve but the functionality is OK  Apart from changing the height beware of any other changes.

I expect to put up these Layouts in the Development area in a couple of days time.  You can use a combination of scrolling and Page navigation if you have many files in a category or sub cat.

Colin

[gelöscht durch Administrator]

[ColinM]

Hi
There is a side effect if the Category(scrolling) is activated.  It displaces any Side bar modules so they follow the main view. So I suggest you do nt activate that layout.

As yet the cause is 'mysterious'!  EDIT:  If it is not activated the the Files scrolling include the Back Button !!

Colin