JavaScript - Display Google Searh Results Inside Web Page
Hi,
Apologies in advance but I have no experience of Javascript. I found the following 'Cut & Paste Google Internal Site Search script' in the Javascriptkit.com library - it works well and provides an easy solution for adding a search function to a website - code below Code: <script type="text/javascript"> // Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use //Enter domain of site to search. var domainroot="www.javascriptkit.com" function Gsitesearch(curobj){ curobj.q.value="site:"+domainroot+" "+curobj.qfront.value } </script> <form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)"> <p>Search JavaScript Kit:<br /> <input name="q" type="hidden" /> <input name="qfront" type="text" style="width: 180px" />*<input type="submit" value="Search" /></p> </form> <p style="font: normal 11px Arial">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p> However, if possible, I would like to display the results inside the website structure rather than on a new page - is there an easy way to do this? Thanks in advance for any help. Similar TutorialsHi everyone, I'm putting together a family tree type organization chart and looking to be able to drag it around to view different parts similar to google maps. I believe javascript is the way to handle this but need some help pointing me in the right direction. Any help would be greatly appreciated. Thanks, Mike I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. I have a small form that I'm working on for a client. They want a form that their potential leads can fill out and then hit 'calculate rate'. Once this is done, the results should display on another page with a short summary of what their quote will be as well as some of the other information they filled out. It should also send an email to my client displaying the information that their lead just filled out. My only problem is I am not sure how to go about the calculation part. I know I would have to do an onSubmit, but how would I hide that calculation and then receive that number on another page. Here is the javascript for that form: Code: /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var practice_field = new Array(); practice_field["None"]=0; practice_field["Allergy and Immunology"]=4400; practice_field["Endocrinology"]=4400; practice_field["Pathology"]=4400; practice_field["Dermatology"]=4400; practice_field["Geriatrics"]=4400; practice_field["Physical Rehabilitation"]=4400; practice_field["Family Practice"]=6900; practice_field["General Practice"]=6900; practice_field["Internal Medicine"]=6900; practice_field["Oncology"]=6900; practice_field["Oral Surgery"]=6900; practice_field["Radiology"]=6900; practice_field["Gastroenterology"]=6900; practice_field["Infectious Disease"]=6900; practice_field["Nephrology"]=6900; practice_field["Ophthalmology"]=6900; practice_field["Pediatrics"]=6900; practice_field["Urology"]=6900; practice_field["Anesthesiology"]=9000; practice_field["Cosmetic Surgery"]=9000; practice_field["General Surgery"]=9000; practice_field["Neurology"]=9000; practice_field["Otolaryngology"]=9000; practice_field["Plastic Surgery"]=9000; practice_field["Vascular Surgery"]=9000; practice_field["Cardiology"]=9000; practice_field["Emergency Medicine"]=9000; practice_field["Gynecology"]=9000; practice_field["Orthopedic Surgery"]=9000; practice_field["Pain Management"]=9000; practice_field["Pulmonary Surgery"]=9000; practice_field["Neurological Surgery"]=9900; practice_field["Obstetrics"]=9900; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var society_member= new Array(); society_member["None"]=null; society_member["BCMA"]=0.10; society_member["DCMA"]=0.10; society_member["FOGS"]=0.10; society_member["FNS"]=0.10; society_member["PBCMS"]=0.10; society_member["FSPS"]=0.10; //This function finds the filling price based on the //drop down selection function getPracticeField() { var docPracticeField=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedPracticeField = theForm.elements["practice"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docPracticeField = practice_field[selectedPracticeField.value]; //finally we return cakeFillingPrice return docPracticeField; } //This function finds the filling price based on the //drop down selection function getSelectedSociety() { var docSelectedSociety=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedSociety = theForm.elements["society"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docSelectedSociety = society_member[selectedSociety.value]; //finally we return cakeFillingPrice return docSelectedSociety; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=0; } //finally we return the candlePrice return candlePrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=0; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + candlesPrice() + insciptionPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } If you look at the bottom you can see where the Function that Calculates everything is. Right now it calculates onClick. I just want it to calculate after the user has filled out the form completely and display that calculation on another page along with the rest of the information they inputted. I've implemented the Google CSE on my website and it works fine but I'd like to ask if there is a way to highlight the searched words on destination sites using javascript? i.e.: 1. I type into the search form the word I need to find on my website --> 2. I get result site with links to subsites --> 3. After clicking one of the listed links I go back to my website, to certain subsite --> 4. The word I've been searching for is highlighted so I can easily find it. Thanks in advance. Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head> <script type="text/javascript"> function loadSubPlace(File,ID,Msg,Eile,EID,Esg){ loadXMLDoc1(File,ID,Msg); var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000); } </script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #map_canvas {width:30%; height:250px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM countries WHERE Country='{$_SESSION['Country']}'"); while($row = mysql_fetch_array($result)){ echo $row['Map']; } mysql_close($con); ?>); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div class="countryright" id="map_canvas"> include("dbconnect.php"); $snowball=explode(';',$_POST['syringa']); $turnsol=$snowball[1]; $violet =$snowball[2]; $wakerobin=$snowball[3]; global $turnsol; global $violet; global $wakerobin; echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />'; $result=mysql_query("SELECT * FROM regions WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !='' ORDER BY sub ASC"); while($row = mysql_fetch_array($result)){ $wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}"; $tigerlilly=$row['RegionPId']; echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />'; } echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />'; echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />'; mysql_close($con); ?> I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help Here is the code implemented on the search results page: Code: <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 500; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas? I have this simple php array. The array will dynamically pull results from the db in the future. PHP Code: <?php $dataArray = array ( 'id1' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'GGP', 'timestamp' => date('m/d/y'), 'location' => 'Bellevue', 'comments' => 'It works!', ), 'id2' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'Meijer', 'timestamp' => date('m/d/y'), 'location' => 'San diego', 'comments' => 'It works!', ), 'id3' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'Point Inside', 'timestamp' => date('m/d/y'), 'location' => 'Boston', 'comments' => 'I guess its working? Maybe not exactly what we want yet though?!', ) ); echo json_encode($dataArray); ?> Currently if I have 100 results in my array, 100 results will be added to the table, 75 = 75 rows etc. What I am trying to plan out is a logical way to display one result from the array at a time. I am not looking for a chunk of jquery as an answer, better yet would be a plan/idea a programmer would you use to solve this. PHP Code: $(document).ready(function() { setInterval(function() { // get data $.ajax({ url: '/ajax/data.php', type: "GET", cache: false, error: function(data) { $("div#error").html('error: '+data); }, success: function(data) { var jsonObj = jQuery.parseJSON(data); jQuery.each(jsonObj, function(index, value) { var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>"); $("#mainTable tbody").prepend(newRow); }); } }); }, 5000); }); thanks Can anyone help me with a little project I'm been lumbered with? I've been given the task of building a carbon offset calculator What I need to do is have a webpage on a touchscreen kiosk that allows a visitor to the client enter their name/company/email address, plus select how they travelled to the premises and their departing post code. When they submit the form, I need it to email the details to the client so they can produce a nice little certificate saying how many trees have been planted to offset the visitors journey - but I also need it to display the details on screen before resetting itself for the next Prius driving visitor to use. I've got to the stage where I can EITHER capture all the details needed and email them OR capture all the details needed and calculate the distance travelled, KGs of CO2 expended and how many trees are needed and display them. I'm having difficulty getting it to do both! Thanks in advance! Right I have google maps connected to a database which holds stockists and their information. The user enters their postcode and radius and markers are put on the map of stockists in the radius of their postcode. I have this all working fine and the database chucks the information into an xml file fine. The problem im having is displaying the information in the pop up window of the marker. PHP Code: <script type="text/javascript"> //<![CDATA[ var map; var geocoder; function load() { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById('map')); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(54.622978,-2.592773), 5); } } function searchLocations() { var address = document.getElementById('addressInput').value; geocoder.getLatLng(address, function(latlng) { if (!latlng) { alert(address + ' not found'); } else { searchLocationsNear(latlng); } }); } function searchLocationsNear(center) { var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays(); var sidebar = document.getElementById('sidebar'); sidebar.innerHTML = ''; if (markers.length == 0) { sidebar.innerHTML = 'No results found.'; map.setCenter(new GLatLng(54.622978,-2.592773), 5); return; } var bounds = new GLatLngBounds(); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute('name'); var address1 = markers[i].getAttribute('address1'); var address2 = markers[i].getAttribute('address2'); var town = markers[i].getAttribute('town'); var county = markers[i].getAttribute('county'); var postcode = markers[i].getAttribute('postcode'); var telephone = markers[i].getAttribute('telephone'); var distance = parseFloat(markers[i].getAttribute('distance')); var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); var marker = createMarker(point, name, address1, address2, town, postcode, telephone); map.addOverlay(marker); var sidebarEntry = createSidebarEntry(marker, name, town, distance); sidebar.appendChild(sidebarEntry); bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); }); } function createMarker(point, name, address1, address2, town, postcode, telephone) { var marker = new GMarker(point); var html = '<b>' + name + '</b> <br/>' + address1 + '<br />' + address2 + '<br />' + town + '<br />' + postcode + '<br />' + telephone; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createSidebarEntry(marker, name, town, distance) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + town; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() { GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; }); return div; } //]]> </script> Example Xml: PHP Code: <markers> <marker name="AVON ANGLING CTR" address1="348 WHITEHALL ROAD" address2="ST. GEORGES" town="BRISTOL" county="AVON" postcode="BS5 7BP" telephone="01179 517250" lat="51.464432" lng="-2.546576" distance="0"/> <marker name="SCOTT TACKLE" address1="42 SOUNDWELL ROAD" address2="STAPLE HILL" town="BRISTOL" county="AVON" postcode="BS16 4QP" telephone="01179 567371" lat="51.477093" lng="-2.507667" distance="1.8894400025753"/> </markers> the only information displayed in the sidebar entry is the name and distance and on the marker just the name. I have a display hidden div code that works great, as seen: Code: <a href="javascript:InsertContent('login-popdown');>Login</a> but the problem is that when I put this in a PHP echo, like so PHP Code: // retrieve the session information $u = $_SESSION['username']; $uid = $_SESSION['loginid']; // display the user box echo " <span class='toplinks'><a href='javascript:InsertContent('login-popdown');'>Log In</a> - <a href='http://www.tomhilsee.com/ipool/system/register.php'>Register</a></span>"; the javascript does not work because the ' interferes I'm assuming. So is there a way to accomplish the show/hide without using some sort of code that would interfere with the php echo? Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out. Basically we need to find a word which is inside a class and display a link. So something like this find a word equal to "1 line custom" then display this <a href="/1-line-custom.htm">click here</a> I'm not sure if this is really simple or not. Any help would be much appreciated. Thanks Will Hi.. I have forms and I only need to input is the Demanded Qty, and from Demanded Qty that I input it will compute the demanded qty for each Item Code. Now my problem is I don't know on how can it possible that while i input the quantity it will also autodisplay the demanded qty for each materials. Noted: the Demanded Qty that will auto display is display only on the Demanded Qty you input per Items. For Example: On Item = P28 i input demanded qty, only on the ItemCode will display the output. and when i input on P30 the computation will display on the ItemCode for P30. here is my code: PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <title>Stock Requisition</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css"> <script type="text/javascript"> function compute_quantity(){ var DemandedQty = document.getElementById('DemandedQty').value; var Quantity = document.getElementById('Quantity').value; var SubQty = (DemandedQty * Quantity); } </script> </head> <body> <form name="stock_requisition" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div> <table> <thead> <th>Items</th> <th>Sub Items</th> <th>Item Code</th> <th>Demanded Qty</th> <th>UoM</th> <th>Class</th> <th>Description</th> <th>BIN Location</th> </thead> <?php $DemandedQty = $_POST['DemandedQty']; $sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items"; $res_bom = mysql_query($sql, $con); while($row = mysql_fetch_assoc($res_bom)){ $Items = $row['Items']; $Items_ = substr($Items, 12, 3); echo "<tr> <td style='border: none;font-weight: bold;'> <input type='name' value='$Items_' name='Items_[]' id='Items' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border:none;'> </td> <td style='border:none;'> </td> <td style='border: none;'><center><input type='text' name='DemandedQty[]' id='DemandedQty' value='' size='12' onkeypress = compute_quantity()></center></td> </tr>"; $sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error()); $res_sub = mysql_query($sql, $con); while($row_sub = mysql_fetch_assoc($res_sub)){ $Items1 = $row_sub['Items']; $SubItems = $row_sub['SubItems']; $ItemCode = $row_sub['ItemCode']; $UoM = $row_sub['UoM']; $Class = $row_sub['Class']; $Description = $row_sub['Description']; $BINLocation = $row_sub['BINLocation']; $Quantity = $row_sub['Quantity']; echo "<input type='hidden' name='Quantity' id='Quantity' value='$Quantity'>"; echo "<tr> <td style='border: none;'> <input type='hidden' value='$Items1' id='Items1' name='Items1[]'></td> <td style='border: none;'> <input type='text' name='SubItems[]' value='$SubItems' id='SubItems' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='ItemCode[]' value='$ItemCode' id='ItemCode' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'><center><input type='text' name='SubQty[]' id='SubQty' value='' size='12' style></center></td> <td style='border: none;' size='3'> <input type='text' name='UoM[]' value='$UoM' id='UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td> <td style='border: none;'> <input type='text' name='Class[]' value='$Class' id='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td> <td style='border: none;'> <input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> </tr>"; } } ?> </table> </div> </form> </body> </html> Thank you so much On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page? How exactly would i go around doing this? Thankyou Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya My first google map, using latlng coordinates works fine. However my second google map isn't working. The map itself is grey. I have my code, but the problem is I am not calling the geocode function and I am not sure where I should do this. Code: <script type="text/javascript"> var geocoder; var submap; function createGMapFromAddress(position){ alert(position); geocoder = new google.maps.Geocoder(); var sublatlng = new google.maps.LatLng(position); var map_options = { zoom: 4, center: sublatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var submap = new google.maps.Map(document.getElementById("placemap_canvas"), map_options); } function codeAddress(address){ alert("address"); var address = document.getElementById("address").value; geocoder.geocode({address: address}, function(results, status){ if (status == google.maps.GeocoderStatus.OK && results.length){ if (status != google.maps.GeocoderStatus.ZERO_RESULTS){ map.set_center(results[0].geometry.location); } } else { alert("Geocode was unsuccessful due to: " + status); } }); } </script> The script is called by clicking on a button: Code: <input type="button" value="Click" onclick="createGMapFromAddress('Oxford Street,London,UK')"; /> Hello, I am creating extension for Google Chrome and I want to add options page. http://hotfile.com/dl/79987277/f5faf...ion_2.rar.html Here is extension and I want to connect options page to content.js and when someone makes changes in options it should change code too (Sorry for bad English) Hi All, Im new to this forum...need some of your help and advice. I have a js code like this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> what it does is that it hide and show a panel by slidint it to the left. But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { var autoTimer = null; autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos }); autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos = -856 }); }, 2000); },1000); $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> But when the panel finished showing the button to open it again doesn't work...any help please..really urgent. thks //Sam Hi there! I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image. Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up. So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position. Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen. Here is an example: http://synaxis.pcriot.com/ When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there. And this does happen on every browser that I have tested, Firefox, IE, and Chrome. So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful. Thank You Here is a link to the original code: http://synaxis.pcriot.com/javascript...ox/glassbox.js And modified code: http://synaxis.pcriot.com/javascript...ox/glassbox.js The modified code is at the very bottom of the script. Original Code: Code: /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } Modified Code Code: /** * @private */ var removeElement = function(id) { var Node = document.getElementById(id); Node.parentNode.removeChild(Node); } /** * @private */ var getDocHeight = function() { var db = document.body; var ddE = document.documentElement; return Math.max( db.scrollHeight, db.offsetHeight, db.clientHeight, ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight ); } /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } |