JavaScript - Searching For Javascript - Cookie Show/hide Layers

Hello everyone.

I am building a subscription directory website and I need help developing a code that will perform this function:

I want to be able to hide certain spans when another span appears on the page.

In other words, the page will normally display <span id="spanA"> and <span id="spanB">.

However, when <span id="spanC"> appears on a page, I want to set display:none for spanA and spanB.

I know how to toggle between display:none and display:block using a call to a javascript function like a link with an "onClick"

Perhaps there a way I could code a span in CSS to toggle this javascript function when it appears on the page?

Thank you for any help!

Hi,

I have been developing a show/hide feature on my companies web site for some time. I have so much code as to where I am confused when I need to add another slide function.

I have provided the URL below to the page where the code exists.

http://www.pjm.com/markets-and-opera...assistant.aspx

This is where I get lost with the huge amount of code that I have.

If you take a look under the second slider named "Electricity Markets" there is another slider underneath named "Energy Market". I need to add three more sliders right underneath in the same format under "Energy Market"

If anyone can assists with this that would be great. I should have organized the code a lot better, so now I get lost within the code now.

BTW, the show/hide feature really does not display well in Firefox, please try in IE.

Thanks!

Hello,
I am pretty unfamiliar with javascript and jquery but have thus far been able to scrape by. I am currently trying to set up an image toggle using show/hide inside of an overlay window that pops up when a button inside the site is clicked.
The trouble I am having is that when the overly initially opens up, neither image that I am trying to toggle will show up, but once the thumbnails that I am using to control them are clicked, the image toggle works perfectly.
I am using the #rImg1 and #lImg1 id's as the toggle buttons between showing the #rightFacingImg1 and the #leftFacingImg1 id's. My goal is to pull up the overlay window with the #rightFacingImg1 as the default image, so that the main image area is never left blank.
Here is the code that I am using:
Java for overlay:
Code:

$(document).ready(function() {
			$("img[rel]").overlay();		
		});

Java for show/hide:
Code:

$(document).ready(function() {
			$.fx.off = !$.fx.off;

			
			$('#rightFacingImg1').click(function() {
				$('.hideme').css({'display':'none'});
				$('#rImg1').show('slow');	
			});
			$('#leftFacingImg1').click(function() {
				$('.hideme').css({'display': 'none'});
				$('#lImg1').toggle('slow');	
			});
});

html that calls the overlay box:
Code:

 <div class="img">
                <img src="images/Rifles/browningm53r.jpg" alt="" width= "225"  rel="#lightboxrifle1"/>
                <div class="desc"><p><b>Browning M53</b> <br/>Price: $600.00</p></div>
            </div>

html inside overlay:
Code:

<div class="lightboxriflegen" id="lightboxrifle1">
        	<img src="images/x.jpg" alt="" id="rifleclose" class="close"/>
        	<div class="bigpic">
        		<img id="rImg1" class="hideme" src="images/Rifles/browningm53r.jpg"alt="" width="720px" />
                <img id="lImg1" class="hideme" src="images/Rifles/browningm53l.jpg"alt="" width="720px" />
        	</div>
            <div class="geninfo">
            	<b>Browning M53</b><br/>
            	32-20 Calibur<br/>
                Lever Action.<br/>
                Condition: New
            </div>
            <div class="genprice">
            	<b>Price: $600.00</b>
            </div>
            <div class="littler">
            	<img id="rightFacingImg1"  src="images/Rifles/browningm53r.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
				onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
            </div>
            <div class="littlel">
            	<img id="leftFacingImg1" src="images/Rifles/browningm53l.jpg" alt="" width="150px" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
				onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
            </div>
            <div class="addtocart">
            	Add to cart.
            </div>
        </div>

Any help would be greatly appreciated.
Nicole

http://www.suttonsilver.co.uk/client...on-calculator/

Please visit the above website,

Click on a Injury Type (try Minor Head Injury) on the right hand side (the human figure)

Then click on the Calculate button and you will see a "calculated" figure appear, if you then click on another injury type then calculate it again, another Div will show.

If two "You could be entitled up..." DIVs pop up, the previous, initially calculated 'result' should be removed and replaced by the new 'result'.

Can anyone help me do this? Also.. as a side note, does anyone have a solution for when clicking calculate, two divs show up... (i.e. a 'result' and a 'contact us form').

Cheers

Chris SS

Hi,
I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me.
Thank You.

Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code:

Code:

            
HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

Any ideas, as to why it's not working?

Hi everyone,

I'm new here, I actually found this site by searching for the code I have a question for.

