Hey guys-

This is my first website ever, so go easy on me... I'm having trouble with an anchor linked to a div within the same page of a fluid design.

Here's a link to the site:
http://www.solaimanfazel.com/linked

In the first content panel (Campaign), the first image (model with the white rimmed sunglasses) is linked to the div where the image is displayed in full size. I've used the "Set text of Container" tag behavior to load the image in the div. The anchor isn't important in the full sized display, but when you resize the window to tablet or mobile sizes, the full sized imagecontainer drops to the bottom of the accordion, and I'd like a click on the thumbnail to take the viewer to the full sized image below, but my anchor doesn't seem to work.

This is the code I'm using:



any ideas on how I might be able to fix this? Thanks in advance!!

I don't understand. The images load at the top of the page, no matter what size browser window I use. Obviously I miss something. What?

For me, they do load at the bottom on smaller window sizes of my desktop browser (Safari/Mac). But the link doesn't go there for me to see the image. I have to scroll down.

But there doesn't seem to be a <a id="imagecontainer"></a> anywhere in the page.

And what's this "behavior" you're talking about?

It's the DW function that loads the big image.

oh no lol The thumbnails should load at the top, but the larger linked image should load at the bottom of the accordion when the size of the browser shrinks to tablet & mobile sizes.



The scrolling down part is the problem

The <a id="imagecontainer"></a> is in the <div id="LayoutDiv2"> div.

As far as the behavior, DreamWeaver has a function where you can "Set text of Container". Its a behavior i learned about by through endless research on the web, but looks like it isn't going to be ideal for me. Basically it sets a "on-click" behavior where the thumbnail will load the larger image in a separate container/div.

Yeah, I meant the large images. You want them at the bottom? What accordion?


As for the onclick event, that part seems to work, doesn't it? The right image is loaded. So that bit isn't the problem, no matter how much I'd like to bash DWs canned JavaScript.

The accordion with the tabs named "Campaign" "Digital" and "Editorial"

LOL Yes, the onlick event works, but it's keeping me from applying an anchor, so a little bashing isn't unwarranted.

Gosh, I didn't realize those were links.

I'm still befuddled. An anchor won't help you to position the large image at the bottom.

No, it's not. This is what I see:

And I'm not familiar with DW behaviours or SpryAccordion.js.
I wonder if that's the right approach for your goal.

IF the image was at the bottom and IF the anchor worked the browser would scroll down. Is that really what you want?

I was worried about them not looking like links

As of right now, if you click on a thumbnail image, the larger image opens in LayoutDiv2. When you re-size the browser window to tablet or mobile sizes, LayoutDiv2 drops below the accordion (which i want), but I would like a click on the thumbnails to scroll the page down so you see the fullsized picture. I'd like to use anchors to achieve the scroll.



So strange about the <a id="imagecontainer"></a> not showing up. I checked, and double-checked, its visible for me?

I'm beginning to think this approach isn't right for me either. I'm looking into jquery (a bit overwhelming), to see if I can achieve it that way.




LOL yes.

Ah, now I understand. The <a id="imagecontainer"></a> is there when no image has been clicked yet. But it disappears as soon as you do click an image (e.g. the first image). Apparently, the js replaces the contents of that DIV.

OMG, you're a genius!!! THAT WAS THE PROBLEM!!! I placed the <a id="imagecontainer"></a> into the DW function and it works now! YAYYYYYYYYY!! THANK YOU! THANK YOU!!!!!

You're welcome.

Congratulations. Have you updated the site though? Because it looks the same.

Yes, it looks the same, but now, thanks to Frederiek, the thumbnails scroll the page in the mobile and tablet views....its like magic

I think I misunderstood the whole thing. When you said you wanted the big image at the bottom I thought you referred to the bottom of the "right column", as viewed on a large screen.

That said, on my Android phone the big image is indeed below the thumbs, but I don't see any scrolling. I have to handle that myself. The site is painfully slow now, but I've tried several times.

Ah! sorry for the confusion.

There isn't a scroll bar, but when you click on a thumbnail, the page jumps to the larger image below the thumbs. I've tried it on several devices and it seems to work, but not an Android.

And yes, its super slow, but not sure there's much I can do about that if I want to keep the design.

As of now, I'm calling it a work in progress hahaha

That's how I understood it. But if it doesn't work on Android that's why it doesn't work for me.