DarkxPunk Posted January 4, 2012 Share Posted January 4, 2012 Hey everyone! Happy new year! So I have been working with this toggle function:variable == '' ? '' : ''In simple variable is what your toggling, then you have a parameter and if (if = ?) the second parameter is false (which you want it to be) it will do else (else = the third parameter.Now it works 99% of the time and I am having trouble when I use the img element.This is my code, any help? HTML <!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" lang="en" xml:lang="en"><head><title>Map</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/buttons.js"></script></head><body><h2>Street View</h2><hr /><a onclick="oiseMap(this)">Interactive Map</a><div class="oiseMap"><img src="http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png" width="700" /></body></html> JavaScript function oiseMap(a) {var element = a.nextSibling;while (element.className != 'oiseMap') {element = element.nextSibling;} element.innerHTML = element.innerHTML == '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />' ? '<iframe width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed\"></iframe><br /><small>View <a href=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed\" style=\"color:#0000FF;text-align:left\">OISE</a> in a larger map</small>' : '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />';} My goal is to have the map switch from the iFrame to the image and back, the flip flop. It does not work. It always reloads the iframe... Any ideas? Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2012 Share Posted January 4, 2012 Probably because the returned innerHTML will be without the closing tag of '/>' for the img, for example '<img src="http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png" width="700">' and so won't match, might want to look for element tag name instead. element.childNodes[0].nodeName == "IMG" Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 4, 2012 Author Share Posted January 4, 2012 Well how can I do that and still use the toggle? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 4, 2012 Share Posted January 4, 2012 var imgcontent = '<img src="http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png" width="700" />';var framecontent = '<iframe width="700" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed"></iframe><br /><small>View <a href="http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed" style="color:#0000FF;text-align:left">OISE</a> in a larger map</small>';element.innerHTML = element.childNodes[0].nodeName == "IMG" ? framecontent : imgcontent; Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 5, 2012 Author Share Posted January 5, 2012 Thank you very much. You are really helping my understanding. New question. Why does it not close the img element properly? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.