Learn VBA & Macros in 1 Week!

JavaScript - Margin Not Working On Js Text Slideshow

Full Excel VBA Course - Beginner to Expert

Margin Not Working On Js Text Slideshow	View Content

My code works great except that the margin and padding CSS isn't doing anything. Which doesn't make sense to me because the font size, style, and alignment is affected by the CSS. Does anyone know why this is??

Code:

    <h2 class="sidebar-heading">Testimonial:</h2>
<html>
<head>
  <title>Testimonies</title>
<style type="text/css">
#quote {
  margin: 0 20px;
  padding-top: 20px;
  font-size: 1.1em;
  font-style: italic;
  text-align: left;
}
</style>
  <script type="text/javascript" language="javascript">
    var testimony = new Array()
    testimony[1]= "<i>Testimonial 1</i>";
    testimony[2]= "<i>Testimonial 2</i>";
    testimony[3]= "<i>Testimonial 3</i>";
    function firstTestimony()
       { document.getElementById('div_display').innerHTML=testimony[1];
       setTimeout("secondTestimony()",2000); }
    function secondTestimony()
       { document.getElementById('div_display').innerHTML=testimony[2];
       setTimeout("thirdTestimony()",2000); }
    function thirdTestimony()
       { document.getElementById('div_display').innerHTML=testimony[3];
       setTimeout("firstTestimony()",2000); }
  </script>
</head>
<body>
  <span id="quote">
   <div id="div_display"><script type="text/javascript" language="javascript">firstTestimony();</script></div>
  </span>
</body>
</html>

Thanks!!

Full Excel VBA Course - Beginner to Expert

Slideshow Not Working

Similar Tutorials

View Content

I want to repeat the same slideshow next to my working one, and have copied and pasted the same code, but for some reason which I don't understand it is appearing as a still image with no movement, or the 'back' and 'forward' arrows?

Heres my website in testing to show what I mean: http://whnpf.perdu.servertrust.com/

The code is:

Code:

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

</div>
</div>

 <-! ##### SECOND SLIDESHOW NOT WORKING ###### !-> 

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
[/B]
</div>
</div>

Any help would greatly be appreciated, thanks!

Javascript Slideshow Not Working As Before In Ie

Similar Tutorials

View Content

New to the forum so any help you can provide is greatly appreciated. I have been using a Javascript slideshow code for several websites. I create images that are exactly the same size and then the slideshow moves through them with a cross-fade. Cross-fade does not work in FireFox but images still change over nicely, just no fade. In IE, the cross-fade worked beautifully, creating a seamless transition between images.

Now - I'm guessing within the last 2 months? - these images in IE 'jump'. Instead of a seamless transition, the fade causes the next image in show to come in from upper left of slide show area. So images appear to jump into place rather than slowly transition in.

Did IE change something in the way it processes Java? This code worked perfectly until recently. I'm not a Java programmer - using this code from another source.
Here is heart of the transition code:
[CODE]
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
[CODE]

As I said, I have used this code on several websites & it is the focal point for a nice-looking display. Any input, help or advice is greatly appreciated.

Javascript Slideshow Not Working On Ie

Similar Tutorials

View Content

Hello guys and gals ,

I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble

Here is the HTML:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.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 content="Keywords go here" name="keywords" />
<meta content="Description goes here" name="description" />
<meta content="This website is coded and maintained by ***** " name="author" />
<meta content="@2004 ***** " name="copyright" />
<meta http-equiv="Content-Style-Type" content="text/css2" />
<title>Concepto MV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>

<!--Website coded and maintained by Alexandra barvo
Copyright @2011 w ww.alexandrabarvo.com -->
</head>
<body>
<div id="background"></div><!--Backgroung-->
<div id="wrapper">
<div id="nav">
<div id="logo">
<img src="images/logo.png"/>
</div><!--logo-->
<ul id="main_nav">
<li><a class="active" href="index.html">HOME</a></li>
<li>|</a></li>
<li><a href="about.html">OUR COMPANY</a></li>
<li>|</a></li>
<li><a href="services.html">SERVICES</a></li>
<li>|</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<ul id="social">
<li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
<li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
<li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
</ul>
</div><!--nav-->
<div id="slideshow">
<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['images/render1.jpg', '', '']
ultimateshow[1]=['images/render2.jpg', '', '']
ultimateshow[2]=['images/render3.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="900px" //set to width of LARGEST image in your slideshow
var slideheight="400px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>
</div><!--slideshow-->
<div class="push"></div><!--push-->
</div><!--wrapper-->
<div class="footer">
<p id="copy">Copyright &copy; 2012</p>
</div><!--footer-->
</div><!--body-->
</body>
</html>

And here is the CSS

Code:

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	background:url(../images/bg.jpg) repeat;
	padding: 0px;
	font: 12px 'Comfortaa', Helvetica, sans-serif;
	color: #CCC;
}

