Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Swap or show/hide layers 1

Status
Not open for further replies.
dmacster

dmacster

Technical User
Jan 28, 2005
670
0
0
US
My client would like to rearrange the following page ( so that under Media Center (on the left), there would be a link for Staff Photos and one for Community Photos. Staff Photos will be the default, but if Community Photos is clicked it will be replaced with that feed. The links will be side by side like
Staff Photos | Community Photos.

The feeds for each that are currently there are javascript provided by myCapture.

Ideas on how to go about that? Another hidden layer that replaces the current when clicked? Other suggestions?


Thanks for all advice.

Donna
 
Sort by date Sort by votes
Check this out
Code: 
[URL unfurl="true"]http://www.barelyfitz.com/projects/slideshow/[/URL]

good luck!
 
Upvote 0 Downvote
Thanks, southbeach.

The client is keeping mycapture - I just want to be able to swap the layers in place. But the slideshow should be good for some upcoming projects.

Donna
 
Upvote 0 Downvote
Two containers, each with their own set of photos, and some javascript to hide/show the two containers is the easiest option. You might want to add ajax load the content on swap only if there is too much content and loading invisible elements is slowing down your page load.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks, Vragabond. I think I'll end up putting a container layer nested in the black area for the photo feeds and then try to find a swap in place script somewhere. I don't know anything about ajax.

Donna
 
Upvote 0 Downvote
Not a big deal to do

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Swap Layer Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hidden {
  display: none;
 }
</style>

<script type="text/javascript">
function SwapLayer(it) {
    var layerID='holdit'+it;
    swapTo=document.getElementById(layerID).innerHTML;
    document.getElementById('showHere').innerHTML=swapTo;
    if (it == 1) document.getElementById('swapBTN').innerHTML='<input name="swapthem" type="button" onclick="SwapLayer(2);" value="Show Photos 2" />';
    if (it == 2) document.getElementById('swapBTN').innerHTML='<input name="swapthem" type="button" onclick="SwapLayer(1);" value="Show Photos 1" />';
 }
</script>

</head>

<body>
<div id="showHere">default photos</div>

<div id="holdit1" class="hidden">photo set 1</div>
<div id="holdit2" class="hidden">photo set 2</div>


<span id="swapBTN"><input name="swapthem" type="button" onclick="SwapLayer(2);" value="Show Photos 2" /></span>

</body>
</html>

I think you will find all that you will need here. Of course, it is a matter of putting the code in the right place but I trust you already know that.

 
Upvote 0 Downvote
Thanks for putting up with me. That's just what I need.

Donna
 
Upvote 0 Downvote
Putting up? Are you kidding? I have two teenagers ... I come in here to unwind and relax myself. [smile]

Thanks for the star!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
Ahh, the joys. I just have a whiny dog. Try typing with a 30 pound Sheltie on your lap.[bigsmile]

I always give my thanks - manners are important.

Thanks again,
Donna
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
44
tyutghf
tyutghf
c0deM0nK424
  • Locked
  • Question
Using 'novalidate' to turn off browser built in form validation - good thing or bad ? 2
Replies
2
Views
50
1DMF
1DMF
tyutghf
  • Locked
  • Question
css show several items on hover
Replies
4
Views
54
vacunita
vacunita
pendle666
  • Locked
  • Question
link or button for going back to previous page - but to the link originally clicked
Replies
5
Views
118
audiopro
audiopro
peterpann
  • Locked
  • Question
hide some links from search engines
Replies
3
Views
52
peterpann
peterpann

Part and Inventory Search

Sponsor

Back
Top