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
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
/* 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
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.
Hi
The overflow-y relies on css3 so it might affect some older browsers. Maybe overflow:auto is a better bet.
QuoteI 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
{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
</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
.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
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:
{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
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!!
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! ;)
Thanks
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
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
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
{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
</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
{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
</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
{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
{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
</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
/* 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 */
}
--------------------------------------------------------------------------------
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
{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.
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
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
<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]
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
Hi Colin,
Thank you very much for your support.
For now all we have done is just fine, because in my local site (that will be hosted today or tomorrow) there aren't, for now, so much categories to need the scrolling (there are more subcategories and files),
it is more important that I have it in the viewing files. Anyway, i keep working on this and if I can find the problem I keep update this thread.
Best regards