#wrapper{
	margin:0 auto 75px auto;
	width:960px;
	min-height: 100%;
	height:auto !important;
	height:100%;
}

#background{
	background:url(../images/nav_bg.png) repeat-x;
	position:absolute;
	left:0;
	top:35px;
	width:100%;
	height:100%;
	z-index:-1;
}

#website{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:99;
}

#nav{
	/*background: url(../images/nav_bg.png) repeat-x;*/
	width: 100%;
	height: 75px;
	margin-top: 35px;
	margin-bottom: 75px;
}

#logo{
	margin-left:40px;
	float:left;
}

#main_nav{
	margin-left: 22px;
}

ul#main_nav{
	list-style:none;
	float:left;
	margin-top: 38px;
}

ul#main_nav li{
	display:inline;
	padding-left:7px;
	font-size:14px;

}

ul#main_nav a{
	text-decoration:none;
	color:#ccc;
}

ul#main_nav a:hover{
	text-decoration:none;
	color:#666;
}

ul#social{
	list-style:none;
	float:left;
	margin-top: 34px;
	margin-left: 22px;
}

ul#social li{
	display:inline;
	padding-left:10px;
	font-size:18px;
}

ul#social a{
	text-decoration:none;
	color:#ccc;
}

ul#social a:hover{
	text-decoration:none;
	color:#666;
}

#slideshow{
	width:900px;
	height:400px;
	border:#101010 solid 5px;
	padding: 0px;
	margin: 0px auto;
}

.footer{
	text-align:center;
	background-color: #000; 
	padding: 37px 0px 0px 0px;
	margin:0px;
	width:100%;
	background:url(../images/nav_bg.png) repeat-x;
}

.footer, .push{
	height: 75px;
}

Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie?

Thank you so much for you time.
Ale

Dhtml Slideshow Script Not Working!

Similar Tutorials

View Content

Help With Slideshow Text...

Similar Tutorials

View Content

