Possibility to scroll long texts ... CSS

[Rodinou]

I have put it on the old board, but this option isn't on 1.2x

Example :
ahahhah no I can't ... I'm upgrading, there is critial Error everywhere

so ... when you are inside a category and you have several album, you can put text isn't it (next to the pic) ?

A lot of people don't write long text ... but if you use coppermine like me (I write articles on concerts, discotheques, themas ...) when text is too long, this creates a nasty layout.

The solution is simple : add in a div the property overflow:auto

<div style="overflow:auto">
Your long text
</div>

If text is too short, scrollbar doesn't appear
If text is long, scrollbar appears

Compatible with all Mozilla browsers, Opera 7 and IE since 5.x

If other browsers, nasty layout appears : so, degrades well.

[Tarique Sani]

Good suggestion - In fact why dont you try that

you are using the eyeball theme - open the theme.php line 221 is

Code Select Expand

<p class="album_stat">{ALB_INFOS}</p>
Put the div tags around it

Let us know if you succeed

[Rodinou]

When I posted it, the album bugged

Changed Succefully

This is the code

Code Select Expand



        <div style="width:100%;height:150px;position:relative;overflow:auto">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
        </div>


See representative examples at
http://www.sortons.net/photos/index.php?cat=11

I have a BIG problem with your code concerning the thumb pic : IMPOSSIBLE even if I force CSS to change the width of the cell containing the pic !!!

[Rodinou]

The complete code

in theme.php (on each template)

<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" height="100%" valign="top">
        <table width="100%" height="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" valign="top" class="tableh2">
                        <b>{ALBUM_TITLE}</b>
                </td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/spacer.gif" width="1" height="1"><br />
                </td>
        </tr>
        <tr height="100%">
                <td align="center" height="100%" valign="middle" class="thumbnails">
                        <!-- <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px;
 margin-bottom: 0px; border: none;"><br /> -->
                        <a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
                <td height="100%">
                        <img src="images/spacer.gif" width="1" height="1">
                </td>
               <td width="100%" height="100%" valign="top" class="album_stat">

        <div style="width:100%;height:150px;position:relative;overflow:auto; padding-right:10px">
                        {ADMIN_MENU}
                        <p class="album_stat">{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
        </div>

                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->

Weight Police = portion of code to change
Red = all additions

The problem of the thumbnail is in style.css

Reduce the value
.thumbnails
 {
  padding:10px;
}

Reduce this value to 3 or 2 px.

Page of demo
http://www.sortons.net/photos/index.php?cat=11

[antonio]

Let's say Im using the Hardwired theme & I want to use the scroll script.

Which pages need to be modified with the code besides theme.php?

Do I put the code at the end of the page?

Antonio...

[ray]

I installed this mod and all I done was edit theme.php, and this is what I done.

Search for:

Code Select Expand

{ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>

and replace with:

Code Select Expand

  <div style="width:100%;height:150px;position:relative;overflow:auto">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
   </div>

In this theme you should be able to replace two lots.

[antonio]

Thanks so much...it works fine..

[DefenceTalk.com]

This is nice. Thank You! I haven't implemented it yet, but will do.

Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?

thanks

[Joachim Müller]

Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?

http://forum.coppermine-gallery.net/viewtopic.php?p=6477#6477

What more info do you need?

GauGau

[John]

This is nice. Thank You! I haven't implemented it yet, but will do.

Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?

thanks

i did this easy.

just go into style.css for whatever theme your using, and find .thumb_caption

alter it to look something like this:

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
        position:relative;
        overflow:auto;
        height:50px;
}

hope this is what you meant and is of some help

John

[gmarik]

This is CSS2, many browsers support only CSS1, be carefull!

[Rodinou]

CSS 2 is "ONLY SUPPORTED BY"

All Internet Explorer (4 to 6)
All Mozilla Gecko (only Konkeror, Mozilla, Firebird, Netscape 7
Opera 7

So ... about 96% of the actual browsers

DROP IT your old and inefficace browsers like NS4 (which is not able to read SIMPLE HTML ... so CSS ... hahahaha)

CSS is future.

[Tranz]

I built upon this code by Rodinou to take advantage of CSS:

Code Select Expand

 <div style="width:100%;height:150px;position:relative;overflow:auto">
                      {ADMIN_MENU}
                      <p>{ALB_DESC}</p>
                      <p class="album_stat">{ALB_INFOS}</p>
 </div>

This is what I now have in theme.php:

Code Select Expand


{ADMIN_MENU}
<div class="alb_desc">
{ALB_DESC}</p>
<p class="album_stat">{ALB_INFOS}</p>
</div>
I guess it's a matter of taste whether to put the opening div before or after {ADMIN_MENU}. It only matters when in admin mode. Do a search for the string, <p class="album_stat">{ALB_INFOS}</p> to ensure editing of the description on the album and category pages, if so desired.

in style.css, I added:

Code Select Expand

.alb_desc {
width:100%;
height:150px;
position:relative;
overflow:auto;
}

It was a great idea to put the album description in a scrollable div. I didn't like what the long text of some of my album descriptions were doing to my layout.

[Rodinou]

thanx for your feedback

I have seen your theme ... we could try together to make a lot of stuff with CSS I love CSS ... and tabless ... and there are a lot hacks (for example : create "cropped" thumbs with actual thumbs but by playing with css, for example ...)