|
JavaScript - Ootb Search Code Displays Extraneous White Bar
Currently I'm trying to modify OOTB code for a search box.
I'm not sure if this is best addressed within the JavaScript or CSS. After a search term has been typed in, the users picks a match which opens in a new window, then they close the new window, and try to back space over the typed term, there is a white bar that remains below the text entry box. For example, if the word bathroom is typed in the text box, a list of possible matching topics is displayed. You pick the option to Where is the bathroom?. This opens a new window/tab - just close the tab. The original search box still displays the term bathroom, but if you backspace to remove the term, then a white bar remains below the text entry box. How do I get rid of the white bar when the text entry box is empty? The code being used is shown below - attachment shows the problem as it appears in IE and FF: A temporary page with the search box. Code: <style type="text/css">
/* autosuggest css */
/* the look of the overlay div with results */
#la_results {
border: 1px solid #bbb;
border-color: #bbb #6f6f6f #6f6f6f #bbb;
border-top: 0;
-moz-box-shadow: 3px 3px 8px #444;
-webkit-box-shadow: 3px 3px 8px #444;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
background: #fff;
}
/*the two divs below control the look and feel of individual results, which show up as LI elements in the overlay div */
#la_results ul { list-style-type: none; margin:0; padding:0; font:normal 11px Geneva, Arial, Helvetica, sans-serif;}
#la_results ul li a { display: block; text-decoration:none; padding:3px }
.itemwhite { background-color:#fff;} /* the color of the "white" stripe in the results div */
.itemcol { background-color:#efefef;} /* the color of the "color" stripe in the results div */
#la_results li a:hover { background-color: #f8bb49;} /*the color of the hover effect when the user goes thru the results */
/* the class below controls the font and the look of the "more search/full text search stripe */
.itemsrch {color:#cc3333;font:bold 11px Geneva, Arial, Helvetica, sans-serif; background-color:#FFFFCC;}
.nwylf { color:#900;} /* "not what you are looking for?" text color */
</style>
<!-- start of LA widget -->
<div id="la_wrapper" style="width:500px;background-color:#F3f3f3;margin:0;padding:6px;border: solid 1px #a9cee7;">
<p>Type a question:</p>
<input type="text" id="la_suggest" style="display:block; margin-top: 6px; width: 100%; height: 24px; font-size: 14px" onFocus="document.getElementById('la_results')[removed]=''" onKeyUp="if (this.value) {laFQM(this.value)} else {document.getElementById('la_results')[removed]=''}" value="" >
<div id="la_results" style="padding-top: 2px; font-family: Helvetica, Arial, sans-serif; font-size:11px; position:absolute; margin-top:0px; width:500px; border: solid 1px #ccc;display:none"></div>
</div>
<script language="javascript">var lahilite="efefef"; var lanw=1;</script>
<script language="javascript" src="http://api.libanswers.com/api/ladata-32.js"></script>
Thanks much. Similar Tutorialshello all i'm almost newbie to Javascript. i found this for instant search : demo : http://www.johnboy.com/scripts/insta...-php/index.php index.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>Instant Search With Arrow Key Navigation Using jQuery and PHP</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="search.js"></script> <script> //arrow key navigation $(document).keydown(function(e){ //jump from search field to search results on keydown if (e.keyCode == 40) { $("#s").blur(); return false; } //hide search results on ESC if (e.keyCode == 27) { $("#results").hide(); $("#s").blur(); return false; } //focus on search field on back arrow or backspace press if (e.keyCode == 37 || e.keyCode == 8) { $("#s").focus(); } }); // $(document).ready(function() { //clear search field & change search text color $("#s").focus(function() { $("#s").css('color','#333333'); var sv = $("#s").val(); //get current value of search field if (sv == 'Search') { $("#s").val(''); } }); // //post form on keydown or onclick, get results $("#s").bind('keyup click', function() { $.post("results.php", //post $("#search").serialize(), function(data){ //hide results if no more than 2 characters if (data == 'hide') { $('#results').hide(); } //show results if more than 2 characters if (data != 'hide') { $("#results").html(data); if (data) { $("#results").show(); } } }); }); // //hide results when clicked outside of search field $("body").click(function() { $("#results").hide(); }); // }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Instant Search Using jQuery & PHP</h1> <h2>Example keywords (website, jquery, php, launch)<br /> <br /> </h2> <form id="search" name="search" method="post" action="" autocomplete="off"> <input name="s" type="text" id="s" value="Search" /> <div id="results"></div> </form> <br /> <br /> <br /> <a href="http://www.johnboy.com/blog/tutorial-instant-search-with-arrow-key-navigation-using-jquery-and-php">Back to Article & Source Code</a> </body> </html> results.php PHP Code: <?php require_once('mysql_connect.php'); //only show results if two or more characters have been typed - max of 50 characters $len = strlen(str_replace(" ","",$_POST[s])); //don't count blank spaces if ($len < 3 || $len > 50) { echo 'hide'; die; } // //get results if search string is longer than 3 characters if ($len > 3) { record_set('results', " SELECT news_title, news_heading, MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE) AS ranking FROM jbp_blog_articles WHERE MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE) AND news_type = 1 ORDER BY ranking DESC LIMIT 0,8 "); } ?> <ul> <!--display user's initial search term--> <li><a class="link" href="#" title="<?php echo $_POST[s]; ?>"><?php echo "$_POST[s]"; ?></a></li> <!----> <?php if ($totalRows_results) do { ?> <li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"; ?></a></li> <?php } while ($row_results = mysql_fetch_assoc($results)); ?> </ul> search.js PHP Code: /* * Author: Marco Kuiper (http://www.marcofolio.net/) * Customizations by JBP noted in comments below */ var currentSelection = 0; var currentUrl = ''; // Register keydown events on the whole document $(document).keydown(function(e) { switch(e.keyCode) { // User pressed "up" arrow case 38: navigate('up'); break; // User pressed "down" arrow case 40: navigate('down'); break; // User pressed "enter" case 13: if(currentUrl != '') { window.location = currentUrl; } break; } }); // Add data to let the hover know which index they have for(var i = 0; i < $("#results ul li a").size(); i++) { $("#results ul li a").eq(i).data("number", i); } // Simulate the "hover" effect with the mouse $("#results ul li a").hover( function () { currentSelection = $(this).data("number"); setSelected(currentSelection); }, function() { $("#results ul li a").removeClass("search_hover"); currentUrl = ''; } ); function navigate(direction) { // Check if any of the menu items is selected if($("#results ul li .search_hover").size() == 0) { currentSelection = -1; } //JBP - focus back on search field if up arrow pressed on top search result if(direction == 'up' && currentSelection == 0) { $("#s").focus(); } // if(direction == 'up' && currentSelection != -1) { if(currentSelection != 0) { currentSelection--; } } else if (direction == 'down') { if(currentSelection != $("#results ul li").size() -1) { currentSelection++; } } setSelected(currentSelection); } function setSelected(menuitem) { //JBP - get search result to place in search field on hover var title = $("#results ul li a").eq(menuitem).attr('title'); $("#s").val(title); // $("#results ul li a").removeClass("search_hover"); $("#results ul li a").eq(menuitem).addClass("search_hover"); currentUrl = $("#results ul li a").eq(menuitem).attr("href"); } style.css PHP Code: #search { position:relative; display:block; height:35px; width:500px; padding: 0px; margin: 0px auto 0px auto; } #results { border:1px solid #CCCCCC; width:500px; display:none; z-index: 300; line-height:0; margin-top:-3px; margin-left: 0px; } #results ul { list-style:none; padding:0px; margin:0px; } #results ul li { background-color:#FFFFFF; text-align: left; } #results ul li:hover { background-color:#EBEBEB; } #results ul li a { line-height:20px; text-decoration:none; padding: 5px; display: block; color: #333333; } .search_hover { background-color:#EBEBEB!important; color:#232323!important; } body { padding: 50px; text-align: center; background-color: #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 13px; } body a { text-decoration: none; } #s { outline:none; width: 480px; padding: 10px; border: 1px solid #CCCCCC; color: #CCCCCC; z-index: 200; position: relative; height: auto; } .go { padding: 9px; font-weight: bold; width: 60px; margin-left: -4px; border: 0px solid #CCCCCC; height: auto; font-size: 16px; background-color: #F7F7F7; } h1 { font-family: Georgia, "Times New Roman", Times, serif; padding: 0px; margin-bottom: 10px; font-size: 30px; color: #333333; } h2 { font-family: Georgia, "Times New Roman", Times, serif; padding: 0px; font-size: 12px; color: #999999; margin: 0px; font-style: italic; font-weight: normal; } now i just want to edit one thing, when you search for something, results are shown under the search field, when you click on each result, goes to a link. i want when clicking on a result, not going to link, just show that result string on the search field. could you please tell how to do it? where should i edit in script? thanks in advanced Hi all.... newbie here. Have just finished my eccomerce site and it's ready to go but have come across a stumbling block. I use webplus4 which is a great web design program... except for one thing. The site search tool is very weak... it won't find results for words of less than 4 characters... and since my website is about plush pets this is important. For instance if you type in the breed 'pug' it says 0 results found. Same if you enter Old English Sheepdog, it ignores the entire search term because of the world 'old'. If you enter plush pug, it also ignores the entire search string. I don't have the money to purchase software nor the time and then configure the javascript to match my site. Is there anyone out there that can modify the following javascript file (jsSiteSearch.js) so that the search will not ignore words of 3 letters? Am aware that once modified I will have to replace the file each time but it will be worth it. By the way, no one on the webplus forums seems to know how to do it. Here is the code... (have removed all the keywords)... function GetSiteSearchResults(newWindow,frameObject,frameObjectName,fontFace,fontSize,fontColour,linkFace,lin kSize,linkColour,resultsText) { var sTerms=""; var iDepth = 0; var sURL = new String(document.location); if (sURL.indexOf("?") > 0) { var arrParams = sURL.split("?"); var arrURLParams = arrParams[1].split("&"); for (var i=0;i<arrURLParams.length;i++) { var sParam = arrURLParams[i].split("="); var sValue = unescape(sParam[1]); if( sParam[0] == frameObjectName) sTerms = sValue; if( sParam[0] == "depth") iDepth = parseInt(sValue); } } var d=frameObject.document; if (sTerms=="") {d.open(); d.write("<html><head></head><body style=\"background: transparent;\"></body></html>"); d.close();return;} var sBack=""; for (i=0; i<iDepth; i++) sBack+='..\\\\'; d.open(); d.write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); d.write("<html lang=\"en\">"); d.write("<head>"); d.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"); d.write("</head>"); d.write("<body style=\"margin: 0px 0px 0px 0px; font-family: "+fontFace+"; font-size: "+fontSize+"; color: "+fontColour+"; background: transparent;\">"); d.write("<div id=\"wpSearchResults\"></div>"); d.write("<script type=\"text/javascript\">"); d.write("var wordMap = new Array(\"...........................................); d.write("function doNav(ind)"); d.write("{"); if (newWindow) d.write(" window.open(\""+sBack+"\"+linkMap[ind],\"_blank\");"); else d.write(" parent.window.location.href=linkMap[ind];"); d.write("}"); d.write("function wpDoSearch(searchTerms){"); d.write("var terms = searchTerms.split(\" \");"); d.write("if (terms==\"\") return;"); d.write("var results = \"\";"); d.write("var resultscount = 0;"); d.write("for (var i=0; i<wordMap.length; i++)"); d.write("{"); d.write(" var found=true;"); d.write(" for (var j=0; j<terms.length; j++)"); d.write(" if (wordMap[i].indexOf(terms[j].toLowerCase())==-1) found=false;"); d.write(" if (found)"); d.write(" {"); d.write(" results+=\"<a style=\\\"cursor: pointer; font-family: "+linkFace+"; font-size: "+linkSize+"; color: "+linkColour+"; \\\" onclick=\\\"doNav(\"+i+\");\\\"><u>\"+pageMap[i]+\"</u></a><br>\"+preMap[i]+\"...<br><br>\";"); d.write(" resultscount++;"); d.write(" }"); d.write("}"); d.write("document.getElementById(\"wpSearchResults\").innerHTML=resultscount+\" "+resultsText+" \"+searchTerms+\"<br><br>\"+results;"); d.write("}"); while(sTerms.indexOf("\"") != -1 ) { sTerms = sTerms.replace("\"",""); }; d.write("wpDoSearch(\""+sTerms+"\");"); d.write("</script>"); d.write("</body></html>"); d.close(); } Thanks so very much in advance. Any help asap will be much appreciated. Cheers Hello! I am trying to create a javascript code in which I prompt the user for a number (an integer from 0 to 100) to search for, then search a function with the number they entered and then display whether the number was found, and if found, a location where it can be found within the list. Can you please tell me what is wrong? <html> <head> </head> <body> <script language = "javascript"> var list = new Array(200); for (var i=0; i < 200; i++){ list=Math.round(Math.random()*100) + " "; document.write(list); } var value=prompt("What is the number you are searching for? ", " "); if (list[i]==value){ {alert("Number has been found in location" +i)}; } </script> </body> </html> Thank you Hi there, I would like to create a page that has a dropdown menu populated with a list of images. When someone selects an image, the image and a URL to a webpage will display (screenshot below). Each image will have a different URL. How do I accomplish this? Thanks! Denise Hi, I need your help with a javascript that is incorrectly displaying the time left as 12 hours instead of 24 hours. The target date is July 7, 2010 at 09:00 AM Here is the url where the script is installed: http://guaranteedtransformation.com/independence/ and here is the code: Code: <script LANGUAGE="JavaScript">
// This following statement must be left intact.
// Copyright (c) Michael Bloch and Taming The Beast.
// Countdown timer script v1.2 April 20 2009
// Taming the Beast.net - http://www.tamingthebeast.net
// Free Web Marketing and Ecommerce articles and tools
// By using this code you agree to indemnify Taming the Beast
// from from any liability that might arise from its use.
// The preceding statement be left intact.
var present;
var future;
var tseconds;
var seconds;
var minutes;
var hours;
var days;
ID=setTimeout("countdown();", 1000);
function countdown()
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date("July 07, 2010 09:00:00");
tseconds = (future - present) / 1000;
days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);
hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);
minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);
seconds = tseconds;
seconds = Math.floor(seconds);
document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
ID=setTimeout("countdown();", 1000);
}
</script>
And here is the html that displays the time: Code: <SPAN id="days">0</SPAN> days, <SPAN id="hours">0</SPAN> hours, <SPAN id="minutes">0</SPAN> minutes, <SPAN id="seconds">0</SPAN> seconds Thanks for your help, Jimmy Hi everyone, new here. I'm trying to write a program that displays what a user has entered, it processes it, and displays it backwards This is what I have so far, Code: <script type="text/javascript">
var input ("Please enter a sentance","")
So really this is what it needs to display. "The sentance you entered are "Hi people"" "The sentance in REVERSE order are "elpoep iH" If anyone can help, it would be awesome, since I'm a noob at this. In this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website. I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity: Code in the <head> tag: Code: <script language="JavaScript1.3" type="text/javascript" src="jse_form.js"> </script> Code in the <body> tag: Code: <!--Begin Internal Site Search 1!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
<input type="text" name="d" size="30">
</tr></td>
<tr><td>
<input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
</form>
</tr></td>
</table>
<!--End Internal Site Search 1!-->
<!--Begin Internal Site Search 2!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
<form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
</tr></td>
<tr><td style="text-align: center;">
<input type="submit" value="Internal Site Search 2"></form>
</form>
<!--webbot bot="Search" i-checksum="4210" endspan -->
</td></tr>
</table>
</div>
<!--End Internal Site Search!-->
<!--Begin Google Search!-->
<form method="get" action="http://www.google.com/search">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="30" maxlength="233" value="" />
</tr></td>
<tr><td align="center">
<input type="submit" value="Google Search" /></td></tr>
</table>
</div>
</form>
<!--End Google Search!-->
<!--Begin Third Party Search!-->
<form id="keywordSearchForm" method="get" action="http://www.site3.html">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input class="input" type="text" name="keyword" size="30" />
</tr></td>
<tr><td align="center">
<input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
</td></tr>
</table>
</div>
</form>
<!--End Third Party Site Search!-->
Hi experts, is it possible via Javascript to search certain websites with certain keywords without having to use specific search engines? example search only the following: 1. www.yyy.com 2. www.aaa.com 3. www.zzz.com for the keyword "Laminat" and open the sites accordingly. thx How can I to delete white spaces around parameter that I to pass with HTML forms. For example, if I have 'firstname lastname ' or ' firstname lastname', exist it a builtin function in javascript to obtian 'firstname lastname'? savio I have a string variable: var mystring = ' hello world '; How can I truncate white spaces placed before or after my string value? Thank you in advance to help. Hello people. I'm looking to create a simple search engine capable of searching multiple search engines simultaneously together (e.g. Google, Bing, Yahoo, etc.) and then displaying the results below for all sites on the same page. I don't want each search engine results page opening up in individual windows or anything, nor do I want people to have to manually select the search engine to search with. Just a single page where a user types in something, pressed [Enter] and then presented with all results from multiple sites on one page (without duplicates). I'm also looking to do this with image and torrent sites, etc. How would I go about doing this? Thanks a million guys. You have bigger brains than me. Hello, I am trying to create some javascript that will create a popup and the popup itself is just an image. But since I want the image to take up the entire window i create the html in a variable to hold the image. For some reason I always get white space on the right. I already have css built into the html variable to take out padding and margins and I even specify the size(sized exactly to the image) when doing window.open. I have not been able to solve this in a couple of days and have been trying alot of different solutions with no work. Any help is appreciated, here is the code: Code: function get_radio_value()
{
var wrong = "<html><head><style type='text/css'>body {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'>body {margin: 0}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
for (var i=0; i < document.question.mquestion.length; i++)
{
if (document.question.mquestion[i].checked)
{
var rad_val = document.question.mquestion[i].value;
if (rad_val != "b")
{ var popup = window.open('','',"resizeable=no,scrollbars=no,location=no,menubar=no,toolbar=no,width=221,height=112");
popup.document.write(wrong);
pops.document.close();
}
else
{ var popup = window.open("","window","resizeable,scrollbars=no,width=221,height=112");
popup.document.write(right);
pops.document.close();
}
}
}
}
</script>
hi all i m using the following validation code to validate email id Code: if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.getElementById("customer_name").value))
{
msg=msg+"Must Enter a valid Login-id/Email\n";
document.getElementById("customer_name").focus();
}
now i need that if the email id contains white blank space in front of email id or end of email id then this validation should pass otherwise not. at present if there is blank space in front and end of email id then the validation doesnt passes and gives alert. what should i add in it to validate it or how can it automatically remove white spaces before validating. vineet Right now when someone clicks on my listbox I immediately do an update on the form to populate the selected item. Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list. Thanks Hi, I have beginner skills using JS and, with alot help, have developed a script for an animation of a white noise pattern (TV screen noise). I need to use the animation in an eLearning educational lesson. The animation works OK but the sharpness of the animated pixels is poor (for example, looks blurry in FF). I wonder if someone can suggest a way to sharpen the animation? This would be a big help. The CSS simply creates a 640 x 640 canvas: canvas{ border:1px solid black; height:640px; width:640px; } The JS for the animation follows: (function(){ var viewbmd, px = [], timer, itsNoisy, stage, random = Math.random ; init(); function init(){ stage = document.querySelector("canvas"); viewbmd = stage.getContext("2d"); itsNoisy = true; stage.onclick = manageNoise; initNoise(); timer = setInterval(onTick, 50) } function initNoise(){ var array = [], d, val; for (var i = 0; i < 255; i++) { array[i] = 0xffffff * (i % 2); } for(i = 0; i < 6400; i++){ d = random()*256|0; val = array[d]; viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")"; viewbmd.fillRect(i%80, ((i)/80)|0, 8, 8); } px = viewbmd.getImageData(0, 0, 80, 80); } function onTick(){ flipSomePixels(160); viewbmd.putImageData(px, 0, 0); } function flipSomePixels(howMany/*:int*/){ for (var i = 0; i < howMany; i++){ var pxidx = (Math.random()*(px.data.length/4))|0; for(var j = 0; j < 3; j++){ px.data[pxidx*4+j] = !px.data[pxidx*4+j] ? 255 : 0; } } } function manageNoise(){ itsNoisy ? clearInterval(timer) : timer = setInterval(onTick, 50); itsNoisy = !itsNoisy; } })(); Any help appreciated. Kind Regards, saratogacoach Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. This post will contain a few guidelines for what you can do to get better help from us. Let's start with the obvious ones: - Use regular language. A spelling mistake or two isn't anything I'd complain about, but 1337-speak, all-lower-case-with-no-punctuation or huge amounts of run-in text in a single paragraph doesn't make it easier for us to help you. - Be verbose. We can't look in our crystal bowl and see the problem you have, so describe it in as much detail as possible. - Cut-and-paste the problem code. Don't retype it into the post, do a cut-and-paste of the actual production code. It's hard to debug code if we can't see it, and this way you make sure any spelling errors or such are caught and no new ones are introduced. - Post code within code tags, like this [code]your code here[/code]. This will display like so: Code: alert("This is some JavaScript code!")
- Please, post the relevant code. If the code is large and complex, give us a link so we can see it in action, and just post snippets of it on the boards. - If the code is on an intranet or otherwise is not openly accessible, put it somewhere where we can access it. - Tell us any error messages from the JavaScript console in Firefox or Opera. (If you haven't tested it in those browsers, please do!) - If the code has both HTML/XML and JavaScript components, please show us both and not just part of it. - If the code has frames, iframes, objects, embeds, popups, XMLHttpRequest or similar components, tell us if you are trying it locally or from a server, and if the code is on the same or different servers. - We don't want to see the server side code in the form of PHP, PERL, ASP, JSP, ColdFusion or any other server side format. Show us the same code you send the browser. That is, show us the generated code, after the server has done it's thing. Generally, this is the code you see on a view-source in the browser, and specifically NOT the .php or .asp (or whatever) source code. 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 all, I hope someone can advise whether such a script exists for what am wanting to do. From time to time, I need to send password information or login details and password information to some users. At the moment, am doing it via email with a subject named FYI and the body of the email basically just contain the login and the password or in some case, just the password. What am wanting to know is whether I can put these information into a HTML file which contains an obfuscated Javascript with a button that a user will click that will prompt for his login information and then will display the password. In its simplest form, I guess I am looking for a Javascript that will obfuscate a HTML file that contains the password. Anyway, hopefully someone understand what am looking for. I found some website that offers such service as obfuscating a HTML file but am hoping it can be done via a Javascript so it is at least "portable" and I do not have to be online. Any advice will be much appreciated. Thanks in advance. |
|||||||