|
JavaScript - Custom Built Slideshow - Ie7< Errors
Hello everyone, i hope your good.
I decided when redesigning my website that i would try and build nearly everything in it by hand, which included a nice Javascript slideshow. While coding it (coded on Windows 7 and Vista) I ensured i checked it compatability with Firefox, IE, Chrome and Safari. From what i could tell everything was working good (except for some endless looping problems but lets ignore that for now). It even worked on the iPhone browser. But i sent it to a friend to test and they said nothing was working, after some discussion i descovered they were using IE7 (i was testing in IE8). From what i can see, IE7 has some problems with nested .appendChild and general document handling. I had tried to do my best keeping to using objects in javascript and now just writing HTML, and on one side it worked as it works on most browsers, but not IE7. The page it can be tested on it: http://xvolt.x-volt.com/downloads/view.php?id=3 And the code itself is: http://xvolt.x-volt.com/js/slideshow.js The code is nearly all based in a class, but i kept finding problems so there are a few functions found outside the class. The area where most things go wrong is in the function: this.goToImage = function (image) { As this is used to generate the floating div above all the content. This function also uses IMG objects which are hidden until the image has loaded (instead showing a nice please wait logo) and then once loaded it appears. I have tried using .innerHTML to get around the append child problems but the images dont seem to work the same as just passing object around. If anyone has any tips to get around this would be awesome as this little self project has seemed to become harder then i thought! Thanks Simon Similar TutorialsI am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug. 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>
<body>
<div id="page-wrap">
<button id="nextButton2">next('div')</button>
<button id="prevButton2">prev('div')</button>
<div id="start" style="background: none repeat scroll 0% 0% red;"></div>
<div id="link_Babbling Brook" class="art">
<div id="link_Botany 101" class="art">
<div id="link_Cracking Up" class="art">
<div id="link_Eclipse" class="art">
<div id="link_Equinox" class="art">
<div id="link_Foliage Fluoresced" class="art">
<div id="link_In Vein" class="art">
<div id="link_Microscopic" class="art">
<div id="link_Pickup Sticks" class="art">
<div id="link_Relief" class="art">
<div id="link_Rhubarb" class="art">
<div id="link_Snow Dyed Shibori" class="art">
<div id="link_Symmetry" class="art">
<div id="link_Undulations" class="art">
<div id="link_Willow Mist" class="art">
<div id="link_Wired" class="art">
</div>
</body>
</html>
Javascript code Code: if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('art').each(function () {
var id = $(this).attr('id');
var name = $(this).find('name').text();
var full = $(this).find('large').text();
var detail = $(this).find('detail').text();
var thumb = $(this).find('thumb').text();
var category = $(this).find('category').text();
var dimensions = $(this).find('dimensions').text();
var description = $(this).find('description').text();
var detailthumb = '<img src= " ' + thumb + ' " />';
var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>';
var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />';
$('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap');
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#nextButton2").click(function () {
if(!$currElement.next('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#prevButton2").click(function () {
if(!$currElement.prev('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.prev('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
}
});
});
Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP 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 I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one. I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript. I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas? Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230. I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks! I am having difficulty with the isNaN built-in function. Here is the code that I have written, with the event handler onchange, the function does not return the desired response. Any information would be appreciated... function checkNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("You must enter a numeric value!"); return false; } } Here is an example of the event handler code...one of three calls to this specific function... <input type="text" name="zip_billing" size="5" maxlength="5" onchange=" return checkNumber(this.value);" /> I am building iframes from database entries. Is it possible to resize them with an onclick event?
Hi all, I was following this tutorial for a jquery based scroller but I am having some problems: http://www.webdesignbooth.com/create...carousel-lite/ When it loads the block starts out as I want it then suddenly squeezes down and chops the text? The area in question is 'Featured Employers' http://www.beta.educationvacancies.com/index.php Can anyone advise? many thanks, greens85 Hi all, I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible. I don't even know what this behavior is called so it's hard to get started. Any help or pointers in the right direction will be much appreciated. Anita. Cape Town. I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with: Code: function ObjButtonBuild() {
this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
if(this.accessKeyValue && this.accessKeyValue!=null){
this.divInt+=' accessKey='+this.accessKeyValue+' ';
}
if( this.altName ) this.divInt += ' title="'+this.altName+'"'
else if( this.altName != null ) this.divInt += ' title=""'
this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
if( this.altName ) this.divInt += '" alt="'+this.altName
else if( this.altName != null ) this.divInt += '" alt="'
this.divInt += '" width='+this.w+' height='+this.h+' border=0'
if( !is.ns4 ) this.divInt += ' style="cursor:pointer"'
this.divInt += '></a>'
}
Code: button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()
I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript">
function translate() {
if (document.form1.elements[0].checked == true) {
EtoA()
} else if (document.form1.elements[1].checked == true) {
AtoE()
} else {
}
}
function EtoA() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "a") {
tempb = "9"
} else if(tempa == "b") {
tempb = "a"
} else if(tempa == "c") {
tempb = "0"
} else if(tempa == "d") {
tempb = "c"
} else if(tempa == "e") {
tempb = "3"
} else if(tempa == "f") {
tempb = "b"
} else if(tempa == "g") {
tempb = "4"
} else if(tempa == "h") {
tempb = "?"
} else if(tempa == "i") {
tempb = "5"
} else if(tempa == "j") {
tempb = "6"
} else if(tempa == "k") {
tempb = "e"
} else if(tempa == "l") {
tempb = "+"
} else if(tempa == "m") {
tempb = "x"
} else if(tempa == "n") {
tempb = "7"
} else if(tempa == "o") {
tempb = "v"
} else if(tempa == "p") {
tempb = "1"
} else if(tempa == "q") {
tempb = "t"
} else if(tempa == "r") {
tempb = "q"
} else if(tempa == "s") {
tempb = "g"
} else if(tempa == "t") {
tempb = "n"
} else if(tempa == "u") {
tempb = "<"
} else if(tempa == "v") {
tempb = ">"
} else if(tempa == "w") {
tempb = "^"
} else if(tempa == "x") {
tempb = "!"
} else if(tempa == "y") {
tempb = "@"
} else if(tempa == "z") {
tempb = "#"
} else if(tempa == "A") {
tempb = "9"
} else if(tempa == "B") {
tempb = "a"
} else if(tempa == "C") {
tempb = "0"
} else if(tempa == "D") {
tempb = "c"
} else if(tempa == "E") {
tempb = "3"
} else if(tempa == "F") {
tempb = "b"
} else if(tempa == "G") {
tempb = "4"
} else if(tempa == "H") {
tempb = "h"
} else if(tempa == "I") {
tempb = "5"
} else if(tempa == "J") {
tempb = "6"
} else if(tempa == "K") {
tempb = "e"
} else if(tempa == "L") {
tempb = "f"
} else if(tempa == "M") {
tempb = "x"
} else if(tempa == "N") {
tempb = "7"
} else if(tempa == "O") {
tempb = "v"
} else if(tempa == "P") {
tempb = "1"
} else if(tempa == "Q") {
tempb = "t"
} else if(tempa == "R") {
tempb = "q"
} else if(tempa == "S") {
tempb = "g"
} else if(tempa == "T") {
tempb = "n"
} else if(tempa == "U") {
tempb = "<"
} else if(tempa == "V") {
tempb = ">"
} else if(tempa == "W") {
tempb = "^"
} else if(tempa == "X") {
tempb = "!"
} else if(tempa == "Y") {
tempb = "@"
} else if(tempa == "Z") {
tempb = "#"
} else if(tempa == "1") {
tempb = "}"
} else if(tempa == "2") {
tempb = "{"
} else if(tempa == "3") {
tempb = "("
} else if(tempa == "4") {
tempb = "'"
} else if(tempa == "5") {
tempb = "|"
} else if(tempa == "6") {
tempb = "`"
} else if(tempa == "7") {
tempb = ":"
} else if(tempa == "8") {
tempb = ";"
} else if(tempa == "9") {
tempb = "="
} else if(tempa == "0") {
tempb = ")"
} else if(tempa == "~") {
tempb = "R"
} else if(tempa == "!") {
tempb = "T"
} else if(tempa == "@") {
tempb = "F"
} else if(tempa == "#") {
tempb = "Y"
} else if(tempa == "$") {
tempb = "K"
} else if(tempa == "%") {
tempb = "J"
} else if(tempa == "^") {
tempb = "H"
} else if(tempa == "&") {
tempb = "G"
} else if(tempa == "*") {
tempb = "X"
} else if(tempa == "_") {
tempb = "V"
} else if(tempa == "-") {
tempb = "B"
} else if(tempa == "+") {
tempb = "M"
} else if(tempa == "=") {
} else if(tempa == "<") {
tempb = "N"
} else if(tempa == ">") {
tempb = "U"
} else if(tempa == ".") {
tempb = "S"
} else if(tempa == ",") {
tempb = "W"
} else if(tempa == "?") {
tempb = "."
} else if(tempa == ":") {
tempb = ","
} else if(tempa == ";") {
tempb = "$"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
function AtoE() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "9") {
tempb = "a"
} else if(tempa == "a") {
tempb = "b"
} else if(tempa == "0") {
tempb = "c"
} else if(tempa == "c") {
tempb = "d"
} else if(tempa == "3") {
tempb = "e"
} else if(tempa == "b") {
tempb = "f"
} else if(tempa == "4") {
tempb = "g"
} else if(tempa == "?") {
tempb = "h"
} else if(tempa == "5") {
tempb = "i"
} else if(tempa == "6") {
tempb = "j"
} else if(tempa == "e") {
tempb = "k"
} else if(tempa == "+") {
tempb = "l"
} else if(tempa == "x") {
tempb = "m"
} else if(tempa == "7") {
tempb = "n"
} else if(tempa == "v") {
tempb = "o"
} else if(tempa == "1") {
tempb = "p"
} else if(tempa == "t") {
tempb = "q"
} else if(tempa == "q") {
tempb = "r"
} else if(tempa == "g") {
tempb = "s"
} else if(tempa == "n") {
tempb = "t"
} else if(tempa == "<") {
tempb = "u"
} else if(tempa == ">") {
tempb = "v"
} else if(tempa == "^") {
tempb = "w"
} else if(tempa == "!") {
tempb = "x"
} else if(tempa == "@") {
tempb = "y"
} else if(tempa == "#") {
tempb = "z"
} else if(tempa == "9") {
tempb = "A"
} else if(tempa == "a") {
tempb = "B"
} else if(tempa == "0") {
tempb = "C"
} else if(tempa == "c") {
tempb = "D"
} else if(tempa == "3") {
tempb = "E"
} else if(tempa == "b") {
tempb = "F"
} else if(tempa == "4") {
tempb = "G"
} else if(tempa == "?") {
tempb = "H"
} else if(tempa == "5") {
tempb = "I"
} else if(tempa == "6") {
tempb = "J"
} else if(tempa == "e") {
tempb = "K"
} else if(tempa == "+") {
tempb = "L"
} else if(tempa == "x") {
tempb = "M"
} else if(tempa == "7") {
tempb = "N"
} else if(tempa == "v") {
tempb = "O"
} else if(tempa == "1") {
tempb = "P"
} else if(tempa == "t") {
tempb = "Q"
} else if(tempa == "q") {
tempb = "R"
} else if(tempa == "g") {
tempb = "S"
} else if(tempa == "n") {
tempb = "T"
} else if(tempa == "<") {
tempb = "U"
} else if(tempa == ">") {
tempb = "V"
} else if(tempa == "^") {
tempb = "W"
} else if(tempa == "!") {
tempb = "X"
} else if(tempa == "@") {
tempb = "Y"
} else if(tempa == "#") {
tempb = "Z"
} else if(tempa == "}") {
tempb = "1"
} else if(tempa == "{") {
tempb = "2"
} else if(tempa == "(") {
tempb = "3"
} else if(tempa == "'") {
tempb = "4"
} else if(tempa == "|") {
tempb = "5"
} else if(tempa == "`") {
tempb = "6"
} else if(tempa == ":") {
tempb = "7"
} else if(tempa == ";") {
tempb = "8"
} else if(tempa == "=") {
tempb = "9"
} else if(tempa == ")") {
tempb = "0"
} else if(tempa == "R") {
tempb = "~"
} else if(tempa == "T") {
tempb = "!"
} else if(tempa == "F") {
tempb = "@"
} else if(tempa == "Y") {
tempb = "#"
} else if(tempa == "K") {
tempb = "$"
} else if(tempa == "J") {
tempb = "%"
} else if(tempa == "H") {
tempb = "^"
} else if(tempa == "G") {
tempb = "&"
} else if(tempa == "X") {
tempb = "*"
} else if(tempa == "V") {
tempb = "_"
} else if(tempa == "B") {
tempb = "-"
} else if(tempa == "M") {
tempb = "+"
} else if(tempa == "N") {
tempb = "<"
} else if(tempa == "U") {
tempb = ">"
} else if(tempa == "S") {
tempb = "."
} else if(tempa == "W") {
tempb = ","
} else if(tempa == ".") {
tempb = "?"
} else if(tempa == ",") {
tempb = ":"
} else if(tempa == "$") {
tempb = ";"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() {
var ele = document.getElementById("dropdown-items");
var text = document.getElementById("dropdown-menu");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
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! <!-- configurable script --> <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> <!-- slide show HTML --> <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> <!-- end of slide show HTML --> I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images Code:
<div id="imageBox">
<!-- Random Images -->
<img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />
</div>
and here is the external .js file for it Code:
window.onload = pics;
var thisPic = 0;
var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");
function pics(){
thisPic = Math.floor((Math.random() * schoolImages.length));
document.getElementById('randImage').src = schoolImages[thisPic];
cycle();
}
function cycle(){
thisPic++;
if(thisPic == schoolImages.length){
thisPic = 0;
}
document.getElementById('randImage').src = schoolImages[thisPic];
setTimeout(cycle, 3 * 1000);
}
I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now? Code: var mySlideShow = document.getElementById("slideShow");
var imageArray=new Array();
imageArray[0]="url(images/Slide1.JPG)";
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";
var imageIndex = 0;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
function changeRight () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 1;
}
console.log(imageIndex);
}
function changeLeft () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
}
rightArrow.onclick = function() {
changeRight();
}
leftArrow.onclick = function() {
changeLeft();
}
So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. 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. Solved
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);
}
|
|||||||