Link to home
Start Free TrialLog in
Avatar of GAGriff
GAGriffFlag for United States of America

asked on

Need some jQuery help

Pretty much a newbie in JavaScript syntax. Need to add a play/pause  buttons to the below jQuery code. My question is can I add the buttons using the parameter set up in the init function called pauseNavigation or will I need to come up with new functions for this.

Thanks for any help.

--Griff

Example at : http://dev.griffiti.com/inheritage/index.html

script and CSS code below.
HTML and Script

	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 1000, pauseNavigation: false});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { 
					page.tr.showItem(idx); return false });
            });
          });
		
			function start() {
				page.tr.showItem(idx);
			}
        },
		
        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        }
	
      };
		
      $(document).ready(page.init);  	 
   
    </script>

	
</head>

<body>
	<div id="outer_container">
		<div id="inner_container">
			<div id="slides_bg">
				<div id="homeLink">
					<a href="index.html">&nbsp;</a>
				</div>
				<div class="slideShow">
			      <div class="rotator r1">
			        <div class="navigation">
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			         <img src="images/slide01.jpg" alt="Your Description" />
					<p><em>Along the Blueridge Parkway</em><br />
						Western North Carolina<br />
						June 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			         <img src="images/slide02.jpg" alt="Your Description" />
					<p><em>My Picture Number Two</em><br />
							Somewhere on the East Coast<br />
							January 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			      <img src="images/slide03.jpg" alt="Your Description" />
				<p><em>My Picture Number Three</em><br />
						Western North Carolina<br />
						April 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			        <img src="images/slide04.jpg" alt="Your Description" />
						<p><em>My Picture Nimber 4</em><br />
							Western North Carolina<br />
							March 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
					<div class="rotator r1">
				       <div class="navigation">
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
						 <a href="#">&nbsp;</a>
				         <div class="current"></div>
				       </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
				        <img src="images/slide05.jpg" alt="Your Description" />
						<p><em>My Picture Number 5</em><br />
								Washington DC<br />
								April 2008<br />
								<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
				      </div>
			    </div>


CSS

.slideShow {
	z-index: 10;
}

div.rotator { 
	position: relative; 
	height: 375px; width: 757px; 
	margin-top: 100px; 
	margin-left: 190px; 
}

div.r1 { 

}

div.r1 p { 
	margin-top: 138px;
	text-align: left; 
	font-size: 11px;
	line-height: 30px;
	color: #ffffff;
	float: right;
	width: 167px;
	height: 196px;
	background-image: url('images/textbg.gif');
	background-repeat: no-repeat;

}


div.navigation { 
	position: absolute;
	top: 140px;
	left: -87px;
}

div.navigation div.current, div.navigation a { 
	width: 12px;
	height: 20px; 
	margin: 0 0px 0 0; 
	overflow: hidden; 
	background-image: url('images/slide_position.png'); 
	background-repeat: no-repeat;
	text-decoration: none;
	
}

div.navigation a:hover { 
	text-decoration: none;
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat;
}

div.navigation div.current { 
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat; 
}

div.navigation a { 
	display: block; 
	background-image: url('images/slide_position.png'); 
}

#introslide { 
	background: transparent; 
}

div.PausePlay {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 250px;
	left: -89px;
	display: block;
	overflow: hidden;
}

.pauseButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/pause.png');
	background-repeat: no-repeat;
}

.pauseButton:hover {
	background: url('images/pauseHL.png');
	background-repeat: no-repeat;
}

.playButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/play.png');
	background-repeat: no-repeat;
}

.playButton:hover {
	background: url('images/playHL.png');
	background-repeat: no-repeat;
}

#menuNavigation {
	position: absolute;
	width: 700px;
	height: 20px;
	top: 558px;
	left: 140px;
	z-index: 4;
}

Open in new window

Avatar of kadaba
kadaba
Flag of India image
I just put a few functions and tested works fine... Improvement can be done on the closure aspects of the functions.

Hope this helps.
kadaba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Inheritage Home</title>
	<script type="text/javascript" src="http://www.inheritage.org/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
			this.pauseItem = function(item) {
              if (timer) clearTimeout(timer);
            };
			
			this.resumeItem = function(item) {
              if (timer) clearTimeout(timer);
              cue();
            };
			
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }
		
		this.pauseItem = function(item) {
            transitionObject.pauseItem(item);
		}	

		this.resumeItem = function(item) {
            transitionObject.resumeItem(item);
		}		
			
          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 1000, pauseNavigation: false});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { 
					page.tr.showItem(idx); return false });
            });
          });
		
			function start() {
				page.tr.showItem(idx);
			}
        },
		
        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        },
		
		 pause: function(idx) {
          page.tr.pauseItem(idx);
        },
		 resume: function(idx) {
          page.tr.resumeItem(idx);
        }			
      };
		
      $(document).ready(function(){
		page.init();
		$("#pause").click(function(){
			page.pause();
		});
		$("#resume").click(function(){
			page.resume();
		});
	  });  	 
   
    </script>

	
