Solved

Need some jQuery help

Posted on 2010-09-14
12
323 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:GAGriff
  • 8
  • 3
12 Comments
 
LVL 22

Expert Comment

by:kadaba
Comment Utility
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

0
 

Author Comment

by:GAGriff
Comment Utility
Very cool. Will check it out.

--Griff
0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
Comment Utility
In my example, very similar to previous one, the play / pause button are showed / hidden correctly.
     (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);

            };

            

            this.pause = function() {

              if (timer) clearTimeout(timer);

            };

            

            this.resume = function() {

              cue();

            };



            cue();

          }

          

          this.pause = function() {

             transitionObject.pause();

          };

          

          this.resume = function() {

             transitionObject.resume();

          };



          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);  	 

   

Open in new window

0
 

Author Comment

by:GAGriff
Comment Utility
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

0
 

Author Comment

by:GAGriff
Comment Utility
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

0
 

Author Comment

by:GAGriff
Comment Utility
Bugada,

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

--Griff
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:GAGriff
Comment Utility
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
0
 

Author Comment

by:GAGriff
Comment Utility
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
Yes i can reproduce it, what's your goal?

Simply hiding the play/pause button during transition or avoid the blank area?
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
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>



0
 

Author Comment

by:GAGriff
Comment Utility
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

0
 

Author Closing Comment

by:GAGriff
Comment Utility
This expert took the time to look at my code and implement the class solution I was looking for.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now