JavaScript - Why Is Cdata Generated In My Page Code?
When i try to understand why a control is not raised - i check the F12 "code".. then, when i look for the required control there - it appears under CDATA tag.
So - why? thx, Rach Similar TutorialsHi, I'm a Computer Science student doing a second assignment for my first web design module. I'm not asking for help with the assignment as such, as it's finished. I've just came into a problem whilst tweaking it. We have to make sure our html and css files pass validation from the W3C validation services. So basically, functions within the script tags; Code: <script type="text/javascript"> Were giving me errors. So, I used; Code: <![CDATA[= //code ]]> However, my functions no longer work.... (whilst theyre in the CDATA section of code) Just for extra info', here's the section of code; Code: <script type="text/javascript"> <![CDATA[ function setTextBlue() { var subject = document.getElementById('content'); subject.style.color = '#0000CC'; } function setTextRed() { var subject = document.getElementById('content'); subject.style.color = '#FF0000'; } function setTextBlack() { var subject = document.getElementById('content'); subject.style.color = '#000000'; } ]]> </script> </head> <body> <div id="changeColorBox"> <p><em>Click the buttons to change the color of the text according to the colour of the button!</em></p> <a href="#" class="button" id="blueTextButton" onclick="setTextBlue()" tabindex="5"></a> <a href="#" class="button" id="redTextButton" onclick="setTextRed()" tabindex="6"></a> <a href="#" class="button" id="blackTextButton" onclick="setTextBlack()" tabindex="7"></a> </div> Any criticism is of course welcomed, thanks for your time in advance . I'm trying to get my Client Side Firefox DHTML app to display a list of eBooks. For this, i have the following files F:\Textbooks.html F:\eBooks.txt F:\FirstBook.txt F:\SecondBook.txt F:\ThirdBook.txt textbooks.html is my DHTML app eBooks.txt is the Library file with a listing of all of my eBooks. Inside of eBooks.txt is the following data: ----------------- FirstBook.txt, SecondBook.txt, ThirdBook.txt, ----------------- FirstBook.txt to ThirdBook.txt are my actual ebooks. The problem that i'm having is that When i try to click on any buttons other than the FirstBook button, i get the following error: ---------------------------------- Error: unterminated string literal Source File: file:///F:/Textbooks.html Line: 1, Column: 10 Source Code: LoadEbook(' ---------------------------------- So, unlike clicking on the FirstBook button, these other buttons do not load the eBook data into the DIV for displaying the eBook data. I use the DOM insepector to checkout the DOM of the button code, and it seems like whitespace maybe is the problem. However, i have removed whitespace from the HTMLdata string, and that's not fixing the problem. did i forget something silly? LOL i'm using FireFox 3.5 to develop this App. So obviously this will not work with anything other than Gecko Based browsers. here is my HTML code: <html> <head> <script language="JavaScript"> var eBookLibrary = "eBooks.txt"; var SystemPath = "f:" + String.fromCharCode(92) function Init() { // Initialize the eBook reader document.getElementById("EbookCanvas").style.visibility = "hidden"; document.getElementById("EbookToolbar").style.visibility = "visible"; document.getElementById("FileManager").style.visibility = "visible"; // Load the List of eBooks in the Library LoadBookList(); } function UpdateEbookList() { // Update the Library of Ebooks alert("Updating eBook Library"); // Go back to the File Manager, and Reload the List of Ebooks LoadBookList(); } function LoadBookList() { // This will load the list of books that are available var EbookList = LoadFromDisk(SystemPath + eBookLibrary); var EbookListArray = EbookList.split(","); for(var x = 0; x < EbookListArray.length -1; x++) { // Strip the Filename Extension off of the eBook File Name // The Name of the Book is always the first Index in the Array var BookName = EbookListArray[x].split("."); // Remove the weird whitespace - it screws things up...i think... BookName[0] = BookName[0].replace(/(^\s*|\s*$)/g, ""); var HTMLdata = HTMLdata + "<input type='button' value='" + "FirstBook" + "'" + " onClick=LoadEbook('" + EbookListArray[x] + "');><br>"; } // For some ****ed up reason the first string always generates an 'undefined' even though it's nonsense // So just delete that from the HTMLdata string, because it's just ugly - LOL HTMLdata = HTMLdata.replace("undefined", ""); HTMLdata = HTMLdata.replace("", " "); // Write the HTML data to the DIV document.getElementById("FileManager").innerHTML = HTMLdata; } function LoadEbook(EbookName) { // Hide the File Manager and Show the Ebook Canvas document.getElementById("FileManager").style.visibility = "hidden"; document.getElementById("EbookCanvas").style.visibility = "visible"; document.getElementById("EbookToolbar").style.visibility = "visible"; // Load the Ebook content into the Ebook Reader Pannel var EbookContent = LoadFromDisk(SystemPath + EbookName); document.getElementById("EbookCanvas").innerHTML = EbookContent; } function LoadFromDisk(filePath) { if(window.Components) try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); file.initWithPath(filePath); if (!file.exists()) return(null); var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream); inputStream.init(file, 0x01, 00004, null); var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream); sInputStream.init(inputStream); return(sInputStream.read(sInputStream.available())); } catch(e) { //alert("Exception while attempting to load\n\n" + e); return(false); } return(null); } </script> </head> <body onLoad="Init();"> <div id="FileManager" style="position: absolute; top: 0px; left: 0px; visibility: visible;"> The eBook Library's List of Books will be listed here. Click on one to open it in the eBook Reader </div> <br> <div id="EbookCanvas" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"> </div> <br> <div id="EbookToolbar" style="position: absolute; top: 100px; left: 0px;"> <input type="button" value="Open" OnClick="Init();"> <input type="button" value="Update" OnClick="UpdateEbookList();"> <input type="button" value="Exit" OnClick="MainMenu();"> </div> </body> </html> Hi I am a complete beginner when it comes to JS so anything and everything will be in very basic terms... It is probably easier if i show you my problem, I use milonic s menu for my website, as such i need to generate some sort of site map so that the various crawlers can get full access.... I used to use the phpsite map which came with Milonic Menu, however since i have moved hosts, this has stopped working.... http://www.tugtracker.co.uk/menu/sitemap.php - any offers on why it has stopped working are welcome (windows hosting) as it still works on my other site (linux hosting) http://locodocs.co.uk/misc/sitemap.php anyway, thats not the point of my post.... Also provided by milonic is the option to provide a list based menu using some js... http://support.milonic.com/demos/site_index/index.htm I have incorporated this into my site www.tugtracker.co.uk - click misc on the menu then "Site index" You will see a pop-up erm pops up.... This looks okay and something like what i want, However i need it to be placed into a webpage so i can give it a www.tug..... address and then i can point the crawlers at it.... How do i code it into the page to that the JS will run within the body and result within the body of a page? PLEASE IGNORE - I'D DONE A BOO BOO! </facepalm> Hi guys, not sure i have a decent explanation in the title. so, let me explain. i have a script that collapses rows in tables but i create the array in php. the button needs to be above the content else i could just create it using php if i try this function in a .js file it all works: Code: function toggleAll() { //collapse all layers in var togglelist = "['380','379','378','377','376','374','373','369','367']"; for (var i=0; i<togglelist.length; i++) { collapseTableRows(togglelist[i]); } } the problem is that i need to create togglelist when im doing the php. if i just do a simple: Code: <script> var togglelist = "['380','379','378','377','376','374','373','369','367']"; </script> at the bottom of the page i cant seem to pass togglelist to the function in the .js file im a bit rusty at JS so i think im doing something wrong. or is it just that i cant pass a variable array to a function if the variable is below the function on the page... i hope that makes sense. Ok guys if you look at this page www.runningprofiles.com/members/shout/view.php my code works great.... But when i add it to the rest of the script the code wont work shows he http://www.runningprofiles.com/membe...ll_Script.php# Below is view.php (the one that works) and the one added to the code scirpt is the one the does not. PHP Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); </script> <ol> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='130' order by com_id "); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view130"> <a href="#" class="view_comments" id="130">View all <?php echo $comment_count; ?> comments</a> </div> <?php } else { $second_count=0; } ?> <div id="view_comments130"></div> <div id="two_comments130"> <table width="30%"> <?php $small=mysql_query("select * from comments where msg_id_fk='130' order by com_id limit $second_count,2 "); while($rowsmall=mysql_fetch_array($small)) { $c_id=$rowsmall['com_id']; $comment=$rowsmall['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comment; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> </ol> Facebook_Wall_Script.php PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); / Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_update.php", data: dataString, cache: false, success: function(html){ parent.slideUp(300,function() { parent.remove(); }); } }); } }); return false; });//comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <ol> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> </ol> <?php } ?> </div> </td> </tr> </table> </div> </body> </html> Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to. the assignment says nothing about naming the buttons the hex numbers for the color therefo I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+() and the text shown on the button would be the same as the hex number generated. feed back please Hello again, CodingForums. I have a .php page that generates the following javascript which is intended to hide/show a form somewhere on the page. (It only shows right now because it's not done yet.) However, after the page is rendered and given to the client, the function calls do not work, and the error console reports that "[function name] is not defined." Code: <script type="text/javascript"> function showEdit(num) { var elem = document.getElementById("form-wrap"+num); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"edit\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/> str = str + "<label for=\"title\">Title</label>"; str = str + "<input type=\"text\" name=\"title\" value=\""+document.getElementById("title"+num).innerHTML+"\"/>"; str = str + "<label for=\"picture\">Picture</label>"; str = str + "<input type=\"file\" name=\"picture\"/>"; str = str + "<label for=\"caption\">Picture Caption</label>"; str = str + "<input type=\"text\" name=\"caption\" value=\""+document.getElementById("post-image"+num).getAttribute("title")+"\"/>"; str = str + "<label for=\"content\">Entry Text</label>"; str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\">"+document.getElementById("content"+num).innerHTML+"</textarea>"; str = str + "<input type=\"submit\" value=\"Edit Post\"/>"; str = str + "</form>"; elem.innerHTML = str; } function showDelete(num) { var elem = document.getElementById("form-wrap"+num); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"delete\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/> str = str + "<label for=\"really\">Delete this post?</label>"; str = str + "<input type=\"radio\" name=\"really\" value=\"Yes\">Yes</input><br/>"; str = str + "<input type=\"radio\" name=\"really\" value=\"No\" checked=\"checked\">No</input><br/>"; str = str + "<input type=\"submit\" value=\"Confirm\"/>"; str = str + "</form>"; elem.innerHTML = str; } function showNew(num) { var elem = document.getElementById("new-form-wrap"); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"new\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>"; str = str + "<label for=\"title\">Title</label>"; str = str + "<input type=\"text\" name=\"title\"/>"; str = str + "<label for=\"picture\">Picture</label>"; str = str + "<input type=\"file\" name=\"picture\"/>"; str = str + "<label for=\"caption\">Picture Caption</label>"; str = str + "<input type=\"text\" name=\"caption\" />"; str = str + "<label for=\"content\">Entry Text</label>"; str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\"></textarea>"; str = str + "<input type=\"submit\" value=\"Create Post\"/>"; str = str + "</form>"; elem.innerHTML = str; } </script> These are all the elements that call the javascript functions. Code: <a onclick="showNew('2');" class="edit-delete">Create New Entry</a> <a onclick="showDelete('1');" class="edit-delete">Delete</a> <a onclick="showEdit('1');" class="edit-delete">Edit</a> <a onclick="showDelete('0');" class="edit-delete">Delete</a> <a onclick="showEdit('0');" class="edit-delete">Edit</a> I have no idea why my functions aren't being recognized by the interpreter as such, but it's probably something simple. Thanks in advance for the help, and I'll be happy to post more code if it might be relevant. Hello, I believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though). What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code: The HTML: Code: <td class='dandt' id='iquotenum' colspan='2'></td> The Javascript: Code: function loaded() { var d = new Date(); var vqtnum = document.getElementById("quotenumber"); var iqtnum2 = document.getElementById("iquotenum"); var vqtdat = document.getElementById("quotedate"); vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds(); iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>"; vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear(); } The PHP: Code: <?php $iqtnum = $_GET['iqtnum']; echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>"; ?> I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier. *Except that the value in this case is typed into the box, rather than generated by js. Thanks in advance. edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()". Hi All I'm going to keep this simple. I'm using a hashchange plugin for my page navigation I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange Here is a link to my current project: http://www.bluecoast.co.uk/test/temptation Here is the script that handles the hashchange: Code: $(function() { var newHash = "", $mainContent = $("#right"), $pageWrap = $("#wrap"), baseHeight = 0, $el; $pageWrap.height($pageWrap.height()); baseHeight = $pageWrap.height() - $pageWrap.height(); $("nav").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); return false; }); $(window).bind('hashchange', function(){ newHash = window.location.hash.substring(1); if (newHash) { $mainContent .find("#guts") .fadeOut(200, function() { $mainContent.hide().load(newHash + " #guts", function() { $mainContent.fadeIn(200, function() { $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }); }); $("nav a").removeClass("current"); $("nav a[href="+newHash+"]").addClass("current"); }); }); }; }); $(window).trigger('hashchange'); }); I'm loading the scripts in the header of the main index.php page like so: Code: <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript" src="js/jquery.anythingslider.min.js"></script> <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script> <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]--> <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script> <script type='text/javascript' src='js/dynamicpage.js'></script> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> <script type="text/javascript" src="js/custom.js"></script> Would somebody be kind enough to help me with this? Thanks in advance Craig hi Peers, i am having issue capturing the value of the selected DDL using IE. the code below works just fine in Firefox... // Create a new drop down list -- for text box use 'input' instead of 'select' var newDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox newDDL.setAttribute("style","width:300px"); //firefox newDDL.setAttribute("width","300px"); newDDL.style.width = "300px"; newDDL.id = 'id' + elementid + ColumnElement; newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement); // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=rec_count;i++) { objOption = document.createElement('option') objOption.text = ITEM[i] newDDL.options.add(objOption) } counter++; newDDL.onchange = show1; both cases are giving the value selected in firefox function 1: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value=' + this.value ); } function 2: function show1() { alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value='+ this.getAttribute('value')); } any suggestion will be appreciated thanks I'm new here and this is my first post, I hope I can find help here. How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated. I have try to google for solution, but without success. I code in PHP, but i need it to integrate in my code. Thanks for your help. Im working on a 2nd case and I could use some help I need to replace the content of the welcome box Code: <div id="welcome"> Today is<br /> Tuesday, May 29, 2007 <br /><br /> Born today<br /> Ian Fleming (1908) - Author </div> with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses. Hello all, First I apologize if this has been answered. I did a quick search on the forums but found nothing that related entirely to this issue, also did a google search and found no entirely relevant posts. For those posts I did come across I tried various hacks (including holly hacks and setting background-colors) but nothing worked. I'm not a web guru, so please feel free to pick apart and make suggestions for my code. I have a table style div. Now I'm aware that table-style divs are in no way supported by any IE yet, so I have a CC that implements similar layout for all the IEs. My issue is that this div is generated by javascript on jQuery's document ready. The div has a bunch of row divs, and below that it has cell divs. The cell divs are generated with an onclick attribute before they appended to the row divs. This works in all browsers except IE. This code occurs in a for loop that creates a row and then inserts 7 'day divs' (where the row represents a week). Code: var thisDay = document.createElement('div'); if (curMonth != viewMonth) { thisDay.className = 'JSCalViewNCMD'; } thisDay.innerHTML = curDay.toString(); thisDay.onclick = "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");"; thisDay.setAttribute('onclick', "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");"); //dayDivs.push(thisDay); curEl.appendChild(thisDay); curDay++; if (curDay > curDayLimit) { curDay = 1 curMonth++; if (curMonth === 12) { curMonth = 0; curYear++; } curDayLimit = JSCalendarGetMonthLength(curMonth); if (curMonth === 1 && curYear % 4 === 0) { curDayLimit = 29; } } This is the resulting generated HTML that IE developer window reports: Code: <div class="JSCal"> <DIV class=JSCalViewName> <H3>June 2010</H3></DIV> <DIV class=JSCalViewArea> <DIV> <H4>S</H4> <H4>M</H4> <H4>T</H4> <H4>W</H4> <H4>T</H4> <H4>F</H4> <H4>S</H4></DIV> <DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,-1);">23</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,-1);">24</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,-1);">25</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,-1);">26</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,-1);">27</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,-1);">28</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,-1);">29</DIV></DIV> <DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,-1);">30</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',31,-1);">31</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,0);">1</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,0);">2</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,0);">3</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',4,0);">4</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',5,0);">5</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',6,0);">6</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',7,0);">7</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',8,0);">8</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',9,0);">9</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',10,0);">10</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',11,0);">11</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',12,0);">12</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',13,0);">13</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',14,0);">14</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',15,0);">15</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',16,0);">16</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',17,0);">17</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',18,0);">18</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',19,0);">19</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',20,0);">20</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',21,0);">21</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',22,0);">22</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,0);">23</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,0);">24</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,0);">25</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,0);">26</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,0);">27</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,0);">28</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,0);">29</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,0);">30</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,1);">1</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,1);">2</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,1);">3</DIV></DIV></DIV> However the onclicks do not fire! No errors are generated by my code in any of the browsers. The code works in the most up to date firefox, chrome, opera, and safari for windows. I'm at a loss at what to do now... Hello, I'm not sure if this is the best forum for my question or not, but I'll explain what I'm doing and we'll see. I am trying to make a little easter egg hidden inside a web application and its going great except I'd like to hide my .gif files by changing their file extension to something like .dat instead so it won't be so obvious what they are. Basically all I really want to do is have an html image tag that points to a file who's extension is not gif, but really does contain gif content. (I want to mask the fact that the file is really a gif when looking at it in the directory listing.) So, my idea was I would point the <img src=""> tag's src attribute to a cgi script that could write out a Content-type: image/gif header and return the binary gif data. So, I did this and it worked great, but its really slow. (I output the image multiple times and animate it.) So, I thought I could maybe use Javascript to preload these cgi requests and cache them, but every attempt I've made to do this fails! It's like the browser doesn't want to cache the cgi requests. My method of attempting this was to create Image() objects in javascript and set their src attribute to my cgi script call and then set an onload to keep track of when they were all loaded. That seemed to work fine, but then when I try to display an image with the src tag equal to the cgi location (after they were all loaded) its like it goes and reads the code to pull it down again instead of using a cached copy because its really slow. So, then I thought, hey maybe I could just manually edit the binary content of the gif file (which has an extension like .dat) to also contain Content-type: image/gif\n\n embedded at the front of the file. So, I opened the binary file with a hex editor and inserted that text content at the front... but it didn't work. I had <img src="myfile.dat"/> Is there an easy way to make the browser recognize my gif file even if I don't use a gif extension? If not is there a way to preload and cache cgi responses with Javascript so that they don't keep reloading each time I refer to them? Any other ideas? Thanks.
i have a javascript bookmark to log me onto my schools site javascript: window.location.href="http://www.MySchool";login=document.getElementById('Login'); void(login.value='user'); pass=document.getElementById('pass');void(pass.value='pass'); LoginbuttonSubmit(); without window.location.href="http://www.MySchool" it works fine if the page is already open, but with using the link to open the page, it runs the remaning script before the page loads and it doesn't work. is there any way to fix this withou using setTimeout() I am trying to get 2 versions of the code below to run simultaneously on the same page (in different div tags), but with different pictures and timer. I can get both to work seperately so I know the code works, but when I put both on the same page only one works. Can anyone solve this problem? Code: <script type="text/javascript"> var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['image1.png', '', ''] ultimateshow[1]=['image2.png', '', ''] ultimateshow[2]=['image3.png', '', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="190px" //set to width of LARGEST image in your slideshow var slideheight="350px" //set to height of LARGEST iamge in your slideshow var slidecycles="5" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> Basically, I have it so that when you click something, then it expands and then shows text. The part I am having trouble at is the text being a php include. Here is the line that works for pre-typed in information: Code: divbody.innerHTML = "Some random text here."; Then when I want to do something like this: Code: divbody.innerHTML = "<?php include('widgets/products.php'); ?>"; Then the actual innerHTML comes out like this: Code: <!--?php include('widgets/products.php'); ?--> It seems as if it is changing '<' and '>' to '<!--' and '-->' respectively. I am using the page peel code below on my social network site. I would like to modify it so that it only appears on the main page of my site. What do I need to change/add? Thanks! Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Page Flip on hover $("#pageflip").hover(function() { $("#pageflip img , .msg_block").stop() .animate({ width: '506px', height: '517px' }, 500); } , function() { $("#pageflip img").stop() .animate({ width: '70px', height: '72px' }, 220); $(".msg_block").stop() .animate({ width: '70px', height: '70px' }, 200); }); }); </script> <div id="pageflip"> <a href="http://pagepeeler.ning.com/page/page/list"><img src="http://i187.photobucket.com/albums/x172/billvasko/pagepeel.png" alt="" /> <span class="msg_block">Page Peeler</span> </a> </div> CSS: . #pageflip { position: relative; } #pageflip img { width: 70px; height: 72px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 70px; height: 70px; position: absolute; z-index: 50; right: 0; top: 0; background: url(http://img18.imageshack.us/img18/2572/pagepeel.jpg) no-repeat right top; text-indent: -9999px; |