what is wrong with this?

@dalovelymrslisaOct 12.2009

i am working on my s3slider plug in with jquery. The coding seemed to have been done correctly but the fial product isnt what it should be. Can anyone help me figure it out?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script type=”text/javascript” src=”js/s3Slider.js”></script>

<script type=”text/javascript”> $(function() { $(“div#slider”).s3Slider({ timeOut: 3000 }); }); </script>

</head>
<body>
<div id=”slider”>
<ul id=”sliderContent”>

<li class=”sliderImage”> <img src=”http://i20.photobucket.com/albums/b241/Dalovelymslisa/ojjie3.jpg” alt=”r” /> <span>i did it</span> </li>

<li class=”sliderImage”> <img src=”http://i20.photobucket.com/albums/b241/Dalovelymslisa/daddy5.jpg” alt=”” /> <span>i did it</span> </li>

<li class=”sliderImage”> <img src=”http://i20.photobucket.com/albums/b241/Dalovelymslisa/ojjie3.jpg” alt=”” /> <span>i did it</span> </li>

<li class=”sliderImage”> <img src=”http://i20.photobucket.com/albums/b241/Dalovelymslisa/daddy5.jpg” alt=”” /> <span>i did it</span> </li>

</ul> <div class=”clear sliderImage”>body {

font-family: helvetica, arial, sans-serif;
font-size: 11px;
}

ul, li, img {
list-style: none;
margin: 0; padding: 0;
}
#slider {
***width: 250px; /* important to be same as image width */
***height: 250px; /* important to be same as image height */
***position: relative; /* important */
***overflow: hidden; /* important */
}

#sliderContent {
***width: 250px; /* important to be same as image width or wider */
***position: absolute; /* important */
***top: 0; /* important */
***margin-left: 0; /* important */
}

.sliderImage {
***float: left; /* important */
***position: relative; /* important */
***display: none; /* important */
}

.sliderImage span {
***position: absolute; /* important */
***left: 0;
***font: 10px/15px Arial, Helvetica, sans-serif;
***padding: 10px 13px;
***width: 374px;
***background-color: #000;
***filter: alpha(opacity=90); /* here you can set the opacity of box with text */
***-moz-opacity: 0.9; /* here you can set the opacity of box with text */
***-khtml-opacity: 0.9; /* here you can set the opacity of box with text */
***opacity: 0.9; /* here you can set the opacity of box with text */
***color: #000000;
***display: none; /* important */
***top: 0;

***/*
****** if you put
****** top: 0; -> the box with text will be shown at the top of the image
****** if you put
****** bottom: 0; -> the box with text will be shown at the bottom of the image
****/
}

.clear {
***clear: both;
}</div>
</ul>
</div>
</body>
</html>

to post a comment

JavaScript

2 Comments(s) _↴

@FreejackOct 12.2009 — #At least initially:

1. You didn't use a code tag to surround your code (probably why all the asterisks at the bottom). To make it easier for us to help you, you should surround your code with [ html ] yourcode [ /html ] tags (without the spaces inside the brackets).

2. You didn't supply [B]s3Slider.js[/B] so I don't know what effect that's having on your code bit here.

3. It presents a blank page to me after I cut out the css stuff and put it into an external file. And I have no idea if that's how it should work but it was coming up as garage on the page without doing that.

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script type="text/javascript" src="js/s3Slider.js"></script>
 
 <script type="text/javascript">
 
 $(function() {
 $("div#slider").s3Slider({timeOut: 3000});
 });
 
 </script>
 
 <style type="text/css" title="currentStyle" media="screen">
 @import "lisa.css";
 </style>
 
 </head>
 
 <body>
 <div id="slider">
 <ul id="sliderContent">
 <li class="sliderImage"><img src="http://i20.photobucket.com/albums/b241/Dalovelymslisa/ojjie3.jpg" alt="r" /><span>i did it</span></li>
 <li class="sliderImage"><img src="http://i20.photobucket.com/albums/b241/Dalovelymslisa/daddy5.jpg" alt="" /><span>i did it</span></li>
 <li class="sliderImage"><img src="http://i20.photobucket.com/albums/b241/Dalovelymslisa/ojjie3.jpg" alt="" /><span>i did it</span></li>
 <li class="sliderImage"><img src="http://i20.photobucket.com/albums/b241/Dalovelymslisa/daddy5.jpg" alt="" /><span>i did it</span></li>
 </ul>
 <div class="clear sliderImage">
 </div>
 </div>
 
 </body>
 </html>[/code]

And lisa.jss:

[code=html]body {
 font-family: helvetica, arial, sans-serif;
 font-size: 11px;
 }
 
 ul, li, img {
 list-style: none;
 margin: 0; padding: 0;
 }
 
 #slider {
 width: 250px;
 height: 250px;
 position: relative;
 overflow: hidden;
 }
 
 #sliderContent {
 width: 250px;
 position: absolute;
 top: 0;
 margin-left: 0;
 }
 
 .sliderImage {
 float: left;
 position: relative;
 display: none;
 }
 
 .sliderImage span {
 position: absolute;
 left: 0;
 font: 10px/15px Arial, Helvetica, sans-serif;
 padding: 10px 13px;
 width: 374px;
 background-color: #000;
 filter: alpha(opacity=90);
 -moz-opacity: 0.9;
 -khtml-opacity: 0.9;
 opacity: 0.9;
 color: #000000;
 display: none;
 top: 0;
 }
 
 .clear {
 clear: both;
 }[/code]

Sorry I can't be of more help though.

Carl

@FreejackOct 12.2009 — #Ah, that explains part of it. I snagged the picture url's and just discovered that work blocks access to Photobucket. So you may in fact be showing pictures but I can't see them. Heck, I may have fixed the problem and just don't know it ?

Carl

Also in #JavaScript _↴

changing all <p> font size time date validation

Success!

Help @dalovelymrslisa spread the word by sharing this article on Twitter...

Tweet This

what is wrong with this?

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

what is wrong with this?

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