</head>

<body>
	<input type="button" id="pause" value="Pause"><input type="button" id="resume" value="Resume">
	<br>
	<div class="slideShow">
		<img src="http://www.inheritage.org/images/slide01.jpg" alt="Your Description" />
		<img src="http://www.inheritage.org/images/slide02.jpg" alt="Your Description" />
		<img src="http://www.inheritage.org/images/slide03.jpg" alt="Your Description" />
		<img src="http://www.inheritage.org/images/slide04.jpg" alt="Your Description" />
		<img src="http://www.inheritage.org/images/slide05.jpg" alt="Your Description" />
	</div>
	
</body>
</html>

Open in new window

Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

Very cool. Will check it out.

--Griff
ASKER CERTIFIED SOLUTION
Avatar of bugada
bugada
Flag of Italy image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

kadaba, thanks for the input, but I need to keep the existing functionality the same, and as such need to be able to put the pause/play inside the rotator r1 class. I have looked at endless examples like the code you provided, but alas they won't work in my situation. I put the buttons outside the rotator and is won't pause the slideshow. Can't use this inside cause I can't use an ID more than once on a page. Really need a class solution.

Any suggestions?

--Griff

implemented code
below


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="Put a description of the page here" />
	<meta name="keywords" content="Place keywords here" />
	<meta name="robots" content="index,follow" />

	<title>Inheritage Home</title>
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="inheritage_core.css" type="text/css" charset="utf-8" />
	<!--[if IE ]>
		<link rel="stylesheet" type="text/css"  href="inheritage_IE.css" />
	<![endif]-->

	<!--[if lt IE 8]>
		<link rel="stylesheet" type="text/css" href="inheritage_IE7.css" />
	<![endif]-->
	
	<!--IE6 JS sniffer-->
	<script type="text/javascript">
		var browserSniffer = {isIE6 : false} 
	</script>
	<!--[if IE 6]>
		<script type="text/javascript">
			browserSniffer = {isIE6 : true} 
		</script>
	<![endif]-->

	<script type="text/javascript">
		if (browserSniffer.isIE6 == true) {
			window.document.location = 'http://www.inheritage.org/browser_error.html';
		} 
		else {
		}
	</script>
	
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 1000, pauseNavigation: false});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { 
					page.tr.showItem(idx); return false });
            });
          });
		
			function start() {
				page.tr.showItem(idx);
			}
        },
		
        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        },
		pause: function(idx) {
          page.tr.pauseItem(idx);
        },
		resume: function(idx) {
          page.tr.resumeItem(idx);
        }
	
      };
		
     $(document).ready(function(){
		page.init();
		$("#pause").click(function(){
			page.pause();
		});
		$("#resume").click(function(){
			page.resume();
		});
	  }); 	 
   
    </script>

	
</head>

<body>
	<div id="outer_container">
		<div id="inner_container">
			<div id="slides_bg">
				<div id="homeLink">
					<a href="index.html">&nbsp;</a>
				</div>
				<div class="slideShow">
			      <div class="rotator r1">
			        <div class="navigation">
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
			         <img src="images/slide01.jpg" alt="Your Description" />
						<p><em>Along the Blueridge Parkway</em><br />
						Western North Carolina<br />
						June 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
			         <img src="images/slide02.jpg" alt="Your Description" />
						<p><em>My Picture Number Two</em><br />
							Somewhere on the East Coast<br />
							January 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
			      <img src="images/slide03.jpg" alt="Your Description" />
						<p><em>My Picture Number Three</em><br />
						Western North Carolina<br />
						April 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
					  <a href="#">&nbsp;</a>
			        </div>
			        <img src="images/slide04.jpg" alt="Your Description" />
						<p><em>My Picture Nimber 4</em><br />
							Western North Carolina<br />
							March 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
					<div class="rotator r1">
				       <div class="navigation">
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
						 <a href="#">&nbsp;</a>
				         <div class="current"></div>
				       </div>
				        <img src="images/slide05.jpg" alt="Your Description" />
						<p><em>My Picture Number 5</em><br />
								Washington DC<br />
								April 2008<br />
								<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
				     </div>
			    </div>
				<div class="PausePlay">
					<input type="button" id="pause" class="pauseButton">
					<input type="button" id="resume" class="playButton">
				</div>
				<div id="menuNavigation">
					<div class="navLeft"><p><a href="history.html">HISTORY</a></p></div>
					<div class="navLeft"><p><a href="services.html">SERVICES</a></p></div>
					<div class="navLeft"><p><a href="staff.html">STAFF</a></p></div>
					<div class="navRight"><p><a href="almanack.html">The Almanack <font style="font-size: 10px;"><em>&bull; Journal of History &amp; Travel</em></font></a></p></div>
				</div>
			</div>
			<div id="content">
				<div class="content_block">
					<img src="images/block_pic1.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="content_block_center">
					<img src="images/block_pic2.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="content_block">
					<img src="images/block_pic3.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="clearBoth"></div>
				<div class="DotRule">
					<hr />
				</div>
				<div id="content_main">
					<p>Since 1999, INHERITAGE has served the niche web design &amp; development needs of the historical community and preservation arts. We specialize in all facets of online operations: from info / visual / technical design to digital library database &amp; ecommerce development, SEO and social media strategy to rich-media online documentary production. We are not just designers &amp; developers, we are history-enthusiasts.</p>
				</div>
				<div class="DotRule">
					<hr />
				</div>
				<div id="footer">
					<p>INHERITAGE, Inc.  |  &quot;Preservation &amp; Presentation&quot;  |  Clarkston, GA  /  Washington, DC  |  404.374.9395  |  <script type="text/javascript">