I used the tutorial here to create a slideshow but would like to add captions... could anyone help me with the code? Below is part of the script I used... (there are 27 images so I cut it short...

head code:<script type="text/javascript">

</script>

I would really appreciate any help as I am a newbie to this...

Slideshow And Custom Scrollbar Script Not Working Together

Similar Tutorials

View Content

i have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/

Thanks for any suggestions or help in advance

Onmouseover Slideshow Working With Ie8 But Not Firefox And Chrome

Similar Tutorials

View Content

Hello

I have created awebpage here with an onmouseover slideshow, adapted from the Cut & paste Onmouseover Slideshow from Javascript kit

This works in IE8 but not in Firefox or Chrome.

I appreciate this may have been previously solved but I cannot find it in the threads.

(javascript) Help With Slideshow Text!

Similar Tutorials

View Content

how do i make those two lines go away in the backround?

EDIT: UP! http://insidehb.com/main/default.html

EDIT: Now works with ie

Making A Slideshow Photo Viewer And One Of My Functions Is Not Working (createarray()

Similar Tutorials

View Content

NOT SURE WHAT IS GOING ON, WHEN I COMMENT OUT THE CREATE ARRAY FUNCTION EVERYTHING SEEMS TO WORK FINE, SO WHAT
IS UP WITH THE CREATEARRAY FUNCTION????

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Photoviewer</title>	
	</head>

        <body bgcolor="#FFF1CC">
		<h1><u> Viewer </u></h1>
		<p>
            		<img id="myImage" src="InitialImage.jpg" width="444" height="293" alt="viewerImg" />
        	</p>
    
		<hr />
		<!--Entry boxes-->
		<form action="" method="post">
			
			<p>Photo's Folder
               			<input type="text" id="photofold" value="umcp/" /><br />
            		</p>
			<p>Common Name
               			<input type="text" id="commonName" value="college" /><br />
            		</p>
			<p> Start Photo Number
				<input type="text" id="Startval" value="1" />
			</p>
			 <p>End Photo Number
				<input type="text" id="Endval" value="1" />
			</p>
			<!--Action buttons-->
			<p>        
                		<input type="button"id="displayShowButton" value="Slide Show" />
				<input type="button"id="displayRandoButton" value="Random Slide Show" />
				<input type="button"id="displayNextButton" value="Previous Slide" />
				<input type="button"id="displayLastButton" value="Next Slide" />
            		</p>
			<!--Reset Button-->
			<p>
				<input type="reset" value="Reset" />
			</p>
		</form>
                <script type="text/javascript">
                        /*<![CDATA[*/
			
			/*setting global variables*/
			var photosArrayGlobal;
			var photoIndexGlobal;
			var displayGlobal=document.getElementById("myImage")
        
                         /* calling main */
            		main();
        		function main() {
				document.getElementById("displayShowButton").onclick= setSequential;
				
				document.getElementById("displayRandoButton").onclick=setRandom;
			}
			/*Generate the size of the photoarrays */
			
			function createArray() {
				window.alert("create array");
				if (number > 0) {
					window.alert("there are"+number+"photos in your range");
					photosArrayGlobal= new Array (number);
					return photoArrayGlobal;
					getArrayPhotosNames();
				}
				Else {
					window.alert("there is one photo in your range");
					photosArrayGlobal = new Array (1);
					return photosArrayGlobal;
					getArrayPhotosNames();
					
										
				}
			}

			
			/*Designate that either a random or a sequential order has been requested,sequential=1/random=0*/
			function setSequential() {
				var mode= 1;
				window.alert("set sequential");
				checkRange();
				
			}
			function setRandom () {
				var mode= 0;
				window.alert("set random");
				checkRange ();
				
			}
			
			/*make sure end is start is less than end*/
			function checkRange() {
				window.alert("check range");
				var Start= document.getElementById("Startval");
				var Startnum = Start.value;
				var End = document.getElementById("Endval");
				var Endnum = End.value
				if (Endnum < Startnum){
					window.alert("Invalid Numbers");
				}
				else {
					window.alert("correct input");
					var range = Endnum - Startnum;
					window.alert(range);
					var number=Number(range);
					createArray ();
					
				}
				
				
			}
			
						
			/* This function will read the folder name, common name, start photo number, and end photo number and 			will return an array with the names of the photos that belong to the specified number range. Each 			photo's name consists of the folder name, followed by the common name, the photo's number and the 			".jpg" extension*/
			
			function getArrayPhotosNames () {
				window.alert("all done for now");
			}
			/*]]>*/
                </script>
        </body>
</html>

Html5 Canvas Slideshow With Text Display

Similar Tutorials

View Content

I am learning Javascript and HTML5...
I am trying to create a slideshow using canvas with text display of what the current image is. I have done this without canvas but I want to use canvas this time. My idea involves using the file name as the text display.
Here is my working slideshow..
Code:

<html>
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		
<title>Slide Show</title> 
<script type="text/javascript">	           
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script> 		
<script type="text/javascript">	



var imagePaths = [
				 
				"images/Summer.jpg", 
				"images/Spring.jpg", 
				"images/Fall.jpg",
				"images/Winter.jpg",
				"images/Puppies.jpg",
				"images/Duck.jpg"
			];
			var showCanvas = null;
			var showCanvasCtx = null;
			var img = document.createElement("img");
			var currentImage = 0;

			window.onload = function () {
				showCanvas = document.getElementById('showCanvas');
				showCanvasCtx = showCanvas.getContext('2d');
				
				img.setAttribute('width','480');
				img.setAttribute('height','360');
				
				}
			
			function nextImage() {
	currentImage++;		if (currentImage >= imagePaths.length) currentImage = 0;
	img.setAttribute('src',imagePaths[currentImage]);
	img.onload = function() {
		showCanvasCtx.drawImage(img,0,0,480,360);
	}
}
function prevImage() {
    currentImage--;        if (currentImage < 0) currentImage = imagePaths.length-1;
    img.setAttribute('src',imagePaths[currentImage]);
    img.onload = function() {
        showCanvasCtx.drawImage(img,0,0,480,360);
    }
}
			
			</script>

	<style type="text/css">
<!--
#showCanvas {
	background-image: url(images/Summer.jpg);
}

 
#center {
	height: 360px;
	width: 491px;
	float: right;
}
#slideArea {
	height: 381px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
#right {
	height: 361px;
	width: 52px;
	float: right;
}
#left {
	float: left;
	height: 360px;
	width: 52px;
}
#nxtBtn {
	width: 57px;
	height: 57px;
	position: relative;
	top: 120px;
}
#bkBtn {
	height: 57px;
	width: 57px;
	position: relative;
	top: 120px;
}
#displayText {
	width: 600px;
	height: 20px;
	float: left;
	text-align: center;
}
-->
    </style>
