Linking to a portion of a page

[sulman2000]

Is it possible to link to a certain portion of a page?? In other words, if a customer is on page 2 and I have text that says:"click here to review blah blah blah". Can the "click" bring the customer to the exact location of the small slideshow I have on the bottom of a different page and not just bring the customer to the top of the page where they would have to scroll down to see the slide show they're looking for? I would think it could be done by identifying the slideshow somehow and referencing on the click or something to that effect but I have no idea on how or if it can be done.
Thanks ---Larry

[jfriend]

Read about the "name" attribute for the <a> tag here (http://www.w3schools.com/HTML/html_links.asp).

The basic idea is that you insert <a name="mySlideshowPosition">Your slideshow here</a> into your page as a link target.

You then insert a link somewhere that looks like this:

<a href="http://yoursite.smugmug.com/gallery/xxxx_yyyy#mySlideshowPosition">Click here to go to the slideshow</a>

I can't promise that this would work with all of Smugmug's Ajax generated pages, but this is how you do the kind of thing you are asking about in HTML.

[sulman2000]

Thanks John but it didn't seem to work. The link kept going back to the top of the page . . which according to the link you sent to me indicates that the browser is not recognizing or finding the "name". I tried putting the code ahead of the slide show, after the slide show, and even in the middle of the page. The link always returned to the top of the page. Any other ideas out there that mght be of assistance. Thanks

[jfriend]

Thanks John but it didn't seem to work. The link kept going back to the top of the page . . which according to the link you sent to me indicates that the browser is not recognizing or finding the "name". I tried putting the code ahead of the slide show, after the slide show, and even in the middle of the page. The link always returned to the top of the page. Any other ideas out there that mght be of assistance. Thanks

You'll have to post a link to where you are trying it before I can comment further.

[sulman2000]

John,
The first link is where I want to put my "click" button -- in step #2.

The second link is where I want the link to go to --the SS at the bottom. Thanks ----Larry


http://sulmanphoto.smugmug.com/gallery/6473653_XuQHz



http://sulmanphoto.smugmug.com/gallery/6554377_KdUP5

[jfriend]

John,
The first link is where I want to put my "click" button -- in step #2.

The second link is where I want the link to go to --the SS at the bottom. Thanks ----Larry


http://sulmanphoto.smugmug.com/gallery/6473653_XuQHz



http://sulmanphoto.smugmug.com/gallery/6554377_KdUP5

I need to see these pages with your try at making it work. I don't see any <a name="xxxx"> link in the destination page and I don't see the button to go there in the first page. This is as much about debugging what code you actually put into the pages as anything else so I need to see what you tried that didn't work.

FYI, you should look at your second page in Firefox. The slideshow is overlaying your text, not where you want it to be.

You can start by fixing the close table tag after the slideshow.

You have </table

It should be </table>

[sulman2000]

Thanks John,

I've put in the code as I had before. The wording in step #2 is not right but I'll correct that after I get this working.---Larry

[jfriend]

Thanks John,

I've put in the code as I had before. The wording in step #2 is not right but I'll correct that after I get this working.---Larry

As I suspected might be the case, Smugmug's gallery URL parsing is messing it up and it looks like it won't work to a gallery page. Smugmug is interpreting the #styleSS as an imageID that you want to show and is stealing it before the browser can do it's normally processing. I'd suggest making another page that you can link to that has the slideshow running near the top of the screen (with the other content laid out below it) so it is immediately visible when a user jumps to it.

[sulman2000]

John,

I downloaded Firefox and saw the issue that you mentioned with my SS.

How do I begin to deal with this?? If I change my settings I will correct Firefox but mess up my IE. Is there a solution??

Thanks --- Larry

[jfriend]

John,

I downloaded Firefox and saw the issue that you mentioned with my SS.

How do I begin to deal with this?? If I change my settings I will correct Firefox but mess up my IE. Is there a solution??

Thanks --- Larry
The usual answer to browser compatiblity issues with the slideshow position is to make use of the actual box layout model in CSS to position it where you want it with regular CSS layout rather than using positioning commands or negative margins.

What I would suggest is that you put it inline in one of the image captions and then just use CSS to control how the text flows around it. This is pretty much guaranteed to work in all browsers.

Here's one (http://jfriend.smugmug.com/gallery/6789272_fKy8X) I just rigged up as a test. You should be able to see that I used no positioning statements, used nothing but normal CSS box layout and it looks identical in both Firefox and IE7.

The HTML in one image caption is this:
<html>Why pay $4.95 or more for a generic drugstore greeting card when you can have a beautiful Keepsake Greeting Card? <br><br>
Our cards measure 5 inches X 7 inches which allows the card to be inserted into a standard 5 X 7 photo frame. <u>There is no need for matting</u> - the card becomes the mat and allows the photo to be beautifully displayed by your loved ones for years to come.
<br>
<br>All cards are quality heavy duty natural and white card stock and come with their own matching envelopes. Mailing is a cinch as the card and envelope meet standard first class postage regulations. One stamp is all you need.<br><br>

The inside of the cards are blank allowing you to write that important note or message in your own personal handwriting . . . no drugstore generic verses. Your friends and loved ones will know the sentiments you express came from your heart.<br><br>

<div id="greetingSSContainer" style="height:470px;">

<div id="greetingSS" style="height:450px;">
<script>
var ssConfig = {
AlbumID: '6627528',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
clickUrl: '/ /photos/add.mg?AlbumID=6627528&AlbumKey=pLesH',
showThumbs: 'false',
showButtons: 'false',
borderColor: 'AC7F24',
borderThickness: '4',
crossFadeSpeed: '350'
};
SM.flash.insertSlideshow(450, 450, ssConfig, 'transparent');
</script>
</div>

<div id="greetingSSText">
<br>
<br>
<br>
Photos show the 10 different styles currently of available cards. <u>Remember</u> - The photos that you see here are just examples. Your cards will be assembled with photos from the gallery group(s) that are chosen by you.
</div>
</div>

Keepsake Custom Photo Greeting Cards

</html>

And, the only CSS I used for it is this:
#greetingSS {float:left; margin-right:15px;}
#greetingSSContainer {margin-top:10px;}

[sulman2000]

John,

Thanks for the input. I really appreciate it. Larry