tinfanide Posted September 23, 2011 Share Posted September 23, 2011 <!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>Untitled Document</title><script>var XMLHttpRequestObject = false;if (window.XMLHttpRequest) {XMLHttpRequestObject = new XMLHttpRequest();} else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); }function getData(dataSource, divID){if (XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function(){ if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } } XMLHttpRequestObject.send(null);}</script></head><body><form><input type="button" value="Display" onclick="getData('js-SlideShowComplete[TEST].html','div')" /></form><div id="div">TEXT</div></body></html> I'm using AJAX to include a html page in a div where images are not shown. The code for the html page:The html standalone works perfectly with all the images.(just for reference; too long; don't have a deep look at this because I've tested the below one for many times) <!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"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>JS: SlideShow AutoPlay ShufflePlay BooleanControl</title><script type="text/javascript">var DFsIv = 1000; var img = [];img[img.length] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", cap: "Google", url: "http://www.google.co.uk/", des: "Google is the best search engine!", sIv: DFsIv, }; img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", cap: "Youtube", url: "http://www.youtube.com/", des: "Youtube is the best video platform! <br /> preset to be held 5 sec before faded out", sIv: 5000, }; img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", cap: "Facebook", url: "http://www.facebook.com/", des: "Facebook is the best social network site!", sIv: DFsIv, };img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg", cap: "Twitter", url: "http://twitter.com/", des: "Twitter is the best social network site!", sIv: DFsIv, }; img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", cap: "Adobe", url: "http://www.adobe.com/", des: "Adobe is the best multimedia creation software collection!", sIv: DFsIv, }; img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg", cap: "MS Office", url: "http://office.microsoft.com/en-gb/", des: "MS Office is the best office software collection! <br /> preset to be held 5 sec before faded out", sIv: 5000, }; for (var imgs=[], i=0; i<img.length; i++){imgs[i] = new Image();imgs[i].src = img[i].src; } var curPic = -1;var fadeTimer;var speed = 50;var opacStep = 0.5;var dirn;var curOpac = 10;var ctrl;var showTimer;window.onload = function(){imgSlider = document.getElementById('imgSlides');imgSlider.src = "http://1.bp.blogspot.com/_Mt4qyhflsHY/S8bE1G8JnyI/AAAAAAAAAgQ/Dhtm4ARMuXo/s1600/javascript_call.png"; for(var x=0; x<img.length; x++){ var icon = document.createElement('img'); icon.setAttribute("onclick","thumbnails(" + x +")"); icon.setAttribute("src",img[x].src); icon.setAttribute("width","100px"); icon.setAttribute("height","100px"); icon.setAttribute("style","padding-right:15px"); document.getElementById("thumbnails").appendChild(icon); icon.className = "thumbnailsEffects"; }} function prevImage(){if(fadeTimer){clearInterval(fadeTimer);}fadeTimer = setInterval(setOpacity,speed);function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; prevImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; document.getElementById("prevImage").onclick = prevImage; return; } if (imgSlider.style.opacity=="string"){ imgSlider.style.opacity = curOpac/10; } else { imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')'; imgSlider.style.MozOpacity = curOpac/10; } }function swapImage(){ curPic = (--curPic < 0) ? img.length-1 : curPic; imgSlider.src = img[curPic].src; captionLine(); slideDesc(); imgSlidesLinks(); }}function nextImage(){if(fadeTimer){clearInterval(fadeTimer);}fadeTimer = setInterval(setOpacity,speed);function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; nextImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; document.getElementById("nextImage").onclick = nextImage; return; } if (imgSlider.style.opacity=="string"){ imgSlider.style.opacity = curOpac/10; } else { imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')'; imgSlider.style.MozOpacity = curOpac/10; } }function swapImage(){ curPic = (++curPic > img.length-1) ? 0 : curPic; imgSlider.src = img[curPic].src; captionLine(); slideDesc(); imgSlidesLinks(); }}rand = Math.ceil(Math.random()*2)-1;dirn = -1;function autoImage(){ if(fadeTimer){clearInterval(fadeTimer);} fadeTimer = setInterval(setOpacity,speed); function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; autoImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; showTimer = setTimeout(autoImage,img[curPic].sIv); return; } if (imgSlider.style.opacity=="string"){ imgSlider.style.opacity = curOpac/10; } else { imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')'; imgSlider.style.MozOpacity = curOpac/10; } } function swapImage(){ if(rand==0){curPic = (++curPic > img.length-1) ? 0 : curPic;} else {curPic = (--curPic < 0) ? img.length-1 : curPic;} imgSlider.src = img[curPic].src; captionLine(); slideDesc(); imgSlidesLinks(); } }function shuffleImage(){ if(fadeTimer){clearInterval(fadeTimer);} fadeTimer = setInterval(setOpacity,speed); function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; shuffleImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; showTimer = setTimeout(shuffleImage,img[curPic].sIv); return; } if (imgSlider.style.opacity=="string"){ imgSlider.style.opacity = curOpac/10; } else { imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')'; imgSlider.style.MozOpacity = curOpac/10; } } function swapImage(){ curPic = Math.ceil(Math.random()*img.length)-1; imgSlider.src = img[curPic].src; captionLine(); slideDesc(); imgSlidesLinks(); } } function thumbnails(x){ curPic = x; document.getElementById("imgSlides").src = img[curPic].src; captionLine(); slideDesc(); imgSlidesLinks(); clearInterval(fadeTimer); clearTimeout(showTimer);}function captionLine(){ document.getElementById("caption").innerHTML = img[curPic].cap;}function slideDesc(){ document.getElementById("slideDescription").innerHTML = img[curPic].des;}function imgSlidesLinks(){ document.getElementById("imgSlidesLinks").setAttribute("href",img[curPic].url); document.getElementById("urlDisplay").innerHTML = "<b><font color='black'>Slide Source:</font></b> " + "<a href='" + img[curPic].url + "'target='_blank'>" + img[curPic].url + "</a>";}auto = true;function autoCtrl(){ if(!auto){ clearInterval(fadeTimer); clearTimeout(showTimer); auto = true; } else{ autoImage(); auto = false; } }shuffle = true;function shuffleCtrl(){ if(!shuffle){ clearInterval(fadeTimer); clearTimeout(showTimer); shuffle = true; } else{ shuffleImage(); shuffle = false; }}</script><style>a {text-decoration: none;}a:focus {outline: none;}#thumbnails {position: absolute;top: 0;left: 0;width: 900px;height: 100px;}.thumbnailsEffects:hover {background-color: #FF0;width: 102px;height: 102px;}#imgSlides {position: absolute;top: 100px;left: 0;width: 500px;height: 500px;border: none;}#controlPanel {position: absolute;top: 600px;left: 0;width: 500px;height: 50px;text-align: center;}#caption {position: absolute;top: 100px;left: 500px;width: 400px;height: 50px;text-align: center;font-size: 28px;color: black;}#slideDescription {position: absolute;top: 150px;left: 500px;width: 400px;height: 450px;font-size: 18px;color: black;}#urlDisplay {position: absolute;left: 500px;top: 600px;color: blue;}</style></head><body><div id="thumbnails"></div><a id="imgSlidesLinks" href="#"><img id="imgSlides" src="" /></a><br /><div id="controlPanel"><a id="prevImage" href="javascript: prevImage()">PREV</a><a id="nextImage" href="javascript: nextImage()">NEXT</a><a href="javascript: autoCtrl()" title="Play / Pause">AUTO</a><a href="javascript: shuffleCtrl()">SHUFFLE</a></div><br /><div id="caption">JavaScript SlideShow</div><div id="slideDescription">Support images (not videos) only on the slide at present<br /><br />Use transparent images (in png) so that when they are shown as thumbnails, the hover effect can be seen<p style="position: absolute; bottom: 0; font-size: 14px;">Javascript makes slideshows as better as Flash does!</p></div><div id="urlDisplay">The image-slide url is displayed here</div></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted September 23, 2011 Author Share Posted September 23, 2011 Sorry...asking too fastI've seen the problem with the line requestText No wonder in the innerHTML only texts are shown. Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2011 Share Posted September 23, 2011 responseText isn't the problem. Response text is able to be parsed as HTML. The problem is the way you're loading an entire page. It's not a really good idea. First of all, it means you're putting extra <!DOCTYPE>, <html>, <head> and <body> tags in your document. The second problem is that the window.onload event won't fire because the window already loaded before the AJAX call was performed. Link to comment Share on other sites More sharing options...
tinfanide Posted September 23, 2011 Author Share Posted September 23, 2011 Does that mean by the first problem ya mentioned using AJAX to load an entire page which contains all those html markups is not a good choice? Or I should use PHP? Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2011 Share Posted September 23, 2011 If you just do it to include the files, then I don't recommend AJAX at all. It's a really bad idea, because users who have Javascript disabled can't navigate your site. If you're including files, using AJAX or PHP, only load the content you need, don't put things like DOCTYPE or <html>, <head> and <body> tags. Link to comment Share on other sites More sharing options...
tinfanide Posted September 23, 2011 Author Share Posted September 23, 2011 If you just do it to include the files, then I don't recommend AJAX at all. It's a really bad idea, because users who have Javascript disabled can't navigate your site. If you're including files, using AJAX or PHP, only load the content you need, don't put things like DOCTYPE or <html>, <head> and <body> tags. Sorry... can't understand what ya're saying between the lines.The first and second ones do also talk about "include files". Then, what's the difference between the situations where AJAX is recommended or not? Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2011 Share Posted September 23, 2011 Including a file just means loading content from a different file into the current one. You might have a document like this: <div id="content"> <!-- Put content here from include.html --></div> The file "include.html" could look something like this: <h1>My website</h1><p>This is my website, and include.html contains the content of the home page.</p> It would have that, and nothing more, because all the necessary elements are already on the page that the file is included into.When should you use AJAX?AJAX should only be a convenience for users to do things without having to reload the page. For example, when you edit a post on this forum it uses AJAX to put an edit box right into your post and then submit it without reloading the page. If Javascript isn't activated, you'll still be able to edit your post, it just won't be as convenient because you'll have to load a new page. Link to comment Share on other sites More sharing options...
tinfanide Posted September 28, 2011 Author Share Posted September 28, 2011 But how about in my case mentioned in the earliest post?I want users not to have to reload a page while they can be viewing the slideshow page. Originally I'd like to use php menuAnd I thought it'd be nice to use AJAX so that the images on the slideshow load time is shorter than it should be.Am I getting the AJAX concept wrong?Any difference between PHP menu and AJAX menu? Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2011 Share Posted September 28, 2011 well, you should know that PHP executes on the server side, and by the time the browser get's any code, PHP has finished executing. What you can do is use AJAX to make a request to PHP script and have it do some stuff and return a response that you can have Javascript use it to update the page, so the user doesn't have to reload a page just for some new content. So a PHP menu would be "done" by the time a page loads in a browser. Using AJAX, you can dynamically load content if you reach out to some sort of server side script or something that can give you a response that you can do something with. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.