//<![CDATA[

					var contact = "Contact Us"

					var email = "info"

					var emailHost = "inheritage.org"

					document.write("<a href=" + "mail" + "to:" + email + "&#64;" + emailHost+ ">"+ contact + "<\/a>")

					//]]>
					</script></p>
				</div>
			</div>
		</div>
	
	</div>
	<div id="bottom">
	</div>

</body>
</html>


new CSS

/* Main CSS for Inheritage

*/


/* CORE */

/* Zero Out */
body, div, p, ul, ol, dl, dt, dd, li, form {
	margin: 0;
	padding: 0;
}

a:focus {
outline: none;
}

body {
	margin: 0 auto; 
	width: 1024px;
	padding: 0px;
	background-color: #e8ddc6;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#outer_container {
	margin: 0 auto;
	position: relative;
	width: 1024px;
	min-height: 500px;
	background-image: url('images/white_border.png');
	background-repeat: repeat-y;
}

#inner_container {
	margin-left: 30px;
	position: relative;
	width: 960px;
	min-height: 1036px;
	background-image: url('images/inner_bg.png');
	background-repeat: repeat-x;
	background-color: #ffffff;
	z-index: 2;
}

#sub_inner_container {
	margin-left: 30px;
	padding-bottom: 20px;
	position: relative;
	width: 960px;
	background-color: #b4b7c9;
	z-index: 2;
}

#sub_inner_inner_container {
	margin-left: 5px;
	position: relative;
	width: 950px;
	background-color: #e8e4d8;
	z-index: 3;
	padding-bottom: 5px;
}

#subPageHeader {
	position: relative;
	width: 960px;
	height: 366px;
	z-index: 4;
	margin-left: -5px;
}

#almanackPageHeader {
	position: relative;
	width: 960px;
	height: 248px;
	z-index: 4;
	margin-left: -5px;
	background-image: url('images/almanack_header.jpg');
	background-repeat: no-repeat;
}

#slides_bg {
	position: relative;
	width: 960px;
	height: 629px;
	background-image: url('images/slides_bg.png');
	background-repeat: no-repeat;
	z-index: 3;
}

#homeLink {

}

#homeLink a {
	position: absolute;
	width: 298px;
	height: 37px;
	left: 30px;
	top: 20px;
	text-decoration: none;
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	z-index: 4;
	margin-left: 15px;
}

#homeLink a:hover {
	text-decoration: none;
	background: url('images/logo_hover.png');
	background-repeat: no-repeat;
	z-index 5;
}

#sub_homeLink {

}

#sub_homeLink a {
	position: absolute;
	width: 298px;
	height: 37px;
	left: 30px;
	top: 20px;
	text-decoration: none;
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	z-index: 4;
	margin-left: 10px;
}

#sub_homeLink a:hover {
	text-decoration: none;
	background: url('images/logo_hover.png');
	background-repeat: no-repeat;
	z-index 5;
}

.slideShow {
	z-index: 10;
}

div.rotator { 
	position: relative; 
	height: 375px; width: 757px; 
	margin-top: 100px; 
	margin-left: 190px; 
}

div.r1 { 

}

div.r1 p { 
	margin-top: 138px;
	text-align: left; 
	font-size: 11px;
	line-height: 30px;
	color: #ffffff;
	float: right;
	width: 167px;
	height: 196px;
	background-image: url('images/textbg.gif');
	background-repeat: no-repeat;

}


div.navigation { 
	position: absolute;
	top: 140px;
	left: -87px;
}

div.navigation div.current, div.navigation a { 
	width: 12px;
	height: 20px; 
	margin: 0 0px 0 0; 
	overflow: hidden; 
	background-image: url('images/slide_position.png'); 
	background-repeat: no-repeat;
	text-decoration: none;
	
}

div.navigation a:hover { 
	text-decoration: none;
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat;
}

div.navigation div.current { 
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat; 
}

