JavaScript - Breaking Out Of Kiosk Mode In Ie7 And Ie8
I have a strange problem.
I'm running a shortcut with target: Code: "%PROGRAMFILES%\Internet Explorer\iexplore.exe" -k "C:\myfile.html" It opens the page in kiosk mode. The contents of myfile.html contains an image with an onclick to this function: Code: function loader(){ window.open('myurl.com','',''); } In Windows 7 32-bit running IE8 the url breaks out of kiosk mode. In Windows XP 64-bit running IE7 the url stays in kiosk mode. I can't think why. Is it the IE difference, the bit difference or the platform difference? Anyone struck this before? I know kiosk mode isn't that well used. Similar TutorialsI have read that if i have to use jquery with other libraries then i have to use jquery in no conflict mode. I understand that and and it works. i use Code: $j = jquery.noconflict() so that $ of jquery does not mix with $ of other libraries Now my question is that i use any jquery plugin , and i include that JS file Code: e,g plugin.jquery.js I am not sure whether i am correct or not i think that plugin is coded by using $ sign not the $j and i think it will conflict with other libraries. So it means i have to chnage the plugin code as well or there is no need to change plugin Can someone correct me if i am wrong Hi everyone, I am a first time poster but have been reading your forum for some time. I think I am following all the rules but be gentle if I missed something! I recently inherited a website at work and have been tasked with sprucing it up. We have a photo directory page for all employees. The page takes a directory of jpegs and creates one long page with all the names and pictures of all the employees. The problem is the page only works in IE compatibility mode. It does not work in IE (non-compatibility), Firefox, or Chrome. When the page is not in IE compatibility mode, all that loads is the top of the page that says "CONFIDENTIAL" but none of the pictures load. There is a "progress bar" that has been coded in (it doesn't really accurately reflect the progress of all the pictures loading... again I didn't make this but am now stuck with it) which doesn't work unless in compatibility mode either. I am sure there must be something simple in the code that has since been deprecated or something like that, but I have been looking at it for days and can't seem to figure out what it is. The page was made a long time ago by someone who doesn't work here anymore, but I can't just get rid of it because according to our click tracks, it is one of the most viewed pages on the site. Code: <SCRIPT LANGUAGE="JavaScript"> var duration=10 // Specify duration of progress bar in seconds var _progressWidth = 50; // Display width of progress bar. var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||" var _progressEnd = 5; var _progressAt = 0; // Create and display the progress dialog. // end: The number of steps to completion function ProgressCreate(end) { // Initialize state variables _progressEnd = end; _progressAt = 0; // Move layer to center of window to show if (document.all) { // Internet Explorer progress.className = 'show'; progress.style.left = (document.body.clientWidth/4) - (progress.offsetWidth/4); progress.style.top = document.body.scrollTop+(document.body.clientHeight/8) - (progress.offsetHeight/8); } ProgressUpdate(); // Initialize bar } // Hide the progress layer function ProgressDestroy() { // Move off screen to hide if (document.all) { // Internet Explorer progress.className = 'hide'; } else if (document.layers) { // Netscape document.progress.visibility = false; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'hide'; } } // Increment the progress dialog one step function ProgressStepIt() { _progressAt++; if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd; ProgressUpdate(); } // Update the progress dialog with the current state function ProgressUpdate() { var n = (_progressWidth / _progressEnd) * _progressAt; if (document.all) { // Internet Explorer var bar = dialog.bar; } else if (document.layers) { // Netscape var bar = document.layers["progress"].document.forms["dialog"].bar; n = n * 0.55; // characters are larger } else if (document.getElementById){ var bar=document.getElementById("bar") } var temp = _progressBar.substring(0, n); bar.value = temp; } // Demonstrate a use of the progress dialog. function ProgressBar() { ProgressCreate(10); window.setTimeout("Click()", 100); } function Click() { if(_progressAt >= _progressEnd) { ProgressDestroy(); return; } ProgressStepIt(); window.setTimeout("Click()", (duration-1)*1000/10); } function CallJS(jsStr) { //v2.0 return eval(jsStr) } </script> <SCRIPT LANGUAGE="JavaScript"> // Create layer for progress dialog document.write("<span id=\"progress\" class=\"hide\">"); document.write("<FORM name=dialog id=dialog>"); document.write("<TABLE border=1 bgcolor=\"RED\">"); document.write("<TR><TD ALIGN=\"center\">"); document.write("Loading Page ... Please Wait ...<BR>"); document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\""); if(document.all||document.getElementById) // Microsoft, NS6 document.write(" bar.style=\"color:navy;\">"); else // Netscape document.write(">"); document.write("</TD></TR>"); document.write("</TABLE>"); document.write("</FORM>"); document.write("</span>"); ProgressDestroy(); // Hides </script> There is more to the page but I have tried to narrow it down to the parts I feel are relevant. Any help would be greatly appreciated. Ben Reply With Quote 01-23-2015, 09:38 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts That is a really antiquated script - basically written for Internet Explorer 4 and Netscape 4. If you want it to work properly with modern browsers then the code needs a significant rewrite. You should start by getting rid of all of the document.all document.layers and document.write references Hi I hope someone can help me or direct me to the right place.... Here is the situation. I am a graphic guy and do some web design but am not really good with javascript. I am using the enlargeit.js program for the photo viewer on www.blackwoodsconcrete.com in the galleries. It has worked wonderfully up till now. I recieved new pictures from the owner to post on his page and they will not open when i view them live. I use dreamweaver cs5 and when i look in preview mode, they work great. They are standard jpg images. see http://www.blackwoodsconcrete.com/example_error.html for an example. The top pic does not work and the rest do... I have resized them, changed file formats, opened them in photoshop and edited them, and basically anything else you could think of, i tried. Even if i open one of the working photos in photoshop and place the new one over it and save it as something completely different it still does not work! everything else does. Does anyone have any clue what to do? Thanks in advance! TK Dear all Gurus, I'm stucked with below logic. Wanna get your advice to find out where I went wrong.Please help.... Below is my Coding done. A dynamic HTML table is generated text boxes in table Rows(Dissable mode) with EDIT & DELETE buttons. When user clicks on Edit button, particular row(Text Box) should be enable to edit the values generated. But Unfortunately in my coding, always the fist row only gets enabled. <script type="text/javascript"> function m(id){ document.getElementById('Record_id').disabled=false; document.getElementById('file_number').disabled=false; return false; } </script> PHP Code: while ($rw = mysql_fetch_array($query1)) {$k = $rw['Record_id'];echo '<tr>';echo'<form name = "t_data">';echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';echo '</tr>'; echo '<tr>';echo' <td>';echo'<form action="dlt_grid.php" method = "GET">';echo'<input type="submit" value="Delete">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</form> ';echo'</td>'; echo' <td>';echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</td>';echo '</tr>';echo'</form>'; Hope I'm posting in the right section. At first I thought this was a CSS problem, but after careful exclusion of certain code in the CSS script, it looks to be a java issue...maybe. Here's the main page of the website I'm developing. Everything is running fine on he http://rutholsonphoto.com/test_build/index.php However this next page seems to be breaking my footer (the copyright and affiliation information). I have no idea how or why this is happening, but I'm hoping someone can go through my code and see what's up. http://rutholsonphoto.com/test_build/votenow-1.php Here's the included php script for the second page that SEEMS to be the culprit: Code: <script type="text/javascript"> /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") //////////////////////////////////// </script> <div id="maincontent"> <div id="titlebar"> <center><h3>2011 Senior Challenge Contestants</h3> </center> </div> <br /> <div id="subtitlebar"> <center> <strong>Senior Challenge Top 20:</strong> <a href="/voteresults.php">Click Here to View the Top 20!</a><br /> <br /> <div style="font-size:14px;">To build suspense we have removed the voting counters. Keep up the voting!</div> <div style="font-size:12px;">Only One Vote Per Household.</div><br /> </center> </div> <body class="section-1"> <ul id="menu"> <li><a href="./votenow-1.php"><u>A - F</u></a></li> <li><a href="./votenow-2.php"><u>G - L</u></a></li> <li><a href="./votenow-6.php"><u>M - R</u></a></li> <li><a href="./votenow-4.php"><u>S - X</u></a></li> <li><a href="./votenow-5.php"><u>Y - Z</u></a></li> </ul> </body> <div style="background-color:#d0d0d0" id="overlay"> <?php //FOR LETTER: A include("../templates/mysql_connect.php"); $query = "SELECT * FROM seniors WHERE last_name LIKE 'A%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<table width="480" height="150"><tr> <td width="161" valign="top" align="center"> <p><span class="style19"><u>-A-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <br /> <input name="submit" align="right" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p>'; ?> <?php //FOR LETTER: B $query = "SELECT * FROM seniors WHERE last_name LIKE 'B%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-B-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <input name="submit" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p></td>'; ?> <?php //FOR LETTER: C $query = "SELECT * FROM seniors WHERE last_name LIKE 'C%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-C-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <input name="submit" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p></td></tr>'; ?> <?php //FOR LETTER: D $query = "SELECT * FROM seniors WHERE last_name LIKE 'D%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<tr><td width="161" valign="top" align="center"><p><span class="style19"><u>-D-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <input name="submit" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p></td>'; ?> <?php //FOR LETTER: E $query = "SELECT * FROM seniors WHERE last_name LIKE 'E%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-E-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <input name="submit" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p></td>'; ?> <?php //FOR LETTER: F $query = "SELECT * FROM seniors WHERE last_name LIKE 'F%' ORDER BY last_name ASC"; $result = @mysql_query ($query); echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-F-</u></span><br />'; while ($row = mysql_fetch_array ($result)){ echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\" title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post"> $row[first_name] $row[last_name] - $row[school] <input name="submit" type="submit" value="Vote" > </form> \">$row[last_name], $row[first_name]</a><br/>"; } echo '</p></td></tr>'; ?> </div> </div> Please Help. I so wanna get this part over with as it's killing me. Hi there, i really could use the help. Ok, so (and im sure i will be told other ways) i have come up with a way of blocking people from my site even if they are currently on the site and dont reload the page. What i was thinking of is simply: a tiny iframe on the bottom of my page, so small it cant be seen ie 1px that iframe goes to a page saying YOU HAVE BEEN BANNED That page istself will be on a constant 10 seccond refresh so as soon as i add the ip address to it, BOOM, it will break out of the iframe and take the user away from the main page as display the you have been banned message. Sound good? ok, so here is what i have sofar but i know its wrong, dont really know how to write it correctly. The main point is: if ip is 111.111.111 then break out of iframe else do nothing. Thanks for the help. Code: <script language="JavaScript"> VIH_ForeColor = "navy"; VIH_FontPix = "16"; VIH_DisplayFormat = "%%IP%%"; VIH_DisplayOnPage = "no"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/visitorIPHOST.js.php"></script> <script language="JavaScript" src="http://scripts.hashemian.com/js/visitorIPHOST.js.php"></script> <script> if (VIH_HostIP == "111.111.111.111") document.write('if (top.location!= self.location) { top.location = self.location.href }' ); }else{ document.write(''); ;} </script> I'm currently using the following code so that when I hover over my navigation images it fades them when hovered over. Code: <script type="text/javascript">$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script> It works fine but when I have any other javascripts, such as a lightbox or image swapper, only one of them works. I want a lightbox script on the page so I need to figure out how to get both scripts working together. Note I'm not java developer, I just copied and pasted the code for my website so it's entirely possible, and probable, that I'm making a fundamental error here. It seems to be based on exactly where I add the jquery code. For example if I use the following code then the lightbox works but not the fader. Code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="design/lightbox/prototype.js"></script> <script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="design/lightbox/lightbox.js"></script> <script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script> But if I use the following code then the lightbox doesn't work but the fader does. Code: <script type="text/javascript" src="design/lightbox/prototype.js"></script> <script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="design/lightbox/lightbox.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script> Anybody know what's happening here? Hi there, i really could use the help. Ok, so (and im sure i will be told other ways) i have come up with a way of blocking people from my site even if they are currently on the site and dont reload the page. What i was thinking of is simply: a tiny iframe on the bottom of my page, so small it cant be seen ie 1px that iframe goes to a page saying YOU HAVE BEEN BANNED That page istself will be on a constant 10 seccond refresh so as soon as i add the ip address to it, BOOM, it will break out of the iframe and take the user away from the main page as display the you have been banned message. Sound good? ok, so here is what i have sofar but i know its wrong, dont really know how to write it correctly. The main point is: if ip is 111.111.111 then break out of iframe else do nothing. Thanks for the help. Code: <script language="JavaScript"> VIH_ForeColor = "navy"; VIH_FontPix = "16"; VIH_DisplayFormat = "%%IP%%"; VIH_DisplayOnPage = "no"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/visitorIPHOST.js.php"></script> <script language="JavaScript" src="http://scripts.hashemian.com/js/visitorIPHOST.js.php"></script> <script> if (VIH_HostIP == "111.111.111.111") document.write('if (top.location!= self.location) { top.location = self.location.href }' ); }else{ document.write(''); ;} </script> I am in desperate need for help as I'm pulling my hair out! I'm pretty sure this is JavaScript related. I'm incorporating a WordPress header into Opencart. Its pretty basic. I copied the WordPress header source code into the header of the Opencart and all is well in Firefox & Chrome and Safari. In IE however...If you enter the product page through the categories on the left the product page left aligns and breaks...I can't figure this out for the life of me. I tried to debug it with explorers tools but I don't know enough about Java script to understand why its breaking. Can anyone PLEASE help me on this?!!! My site is http://www.sterlingportable.com/store/ This is my first javascript game and it's pretty much built of code I've gathered over time and cleaned up. Here's a manipulated screenshot of what I'm trying to accomplish. You're an ant and you want those goodies on the map as quickly as possible! click this link to view a bigger manipulated screenshot click this link to view the goodies (items) The ant is the playable character you control by using the arrow keys. Every time you load the page, or click "restart game", three new items will spawn randomly on the level and the time will be reset to 0 seconds. An arrow key must be pressed to start the time counter and the game itself. There are only 5 items so far, cheese, apple, banana, candy and donut. The items are supposed to be collected as quickly as possible, when the last item has been collected (by simply running over it) the game will end, save the time and display a hi-score list. Time limit is 30 seconds, the game will display a classic "GAMER OVER" if the limit is overrided. Problems I'm trying to solve: 1: Fullscreen mode (and make the ant actually STAY on the screen) I want the game level to adapt itself to the computer screen. The game dimensions are 1000x600px at the moment but the ant does not respect the level dimensions. Screenshot: http://i41.tinypic.com/kc1j81.jpg. I have a feeling about that somekind of percental code has to be implented but I've never done this before. (Please note that the size of the ant and the items will remain as they are) 2: Spawning three items randomly on the level I drew 5 items and saved them as 100x100 PNG. Three of these items have to spawn at a random location on the fullscreen level. The LAST item collected must trigger the time counter to stop. The time will later be used on the hi-score list where he/she can type her nickname. This information will be uploaded to a database. 3: 30 second time limit Letting the time counter reach 30 seconds will trigger a "GAME OVER". The only way to try again is page refresh or "restart game". Code: <html> <head> <style type="text/css"> div#game { width:1000px; height:600px; position:absolute; background:#c3c3c3; } </style> <script type='text/javascript'> // movement vars var xpos = 100; var ypos = 100; var xspeed = 1; var yspeed =1; var maxSpeed = 5; // boundary var minx = 0; var miny = 0; var maxx = 1000; // characters movement field, width var maxy =600; // characters movement field, height // controller vars var upPressed = 0; var downPressed = 0; var leftPressed = 0; var rightPressed = 0; function slowDownX() { if (xspeed > 0) xspeed = xspeed - 1; if (xspeed < 0) xspeed = xspeed + 1; } function slowDownY() { if (yspeed > 0) yspeed = yspeed - 1; if (yspeed < 0) yspeed = yspeed + 1; } function gameLoop() { // change position based on speed xpos = Math.min(Math.max(xpos + xspeed,minx),maxx); ypos = Math.min(Math.max(ypos + yspeed,miny),maxy); // or, without boundaries: // xpos = xpos + xspeed; // ypos = ypos + yspeed; // change actual position document.getElementById('character').style.left = xpos + "px"; document.getElementById('character').style.top = ypos + "px"; // change speed based on keyboard events if (upPressed == 1) yspeed = Math.max(yspeed - 1,-1*maxSpeed); if (downPressed == 1) yspeed = Math.min(yspeed + 1,1*maxSpeed) if (rightPressed == 1) xspeed = Math.min(xspeed + 1,1*maxSpeed); if (leftPressed == 1) xspeed = Math.max(xspeed - 1,-1*maxSpeed); // deceleration if (upPressed == 0 && downPressed == 0) slowDownY(); if (leftPressed == 0 && rightPressed == 0) slowDownX(); // loop setTimeout("gameLoop()",10); } function keyDown(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 1; if (code == 40) downPressed = 1; if (code == 37) leftPressed = 1; if (code == 39) rightPressed = 1; } function keyUp(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 0; if (code == 40) downPressed = 0; if (code == 37) leftPressed = 0; if (code == 39) rightPressed = 0; } </script> </head> <body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'> <!-- level --> <div id="game"></div> <!-- ant character --> <img id='character' src='images/ant.png' style='position:absolute;left:500px;top:500px;height:125px;width:200px;'/> </body> </html> Hello! I come to you guys with a javascript problem. I'm using the javascript mouseover called wz_tooltip.js located here. Inside of it, I'm using many variables which have worked perfectly fine. If any variable has a value that conflicts with javascript, I simply do a php str_replace. This has worked perfectly for all but one issue. When one of the $string has a breaking line in it <br />, it breaks the javascript mouseover entirely. I can't figure this out for the life of me. The mouseover code itself is bolded: Code: $placeholders = array("'", "<br />"); $fixup = array("\'", "TEST"); $saPreview2 = str_replace($placeholders, $fixup, $lastxdevel2['pagetext']); $lastxdevelt2.="<div class='smallfont'><font size='2'><a onmouseover=\"Tip('<b>Title:</b> $saTitle2<br/><b>User:</b> $lastxdevel2[lastposter]<br /><b>Last Post:</b>$agdate2<br/><b>Preview: </b>$saPreview2')\" onmouseout=\"UnTip()\" href='showthread.php?t=$lastxdevel2[threadid]'>$lastxdevel2[title]</a></font></div>"; I tested with other values to make sure that the strings were properly being replaced, and indeed they were. I have the mouseover tooltip set to a specific width. So multiple lines work fine (one line running into another), but if there is a <br /> inside or any form of a formal line break, it literally causes the javascript mouseover script to cease to function. This is impossible to avoid because $string's value is text from a forum post. I'll reiterate that the str replace is working. When I view source, there are no <br/> tags. There are still line breaks though. Why would line breaks in $string cause a javascript mouseover to cease functioning? I have a feeling it must be how the tooltip handles line breaks? Thank you in advance. I'm having a problem with links once I insert some javascript for a photo gallery into my page. I'm kind of new to all of this so sorry if this is something really easy, but I would like to make it so doesn't make my navigation links stop working, if possible. Code: $(function() { $(".image").click(function() { var image = $(this).attr("rel"); $('#image').hide(); $('#image').fadeIn('fast'); $('#image').html('<img src="' + image + '"/>'); return false; }); }); Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [ { "name" : "Menu 1", "url" : "menu1.html", "submenu" : [ { "name" : "menu 1 subitem 1", "url" : "menu1subitem1.html" }, { "name" : "menu 1 subitem 2", "url" : "menu1subitem2.html" } ] }, { "name" : "Menu 2", "url" : "menu2.html", "submenu" : [ { "name" : "menu 2subitem 1", "url" : "menu2subitem1.html" }, { "name" : "menu 2subitem 1", "url" : "menu2subitem1.html" } ] }, { "name" : "Menu 3", "url" : "menu3.html", "submenu" : [ { "name" : "menu 3 subitem 1", "url" : "menu3subitem1.html" }, { "name" : "menu 3 subitem 1", "url" : "menu3subitem1.html" } ] } ]; Here is the recursive function: Code: function buildMenuHTML(menuData,level) { var ul; if (level == 1) { ul = "<ul id='menu'>"; } else { ul = "<ul class='level" + level + "'>"; } for (i = 0; i < menuData.length; i++) { menuItemData = menuData[i]; ul += "<li>"; ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>"; if (typeof menuItemData.submenu != 'undefined') { ul += buildMenuHTML(menuItemData.submenu,level + 1); } ul += "</li>"; } ul += "</ul>"; return ul; } Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'> <li><a href='menu1.html'>Menu 1</a> <ul class='level2'> <li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li> <li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li> </ul> </li> </ul> 'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. |