4 Replies - 422 Views - Last Post: 30 July 2014 - 08:20 AM

#1 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

Slideshow isn't working, what's wrong with code? No opacity?

Posted 30 July 2014 - 07:45 AM

Hi everyone. I copied and pasted this javascript code I found online into my html to try and implement a slideshow:
http://css-tricks.co...ying-slideshow/

However the slideshow isn't working. What's wrong with my code?
Also, when I hover over the images in my footer, there is no opacity. What did I do wrong there?

The slideshow and footer css could both be found at the bottom of my css code.

This is my html code:

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>Andean American Associations</title>
<link href="main.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n3:default.js" type="text/javascript"></script>

<script type='text/javascript'>$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000); </script>


</head>

<body background="latin_america Edit.jpg">

<div id="wrapper">
<header id="top">
  <h2>Andean American Associations</h2>
        <nav id="mainnav">
        <ul>
        	<li><a href="http://www.colombianamerican.org/" target="_blank"> Colombia</a></li>
            <li><a href="http://www.peruvian-american.org/" target="_blank"> Peruvian</a></li>
            <li><a href="http://ecuadoreanamericanassociation.org/" target="_blank"> Ecuadorean</a></li>
            <li><a href="http://www.venezuelanamerican.org/" target="_blank"> Venezuelan</a></li>
        </ul>
        </nav>
</header>
&nbsp;

<table width="100%" border="0">
  <tr>
    <td><div id="slideshow1"><div>
     <img src="Slideshow Colombia.jpg" height="100%" width="100%" alt=""/>
   </div>
   <div>
     <img src="">
   </div>
   </div></td>
   
    <td><p id="sidebar">The founder of the Chamber was Germán Olano, a Colombian businessman residing in New York who later became the Consul General of Colombia. The organizational meeting, held on April 27, 1927, at the Hotel Pennsylvania, was chaired by Phanor J. Eder, a partner of Hardin, Hess and Eder. Joseph Carter of R. W. Hebard & Co. acted as Secretary and Rafael del Castillo was elected President.</p></td>
  </tr>
</table>
      
    &nbsp;
	
    <footer>
     <a href="http://www.colombianamerican.org/"> <img src="CAA.png" height="150" width="25%" alt=""/></a>
     <a href="http://www.peruvian-american.org/"><img src="EAA Text Bottom.jpg" height="150" width="25%" alt=""/></a>
     <a href="http://ecuadoreanamericanassociation.org/"><img src="PAA.png" height="150" width="25%" alt="" /></a>
     <a href="http://www.venezuelanamerican.org/"><img src="VAAUS.png" height="150" width="24%" alt=""/></a>
  </footer>
</div>

    
</body>

</html> 


And this is my CSS code:

@charset "utf-8";

body{
	font-style: normal;
	font-weight: 300;
	font-family: source-sans-pro;
}

#wrapper   {
	background-color: #E6E6FA;
	width: 100%;
	min-width: 740px;
	max-width:1010px;
	margin-left:180px;
	
}

#top {
}

#mainnav {
}

#mainnav ul{
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;	
}

#mainnav a{
	width: 25%;
	display: block;
	float: left;
	text-align: center;
	background-color: #666666;
	color: #FFF;
	margin-left: 0px;
	padding-left: 0px;
	margin-right: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 0.5%;
	margin-top: 0px;
	margin-bottom: 0px;
	height:30px;
}

td{
	width:50%;
}

a{
	font-weight: normal;
	text-decoration: none;
	transition: color 0.7s ease-in 0.3s;
	}
a:link{
	color:#FF6600;
	}
a:vistited{
	color:#FF944C;
	}
a:hover,a:active,a:focus
{
	color: #7F3300;
	text-decoration: underline;	
	}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage{
	text-decoration: none;	
	background-color: #43A6CB;
}

#sidebar{
	width: 80%;
	text-align: center;	
	margin-left: 10%;
}

#main{
	
}

#slideshow1 { 
    /*margin: 50px auto;*/ 
    position: relative;
    width: 96%; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}



#footer img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
} 


Is This A Good Question/Topic? 0
  • +

Replies To: Slideshow isn't working, what's wrong with code? No opacity?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Slideshow isn't working, what's wrong with code? No opacity?

Posted 30 July 2014 - 07:49 AM

That code requires the jQuery library which you haven't attached. E.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Was This Post Helpful? 0
  • +
  • -

#3 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

Re: Slideshow isn't working, what's wrong with code? No opacity?

Posted 30 July 2014 - 08:10 AM

View Postandrewsw, on 30 July 2014 - 07:49 AM, said:

That code requires the jQuery library which you haven't attached. E.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Hi andrewsw, I put that in the src, but it's still not working :/
At a complete loss.

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>Andean American Associations</title>
<link href="main.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n3:default.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">

$("#slideshow1 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000);
</script>


</head>

<body background="latin_america Edit.jpg">

<div id="wrapper">
<header id="top">
  <h2>Andean American Associations</h2>
        <nav id="mainnav">
        <ul>
        	<li><a href="http://www.colombianamerican.org/" target="_blank"> Colombia</a></li>
            <li><a href="http://www.peruvian-american.org/" target="_blank"> Peruvian</a></li>
            <li><a href="http://ecuadoreanamericanassociation.org/" target="_blank"> Ecuadorean</a></li>
            <li><a href="http://www.venezuelanamerican.org/" target="_blank"> Venezuelan</a></li>
        </ul>
        </nav>
</header>
&nbsp;

<table width="100%" border="0">
  <tr>
    <td>
		<div id="slideshow1">
			<div>
				<img src="Slideshow Colombia.jpg" height="100%" width="100%" alt=""/>
			</div>
			<div>
				<img src="Slideshow Peru.jpg" height="100%" width="100%" alt=""/>
			</div>
		</div>
   </td>
   
    <td><p id="sidebar">The founder of the Chamber was Germán Olano, a Colombian businessman residing in New York who later became the Consul General of Colombia. The organizational meeting, held on April 27, 1927, at the Hotel Pennsylvania, was chaired by Phanor J. Eder, a partner of Hardin, Hess and Eder. Joseph Carter of R. W. Hebard & Co. acted as Secretary and Rafael del Castillo was elected President.</p></td>
  </tr>
</table>
      
    &nbsp;
	
    <footer>
     <a href="http://www.colombianamerican.org/"> <img src="CAA.png" height="150" width="25%" alt=""/></a>
     <a href="http://www.peruvian-american.org/"><img src="EAA Text Bottom.jpg" height="150" width="25%" alt=""/></a>
     <a href="http://ecuadoreanamericanassociation.org/"><img src="PAA.png" height="150" width="25%" alt="" /></a>
     <a href="http://www.venezuelanamerican.org/"><img src="VAAUS.png" height="150" width="24%" alt=""/></a>
  </footer>
</div>

    
</body>

</html>


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Slideshow isn't working, what's wrong with code? No opacity?

Posted 30 July 2014 - 08:13 AM

You need to close that linked script before opening a new script tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow1 > div:gt(0)").hide();
// etc..
</script>

Was This Post Helpful? 1
  • +
  • -

#5 ball4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-May 13

Re: Slideshow isn't working, what's wrong with code? No opacity?

Posted 30 July 2014 - 08:20 AM

View Postandrewsw, on 30 July 2014 - 08:13 AM, said:

You need to close that linked script before opening a new script tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow1 > div:gt(0)").hide();
// etc..
</script>


Thank you so much! That completely fixed the issue. Looks I need to brush up a lot more on javascript haha.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1