PDA

View Full Version : Gallery Description and javascript:toggleShow

Egrinner
Mar-13-2007, 02:33 PM
Hello,

I am a newbie to smugmug and this is my first post here. So far I like smugmug very much!

I would like to place quite a bit of text in some of my galleries. One way I found is to place the text in the description. Two questions:

1. I have used javascript:toggleShow to hide the text until clicked-on. Very nice. But when clicked-on to show the text, and there is more than one page-full of text, my browser (FF2) scrolls the page down to the bottom of the text, instead of leaving the beginning of the text visible. You can see it in the gallery below.

How do I make it such that when clicked to open, the top of the text is visible?

http://elans.smugmug.com/gallery/2568395 (http://elans.smugmug.com/gallery/2568395)

2. I would like to place the description under the photos (in which case issue #1 goes away because then the text will be always visible).

How do I place the description below the photos?

Many thanks!
Egrinner
Mar-14-2007, 10:59 AM
Hi,

Can someone please help me with this?

Thank you!
richW
Mar-14-2007, 12:02 PM
Hi, Can someone please help me with this? Thank you! I think setting a height of the text area might help a little. Keeping the viewing area smaller than the viewing area of the broswer.
Try making a class for the text, setting the height to 300px (adjust as needed) setting the text to scroll. Something like this:
In the gallery description:

<a class="nav" href="javascript:toggleShow('UniqueName1');">More Information</a>
<div id="UniqueName1" style="display: none;">
<div class="textBox1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo dignissim enim. Cras erat. In hac habitasse platea dictumst. Fusce vitae purus et dolor mattis malesuada. Vestibulum tempor nulla in felis. Aenean gravida, mauris nec adipiscing fringilla, erat risus vehicula risus, sed viverra nisi est non lectus. Nulla dignissim. Suspendisse lectus felis, ornare ac, dignissim quis, sollicitudin consequat, metus. Ut hendrerit erat quis erat. Aliquam erat volutpat. Fusce lectus. Etiam rutrum. In quis sem. Sed ullamcorper consequat diam. Cras feugiat diam aliquam eros. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>

In the css:

.textBox1 {
height: 300px;
padding: 6px;
text-indent: 12px;
text-align: justify;
overflow: scroll;}

Yell back if it works or doesn't.......
Welcome to dgrin.........:wave
Egrinner
Mar-15-2007, 09:10 AM
Thanks Rich for helping me out.

I thought about your solution and it will certainly work. But it's not quite what I want to achive, because I wish for the entire text to be visible on the page and not have another scrollbar in a fixed-size window.

A few more thoughts:

Perhaps there is a way to force the page 'home' (to the top) once the item is clicked?

I think the problem is with the toggleShow code, which forces the page to scroll to the bottom of the text. Perhaps we can pass parameter to toggleShow not to scroll? Who's code is it?

Idially I would place the decription below the photos. Is there a way to accomplish that?

Thanks again for your help!
richW
Mar-15-2007, 11:44 AM
How about this:
<a class="nav" href="javascript:toggleText('uniqueName1');">More Information</a>
<div id="uniqueName1" style="display: none;">

<div class="boxBottom">

<p>Place your text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>
</div>

In the js section:

function toggleText(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

The js was found here: http://www.dustindiaz.com/seven-togglers
Sample here: http://lmsportspix.smugmug.com/gallery/1931916
Egrinner
Mar-15-2007, 12:21 PM
Hello Rich,

Worked like a charm! :ivar Many thanks!!

Two questions:

1. Why the <div class="boxBottom">? It formatted my text a little weird. I removed it and added <html></html> and all is well.

2. I assume there is no way to place the description (or any other text) below the photos. Is this correct?

Thank you once again for helping me out!





How about this:
<a class="nav" href="javascript:toggleText('uniqueName1');">More Information</a>
<div id="uniqueName1" style="display: none;">

<div class="boxBottom">

<p>Place your text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>
</div>

In the js section:

function toggleText(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

The js was found here: http://www.dustindiaz.com/seven-togglers
Sample here: http://lmsportspix.smugmug.com/gallery/1931916
richW
Mar-15-2007, 12:51 PM
I used the boxBottom just to pick up my site styling, no other reason. As far as placing the text at the bottom of the gallery, I don't think there is a way on each gallery page to do that. You could place the text the footer of your site and control were it is visible. If you look at my map page (http://lmsportspix.smugmug.com/map/), the box below the map is in the footer. I have it set to display: none and for that page to display: block. Something like this:

In the footer:

<div class="boxBottom" id="testBox">
<p>This is a test</p>
</div>

In the css section:

#testBox {display: none;}

.gallery_xxxxxxx #testBox {
display: block;
height: 180px;
margin-top: 0px;
margin-bottom: 0px;
text-align: justify;}

Adjust as needed. Add borders, background color, etc...

If you have several text boxes you want to use on your site, use unique id's for each...
Egrinner
Mar-15-2007, 01:40 PM
Thanks Rich.

Since there's a lot of text I would prefer to keep it with the gallery pages. Too much text for many galleries, all in the footer, can get messy. O well. Having it on top is not so bad.

Dev should think about allowing the Description either above or below the photos.

Took a look at your site. Very nice. The 'updated' date in your footer, do you type it in manually or is there a way to display the date of the last uploaded photo?