div.navigation a { 
	display: block; 
	background-image: url('images/slide_position.png'); 
}

#introslide { 
	background: transparent; 
}

div.PausePlay {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 340px;
	left: 101px;
	display: block;
	overflow: hidden;
	z-index: 15;
}

.pauseButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/pause.png');
	background-repeat: no-repeat;
}

.pauseButton:hover {
	background: url('images/pauseHL.png');
	background-repeat: no-repeat;
}

.playButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/play.png');
	background-repeat: no-repeat;
}

.playButton:hover {
	background: url('images/playHL.png');
	background-repeat: no-repeat;
}

#menuNavigation {
	position: absolute;
	width: 700px;
	height: 20px;
	top: 558px;
	left: 140px;
	z-index: 4;
}

.navLeft {
	float: left;
	width: 85px;
	height: 20px;
	border-width: 1px;
	border-right-style: solid;
	border-color: #e5d6b8;
}

.navLeft p {
	font-size: 13px;
	line-height: 22px;
	color: #e5d6b8;
	text-align: center;
}

.navLeft p a {
	color: #e5d6b8;
	text-decoration: none;
}

.navLeft p a:hover {
	color: #ffcc00;
}

.navRight {
	float: right;
	width: 277px;
	height: 20px;
	border-width: 1px;
	border-left-style: solid;
	border-color: #e5d6b8;
}

.navRight p {
	font-size: 13px;
	line-height: 22px;
	color: #e5d6b8;
	text-align: center;
	padding-right: 10px;
}

.navRight p a {
	color: #e5d6b8;
	text-decoration: none;
}

.navRight p a:hover {
	color: #ffcc00;
}

#bottom {
	position: relative;
	width: 1024px;
	height: 34px;
	top: 0px;
	background-image: url('images/footer_bg.png');
	background-repeat: no-repeat;
}

#content {
	margin-left: 75px;
	margin-right: 75px;
	margin-top: 29px;
	width: 820px;
	min-height: 240px;
	line-height: 18px;
}

.content_block {
	float: left;
	width: 240px;
	text-align: left;	
	padding-left: 17px;
	padding-right: 14px;
}

.content_block h1 {
	font-size: 14px;
	color: #2a2a2a;
}

.content_block p {
	font-size: 12px;
	color: #2a2a2a;
}

.content_block a {
	color: #000099;
}

.content_block a:hover {
	color: #a90000;
}

.content_block_center {
	float: left;
	width: 240px;
	text-align: left;
	border-width: 2px;
	border-left-style: dotted;
	border-right-style: dotted;
	border-color: #a1a1a1;
	padding-left: 17px;
	padding-right: 12px;
}

.content_block_center h1 {
	font-size: 14px;
	color: #2a2a2a;
}

.content_block_center p {
	font-size: 12px;
	color: #2a2a2a;
}

.content_block_center a {
	color: #000099;
}

.content_block_center a:hover {
	color: #a90000;
}

#sub_content {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 35px;
	min-height: 240px;
}

.sub_content_text {
	padding: 0px 5px 20px 0px;
}

.sub_content_text p {
	margin-bottom: .5em;
	font-size: 12px;
	text-align: left;
	color: #2a2a2a;
	line-height: 18px;	
}

.sub_content_text a {
	color: #000099;
	text-decoration: underline;
}

.sub_content_text a:hover {
	color: #a90000;
	text-decoration: underline;
}

.sub_content_pic {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

.clearBoth {
	clear: both;
}

#almanack_col1 {
	width: 420px;
	float: left;
	padding-right: 10px;
}

#almanack_col1 p {
	font-size: 14px;
	color: #2a2a2a;
	line-height: 20px;
}

#almanack_col1 h1 {
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}

#almanack_col1 h2 {
	font-size: 14px;
	color: #000000;
	font-weight: bold;
}

#almanack_col1 h2 a {
	font-size: 14px;
	color: #000099;
	text-decoration: none;
}

#almanack_col1 h2 a:hover {
	color: #a90000;
	text-decoration: underline;
}

#almanack_col2 {
	width: 420px;
	float: left;
	padding-left: 15px;
}

#almanack_col2 h1 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	padding-left: 40px;
}

#almanack_col2 h2 {
	margin: 0;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	padding-left: 40px;
	line-height: 24px;

}

#almanack_col2 h2 a {
	margin: 0;
	font-size: 14px;
	color: #000099;
	text-decoration: none;

}

#almanack_col2 h2 a:hover {
	margin: 0;
	color: #a90000;
	text-decoration: underline;
}


#almanack_col2 h3 {
	margin: 0;
	font-size: 16px;
	color: #a90000;
	font-weight: bold;
	padding-left: 40px;
}


div.DotRule {
	height: 1px;
	border-top: 2px dotted #a1a1a1;
	margin-top: 30px;
	margin-bottom: 3px;
}

div.DotRule hr {
	display: none;
}

