
twoweektrial
New Members-
Posts
8 -
Joined
-
Last visited
Never
Everything posted by twoweektrial
-
If you could post the javascript you've written that would be helpful. Aside from that you'd want to do something like function change(element) { if(element.id == 'name') { document.getElementsById('preview_name').innerHTML = element.innerHTML; } }
-
I have a slideshow I've been working on for a few hours, and for some reason I can't seem to access global variables Here's the code: // Slideshow processor var images = new Array(); var current = 0; function setup_gallery() { if (window.XMLHttpRequest) { xml=new XMLHttpRequest(); } else { xml=new ActiveXObject("Microsoft.XMLHTTP"); } xml.onreadystatechange=function() { if (xml.readyState==4 && xml.status==200) { images = xml.responseText.split(" "); } } xml.open("GET", "/inc/image_grabber.php", true); xml.send(); $("ss_first").onClick = first(); $("ss_last").onClick = last(); $("ss_next").onClick = next(); $("ss_previous").onClick = previous(); change_image(current); } function change_image(next) { var e = $("picture_frame"); e.href = images[next]; } //The following four functions modify 'current' and then change the image function first() { current = 0; change_image(current); } function last() { current = images.length - 1; change_image(current); } function next() { current++; if(current >= images.length) { current = 0; } change_image(current); } function previous() { current--; if(current <= 0) { current = images.length + 1; } change_image(current); } This is using a php page that returns a string of image names separated by spaces. When I run the code, images[0] is undefined. I may have left out something valuable, but I'm a little frazzled, so thanks in advance for your help.
-
ILMV, I took a look at their site projection, and it looks like they essentially already had most of the links you suggested. The important thing for a web design company is for the user to want a website, and then to want you to make it for them. They appear to be on the right track. Also, you should avoid critiquing content before they've put any meaningful content on the page. Furthermore, I took a look at your site, and you're essentially suggesting they remake yours. Also, as a company, and not an individual/hobbyist, they are expected to have more than a simple layout with basic content. If I were to hire someone to build me a site, I'd want to be impressed by theirs. -bean
-
lower-cased onreadystatechange, but still doesn't work in firefox. IE8 gives no errors either (had to upgrade). Also, the error console comes up with nothing.
-
Well, I moved the code to the state_action() function, and extended the if(xml.readyState == 4) statement to encompass that code, but still no dice. I also added some extra functionality, not sure if that's breaking it. Also, still works in IE just fine. function setup_gallery() { image_location = 0; images = new Array(); xml = create_request_object(); xml.onReadyStateChange = state_action; xml.open("GET", "scan_dir.php", false); xml.send(null); /* change_image(0); var i; $('mini_gallery').innerHTML += "<table id='mini_gallery_table'><tr>"; for(i = 0; i < images.length; i++) { $('mini_gallery').innerHTML += '<td><img src="/images/show/'+images[i]+'" class="mini" /><td>'; if(i%5 == 0) { $('mini_gallery').innerHTML += "</tr><tr>"; } } $('mini_gallery').innerHTML += "</tr></table>"; */ } function change_image(loc) { var temp = images[loc].split("."); var header = temp[0]; $("display_header").innerHTML = header; $("display_image").src = "/images/show/"+images[loc]; fadeIn("display_image"); } function first() { image_location = 0; change_image(image_location); } function last() { image_location = images.length-1; change_image(image_location); } function next() { image_location++; if(image_location >= images.length) { image_location = 0; } change_image(image_location); } function previous() { image_location--; if(image_location < 0) { image_location = images.length-1; } change_image(image_location); } function create_request_object() { /* create_request parameters: none returns AJAX object on success returns false on failure function creates an AJAX object and returns it. */ var xmlhttp; if (window.XMLHttpRequest) { //IE 7+, Firefox, Opera, Chrome, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE 5, 6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser."); return false; } return xmlhttp; } function state_action() { if(xml.readyState == 4 || xml.readyState == "complete") { images = eval("["+xml.responseText+"]"); change_image(0); var i; $('mini_gallery').innerHTML += "<table id='mini_gallery_table'><tr>"; for(i = 0; i < images.length; i++) { $('mini_gallery').innerHTML += '<td><img src="/images/show/'+images[i]+'" class="mini" />'; if(i%5 == 0) { $('mini_gallery').innerHTML += "</tr><tr>"; } } $('mini_gallery').innerHTML += "</tr></table>"; } } function fadeIn(element) { new Effect.Opacity(element, {duration:2, from:0, to:1.0}); }
-
AJAX photo gallery works in IE, not in FF
twoweektrial replied to twoweektrial's topic in Javascript Help
The script doesn't stop in IE, and firebug isn't giving any errors : ( -
I've got a js library I've created to allow users to cycle through images. In IE, this works flawlessly, but in firefox, the js page loads, and the php file I created sends the proper request back to the client, but then nothing happens. I've tried using firebug, but haven't been able to find the cause. JS: function setup_gallery() { image_location = 0; images = new Array(); xml = create_request_object(); xml.onReadyStateChange = state_action; xml.open("GET", "scan_dir.php", true); xml.send(null); change_image(0); } function change_image(loc) { document.getElementById("display_image").src = "/images/show/"+images[loc]; } function first() { image_location = 0; change_image(image_location); } function last() { image_location = images.length; change_image(image_location); } function next() { image_location++; if(image_location > images.length) { image_location = 0; } change_image(image_location); } function previous() { image_location--; if(image_location < 0) { image_location = images.length-1; } change_image(image_location); } function create_request_object() { /* create_request parameters: none returns AJAX object on success returns false on failure function creates an AJAX object and returns it. */ var xmlhttp; if (window.XMLHttpRequest) { //IE 7+, Firefox, Opera, Chrome, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE 5, 6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser."); return false; } return xmlhttp; } function state_action() { if(xml.readyState == 4 || xml.readyState == "complete") { images = eval("["+xml.responseText+"]"); } } PHP <?php $dir='../images/show/'; $ftype='jpg'; $files=scandir($dir); $jpg=""; foreach($files as $f) { $file=$dir."/".$f; if(!is_dir($file)) { $type=end(explode(".", $file)); if($type == $ftype) { $nf=str_replace(" ", "&&|", $f); $jpg .= "'$nf' "; } } } $jpg=trim($jpg); $jpg=str_replace(" ", ", ", $jpg); $jpg=str_replace("&&|", " ", $jpg); echo $jpg; ?> And here is the html file just in case <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ByteCannon Web Design - Demo Art</title> <meta name="keywords" content="Bytecannon, Bytecannon Web Design, web design, web, design, custom web design, custom, san luis"></meta> <meta name="synonyms" content="Byte Cannon, slo"></meta> <meta name="author" id="author" content="ByteCannon Web Design"></meta> <link rel="stylesheet" type="text/css" href="/style.css" /> <script type="text/javascript" src="/js_frame/prototype.js"></script> <script type="text/javascript" src="/js_frame/scriptaculous.js"></script> <script type="text/javascript" src="gallery.js"></script> </head> <body onload="setup_gallery()"> <div id='nav'> <ul> <li> <a href='/' title='Return to the homepage'>Home</a> </li> <li> <a href='/pricing/' title='A general reference to Bytecannon Prices'>Prices</a> </li> <li> <a href="/art/" title="Demo page art.">Demo Art</a> </li> <li> <a href='/contact/' title='Contact Via Web Based E-mail or by Phone'>Contact</a> </li> </ul> </div> <div id="banner" title="ByteCannon Web Design"> </div> <div id='main'> <div id="photo_display"> <img id="display_image" src="/images/gallery/bg.jpg" alt="ByteCannon Web Design" /></div> <div id="photo_nav"> <img onClick="first();" src="/images/first.jpg" alt="First" /> <img onClick="previous();" src="/images/prev.jpg" alt="Prev" /> <img onClick="next();" src="/images/next.jpg" alt="Next" /> <img onClick="last();" src="/images/last.jpg" alt="Last" /> </div> </div> </body> </html> Thanks for your help in advance
-
I have an image gallery that lets people navigate through images. The php file receiving the request returns a string like: 'one.jpg', 'two.jpg' etc. I'm not sure what the problem is, but if you can help I would appreciate it very much. I will post the js file and php file below. JS: function setup_gallery() { image_location = 0; images = new Array(); xml = create_request_object(); xml.onReadyStateChange = state_action; xml.open("GET", "scan_dir.php", true); xml.send(null); change_image(0); } function change_image(loc) { document.getElementById("display_image").src = "/images/show/"+images[loc]; } function first() { image_location = 0; change_image(image_location); } function last() { image_location = images.length; change_image(image_location); } function next() { image_location++; if(image_location > images.length) { image_location = 0; } change_image(image_location); } function previous() { image_location--; if(image_location < 0) { image_location = images.length-1; } change_image(image_location); } function create_request_object() { /* create_request parameters: none returns AJAX object on success returns false on failure function creates an AJAX object and returns it. */ var xmlhttp; if (window.XMLHttpRequest) { //IE 7+, Firefox, Opera, Chrome, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE 5, 6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser."); return false; } return xmlhttp; } function state_action() { if(xml.readyState == 4 || xml.readyState == "complete") { images = eval("["+xml.responseText+"]"); } } PHP <?php $dir='../images/show/'; $ftype='jpg'; $files=scandir($dir); $jpg=""; foreach($files as $f) { $file=$dir."/".$f; if(!is_dir($file)) { $type=end(explode(".", $file)); if($type == $ftype) { $nf=str_replace(" ", "&&|", $f); $jpg .= "'$nf' "; } } } $jpg=trim($jpg); $jpg=str_replace(" ", ", ", $jpg); $jpg=str_replace("&&|", " ", $jpg); echo $jpg; ?> And here is the html file just in case <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ByteCannon Web Design - Demo Art</title> <meta name="keywords" content="Bytecannon, Bytecannon Web Design, web design, web, design, custom web design, custom, san luis"></meta> <meta name="synonyms" content="Byte Cannon, slo"></meta> <meta name="author" id="author" content="ByteCannon Web Design"></meta> <link rel="stylesheet" type="text/css" href="/style.css" /> <script type="text/javascript" src="/js_frame/prototype.js"></script> <script type="text/javascript" src="/js_frame/scriptaculous.js"></script> <script type="text/javascript" src="gallery.js"></script> </head> <body onload="setup_gallery()"> <div id='nav'> <ul> <li> <a href='/' title='Return to the homepage'>Home</a> </li> <li> <a href='/pricing/' title='A general reference to Bytecannon Prices'>Prices</a> </li> <li> <a href="/art/" title="Demo page art.">Demo Art</a> </li> <li> <a href='/contact/' title='Contact Via Web Based E-mail or by Phone'>Contact</a> </li> </ul> </div> <div id="banner" title="ByteCannon Web Design"> </div> <div id='main'> <div id="photo_display"> <img id="display_image" src="/images/gallery/bg.jpg" alt="ByteCannon Web Design" /></div> <div id="photo_nav"> <img onClick="first();" src="/images/first.jpg" alt="First" /> <img onClick="previous();" src="/images/prev.jpg" alt="Prev" /> <img onClick="next();" src="/images/next.jpg" alt="Next" /> <img onClick="last();" src="/images/last.jpg" alt="Last" /> </div> </div> </body> </html> Thanks for your help in advance