Creating a profile for each person

[barnettgs]

I'm trying to find a way to create a name list, each linked to their profile. What I wanted is that when you click one of the names on left side, a profile will comes up on right side. I know it will work in frameset but I don't want to use frame. How can I do it on other way? Hope you understand what I am talking about.

Something like that below:

http://www.stjohn-dfc.com/html/teams/teams.htm

but they are using frames which I don't want to use.

Thanks

[scriptkeeper]

You could just use a div tag and javascript! But that would be alot of work! I pretty sure the best way to go about that would be to use a server side scripting language such as PHP or ASP!

[cssangel]

I know you siad no frames, but have you considered an iframe?

not quite the left/right effect you're after but it could be adapted.. see the photo slidehow (http://www.aboriginalartshop.com/aboriginal-artists-photo-gallery.html)

all done using an iframe, divs and id's

[barnettgs]

Originally posted by cssangel
I know you siad no frames, but have you considered an iframe?

not quite the left/right effect you're after but it could be adapted.. see the photo slidehow (http://www.aboriginalartshop.com/aboriginal-artists-photo-gallery.html)

all done using an iframe, divs and id's

I have considered that but I wasn't sure how to work this out as it seemed to be linked to one page only? :confused: because i notice it has <A HERF... in code view which I know it can't be changed by clicking on few links outside iframe? I'm bit clueless!

[ronaldb66]

As said, you can use iframe or divs:

with the iframe approach, your main page contains a list of names and an iframe. The profiles are stored in separate documents, one for each profile. When clicking a name, the appropriate profile document is loaded in the iframe.
when using divs, the main page contains the names list and all the profiles, each one in a separate div which on load have visibility: none. Clicking a name toggles the visibility of the div containing the approriate profile to visible while clearing possible visibility on every other div.

Mind you, the second solution is only feasable for a limited number of names and profiles and takes a bit of nifty scripting; the first solution can take a lot more and is technically easier, but the number of names still has a practical limit and both solutions are also rather rigid.
For a flexible solution and a large number of names you just can't do without server-side scripting.

[cssangel]

As said, you can use iframe or divs:

1. with the iframe approach, your main page contains a list of names and an iframe. The profiles are stored in separate documents, one for each profile. When clicking a name, the appropriate profile document is loaded in the iframe.
2. when using divs, the main page contains the names list and all the profiles, each one in a separate div which on load have visibility: none. Clicking a name toggles the visibility of the div containing the approriate profile to visible while clearing possible visibility on every other div.

and you can use both an iframe and divs together - (no need for seperate documents for the profiles)

in the link I provided the photos are all on one page and the links target div id's so it's more a mixture of the two methods..

just make sure each div is the same height as your iframe...

then you target one link and just change the div id that is displayed within the iframe

<added :- clarified that you needn't have seperate documents>

[barnettgs]

Originally posted by ronaldb66
As said, you can use iframe or divs:

with the iframe approach, your main page contains a list of names and an iframe. The profiles are stored in separate documents, one for each profile. When clicking a name, the appropriate profile document is loaded in the iframe.
when using divs, the main page contains the names list and all the profiles, each one in a separate div which on load have visibility: none. Clicking a name toggles the visibility of the div containing the approriate profile to visible while clearing possible visibility on every other div.

Mind you, the second solution is only feasable for a limited number of names and profiles and takes a bit of nifty scripting; the first solution can take a lot more and is technically easier, but the number of names still has a practical limit and both solutions are also rather rigid.
For a flexible solution and a large number of names you just can't do without server-side scripting.

Right, I think I would like to go for first solution as it is only abt 15 names to make and is easier option for me. Is there any chance of seeing the code for it? Thanks

[ronaldb66]

the photos are all on one page
Yeah, I noticed that too after visiting that page. Nice solution, works very well! I just opted for separate documents for ease of maintenance and to keep page sizes down a little; I have no idea what size his profiles are, however, so your approach may very well be a better one.

[barnettgs]

Originally posted by ronaldb66
As said, you can use iframe or divs:

with the iframe approach, your main page contains a list of names and an iframe. The profiles are stored in separate documents, one for each profile. When clicking a name, the appropriate profile document is loaded in the iframe.


Could you show me the codes for it? Thanks

[cssangel]

This is an example only...

<div id="nameslist">
<a href="profile1.htm" target="profileframe">Person One</a>
<a href="profile2.htm" target="profileframe">Person Two</a>
<a href="profile3.htm" target="profileframe">Person Three</a>
<a href="profile4.htm" target="profileframe">Person Four</a>
</div>

<div id="positiontheframe">
<iframe name="profilename" src="profile1.htm" width="300" height="300" frameborder="0" />
</div>

1. the divs housing the two areas should be positioned as you require.
2. the height and width of the iframe should be adjusted to suit
3. the initial source document of the iframe needn't be profile1.htm, you could make up another page say profileintro.htm and have it as an explanation page until one of the profiles are picked.
4. Make up a seperate page for each profile. They wouldn't require any special decoration (menus positioning etc..) maybe just background and font color to match your main page so the fit "seamlessly" into the page (frameborder="0" is a good way to hide that they're in a frame)

[barnettgs]

Thanks! :D

These code are what I was looking for.

Cheers