div.SingleRuleBlack {
	height: 1px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #e6dfd1;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 30px;
}

div.SingleRuleBlack hr {
	display: none;
}



.almanack_box_top {
	width: 420px;
	height: 38px;
	background: url('images/a_box_top.png');
	background-repeat: no-repeat;
}

.almanack_box_repeat {
	width: 420px;
	background: url('images/a_box_repeat.png');
	background-repeat: repeat-y;
}

.almanack_box_bottom {
	width: 420px;
	height: 39px;
	background: url('images/a_box_bottom.png');
	background-repeat: no-repeat;
}

#content_main {
	width: 820px;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 5px;
}

#content_main p {
	color: #2a2a2a;
	font-size: 12px;
	line-height: 18px;
}

#sub_inner_bottom {
	margin-left: 30px;
	width: 960px;
	height: 36px;
	background-image: url('images/sub_inner_btm.png');
	background-repeat: no-repeat;
}

#sub_inner_inner_bottom {
	margin-left: 5px;
	width: 950px;
	height: 31px;
	background-image: url('images/inner_inner_btm.png');
	background-repeat: no-repeat;	
}

#inner_footer {
	width: 960px;
	padding-bottom: 10px;
}

#inner_footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}


#inner_footer p a{
	color: #000099;
	text-decoration: none;
}

#inner_footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

#footer {
	width: 820px;
	padding-top: 20px;
	padding-bottom: 10px;
}

#footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}

#footer p a {
	color: #807766;
	text-decoration: none;
}

#footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

#sub_footer {
	margin-left: 35px;
	width: 960px;
	padding-top: 20px;
	padding-bottom: 10px;
}

#sub_footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}

#sub_footer p a {
	color: #807766;
	text-decoration: none;
}

#sub_footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

Open in new window

Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

bugada,

I think your on to the right solution, and I plugged in the script, but not seeing either the pause or the hide and show of the icons.

Anything I'm missing?

Code below (all)


HTML & Script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="Put a description of the page here" />
	<meta name="keywords" content="Place keywords here" />
	<meta name="robots" content="index,follow" />

	<title>Inheritage Home</title>
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="inheritage_core.css" type="text/css" charset="utf-8" />
	<!--[if IE ]>
		<link rel="stylesheet" type="text/css"  href="inheritage_IE.css" />
	<![endif]-->

	<!--[if lt IE 8]>
		<link rel="stylesheet" type="text/css" href="inheritage_IE7.css" />
	<![endif]-->
	
	<!--IE6 JS sniffer-->
	<script type="text/javascript">
		var browserSniffer = {isIE6 : false} 
	</script>
	<!--[if IE 6]>
		<script type="text/javascript">
			browserSniffer = {isIE6 : true} 
		</script>
	<![endif]-->

	<script type="text/javascript">
		if (browserSniffer.isIE6 == true) {
			window.document.location = 'http://www.inheritage.org/browser_error.html';
		} 
		else {
		}
	</script>
	
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
     var page = {
	   idx: null,
	   tr: null,
	   init: function() {
	     page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 1000, pauseNavigation: false});

	     $(".pauseButton").each(function() {
	       $(this).click(function(e) {
	         e.preventDefault();
	         page.tr.pause();
	         $(this).hide();
	         $(".playButton").show();
	      });
	     });

	     $(".playButton").each(function() {
	       $(this).click(function(e) {
	         e.preventDefault();
	         page.tr.resume();
	         $(this).hide();
	         $(".pauseButton").show();
	      });
	     });


	     $("div.navigation").each(function() {
	       $(this).children().each( function(idx) {
	         if ($(this).is("a"))
	           $(this).click(function() { 
					         page.tr.showItem(idx); 
	              return false 
	           });
	       });
	     });

	   }

	 };

	 $(document).ready(page.init);
   
    </script>

	
</head>