</head>
<body>
<br />
<div id="slideArea">
  <div id="right">
  <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
  </div>
<div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div>
  <div id="center">
    <center>
      <canvas id="showCanvas" width="480" height="360" >
        
        Your browser does not support the canvas tag.
        <br />
        Please upgrade your browser
        

        
      </canvas>
  
      
    </center>		
  </div>
  <div id="displayText">Display Text</div>
</div>
</body>
</html>

This is what I came up with so far but it doesn't work.

Code:

<html>
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		
<title>Slide Show</title> 
<script type="text/javascript">	           
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script> 		
<script type="text/javascript">	
////added this code to be able to pull the display text from "imageName"
var imagePath = ["images/];
var imageName = [
				 
				"Summer", 
				"Spring", 
				"Fall",
				"Winter",
				"Puppies",
				"Duck"
			];
var imagePaths =  imagePath + imageName + ".jpg";
/////////////////////



			var showCanvas = null;
			var showCanvasCtx = null;
			var img = document.createElement("img");
			var currentImage = 0;

			window.onload = function () {
				showCanvas = document.getElementById('showCanvas');
				showCanvasCtx = showCanvas.getContext('2d');
				
				img.setAttribute('width','480');
				img.setAttribute('height','360');
				
				}
			
			function nextImage() {
	currentImage++;		if (currentImage >= imagePaths.length) currentImage = 0;
	img.setAttribute('src',imagePaths[currentImage]);
	img.onload = function() {
		showCanvasCtx.drawImage(img,0,0,480,360);
	}
}
function prevImage() {
    currentImage--;        if (currentImage < 0) currentImage = imagePaths.length-1;
    img.setAttribute('src',imagePaths[currentImage]);
    img.onload = function() {
        showCanvasCtx.drawImage(img,0,0,480,360);
    }
}
			
			</script>

	<style type="text/css">
<!--
#showCanvas {
	background-image: url(images/Summer.jpg);
}

 
#center {
	height: 360px;
	width: 491px;
	float: right;
}
#slideArea {
	height: 381px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
#right {
	height: 361px;
	width: 52px;
	float: right;
}
#left {
	float: left;
	height: 360px;
	width: 52px;
}
#nxtBtn {
	width: 57px;
	height: 57px;
	position: relative;
	top: 120px;
}
#bkBtn {
	height: 57px;
	width: 57px;
	position: relative;
	top: 120px;
}
#displayText {
	width: 600px;
	height: 20px;
	float: left;
	text-align: center;
}
-->
    </style>
</head>
<body>
<br />
<div id="slideArea">
  <div id="right">
  <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
  </div>
<div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div>
  <div id="center">
    <center>
      <canvas id="showCanvas" width="480" height="360" >
        
        Your browser does not support the canvas tag.
        <br />
        Please upgrade your browser
        

        
      </canvas>
  
      
    </center>		
  </div>
  <div id="displayText">Display Text</div>
</div>
</body>
</htm>

Any help would be greatly appreciated.

Text Book Function Not Working

Similar Tutorials

View Content

I am studying Javascript from the Headfirstlabs book. Please see my coding below as per the instructions on page 26, the only thing that happens is the onload alert [Hello, I am your per rock] when the page loads, nothing else and no touchrock function or smiling face, I have the images where they should be. Can anyone tell me why it's not working on my end please?

Code:

<html>
  <head>
      <title>irock -The virtual Pet Rock</title>

     <script type="text/javascript">
         function touchrock ()  {
           var username = prompt ("What is your name?", "Enter your name here.");

           if (username) {
             alert ("It is good to meet you, " + username + ".");
             document.getElementByID ("rockImg").src = "rock_happy.png";
          }

        }

    </script>

  </head>

  <body onload="alert ('Hello, I am your pet rock.');">
     <div style="margin-top: 100px; text-align: center;">
       <img id="rockIMG" src="rock.png" alt="irock" />
     </div>

</body>
</html>

Parsing Text Not Working In 3d Projection Script.

Similar Tutorials

View Content

Well hello everyone, I have a small problem here. The problem is I have a script that draws 3d models that are in the OBJ Wavefront format onto the canvas. I have narrowed the problem I have down to a small section of the code, the code creates an array within an array to store the X,Y and Z co-ordinates, there is also some code that stores the linking of the vertices.
The arrays are as arranged as follows:

