MMM717
11-24-2012, 07:10 PM
(Note - after returning to an existing older thread and noticing the "bumping up very old threads is highly frowned upon" warning, I'm going to delete my new post to it, and start fresh here. I didn't notice this when initially posting in it, as I hit "quote" then to reply and that notice doesn't display when doing so). I don't mean this as a double post in any way...
-------------------------------------------------------------------------------------
In reference to this existing post:
http://www.codingforums.com/showthread.php?p=807962#post807962
I'm trying to use this same photo shuffler, also with some issues. They are:
The next image in the rotation appears abruptly, without fading up. In the previous thread, a change to the person's HTML code was suggested to fix this. However, I can find no similar language in my code, so I'm not sure how to incorporate such a fix.
The other problem occurs when using IE7 (and possibly previous versions of Explorer). Each of the images are 800px wide, and is meant to be centered horizontally. The body of the site is 960px wide. The current image in the rotation displays correctly, but a piece of the next image up is filling the 80px to either side, instead of just my background color. The previous thread suggested adding (unless I'm misunderstanding)
In viewing the page of my site with the shuffler in IE7, I get the "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer." That's a big concern, as I don't want people to think there is a safety issue in viewing my site...
#photodiv{
background-position: 1px 1px;
background-repeat: no-repeat;
}
to the CSS to fix such an issue. Besides trying to figure out the exact place this should go in the context of my code, I'm getting a syntax error in Dreamweaver when trying to insert this code.
My current code (with my content replaced with generic text/filenames) is below. I'm new to this world, and am designing this site for a business I'm going to launch. Thank you in advance...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic";
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
text-shadow: #A2C8CA 0 0 1px;
-webkit-text-stroke: 0.65px
-webkit-font-smoothing: antialiased;
color: #AED6D9;
font-weight: 500;
font-size: 11pt;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #AED6D9;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #AED6D9;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
overflow: auto;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 200px;
width: 960px;
background-color: #603B3D;
text-align: left;
position: fixed;
z-index: 1000;
}
.header img {float: left;}
.header ul {
margin: 5px 0 0 400px;
text-align: center;
list-style: none;
}
.header ul li {
width: 127px;
margin: 0px;
float: left;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}
.bigger { font-size:85%; }
/* ~~ The footer ~~ */
.footer {
height: 15px;
width: 960px;
margin: 0 0 0 -480px;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 50%;
background: #603B3D;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style><script type="text/javascript">
<!--//--><![CDATA[//><!--
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target < img /> with a < div >. specify id= in both
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"photo2.jpg",
"photo3.jpg",
"photo4.jpg",
"photo5.jpg",
"photo6.jpg",
"photo7.jpg",
"photo8.jpg",
"photo1.jpg"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 100;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
//--><!]]>
</script>
<!--------------------------------------------------------------------------------
<!--
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array--></head>
<body>
<div class="container">
<div class="header"><img src="LOGO" width="443" height="186" alt="Logo 443"><ul>
<li><a href="pagelink"><img src="button1" width="127" height="90" alt="button1"></a></li>
<li><a href="pagelink"><img src="button2" width="127" height="90" alt="button2"></a></li>
<li><a href="pagelink"><img src="button3" width="127" height="90" alt="button3"></a></li>
<li><a href="pagelink"><img src="button4" width="127" height="90" alt="button4"></a></li>
<li><a href="pagelinkl"><img src="button5" width="127" height="90" alt="button5"></a></li>
<li><a href="pagelink"><img src="button6" width="127" height="90" alt="button6"></a></li>
<li><a href="pagelink"><img src="button7" width="127" height="90" alt="button7"></a></li>
<li><a href="pagelink"><img src="button8" width="127" height="90" alt="button8"></a></li>
</ul></div>
<div class="content">
<p> </p>
<div id="photodiv"><center>
<img id="photoimg" src="photo1.jpg" /></center>
</div>
<br>
<p>My first paragraph.</p>
<p> </p>
<p>My second paragraph.</p>
<p> </p>
<p>My third paragraph.<br>
</p>
<p> </p>
<p></p>
<h1> </h1>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<CENTER><p><span class=bigger><a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a></span></p></CENTER>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
-------------------------------------------------------------------------------------
In reference to this existing post:
http://www.codingforums.com/showthread.php?p=807962#post807962
I'm trying to use this same photo shuffler, also with some issues. They are:
The next image in the rotation appears abruptly, without fading up. In the previous thread, a change to the person's HTML code was suggested to fix this. However, I can find no similar language in my code, so I'm not sure how to incorporate such a fix.
The other problem occurs when using IE7 (and possibly previous versions of Explorer). Each of the images are 800px wide, and is meant to be centered horizontally. The body of the site is 960px wide. The current image in the rotation displays correctly, but a piece of the next image up is filling the 80px to either side, instead of just my background color. The previous thread suggested adding (unless I'm misunderstanding)
In viewing the page of my site with the shuffler in IE7, I get the "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer." That's a big concern, as I don't want people to think there is a safety issue in viewing my site...
#photodiv{
background-position: 1px 1px;
background-repeat: no-repeat;
}
to the CSS to fix such an issue. Besides trying to figure out the exact place this should go in the context of my code, I'm getting a syntax error in Dreamweaver when trying to insert this code.
My current code (with my content replaced with generic text/filenames) is below. I'm new to this world, and am designing this site for a business I'm going to launch. Thank you in advance...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic";
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
text-shadow: #A2C8CA 0 0 1px;
-webkit-text-stroke: 0.65px
-webkit-font-smoothing: antialiased;
color: #AED6D9;
font-weight: 500;
font-size: 11pt;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #AED6D9;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #AED6D9;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
overflow: auto;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 200px;
width: 960px;
background-color: #603B3D;
text-align: left;
position: fixed;
z-index: 1000;
}
.header img {float: left;}
.header ul {
margin: 5px 0 0 400px;
text-align: center;
list-style: none;
}
.header ul li {
width: 127px;
margin: 0px;
float: left;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}
.bigger { font-size:85%; }
/* ~~ The footer ~~ */
.footer {
height: 15px;
width: 960px;
margin: 0 0 0 -480px;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 50%;
background: #603B3D;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style><script type="text/javascript">
<!--//--><![CDATA[//><!--
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target < img /> with a < div >. specify id= in both
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"photo2.jpg",
"photo3.jpg",
"photo4.jpg",
"photo5.jpg",
"photo6.jpg",
"photo7.jpg",
"photo8.jpg",
"photo1.jpg"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 100;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
//--><!]]>
</script>
<!--------------------------------------------------------------------------------
<!--
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array--></head>
<body>
<div class="container">
<div class="header"><img src="LOGO" width="443" height="186" alt="Logo 443"><ul>
<li><a href="pagelink"><img src="button1" width="127" height="90" alt="button1"></a></li>
<li><a href="pagelink"><img src="button2" width="127" height="90" alt="button2"></a></li>
<li><a href="pagelink"><img src="button3" width="127" height="90" alt="button3"></a></li>
<li><a href="pagelink"><img src="button4" width="127" height="90" alt="button4"></a></li>
<li><a href="pagelinkl"><img src="button5" width="127" height="90" alt="button5"></a></li>
<li><a href="pagelink"><img src="button6" width="127" height="90" alt="button6"></a></li>
<li><a href="pagelink"><img src="button7" width="127" height="90" alt="button7"></a></li>
<li><a href="pagelink"><img src="button8" width="127" height="90" alt="button8"></a></li>
</ul></div>
<div class="content">
<p> </p>
<div id="photodiv"><center>
<img id="photoimg" src="photo1.jpg" /></center>
</div>
<br>
<p>My first paragraph.</p>
<p> </p>
<p>My second paragraph.</p>
<p> </p>
<p>My third paragraph.<br>
</p>
<p> </p>
<p></p>
<h1> </h1>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<CENTER><p><span class=bigger><a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a>, <a target="_blank" href="link">TEXT</a></span></p></CENTER>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>