<body>
	<div id="outer_container">
		<div id="inner_container">
			<div id="slides_bg">
				<div id="homeLink">
					<a href="index.html">&nbsp;</a>
				</div>
				<div class="slideShow">
			      <div class="rotator r1">
			        <div class="navigation">
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			         <img src="images/slide01.jpg" alt="Your Description" />
						<p><em>Along the Blueridge Parkway</em><br />
						Western North Carolina<br />
						June 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			         <img src="images/slide02.jpg" alt="Your Description" />
						<p><em>My Picture Number Two</em><br />
							Somewhere on the East Coast<br />
							January 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			      <img src="images/slide03.jpg" alt="Your Description" />
						<p><em>My Picture Number Three</em><br />
						Western North Carolina<br />
						April 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			        <img src="images/slide04.jpg" alt="Your Description" />
						<p><em>My Picture Nimber 4</em><br />
							Western North Carolina<br />
							March 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
					<div class="rotator r1">
				       <div class="navigation">
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
				         <a href="#">&nbsp;</a>
						 <a href="#">&nbsp;</a>
				         <div class="current"></div>
				       </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
				        <img src="images/slide05.jpg" alt="Your Description" />
						<p><em>My Picture Number 5</em><br />
								Washington DC<br />
								April 2008<br />
								<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
				     </div>
					<div class="PausePlay">
						<a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</div>
			    </div>
				<div id="menuNavigation">
					<div class="navLeft"><p><a href="history.html">HISTORY</a></p></div>
					<div class="navLeft"><p><a href="services.html">SERVICES</a></p></div>
					<div class="navLeft"><p><a href="staff.html">STAFF</a></p></div>
					<div class="navRight"><p><a href="almanack.html">The Almanack <font style="font-size: 10px;"><em>&bull; Journal of History &amp; Travel</em></font></a></p></div>
				</div>
			</div>
			<div id="content">
				<div class="content_block">
					<img src="images/block_pic1.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="content_block_center">
					<img src="images/block_pic2.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="content_block">
					<img src="images/block_pic3.jpg" alt="Picture Description" width="236" height="75" border="0" />
					<h1>White House Historical Association</h1>
					<p>Lorem ipsum dolor sit amet, consectetur 
					adipiscing elit. Aliquam eget mi vitae 
					justo hendrerit tempor sed non lorem. 
					Vestibulum egestas, lacus at elementum 
					ultrices, sapien nunc vehicula neque, ut 
					cursus mauris ... <a href="#"><em>Click for full article</em></a></p>
				</div>
				<div class="clearBoth"></div>
				<div class="DotRule">
					<hr />
				</div>
				<div id="content_main">
					<p>Since 1999, INHERITAGE has served the niche web design &amp; development needs of the historical community and preservation arts. We specialize in all facets of online operations: from info / visual / technical design to digital library database &amp; ecommerce development, SEO and social media strategy to rich-media online documentary production. We are not just designers &amp; developers, we are history-enthusiasts.</p>
				</div>
				<div class="DotRule">
					<hr />
				</div>
				<div id="footer">
					<p>INHERITAGE, Inc.  |  &quot;Preservation &amp; Presentation&quot;  |  Clarkston, GA  /  Washington, DC  |  404.374.9395  |  <script type="text/javascript">
//<![CDATA[

					var contact = "Contact Us"

					var email = "info"

					var emailHost = "inheritage.org"

					document.write("<a href=" + "mail" + "to:" + email + "&#64;" + emailHost+ ">"+ contact + "<\/a>")

					//]]>
					</script></p>
				</div>
			</div>
		</div>
	
	</div>
	<div id="bottom">
	</div>

</body>
</html>


CSS

/* Main CSS for Inheritage

*/


/* CORE */

/* Zero Out */
body, div, p, ul, ol, dl, dt, dd, li, form {
	margin: 0;
	padding: 0;
}

a:focus {
outline: none;
}

body {
	margin: 0 auto; 
	width: 1024px;
	padding: 0px;
	background-color: #e8ddc6;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#outer_container {
	margin: 0 auto;
	position: relative;
	width: 1024px;
	min-height: 500px;
	background-image: url('images/white_border.png');
	background-repeat: repeat-y;
}

#inner_container {
	margin-left: 30px;
	position: relative;
	width: 960px;
	min-height: 1036px;
	background-image: url('images/inner_bg.png');
	background-repeat: repeat-x;
	background-color: #ffffff;
	z-index: 2;
}

#sub_inner_container {
	margin-left: 30px;
	padding-bottom: 20px;
	position: relative;
	width: 960px;
	background-color: #b4b7c9;
	z-index: 2;
}

#sub_inner_inner_container {
	margin-left: 5px;
	position: relative;
	width: 950px;
	background-color: #e8e4d8;
	z-index: 3;
	padding-bottom: 5px;
}

#subPageHeader {
	position: relative;
	width: 960px;
	height: 366px;
	z-index: 4;
	margin-left: -5px;
}

#almanackPageHeader {
	position: relative;
	width: 960px;
	height: 248px;
	z-index: 4;
	margin-left: -5px;
	background-image: url('images/almanack_header.jpg');
	background-repeat: no-repeat;
}

#slides_bg {
	position: relative;
	width: 960px;
	height: 629px;
	background-image: url('images/slides_bg.png');
	background-repeat: no-repeat;
	z-index: 3;
}

#homeLink {

}

#homeLink a {
	position: absolute;
	width: 298px;
	height: 37px;
	left: 30px;
	top: 20px;
	text-decoration: none;
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	z-index: 4;
	margin-left: 15px;
}

#homeLink a:hover {
	text-decoration: none;
	background: url('images/logo_hover.png');
	background-repeat: no-repeat;
	z-index 5;
}

#sub_homeLink {

}