coordinate 0 X Y Z 1 2 3 etc. the vertices linking array is as above but with point 1 and point 2 as opposed to X,Y and Z. Within the array X,Y and Z (and also points 1 and 2 in their array) are numbered 0,1 and 2.

the code is this (I'll show it in context):
Code:

function drawmodel() {
var coordinate = new Array();
var edges = new Array();
textbox = document.getElementById('textbox');
fpos = textbox.value.search('f ') - 1;
coor = textbox.value.substr(0, fpos);
link = textbox.value.substr(fpos, textbox.value.length);
canvasthing = document.getElementById('main');
halfCW = canvasthing.width / 2;
halfCH = canvasthing.height / 2;
camZ = 0;
camX = halfCW;
camY = halfCH;
Xrot = 0;
Yrot = 0;
Zrot = 0;
FL = 10;
ctx = canvasthing.getContext('2d');
//Below (the two for loops) is where it's going wrong (well, one of the places anyway :)
for (i=0;i<coor.split('\n').length;i++) {
	var coordinate [i] = new Array(3);
	coordinate[i] = coor.split('\n')[i].substr(2).split(' ');
}
for (i=0;i<link.split('\n').length;i++) {
	var edges [i] = new Array(2);
	edges[i] = link.split('\n')[i].substr(2).split(' ');
}
j = 0;
ctx.beginPath();
while (j<edges.length) {
	XYprem = Math.sin(Yrot) * edges[j] [2];
	XY = Math.cos(Yrot) * edges[j] [1] - XYprem;
	XZprem = Math.cos(Yrot) * edges[j] [2];
	XZ = Math.sin(Yrot) * edges[j] [1] - XZprem;
	YXprem = Math.sin(Xrot) * edges[j] [0];
	YX = Math.cos(Xrot) * XZ - YXprem;
	YZprem = Math.cos(Xrot) * edges[j] [0];
	YZ = Math.sin(Xrot) * XZ - YZprem;
	ZXprem = Math.sin(Zrot) * XY;
	ZX = Math.cos(Zrot) * YX - ZXprem;
	ZYprem = Math.cos(Zrot) * XY;
	ZY = Math.sin(Zrot) * YX - ZYprem;
	FLZ = FL + YZ + edges[j] [2] - camZ;
	SF = FL / FLZ;
	XcX = ZX + edges[j] [0] - camX;
	YcY = ZY + edges[j] [1] - camY;
	X = XcX * SF + halfCW;
	Y = YcY * SF + halfCH;
	ctx.moveTo(X, Y);
	j++;
	XYprem = Math.sin(Yrot) * edges[j] [2];
	XY = Math.cos(Yrot) * edges[j] [1] - XYprem;
	XZprem = Math.cos(Yrot) * edges[j] [2];
	XZ = Math.sin(Yrot) * edges[j] [1] - XZprem;
	YXprem = Math.sin(Xrot) * edges[j] [0];
	YX = Math.cos(Xrot) * XZ - YXprem;
	YZprem = Math.cos(Xrot) * edges[j] [0];
	YZ = Math.sin(Xrot) * XZ - YZprem;
	ZXprem = Math.sin(Zrot) * XY;
	ZX = Math.cos(Zrot) * YX - ZXprem;
	ZYprem = Math.cos(Zrot) * XY;
	ZY = Math.sin(Zrot) * YX - ZYprem;
	FLZ = FL + YZ + edges[j] [2] - camZ;
	SF = FL / FLZ;
	XcX = ZX + edges[j] [0] - camX;
	YcY = ZY + edges[j] [1] - camY;
	X = XcX * SF + halfCW;
	Y = YcY * SF + halfCH;
	ctx.lineTo(X, Y);
	j++;
}
ctx.stroke();
}

I hope you understand my query and can solve my problem!

Thanks in advanced,
Alex.

Js Slideshow

Similar Tutorials

View Content

Need Help With Slideshow

Similar Tutorials

View Content

I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong?

Code:

window.onload = initLinks;

var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;

function initLinks() {
	document.getElementById("prevLink").onclick = processPrevious;
	document.getElementById("nextLink").onclick = processNext;

}



function processPrevious() {
	if (thisPic == 0) {
		thisPic = myPix.length;
	}
	thisPic--;
	document.getElementById("myPicture").src = myPix[thisPic];
	return false;
}

function processNext() {
	thisPic++;
	if (thisPic == myPix.length) {
		thisPic = 0;
	}
	document.getElementById("myPicture").src = myPix[thisPic];
	return false;
}

// Load Images
if (document.images) {  

  writeImg = new Image();      
  writeImg.src = (comic/Issue1_Page03.gif);
  
}

function imgOn(imgName) {
  if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}

  return false;
}


