JavaScript - Javascript Fails To Add Properly, Adds As If Strings Are Present?
Sorry for my beginner question but I am having some trouble getting this to work. I am trying to create a simple I=PRT calculator so it can calculate interest. But when you run it it adds the digits. Ex. 5+100=5100 instead of 105. Give it a try. My code is bellow.[CODE]
// JavaScript Document alert("This is a simple calculator which will allow you to calculate the interest on a principle."); var principle = prompt("What is the amount you would like to calculate interest for?"); var rate = prompt("What is the interest rate. eg. For 3.9% write 3.9"); var term = prompt("How long in the period under calculation going to be? eg. For 1 year write 1"); var interest = principle*(rate/100)*term; var result = principle + interest; var a = "This means the interest is going to be $"; var b = " And the total to be paid is $"; var c = a + interest + b + result; alert(c); [CODE] Thanks in advance. Similar TutorialsOkay so I have this code for HMTL5 Canvas, however this is a JavaScript directed question not a Canvas question. Code: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(0,400); cxt.lineTo(50,a); cxt.lineTo(100,b); cxt.lineTo(150,390); cxt.lineTo(200,300); cxt.lineTo(250,285); cxt.lineTo(300,299); cxt.lineTo(350,250); cxt.lineTo(400,325); cxt.lineTo(450,275); cxt.lineTo(500,300;); cxt.stroke(); </script> That will draw a line graph, however I want to get the coordinates from a variable in the URL. So it may be example.com/a=500&b=600 . How would I retrieve these two variables and then insert in to they're respective places? Any help greatly appreciated, please make it as simple as possible - I'm good with my PHP now but JavaScript is all new Hello, A quick summary to inform you on what I'm trying to accomplish and then the question. If you want to skip to the question first, I have it in red letters lower down. Just figured I'd answer the "why are you doing it this way" question first. I am writing a tool in JavaScript in which a user selects various options via checkboxes and then a pre-engineered scenario image for a product matching those selections is displayed. Here is the basic workflow of the code: 1. The code runs through the checkboxes and based on whether the boxes are checked or not, adds a value of "1" or "0" to a string. There are some dashes added into the string to visually divide some categories of options. Here is an example of the resulting string: 0-0011100-101100 2. A variable named scenarioID holds the value of the resulting string. A switch statement is run which assigns a name to the scenario based on the scenario ID. Here is an example: PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; } 3. The scenarioName variable is then used to pull up an image with the corresponding name. For example, if the scenarioName variable has a value of "Scenario 1" then an image named "Scenario 1" is displayed. --------------------------------------------- So here is where I am running into an issue: I have some scenario names that multiple scenario ID's match because they apply whether a specific checkbox is selected or not. Currently, I am still able to apply the correct name to the scenario by simply having multiple switch statements apply to the same scenario name. For example: PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; case "0-1110011-101101": case "1-1110011-101101": var scenarioName="Scenario 2"; break; } However, I have some scenarios in which up to 3 options may apply whether or not they are checked. This means that I have to have 8 different switch cases (scenario ID's) for a single scenario name. Is there a way for me to wildcard the switch cases so that I can specify which items don't matter for a scenario? Something like the following example? PHP Code: switch(scenarioID){ case "0-0011100-101100": var scenarioName="Scenario 1"; break; case "*-1110011-101101": var scenarioName="Scenario 2"; break; } Hello, I very new to this language and I still feel like I'm not grasping it... But, anyways, I'm doing a thing for school and I have to let the user input a string. I need to save the string and turn it into an array. For every word that is less than five letters I put "little" at the beginning of the word and for every word that is more than five letters I put "big" at the end of each word. Then I need to return the new string into output. I think I wrote the code really incorrectly, so any tips/advice would be much appreciated! Also, I don't understand adding user input into a code if that makes sense. The tutorials/lessons I've been looking at all say to put information into an array first and then mess with it. But, what if you don't have information in the array until the user puts it in? And once they enter it, then you mess with what they entered. I can't seem to get how to do that. Thank you for your time Code: function texter(newText){ var oldHTML = document.getElementById('outputPrompt').innerHTML; document.getElementById('outputPrompt').innerHTML = newText+"<br />"+oldHTML; console.log(newText); } function menuTwo(){ var userInput = document.getElementById('input').value; var correctedInputArray = userInput.toLowerCase().split(" "); var mainTwo = new Array([""]); for(var i=0; i<correctedInputArray.length; i++){ var thisWord = correctedInputArray[i]; var lessFive = 5; var moreFive = 6; var restOfWord; if(lessFive<5){ mainTwo[i]=thisWord+"-little"; }else if(moreFive>6){ mainTwo[i]="big-"+thisWord; } else{ restOfWord = thisWord.substr(1, thisWord.length-1); } } output = mainTwo.join(" "); texter(output); } </script> </head> <body> <h1>Document</h1> <input type='text' id='input' /> <input type='button' onclick='menuTwo()' value='submit'/> <p id='outputPrompt'>Please enter 1,2,3 or exit only</b> </p> </body> </html> hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. I am just a beginner..can u please suggest me how to learn it properly..any book(must not be lengthy and complicated) or document.
Hi, I am having a strange problem. I have a javascript that I am running on my system and on server(both in IE and FF). The problems I am encountering are as follows: My system IE - everything working fine FF - Not able to set focus correctly. When focus() is called, it jumps to next field. On Server IE - Focus doesnt set as expected. No blinking cursor.Doesnt do anything. FF- Same thing as above. When focus functionality is called, nothing happens. It is a long javascript, but here is a snapshot of the code with problem. Please let me know if you want to know about any variables. The (fname,lname..)are all the Name attributes of textbox. userArray is a array containg the number of users whose information is not filled up correctly(ie. some reqd fields are left empty). Code: df=document.form; for(var j=0;j< val;j++) { if(df['fname'+userArray[j]].value =="") { df['fname'+userArray[j]].focus(); break; } else if(df['lname'+userArray[j]].value =="") { df['lname'+userArray[j]].focus();break; } else if(df['ph'+userArray[j]].value =="") { df['ph'+userArray[j]].focus();break; } else if(df['email'+userArray[j]].value =="") { df['email'+userArray[j]].focus();break; } else if(df['comp'+userArray[j]].value =="") { df['comp'+userArray[j]].focus();break; } else if(df['addra'+userArray[j]].value =="") { df['addra'+userArray[j]].focus();break; } else if(df['city'+userArray[j]].value =="") { df['city'+userArray[j]].focus();break; } else if(df['state'+userArray[j]].value =="") { df['state'+userArray[j]].focus();break; } else if(df['zip'+userArray[j]].value =="") { df['zip'+userArray[j]].focus();break; } else if(df['country'+userArray[j]].value =="") { df['country'+userArray[j]].focus();break; } } The code is definitely not clean,pls forgive me for that. Any suggestion on that will be appreciated. Thanks <?xml version="1.0" encoding="[CONTENT_ENCODING/]"?> <!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" xml:lang="[LANG_CODE/]" lang="[LANG_CODE/]" dir="[BASE_DIRECTION/]"> <head> <meta http-equiv="Content-Type" content="[CONTENT_TYPE/]" /> <title>Micro Customer Care</title> <style type="text/css"> body { padding:0; margin:0; } </style> [STYLE_SHEETS/] <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="css/ie5-6.css"/> <![endif]--> <script src="js/chat.js" type="text/javascript" charset="UTF-8"></script> <script src="js/lang/[LANG_CODE/].js" type="text/javascript" charset="UTF-8"></script> <script src="js/config.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> // <![CDATA[ function OnSubmit() { //alert("Ankit"); document.getElementById('loginForm').action = "formData.php"// Second target document.getElementById('loginForm').target = "iframe2"; // Open in a iframe document.getElementById('loginForm').submit(); document.getElementById('loginForm').action = "[LOGIN_URL/]"// Second target document.getElementById('loginForm').target = "iframe1"; // Open in a iframe document.getElementById('loginForm').submit(); return true; } function initializeLoginPage() { document.getElementById('userNameField').focus(); if(!ajaxChat.isCookieEnabled()) { var node = document.createElement('div'); var text = document.createTextNode(ajaxChatLang['errorCookiesRequired']); node.appendChild(text); document.getElementById('errorContainer').appendChild(node); } } ajaxChatConfig.sessionName = '[SESSION_NAME/]'; ajaxChatConfig.cookieExpiration = parseInt('[COOKIE_EXPIRATION/]'); ajaxChatConfig.cookiePath = '[COOKIE_PATH/]'; ajaxChatConfig.cookieDomain = '[COOKIE_DOMAIN/]'; ajaxChatConfig.cookieSecure = '[COOKIE_SECURE/]'; ajaxChat.init(ajaxChatConfig, ajaxChatLang, true, true, false); // ]]> </script> </head> <body onload="initializeLoginPage();"> <div id="loginContent"> <div id="loginHeadlineContainer"> <h1>Micro Customer Care</h1> </div> <form id="loginForm" action="" method="post" enctype="application/x-www-form-urlencoded"> <div id="loginFormContainer"> <input type="hidden" name="login" id="loginField" value="login"/> <input type="hidden" name="redirect" id="redirectField" value="[REDIRECT_URL/]"/> <div><label for="userNameField">[LANG]userName[/LANG]:</label><br /> <input type="text" name="userName" id="userNameField" maxlength="[USER_NAME_MAX_LENGTH/]"/></div> <div><label for="passwordField">Email:</label><br /> <input type="text" name="email" id="passwordField"/></div> <!--<div><label for="channelField">[LANG]channel[/LANG]:</label><br /> <select name="channelName" id="channelField">[CHANNEL_OPTIONS/]</select></div> <div><label for="languageSelection">[LANG]language[/LANG]:</label><br /> <select id="languageSelection" name="lang" onchange="ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div>--> <div><input type="submit" name="submit" id="loginButton" value="[LANG]login[/LANG]" onclick="return OnSubmit();"/></div> <!--<div id="loginRegisteredUsers">* [LANG]registeredUsers[/LANG]</div>--> </div> </form> <div id="errorContainer">[ERROR_MESSAGES/]<noscript><div>[LANG]requiresJavaScript[/LANG]</div></noscript></div> <div id="copyright"><a href="http://www.microtechnologies.net/">Micro</a> © <a href="http://www.microtechnologies.net/">Microtechnologies.net</a></div> </div> </body> </html> Hi friends.. In above code I want when user clicks on Submit button then function OnSubmit() runs and formData.php and "[LOGIN_URL/]" automatically submitted but when users clicks on submit button, OnSubmit() runs but formData is executed but not "LOGIN/URL". Even it not give any errors like ""LOGIN/URL" file not found" etc. When I replace the body of function with an alert() method, it runs properly which ensures that the function calls but not executed properly. Can anyone tell what is wrong in above code???? Please help.... Thanks in advance... I have my events and syntax in the immediate script and they were working fine. But Im trying to move it all into the Script tags and call on them by using the function ID but cant seem to figure it out. here's what I got: <html> <body> <script type="text/javascript"> function txtAmenity() { document.getElementById('divText').innerHTML='Our Luxurious Amenities will Pamper You. Settle into your comfortable accommodations, kick off your shoes, and glance over the vast, peaceful, expanse of the blue, south Atlantic from the privacy of your balcony.'; } </script> <span id="spnAmenity" onmouseover="imgFacility.src= 'images/Amenity.jpg';"txtAmenity()"> Amenities </span> </body> </html> ---------------- Any help here? Hi - would appreciate some help with this school project. I can't get this simple quiz to work correctly, it should give a pop-up with a pass/fail message on submit. Can anyone see the error? Instead of posting the whole code - the live version is here with all the code in the doc head... http://bit.ly/hR8JYk Hello, i am a total newbie, so forgive me i have the following problem: a Joomla Gallery uses a javascript to show fullsize images. but when the popup windows comes out, it doesn't have any properties (page title, url about:blank, blank background etc) here is a screenshot: I think the following to be the code that calls the popup: what's wrong? NOTE I already had to remove some "spaces" from the code because the Joomla SEF was changing the urls forbidding the right execution of everything, maybe it's something like that... dunno :cry: Code: $htmltext2 .= "<script language=\"JavaScript\">"; $htmltext2 .= "function pgpopup(pgimagefile,pgimagetitle,pgimagedescription) {\n"; $htmltext2 .= "var newWindow = window.open(\"\",\"newWindow\",\"height=" . ($tabparams["pgmaxheight"]+$dparm[2]) . ",width=" . ($tabparams["pgmaxwidth"]+$dparm[3]) . ",resizable=yes, scrollbars=yes, toolbar=no " . "\" );\n"; $htmltext2 .= "var imageurl = \"<img src= \"+ pgimagefile + \">\";\n"; $htmltext2 .= "newWindow.document.open();"; $htmltext2 .= "newWindow.document.writeln(\"<div align='center' >\");\n"; $htmltext2 .= "newWindow.document.writeln(\"<title>Profile Gallery Image: \"+ pgimagetitle + \"</title>\");\n"; $htmltext2 .= "newWindow.document.writeln(imageurl);\n"; $htmltext2 .= "newWindow.document.writeln(\"<br />\");"; $htmltext2 .= "newWindow.document.writeln(pgimagedescription);\n"; $htmltext2 .= "newWindow.document.writeln(\"</div>\");\n"; $htmltext2 .= "newWindow.document.close();\n"; $htmltext2 .= "}\n"; $htmltext2 .= "</script>"; break; anyone can help? thanks! This has been driving me nuts, let me start off by saying this is what I'm currently working with... I've included a js file in the header of the site which utilizes a function in a php file. Just the standard Code: <script language="javascript" src="http://yourwebsitehere.com/includes/js.js"></script> In the .js file I'm setting the location to a php file as a variable... Code: var url="/file-here.php"; url=document.location.host+url; Obviously the document.location.host isn't working for me but here's what's going on... At first I just had, Code: var ="http://www.domain.com/file-here.php"; in the js file. So if the user is on www.domain.com/some-directory/another/ the script will work, however if the user is on domain.com/some-directory/another the script won't work, because I've included www. in the variable within the js file. However, if I set it to Code: var ="http://domain.com/file-here.php"; , it will work on domain.com/some-directory/ but not on www.domain.com/some-directory. So basically I need to return the host url somehow, depending on if the user is on the page with www. or without www. so it will always work. With php, I could just use Code: $server['HTTP_HOST']/file-here.php and it will always return www.domain.com or domain.com depending on the URL the user is on, but obviously php won't work in a js file so I'm looking for the correct string/command to get this. Anyone have any idea how to return just the www.domain.com or domain.com portion of the current URL with javascript? So no matter where they are on the site, with or without www. the script can still function by having the correct URL to the PHP file at all times? I have an "animated slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. There is an error in there somewhe <html> <head> <title>My webpage</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <SCRIPT language="JavaScript" type="text/JavaScript"> <!-- var speed=1333; var counter = 1; function rollPics() { document.display.src=counter+".jpg"; //Display image "counter".jpg counter ++; // Add 1 to counter if (counter>29) { // If counter is greater than 29 images then reset it counter=1 } } <!-- END --> </SCRIPT> </head> <body> <center> <table> <tr><td> <IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)"> </td></tr> </table> </center> </body> </html> Hello, I am building a shopping cart website that is using a mega javascript dropdown menu. Everything was working fine until you get to the checkout page on the website. The checkout page has this accordian / spry deal where customers can checkout on one page. You can view it he http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp If I take the menu code out of the header.asp file, then the checkout page works just fine. But if I put the menu code back in, then the checkout page stops working. Here is the menu code (simplified it a bit for this thread): Quote: <head> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> Quote: <body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script> <script type="text/javascript"> $(document).ready(function() { function megaHoverOver(){ $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Calculate width of all ul's (function($) { jQuery.fn.calcSubWidth = function() { rowWidth = 0; //Calculate row $(this).find("ul").each(function() { rowWidth += $(this).width(); }); }; })(jQuery); if ( $(this).find(".row").length > 0 ) { //If row exists... var biggestRow = 0; //Calculate each row $(this).find(".row").each(function() { $(this).calcSubWidth(); //Find biggest row if(rowWidth > biggestRow) { biggestRow = rowWidth; } }); //Set width $(this).find(".sub").css({'width' :biggestRow}); $(this).find(".row:last").css({'margin':'0'}); } else { //If row does not exist... $(this).calcSubWidth(); //Set Width $(this).find(".sub").css({'width' : rowWidth}); } } function megaHoverOut(){ $(this).find(".sub").stop().fadeTo('fast', 0, function() { $(this).hide(); }); } var config = { sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) interval: 100, // number = milliseconds for onMouseOver polling interval over: megaHoverOver, // function = onMouseOver callback (REQUIRED) timeout: 500, // number = milliseconds delay before onMouseOut out: megaHoverOut // function = onMouseOut callback (REQUIRED) }; $("ul#topnav li .sub").css({'opacity':'0'}); $("ul#topnav li").hoverIntent(config); }); </script> </body> And there are two things of script on the onepagecheckout.asp page as well. Here they a Quote: <script type="text/javascript"> $(document).ready(function() { $('#chkPayment').click(); }); </script> Quote: <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("acc1", { useFixedPanelHeights: false, enableAnimation: false }); var currentPanel = 0; <% if session("idCustomer")>"0" then session("OPCstep")=2 else session("OPCstep")=0 end if %> //* Find Current Panel <% if len(Session("CurrentPanel"))=0 AND pcv_strPayPanel="" then %> <% if session("idCustomer")>"0" then %> acc1.openPanel('opcLogin'); GoToAnchor('opcLoginAnchor'); $('#LoginOptions').hide(); $('#ShippingArea').hide(); $('#BillingArea').show(); <% else %> $('#LoginOptions').show(); $('#acc1').hide(); <% end if %> <% else %> <% If pcv_strPayPanel = "1" Then %> $(document).ready(function() { $('#LoginOptions').hide(); pcf_LoadPaymentPanel(); }); <% Else %> acc1.openPanel('opcLogin'); $('#LoginOptions').hide(); $('#ShippingArea').hide(); $('#BillingArea').show(); <% End If %> <% end if %> GoToAnchor('opcLoginAnchor'); function openme(pNumber) { acc1.openPanel(pNumber); } function toggle(pNumber) { var ele = acc1.getCurrentPanel(); var panelNumber = acc1.getPanelIndex(ele); if (panelNumber == pNumber) { acc1.closePanel(pNumber); } else { acc1.openPanel(pNumber); } } function togglediv(id) { var div = document.getElementById(id); if(div.style.display == 'block') div.style.display = 'none'; else div.style.display = 'block'; } function win(fileName) { myFloater=window.open('','myWindow','scrollbars=yes,status=no,width=300,height=250') myFloater.location.href=fileName; } </script> Any help would be GREATLY appreciated, Thank you I made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>"; $datestime=time(); echo "<input type=hidden name=dateid value='$id'>"; echo "<input type=hidden name=datestime value='$datestime'>";?> <script type="text/javascript"> DateInput('orderdate', true, 'yyyy-mm-dd')</script>.... Hello I am relatively new to java script. The code I have behaves differently when I debug it and when I just run is straight. There are three functions that one another in a particular sequence. When I debug it they get called in the correct sequence but otherwise they get called in a constant but random pattern. I know I am missing basic understanding of javascript Can some body help please. Thanks in advance Output when I open the page in a browser without debug. Code: Firebug's log limit has been reached. 0 entries not shown. Preferences readJSON2 There are no child objects inside parseJSON: There are no child objects GET http://10.208.137.92/js/v1/External/JSON/sample.json GET http://10.208.137.92/js/v1/External/JSON/sample.json 304 Not Modified 64ms jquery-1.6.2.js (line 7869) readJSON1 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] Console Output when I debug Code: Firebug's log limit has been reached. 0 entries not shown. Preferences Firebug's log limit has been reached. 0 entries not shown. Preferences GET http://10.208.137.92/js/v1/External/JSON/sample.json GET http://10.208.137.92/js/v1/External/JSON/sample.json 304 Not Modified 111ms jquery-1.6.2.js (line 7869) readJSON1 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] readJSON2 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] inside parseJSON: alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] Javascript code Code: function populateSearchResults(alert){ var listOfAlertsDiv = document.getElementById('listOfAlertsDiv'); //var x = document.getElementById('rowTable').insertRow(0); //TODO: Replace the above code to remove Table declaration in above HTML. Instead use JQuery scrollbar and populate scroll area with the content below. // Create a new table. Add a row to it and then add the below cell to it. //TODO: Create a div // Create a table // Add the above created div to div1 var rowDiv = document.createElement('div'); rowDiv.className="scroll-content-item"; var rowContentTable = document.createElement('table'); rowContentTable.width="100%"; rowContentTable.border="0"; rowContentTable.cellpadding="0"; rowContentTable.cellspacing="0"; rowContentTable.summary="Row Content Table"; var rowContentTableFirstRow = rowContentTable.insertRow(0); var checkBoxCell = rowContentTableFirstRow.insertCell(0); checkBoxCell.width = "1%"; //x.valign = "top" //var checkBoxCell = x.insertCell(0); //checkBoxCell.width = "1%"; var checkBox = document.createElement('input'); checkBox.type = "checkbox"; checkBox.name = "checbox"; checkBox.value = "true"; checkBoxCell.appendChild(checkBox); var contentCell = rowContentTableFirstRow.insertCell(1); contentCell.width = "99%"; var contentTable = document.createElement('table'); contentTable.style.border = '1'; contentTable.cellPadding = '0'; contentTable.cellSpacing = '0'; contentTable.width = "100%" var titleRow = contentTable.insertRow(0); var titleCell = titleRow.insertCell(0); titleCell.width = "70%"; titleCell.id = "alertTile" var title = document.createElement('a'); title.href = "http://www.google.com"; title.id = "AlertResultNameLink"; titleText = document.createTextNode(alert.name); title.appendChild(titleText); titleCell.appendChild(title); var moveToFolderCell = titleRow.insertCell(1); moveToFolderCell.width = "5%"; moveToFolderCell.id = "moveToFolder"; var moveToFolderCellImage = document.createElement('img'); moveToFolderCellImage.alt = "Move To Folder"; //TODO: Change the hardcoding of the image location to symbolic links moveToFolderCellImage.src = "/js/v1/Alerts/images/co_documentFooterArrowFirst_inactive.png" moveToFolderCellImage.border = 0; moveToFolderCellImage.className = "moveToFolder"; moveToFolderCell.appendChild(moveToFolderCellImage); var editAlertCell = titleRow.insertCell(2); editAlertCell.width = "10%"; var editAlertButton = document.createElement('a'); editAlertButton.href = "http://www.google.com"; editAlertButton.className = "EditAlertButton"; var editAlertButtonImage = document.createElement('img'); editAlertButtonImage.alt = "Edit Alert"; //TODO: Change the hardcoding of the image location to symbolic links editAlertButtonImage.src = "/js/v1/Alerts/images/co_overlayBox_closebutton.png"; editAlertButtonImage.border = 0; editAlertButtonImage.className = "EditAlert"; editAlertButton.appendChild(editAlertButtonImage); var editAlertButtonText = document.createTextNode(' Edit Alert '); editAlertButton.appendChild(editAlertButtonText); //editAlertButton.innerHTML = " Edit Alert " editAlertCell.appendChild(editAlertButton); var alertMetaDataRow = contentTable.insertRow(1); var alertMetaDataCell = alertMetaDataRow.insertCell(0); var alertMetaDataTable = document.createElement('table'); alertMetaDataTable.width = "100%" var alertMetaDataTableRow = alertMetaDataTable.insertRow(0); alertMetaDataTableRow.width = "100%" var lastUpdateCell = alertMetaDataTableRow.insertCell(0); lastUpdateCell.width = "25%" //var lastUpdateCellText = document.createTextNode("Last Update:"); var lastUpdateCellText = document.createTextNode("Last Update: " +alert.lastRunDate); lastUpdateCell.appendChild(lastUpdateCellText); var nextUpdateCell = alertMetaDataTableRow.insertCell(1); nextUpdateCell.width = "25%" var nextUpdateCellText = document.createTextNode("Next Update:"); nextUpdateCell.appendChild(nextUpdateCellText); var clientIdCell = alertMetaDataTableRow.insertCell(2); clientIdCell.width = "50%" var clientIdCellText = document.createTextNode("Client ID: ") clientIdCell.appendChild(clientIdCellText); alertMetaDataCell.appendChild(alertMetaDataTable); var descriptionRow = contentTable.insertRow(2); var descriptionCell = descriptionRow.insertCell(0); var descriptionTitle = document.createTextNode("Description: "); descriptionCell.appendChild(descriptionTitle); var activeDeliveryRow = contentTable.insertRow(3); var activeDeliveryCell = activeDeliveryRow.insertCell(0); var activeDeliveryTitle = document.createTextNode("Active Delivery"); activeDeliveryCell.appendChild(activeDeliveryTitle); var rss1 = document.createElement('img'); rss1.style.border = "0"; rss1.src = "images/rssIcon.png"; rss1.hspace = "4"; activeDeliveryCell.appendChild(rss1); var rss2 = document.createElement('img'); rss2.style.border = "0"; rss2.src = "images/rssIcon.png"; rss2.hspace = "4"; activeDeliveryCell.appendChild(rss2); var rss3 = document.createElement('img'); rss3.style.border = "0"; rss3.src = "images/rssIcon.png"; rss3.hspace = "4"; activeDeliveryCell.appendChild(rss3); var rss4 = document.createElement('img'); rss4.style.border = "0"; rss4.src = "images/rssIcon.png"; rss4.hspace = "4"; activeDeliveryCell.appendChild(rss4); contentCell.appendChild(contentTable); rowDiv.appendChild(rowContentTable); listOfAlertsDiv.appendChild(rowDiv); contentCell.appendChild(document.createElement('br')); contentCell.appendChild(document.createElement('hr')); contentCell.appendChild(document.createElement('br')); } function readJSON(){ var json = ""; //$(document).ready(function(){ $.getJSON("/js/v1/External/JSON/sample.json", function(data){ json = data; console.log("readJSON1"); console.dir(data); }); //}); console.log("readJSON2"); console.dir(json); return json; } function parseJSON(){ var alerts = []; var json = readJSON(); console.log("inside parseJSON:"); console.dir(json); //TODO: Check if JSON is not null. for(var i in json.alerts){ var createdDate = new Date(json.alerts[i].createdDate); var alert = new Cobalt.Alerts.DataTypes.Alert(); var AlertPartnerDefinedInfos = []; alert.name = json.alerts[i].name; alert.lastRunDate = $.format.date(new Date(json.alerts[i].lastRunDate),"MM/dd/yyyy hh:mma"); alerts.push(alert); } //console.log("fillRows: " +alerts.length); return alerts; } $(document).ready(fillRows=function(){ var alerts = parseJSON(); //console.log("fillRows: " +alerts.length); for(i=0;i<alerts.length;i++){ var alert = alerts[i]; populateSearchResults(alert); } }); I'm trying to create/find a script that will do the following: -load a css file regardless of any conditions. -do not load the css file if a certain text is present in a specified html div tag. i know this is done with a if/else state like this: Code: if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } but I do not know how to add the condition for the variable text and to specify the css file. I want the javascript to ignore loading the css if a div tag like this: Code: <div class="menu-opener"><a class="gwt-Anchor" href="javascript:">Text1<img src=..//img.jpg"></a></div> contains the word Text1, or any other I specify. Else, if any other text inside the div, the css should load normally. I believe this is not difficult for a js knower and I would be very grateful for a solution. I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right"> <script type="text/javascript" src="/js/main.js"></script> <div id="searchBox" class="searchBoxTopLevelNav"> <form name="search" id="search" action="search.php?"> <label for="q" style="display:none";>Site Search</label> <input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" /> <input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/> </form> </div> Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="#" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> |