#sub_homeLink a {
	position: absolute;
	width: 298px;
	height: 37px;
	left: 30px;
	top: 20px;
	text-decoration: none;
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	z-index: 4;
	margin-left: 10px;
}

#sub_homeLink a:hover {
	text-decoration: none;
	background: url('images/logo_hover.png');
	background-repeat: no-repeat;
	z-index 5;
}

.slideShow {
	z-index: 10;
}

div.rotator { 
	position: relative; 
	height: 375px; width: 757px; 
	margin-top: 100px; 
	margin-left: 190px; 
}

div.r1 { 

}

div.r1 p { 
	margin-top: 138px;
	text-align: left; 
	font-size: 11px;
	line-height: 30px;
	color: #ffffff;
	float: right;
	width: 167px;
	height: 196px;
	background-image: url('images/textbg.gif');
	background-repeat: no-repeat;

}


div.navigation { 
	position: absolute;
	top: 140px;
	left: -87px;
}

div.navigation div.current, div.navigation a { 
	width: 12px;
	height: 20px; 
	margin: 0 0px 0 0; 
	overflow: hidden; 
	background-image: url('images/slide_position.png'); 
	background-repeat: no-repeat;
	text-decoration: none;
	
}

div.navigation a:hover { 
	text-decoration: none;
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat;
}

div.navigation div.current { 
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat; 
}

div.navigation a { 
	display: block; 
	background-image: url('images/slide_position.png'); 
}

#introslide { 
	background: transparent; 
}

div.PausePlay {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 250px;
	left: -89px;
	display: block;
	overflow: hidden;
	z-index: 1;
}

.pauseButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/pause.png');
	background-repeat: no-repeat;
}

.pauseButton:hover {
	background: url('images/pauseHL.png');
	background-repeat: no-repeat;
}

.playButton {
	border: 0;
	margin: 0;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url('images/play.png');
	background-repeat: no-repeat;
}

.playButton:hover {
	background: url('images/playHL.png');
	background-repeat: no-repeat;
}

#menuNavigation {
	position: absolute;
	width: 700px;
	height: 20px;
	top: 558px;
	left: 140px;
	z-index: 4;
}

.navLeft {
	float: left;
	width: 85px;
	height: 20px;
	border-width: 1px;
	border-right-style: solid;
	border-color: #e5d6b8;
}

.navLeft p {
	font-size: 13px;
	line-height: 22px;
	color: #e5d6b8;
	text-align: center;
}

.navLeft p a {
	color: #e5d6b8;
	text-decoration: none;
}

.navLeft p a:hover {
	color: #ffcc00;
}

.navRight {
	float: right;
	width: 277px;
	height: 20px;
	border-width: 1px;
	border-left-style: solid;
	border-color: #e5d6b8;
}

.navRight p {
	font-size: 13px;
	line-height: 22px;
	color: #e5d6b8;
	text-align: center;
	padding-right: 10px;
}

.navRight p a {
	color: #e5d6b8;
	text-decoration: none;
}

.navRight p a:hover {
	color: #ffcc00;
}

#bottom {
	position: relative;
	width: 1024px;
	height: 34px;
	top: 0px;
	background-image: url('images/footer_bg.png');
	background-repeat: no-repeat;
}

#content {
	margin-left: 75px;
	margin-right: 75px;
	margin-top: 29px;
	width: 820px;
	min-height: 240px;
	line-height: 18px;
}

.content_block {
	float: left;
	width: 240px;
	text-align: left;	
	padding-left: 17px;
	padding-right: 14px;
}

.content_block h1 {
	font-size: 14px;
	color: #2a2a2a;
}

.content_block p {
	font-size: 12px;
	color: #2a2a2a;
}

.content_block a {
	color: #000099;
}

.content_block a:hover {
	color: #a90000;
}

.content_block_center {
	float: left;
	width: 240px;
	text-align: left;
	border-width: 2px;
	border-left-style: dotted;
	border-right-style: dotted;
	border-color: #a1a1a1;
	padding-left: 17px;
	padding-right: 12px;
}

.content_block_center h1 {
	font-size: 14px;
	color: #2a2a2a;
}

.content_block_center p {
	font-size: 12px;
	color: #2a2a2a;
}

.content_block_center a {
	color: #000099;
}

.content_block_center a:hover {
	color: #a90000;
}

#sub_content {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 35px;
	min-height: 240px;
}

.sub_content_text {
	padding: 0px 5px 20px 0px;
}

.sub_content_text p {
	margin-bottom: .5em;
	font-size: 12px;
	text-align: left;
	color: #2a2a2a;
	line-height: 18px;	
}

.sub_content_text a {
	color: #000099;
	text-decoration: underline;
}

.sub_content_text a:hover {
	color: #a90000;
	text-decoration: underline;
}

.sub_content_pic {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

.clearBoth {
	clear: both;
}

#almanack_col1 {
	width: 420px;
	float: left;
	padding-right: 10px;
}