// Load Images
if (document.images) {  

  writeImg = new Image();      
  writeImg.src = (comic/Issue1_Page00.gif);
  
}

function imgOn(imgName) {
  if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}

  return false;
}

Help With Slideshow Please!

Similar Tutorials

View Content

This slideshow has a drop down menu that lets you go from one picture to another.

Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)?

I know absolutley nothing about javascript. sorry.

Thanks programmers!


<script type="text/javascript">
theimage = new Array();

theimage[0]=["url", "", "1"];
theimage[1]=["url", "", "2"];
theimage[2]=["url", "", "3"];

//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//"jump to" box
for (y=0;y<theimage.length;y++) {
document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
}

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if drop down box
if(document.slideshow.imgComboBox){
document.slideshow.imgComboBox.selectedIndex = i;
}

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];

}

//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}

//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}

//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}

</script>


<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select>
</td>
</tr>
</table>

</form>

Need Slideshow

Similar Tutorials

View Content

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks

Slideshow

Similar Tutorials

View Content

Hey im looking to get 3 slide shows on 1 website (coded in php).

I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this?

Need A Slideshow Like This

Similar Tutorials

View Content

hi evey one
I need a slideshow like this website .

zbiddy.com

as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide .

I've made my content for each slide and just need a script that change these content

I need your help very much
Thanks

Dom Slideshow

Similar Tutorials

View Content

I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back.

Here is the book and the case problem I am on:
http://books.google.com/books?id=BeE...page&q&f=false

Basically the images is not loading up, or anything is happening.

//EDIT : I have the function setup() onLoad in the body ( body onload="setup()" )

Here is my code:

FileName: flibrary.js

Code:

function getStyle(object, styleName) {
   if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
   } else if (object.currentStyle) {
      return object.currentStyle[styleName]
   }
}

// step 3
function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
            object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
   if (object.detachEvent)
       object.detachEvent("on" + evName, fnName);
   else if (object.removeEventListener)
            object.removeEventListener(evName, fnName, cap);
}

FileName: slideshows.js
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 6
   Case Problem 2

   Author:  
   Date:    

   Filename: slideshow.js


   Global Variables:
  
   scrollButton
      References the scrolling button in the slide show

   diffX
      Stores the horizontal distance in pixels between the
      mouse pointer when the scrolling button is clicked
      and the left edge of the scrolling button.

   Functions List:

   setup()
      Initializes the contents of the Web page. Creates
      event handlers for the mouse and keyboard events

   grabIt(e)
      "Grabs" the scrolling button to set up the
       horizontal scrolling of the slide show

   moveIt(e)
      Moves the scrolling button horizontally through
      the scrollbar

   showSlide(x)
      Shows the image corresponding the to the x coordinate
      on the scrollbar

   dropIt(e)
      Drops the scrolling button after the user releases the
      mouse button

   keyShow(e)
      Uses the left and right arrow keys to move the scrolling
      button through the scrollbar

*/

var scrollButton;
var diffX;
// step 7
function setup(){
	scrollButton = document.getElementById("button");
	scrollButton.style.top = getStyle(scrollButton,"top");
	scrollButton.style.left = getStyle(scrollButton,"left");
	scrollButton.style.cursor = "pointer";
	addEvent(scrollButton, "mousedown", grabIt, false);
	addEvent(document, "keydown", keyShow, false);
}	
// step 8
function grabIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	diffX = parseInt(scrollButton.style.left)- mouseX;
	addEvent(scrollButton, "mousemove", moveIt, false);
	addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	var buttonPosX = mouseX - diffX;
	showSlide();
}
// step 10
function showSlide(x){
	if(x<20){
		x = 20;
	}
	if(x>299){
		x = 299;
	}
	scrollButton.style.left = x;
	var i = Math.floor((x-20)/31);
	document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
	removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
	var evt = e || window.event;
	var key = event.keyCode;
	var buttonPosX = scrollButton.style.left;
	if(key == 37) buttonPosX -= 31;
	if(key == 39) buttonPosX += 31;
	showSlide(buttonPosX);
}

Please Help Me With This Slideshow

Similar Tutorials

View Content

Hello everybody!

first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem:

As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want...

Thank you very much!

S.P.