The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Anchor Problem, on thumbnails linking to div
Teleportable
post Dec 7 2012, 03:05 AM
Post #1


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



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:

CODE

<a href="#imagecontainer"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">')"></a>

<a id="imagecontainer"></a>
The anchor seems to work when I remove the "Set text of container behavior", but unfortunately, I don't know any other way to load the full size image in the div.


any ideas on how I might be able to fix this? Thanks in advance!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2012, 08:53 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



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? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 7 2012, 10:56 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2012, 12:31 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



It's the DW function that loads the big image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 7 2012, 01:34 PM
Post #5


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(pandy @ Dec 7 2012, 06:53 AM) *

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? unsure.gif

oh no lol blush.gif 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.

QUOTE(Frederiek @ Dec 7 2012, 08:56 AM) *

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?


The scrolling down part is the problem sad.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2012, 02:15 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



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. wink.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 8 2012, 12:33 AM
Post #7


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(pandy @ Dec 7 2012, 12:15 PM) *

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. wink.gif


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2012, 04:58 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



Gosh, I didn't realize those were links. blush.gif

I'm still befuddled. An anchor won't help you to position the large image at the bottom.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 8 2012, 05:13 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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

No, it's not. This is what I see:
CODE
<div id="LayoutDiv2">
    <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">
</div>

And I'm not familiar with DW behaviours or SpryAccordion.js.
I wonder if that's the right approach for your goal.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2012, 06:51 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



IF the image was at the bottom and IF the anchor worked the browser would scroll down. Is that really what you want?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 10 2012, 06:55 PM
Post #11


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(pandy @ Dec 8 2012, 02:58 AM) *

Gosh, I didn't realize those were links. blush.gif

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


I was worried about them not looking like links blush.gif

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. blush.gif

QUOTE(Frederiek @ Dec 8 2012, 03:13 AM) *

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

No, it's not. This is what I see:
CODE
<div id="LayoutDiv2">
    <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">
</div>

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


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.


QUOTE(pandy @ Dec 8 2012, 04:51 AM) *

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


LOL yes. blush.gif wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 11 2012, 02:44 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 11 2012, 06:48 PM
Post #13


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(Frederiek @ Dec 11 2012, 12:44 AM) *

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!!!!! excl.gif excl.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 12 2012, 02:12 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 12 2012, 12:26 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



Congratulations. Have you updated the site though? Because it looks the same. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 12 2012, 04:48 PM
Post #16


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(pandy @ Dec 12 2012, 10:26 AM) *

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

Yes, it looks the same, but now, thanks to Frederiek, the thumbnails scroll the page in the mobile and tablet views....its like magic wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 12 2012, 05:30 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Teleportable
post Dec 12 2012, 05:45 PM
Post #18


Newbie
*

Group: Members
Posts: 10
Joined: 31-October 12
Member No.: 18,035



QUOTE(pandy @ Dec 12 2012, 03:30 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 12 2012, 05:48 PM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,940
Joined: 9-August 06
Member No.: 6



That's how I understood it. But if it doesn't work on Android that's why it doesn't work for me. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st July 2018 - 04:02 PM