I'm trying to show/hide different drop down selectors, depending on what is chosen in another drop down selector. I modified a script (I found he http://www.codingforums.com/showthread.php?t=98406) in a way that I thought would work, but its not. Can anyone help me with what I'm doing wrong?

Here is my page: http://www.leatherexpressonline.com/...er/testing.php

Here is my javascript: http://pastie.org/3344253

And my drop downs: http://pastie.org/3344258

Also, I don't want the drop downs (ids: grade1000color, grade1500color, grade2000color, grade2500color, grade3000color, grade5000color) to be shown when the page is first loaded. Only when the correct option is chosen on the drop down. So I'm guessing I should add a display:none style to those drop downs, then have them shown on the javascript?

Thanks so much for the help

Is there any way to make a link show if javascript is being used to hide it?

This is the javascript code that is hiding the link:

Code:

<a href="javascript:void(0)" class="show-hide-link action-link">

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Hi Guys,

I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects.
I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked.
Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects?
Code:

function toggle2(id, link) {
  var e = document.getElementById(id);
 
  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = '<img src="../Images/plus.gif" border="0" >';
  } else {
    e.style.display = '';
    link.innerHTML = '<img src="../Images/minus.gif" border="0" >';
  }
}

PHP Code:
<table>
<tr>
<th>Project / Job</th>
<th>Language</th>
<th>Words (Net)</th>
<th>Shipped</th>
</tr>

<?php
$previousProject = '';
if ($totalRows_rsComplete_Cust > 0) {
// Show if recordset not empty
while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) {
if ($previousProject != $row_rsComplete_Cust['projid']) {
// for every user, show the user name
?>

<tr>
<td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td>
</tr>

<?php $previousProject = $row_rsComplete_Cust['projid']; } ?>

<tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none">
<td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&amp;proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td>
<td>LANGUAGE</td>
<td>WORD NET</td>
<td>YES / NO</td>
</tr>  

<?php }} // Show if recordset not empty ?>

</table>

As you can see the above warning will be only shown when there is an error while inserting the data into the login form.
Now I have tried to achieve it by:

Hiding the div say "warning". Use a javascript while submitting the form to check for input validation. If found any error, the hidden div "warning" will show above the form as shown as in the image.


I have tried it in Edit fiddle - JSFiddle

Ples help

Code:

<html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>

<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('div.twotwo').hide();
$('div.threethree').hide(); 
$('div.one').toggle(function() 
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.two').toggle(function() 
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.three').toggle(function() 
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 
});
</script>
</body>
</html>

The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!!

Hello everyone,

I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links.

This is the JavaScript I need to change somehow:

Code:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.pMenu2').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>

Now this is the CSS style sheet:

Code:

/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
}

.pMenu {
    margin:0;
    padding:0;
    list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul ul li{
    width:100%;
    display:inline-block;
}

/*begin main list attributes*/
ul.pMenu > li:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

ul.pMenu > li{
    float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain{
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
}

/*first sub-list*/
ul.pMenu li li{
	margin-right:0;
}

ul.pMenu ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
ul.pMenu ul ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    display:none;
}

.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
ul.pMenu ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
ul.pMenu ul ul ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

ul.pMenu ul ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:1% outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul li a:hover {
    background:#999;
    border:1% inset #666;
    text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/

This is how it's set up in HTML:

Code:

<!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul class="pMenu">
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><div class="pMenu2"><a href="#">under construction</a></div></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->

I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality.

Hello
I am new at Javascript.
Please help me this:
I have a form and a checkbox:

Code:

<input  name="pass" type="password" class="textfield" />
<input  type="checkbox" class="check"> Click here to show/hide password

If I the checkbox is checked, it will show the password in the form, it means
Code:

<input  name="pass" class="textfield" />

if not, the input form is:
Code:

<input  name="pass" type="password" class="textfield" />

Hi,

I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style.

It works great in most browsers, except Internet Explorer . For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine).

I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them.

The page can be viewed he www.raynemakerimages.com/galleries.html
Firefox shows how it should display....

Anyway, I'm looking for a relatively easy fix for this....help is appreciated.

Thanks.

Coding:

Code:

<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

The hide/show links:
Code:

<div align="center" class="class1">

<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
      <span class="class1">Family      </span></a> 

| 

<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Artistic       </a> 
| 

<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Intimate       </a> 

| 

<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Maternity      </a> 
| 

<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns      </a> 
| 

<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
        Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>       

</div>

The slideshows:

Quote:
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)">
<tr>
<td>
<div id="family">
<p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td >
<div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
</table>