#almanack_col1 p {
	font-size: 14px;
	color: #2a2a2a;
	line-height: 20px;
}

#almanack_col1 h1 {
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}

#almanack_col1 h2 {
	font-size: 14px;
	color: #000000;
	font-weight: bold;
}

#almanack_col1 h2 a {
	font-size: 14px;
	color: #000099;
	text-decoration: none;
}

#almanack_col1 h2 a:hover {
	color: #a90000;
	text-decoration: underline;
}

#almanack_col2 {
	width: 420px;
	float: left;
	padding-left: 15px;
}

#almanack_col2 h1 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	padding-left: 40px;
}

#almanack_col2 h2 {
	margin: 0;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	padding-left: 40px;
	line-height: 24px;

}

#almanack_col2 h2 a {
	margin: 0;
	font-size: 14px;
	color: #000099;
	text-decoration: none;

}

#almanack_col2 h2 a:hover {
	margin: 0;
	color: #a90000;
	text-decoration: underline;
}


#almanack_col2 h3 {
	margin: 0;
	font-size: 16px;
	color: #a90000;
	font-weight: bold;
	padding-left: 40px;
}


div.DotRule {
	height: 1px;
	border-top: 2px dotted #a1a1a1;
	margin-top: 30px;
	margin-bottom: 3px;
}

div.DotRule hr {
	display: none;
}

div.SingleRuleBlack {
	height: 1px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #e6dfd1;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 30px;
}

div.SingleRuleBlack hr {
	display: none;
}



.almanack_box_top {
	width: 420px;
	height: 38px;
	background: url('images/a_box_top.png');
	background-repeat: no-repeat;
}

.almanack_box_repeat {
	width: 420px;
	background: url('images/a_box_repeat.png');
	background-repeat: repeat-y;
}

.almanack_box_bottom {
	width: 420px;
	height: 39px;
	background: url('images/a_box_bottom.png');
	background-repeat: no-repeat;
}

#content_main {
	width: 820px;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 5px;
}

#content_main p {
	color: #2a2a2a;
	font-size: 12px;
	line-height: 18px;
}

#sub_inner_bottom {
	margin-left: 30px;
	width: 960px;
	height: 36px;
	background-image: url('images/sub_inner_btm.png');
	background-repeat: no-repeat;
}

#sub_inner_inner_bottom {
	margin-left: 5px;
	width: 950px;
	height: 31px;
	background-image: url('images/inner_inner_btm.png');
	background-repeat: no-repeat;	
}

#inner_footer {
	width: 960px;
	padding-bottom: 10px;
}

#inner_footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}


#inner_footer p a{
	color: #000099;
	text-decoration: none;
}

#inner_footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

#footer {
	width: 820px;
	padding-top: 20px;
	padding-bottom: 10px;
}

#footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}

#footer p a {
	color: #807766;
	text-decoration: none;
}

#footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

#sub_footer {
	margin-left: 35px;
	width: 960px;
	padding-top: 20px;
	padding-bottom: 10px;
}

#sub_footer p {
	color: #807766;
	font-size: 12px;
	text-align: center;
}

#sub_footer p a {
	color: #807766;
	text-decoration: none;
}

#sub_footer p a:hover {
	color: #a90000;
	text-decoration: underline;
}

Open in new window

Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

Bugada,

Missed some of the code. Now working perfectly. Awesome!

--Griff
Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

Bugada,

Only one issue left. When the slideshow cycles back to the first rotator class I get a blank area with the pause button in the upper left of the slideshow div.

Thoughts?


Thanks so much!

--Griff
Avatar of bugada
bugada
Flag of Italy image
Yes i can reproduce it, what's your goal?

Simply hiding the play/pause button during transition or avoid the blank area?
Avatar of bugada
bugada
Flag of Italy image
The easiest solution is to put each "PausePlay" div inside its "navigation" div.

E.G. (not tested but should work)

From

<div class="navigation">
      <a href="#">&nbsp;</a>
      <a href="#">&nbsp;</a>
      <a href="#">&nbsp;</a>
      <div class="current"></div>
      <a href="#">&nbsp;</a>
</div>
<div class="PausePlay">
      <a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>

To

<div class="navigation">
      <a href="#">&nbsp;</a>
      <a href="#">&nbsp;</a>
      <a href="#">&nbsp;</a>
      <div class="current"></div>
      <a href="#">&nbsp;</a>
      <div class="PausePlay">
            <a href="#" class="pauseButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="playButton">&nbsp;&nbsp;&nbsp;&nbsp;</a>
      </div>
</div>



Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

Bugada,

Thanks, it was my mistake. I had an extra set of the class buttons at the end of the rotator. All fixed. All working as designed.

Thanks a bunch.

--griff

Avatar of GAGriff
GAGriff
Flag of United States of America image

ASKER

This expert took the time to look at my code and implement the class solution I was looking for.