|
JavaScript - Show Hide Toggle Slide Left - Right - Almost Works
Hey guys, dont suppose any of you kind folks could help me out with a bit of code could you please?
Heres the code - <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var s = $('#slide'), w = $(s.find('span')[0]).width(); s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'}); $('#clicky').toggle(function(){ s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}}); }, function(){ s.stop().animate({width: w}, {duration: 'slow', queue: false}); }); }); </script> <style> #slide{ float:left; width:200px; height:100px; background:yellow; margin-left:20px; } #next{ float:left; width:200px; height:100px; background:red; margin-left:20px; } </style> </head> <body> <input name="" type="button" value="Navigation" id="clicky"><br> <br> <div id="slide"> <h1><span>Hello World!</span></h1> </div> <div id="next"></div> </body> </html> Now my problem, when you first load the page and click the navigation button it dosent behave as it should. If you press the button a second time it behaves perfect and then for each button click it works as it should, its just the very first button click, it dosent seem to scroll across. Any ideas what i have done wrong in my code? Thanks Similar TutorialsHi all, I'm using a classic toggleLayer function to display content in a div adjacent to one full of links. The code is Code: function toggleLayer( work )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( work );
else if( document.all ) // this is the way old msie versions work
elem = document.all[work];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[work];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
and the links take on the format of: Code: <a href="javascript:toggleLayer('work');...........
My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content. Any ideas? Sorry if i'm phrasing all this very badly, i'm pretty new to it all. I have an idea that AJAX could be the solution but I can barely get my head around a little bit of copied and pasted JS Thanks for any help, Pat When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. Any help would be much appreciated!! This is the code below: <script language="Javascript"> <![CDATA[ function openConsole(docId, attachmentFileName, name) { if (window.customOpenConsole) { customOpenConsole(encodeURIComponent(attachmentFileName), name); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null){ headerFrame.openDocAttachment(docId, attachmentFileName, name); } } } function STGhide() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display="none"; } } var link = document.getElementById("ShowHideButton"); //alert(link.innerHTML) link.innerHTML ="<img alt='' src='img/hideshow/showimage.gif' border='0' onclick='javascript:STGshow();' />"; } function STGshow() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display=""; } } var link = document.getElementById("ShowHideButton"); link.innerHTML ="<img alt='' src='img/hideshow/hideimage.gif' border='0' onclick='javascript:STGhide();' />"; } function openDocumentLink(externalId, languageId) { if (window.parent.openDocLink != null) { window.parent.openDocLink(externalId, languageId); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null) { headerFrame.openDocLink(externalId, languageId); } else { setTimeout("openDocumentLink('"+externalId+"','"+languageId+"')",500); } } } ]]> </script> Help is greatly appreciated!! I have two radio buttons on a form. I wish for one button to show a div that's hidden with {display:none;}, and the other to put it back to being hidden when selected. My code seemed sound to me but in firefox it doesn't really work, only in internet explorer. I would like to keep the coding as simple as possible: Code: style:
.hidden{display:none;}
script:
function show() {document.getElementById("hide").style.display = 'inline'}
function hidden() {document.getElementById("hide").style.display = 'none'}
body:
How old are you?<br/>
<input type="radio" name="age" onclick="return hidden();" value="yes"/>over 25<br/>
<input type="radio" name="age" onclick="return show();" value="no"/>25 or under<br/>
<div id=hide class="hidden">
Do you have over 2 years of experience?<br/>
<input type="radio" name="experience" value="yes"/>yes<br/>
<input type="radio" name="experience" value="no"/>no<br/>
</div>
plzz help!!!! i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table.. Requirement: -design a page to keep the track of payments -select box which holds two types (payments /adjustments) -data when submitted to be saved in the table -by default "all" radio box to be checked if payment radion button is checked the fields of nly payments to be displayed if adjustments radion button is checked the fields of nly adjustments to be displayed - this the code i developed soo far [CODE] <html> <head> <title> Payments/Adjustments </title> <script> var num1=0; function Output(srcHolder) { alert("haiiii"); //var srcTable = document.createElement("resultTable"); srcTable = document.getElementById("resultTable"); srcTable.deleteRow(srcTable.rows.length-1); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.type.value+"-"+f.name.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.amount.value; num1=f.amount.value; var total=add(); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = "amount"; tmpCell = tmpRow.insertCell(); tmpCell.innerText = total; srcHolder.appendChild(srcTable); if(flag==1) { tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; } } var sum=0; function add() { num1=parseInt(num1); sum=sum+num1; return sum; } </script> </head> <body> <form name="f"> <table align="center"> <tr> <td> DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/> </td> <td> For:<input type="name" id="name" title="Entername" size="40" /> </td> <td> Amount:<input type="name" id="amount" title="amount" size="10" /> </td> </tr> <tr> <td colspan="3"> Type:<select name="type"> <option value="">--Select--</option> <option value="adjust" >adjustments</option> <option value="payments">payments</option> </select> <td> </tr> </table> <br><center> <input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/> <input type="reset" name="Cancel" value="Cancel"/> </center> <hr> <center> <label for="type">Type</label> <input type="radio" name="type1" value="pa"/>payments <input type="radio" name="type1" value="ad"/>adjustments <input type="radio" name="type1" value="all" />all <table border="3" id="resultTable"> <thead> <th>Date </th> <th>For </th> <th>Amount </th> </thead> <tbody> <tr> </tr> <tr> </tr> <th> </tr> </tbody> </table> <div id="srcHolder" > </div> </form> </body> </html> [CODE] Greetings too all, here is my personal website. Situation I have a relatively simple few lines of javascript that allow me to slideToggle a div (#main-content-info) into (and back out of) display. The div begins with its display set to none and when the header buttons at the top of the page are clicked, (#main-content-info) slides into display. Problem The function stops working when you navigate to other pages in the site (by using the "Browse Portfolio" drop down). Question How do I allow this function to perform on all pages of the site? Please see code below. Code:
$(document).ready(function(){
$(".slide-button-one").click(function(){
$("#main-content-info").slideToggle(600,function(){
$("#main-content-portfolio").toggle();
});
return false;
});
});
Thank you for your time and I would appreciate any responses, long or short – including "don't do it like that, do it like this." Rob Good Day: I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site. Thanks very much in advance. I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes: 1. There will be a title bar placed within a right and left arrow on either side. 2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list). 3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out. I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated.. My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong? here is my js Code: var interval = 1500; //1.5 secs
var random_display = 0; //goes in order
//defines where the images are stored
var imageDir = "../image/slideshow1/";
//set images here
var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
//find total amount of images using .length
var totalImages = imageArray.length;
function imageItem(image_location){
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
//This is used if random is set to 1
function randNum(x, y){
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
//get next image
function getNextImage(){
if(random_display){
imageNum = randNum(0, totalImages-1);
} else{
imageNum = (imageNum+1) % totalImages;
}
//return the value now.
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}
function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
//function to switch images
function switchImage(place){
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
Here is the html with buttons to control the slideshow Code: <div id = "articles">
<div class= "new_article">
<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
</div>
</div>
Hy every one, i need help .I have a program made in visual c++ witch detect motion and makes a file.jpg every time when detects something. I would like to make a web pages witch makes the autorefresh with the last image generated by this program. How do i do that with javascript? I think i must declare a golbal variable witch kepps the path to the most younger file, or to make a list witch keeps all the images and sort it ascended but i don't know how to make this in java script. Can enyone help me ?Thanks in advance Hello, I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back Can anyone tell me how i could do this? i have inc my code cheers Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this? thanks!! Hi, can someone help me? I am trying to create a slide show which I learn from the JavaScript Tutorials - How to create a basic slide show. It work fine with 1 slide show but when I put 2 slide show in a web page (created 2 set of script), only 1 will work, what do I have to add in order for multiple slide show to work in a page? Below is the script, thank you. <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hello, I'm trying to make a slide show for a website that has simple controls on it. I've attached this example so you can see what i mean.... http://www.bigw.com.au/bigw/home.jsp As you can see they use 3 images, and they have controls to go between images easily. Can someone please help me with this code urgently?? Thanks, S. i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?
I am using CSS navigation that shows/hides on mouseover with a javascript function. I also have a slide show on the page right under the navigation that fades images in and out. When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING! I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts? My code: *Navigation* Code: CSS
#nav {
width: 800px;
margin: 0 auto;
padding: 0px 10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(59, 98, 120);
}
#nav a {
float: left;
padding: 0 15px;
height: 25px;
line-height: 220%;
font-weight: bold;
color: rgb(235, 235, 235);
font-size: 11pt;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: rgb(0, 0, 0);
}
table.menu {
background: rgb(79, 131, 161);
position: absolute;
visibility: hidden;
}
JAVASCRIPT
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
*Slideshow* Code: HTML
var imgArray = new Array();
imgArray[0] = "images/ss1.jpg";
imgArray[1] = "images/ss2.jpg";
imgArray[2] = "images/ss3.jpg";
imgArray[3] = "images/ss4.jpg";
imgArray[4] = "images/ss5.jpg";
imgArray[5] = "images/ss6.jpg";
imgArray[6] = "images/ss7.jpg";
imgArray[7] = "images/ss8.jpg";
imgArray[8] = "images/ss9.jpg";
slideshowFade('Slideshow1','',imgArray,8,3000);
JAVASCRIPT
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer = new Array();
var slideshowFadeCount = new Array();
var slideshowFadeImages = new Array();
function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
if(cl)
cl = ' class="'+cl+'"';
document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');
var ss = document.getElementById(id+'img');
slideshowFadeCount[id] = 0;
slideshowFadeImages[id] = imageArray;
slideshowFadeAnimate[id] = 'run';
slideshowFadeTimer[id] = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}
function slideshowFadeAnimation(id,holdTime)
{
if(slideshowFadeAnimate[id]=='run')
{
var obj = document.getElementById(id+'img');
var opa = slideshowFadeCount[id]%200;
if(opa==0)
{
slideshowFadeAnimate[id] = 'load';
obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
}
else if(opa==100)
{
slideshowFadeAnimate[id] = 'hold';
setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
}
else if(opa>100)
opa = 200-opa;
obj.style.opacity = (opa/100).toString();
obj.style.filter = "alpha(opacity="+opa.toString()+")";
slideshowFadeCount[id]++;
if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
slideshowFadeCount[id]=0;
}
}
function slideshowFadeRun(id)
{
slideshowFadeAnimate[id] = 'run';
}
can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?
i hope this is the right section to post this in. wasnt sure if this question was client side or server side i have a javascript slideshow that i would like to add to my website. its free to use and it came with some coding when downloaded. my problem is that this is my first time EVER using java (ive fiddled with php tho ) and i cant get the slide show to work on my site. the coding it came with gives you an entire webpage ... i just need the slideshow to go inside a div container instead of being a whole page the following is an embedded style that you can simply copy and paste to notepad, save as an html file, and open in your browser. (im using firefox) all the images etc are already being hosted. so you have to do nothing but open it in your browser to see the script working. like i said, this is the code for an entire webpage ... i just need the slide show by it self in a div container Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<style all="media" title="YourConnexx Media" type="text/css">
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#222 url(images/bg.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}
.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:500px; height:300px; padding-right:10px}
.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}
li#content {width:464px; height:270px; padding:15px 28px 15px 18px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div>
<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
<div id="slider">
<ul>
<li id="content">
<h1>TinySlider - Simple JavaScript Slideshow</h1>
<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
</li>
<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)">1</li>
<li onclick="slideshow.pos(1)">2</li>
<li onclick="slideshow.pos(2)">3</li>
<li onclick="slideshow.pos(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
</script>
</body>
</html>
please show me what i need to get this slide show into a div container by it self. when i do it it doesnt work at all. it appears in the div container as a text area or something but it doesnt work at all. just shows the first slide and nothing else |
|||||||