|
JavaScript - Osmap / Gmap Switch Failing - Only On Ie
I'm not sure whether this is best posted here, or on a google maps api forum, but here goes:
I have a site which uses a google map, and works well, like this: http://www.railwaysarchive.co.uk/eve...p?eventID=6684 I have built a version of that page which uses an OS map by default, but allows switching to a google map. It is he http://www.railwaysarchive.co.uk/osm...p?eventID=6684 The script uses a simple toggle as follows: Code: function toggleMap() {
// toggle map div visibility
var googlemap = document.getElementById("googlemap");
var OSmap = document.getElementById("OSmap");
if (OSmap.style.display!="block") {
// currently hidden, show
OSmap.style.display="block";
googlemap.style.display="none";
document.getElementById("maplink").innerHTML= "Switch to Google Map";
} else {
OSmap.style.display="none";
googlemap.style.display="block";
document.getElementById("maplink").innerHTML= "Switch to OS Map";
}
}
I was having trouble getting both maps to load their respective data when one was hidden, so both maps start out with display:block and then the gmap is hidden during the <body onload>. This system works great with Firefox and with Chrome, but in IE if you switch to the google map the tiles don't load. Can anyone help? Relevant code snippets are as follows: Code: <body onload="createOSAccidentSummaryMap(52.6566359591919, -3.14070984721184, 7); createAccidentSummaryMap(52.6566359591919, -3.14070984721184, 'accident', 13); toggleMap();">
function createAccidentSummaryMap(dblLatitude, dblLongitude, enumType, lngZoom) {
// creates a map with a single event marker, map type controls and full zoom controls
// and centers it on the event coordinates
if (GBrowserIsCompatible()) {
// checks for compatible browser
map = new GMap2(document.getElementById("googlemap"));
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(dblLatitude, dblLongitude), lngZoom);
map.enableDoubleClickZoom();
map.setMapType(G_HYBRID_MAP);
var icon = createEventIcon(enumType);
var point = new GLatLng(dblLatitude, dblLongitude);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
}
}
Similar TutorialsI have this script that works in IE: Code: var xmlhttpInk;
var inkdivID;
var inkholdID;
function addInkOpt(iside,ivalue)
{
inkdivID="ink"+iside+ivalue;
inkholdID="ink"+iside+"hold";
var divExist=document.getElementById(inkdivID);
if (divExist==null)
{
xmlhttpInk=GetXmlHttpObject();
if (xmlhttpInk==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="/scripts/addink.php";
url=url+"?q="+iside+"&k="+ivalue;
url=url+"&sid="+Math.random();
xmlhttpInk.onreadystatechange=InkChange;
xmlhttpInk.open("GET",url,true);
xmlhttpInk.send(null);
}
}
function InkChange()
{
if (xmlhttpInk.readyState==4)
{
var newDiv=document.createElement("div");
newDiv.id=inkdivID;
var objToInserBefore=document.getElementById(inkholdID);
newDiv.innerHTML=xmlhttpInk.responseText;
objToInserBefore.parentNode.insertBefore(newDiv,objToInserBefore);
}
}
Here's the PHP file for it: PHP Code: mysql_select_db($database_geQuote, $geQuote); $query_inkList = "SELECT * FROM Ink ORDER BY Ink.InkID"; $inkList = mysql_query($query_inkList, $geQuote) or die(mysql_error()); $row_inkList = mysql_fetch_assoc($inkList); $totalRows_inkList = mysql_num_rows($inkList); $iside=$_GET["q"]; $k=$_GET["k"]; $ivalue=$k+1; echo "<p>Ink:"; echo "<select name='Ink".$iside."Data[".$k."][InkID]' class='dropMenu' onchange='addInkOpt(".$iside.",".$ivalue.")'>"; echo "<option value='NULL'></option>"; do { echo "<option value='".$row_inkList['InkID']."'>".$row_inkList['InkDesc']."</option>"; } while ($row_inkList = mysql_fetch_assoc($inkList)); $rows = mysql_num_rows($inkList); if($rows > 0) { mysql_data_seek($inkList, 0); $row_inkList = mysql_fetch_assoc($inkList); } echo "</select>Desc:"; echo "<input name='Ink".$iside."Data[".$k."][InkDesc]' type='text' class='inkdesc' maxlength='25' /><input type='hidden' name='Ink".$iside."Data[".$k."][InkID".$iside."]' value='' /></p>"; mysql_free_result($inkList); However, THIS script does not: Code: var xmlhttpStock;
function getJobStock(str)
{
xmlhttpStock=GetXmlHttpObject();
if (xmlhttpStock==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="/scripts/jobstock.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttpStock.onreadystatechange=JobStockChange;
xmlhttpStock.open("GET",url,true);
xmlhttpStock.send(null);
}
function JobStockChange()
{
if (xmlhttpStock.readyState==4)
{
document.getElementById("jobStock").innerHTML=xmlhttpStock.responseText;
}
}
and it's PHP file: PHP Code: $q=$_GET["q"]; mysql_select_db($database_geQuote, $geQuote); $query_StockList = "SELECT Stock.StockName, Stock.StockID FROM Stock WHERE Stock.StockWeightID = ".$q." ORDER BY Stock.StockName"; $StockList = mysql_query($query_StockList, $geQuote) or die(mysql_error()); $row_StockList = mysql_fetch_assoc($StockList); $totalRows_StockList = mysql_num_rows($StockList); do { echo "<option value='".$row_StockList['StockID']."'>".$row_StockList['StockName']."</option>"; } while ($row_StockList = mysql_fetch_assoc($StockList)); $rows = mysql_num_rows($StockList); if($rows > 0) { mysql_data_seek($StockList, 0); $row_StockWList = mysql_fetch_assoc($StockList); } mysql_free_result($StockList); it should be the same thing, they're both using HTTP Requests, but the "getJobStock" script just returns no options, but ONLY in IE. In all other browsers PC or MAC it works fine. Could someone please help me figure out what the problem is? I'm attempting to integrate a rich-text mail form and use PHPMailer to send HTML email to a Godaddy email account. The rich-text editor script is the WizzyWig one. (Original can be found Here) Location of form: http://www.westmichiganconcerts.com/contact.html Too much code to post here from all the different files involved, so I saved a version of each file as a TXT file, with it's original extention in brackets before it for easier code viewing (with the exception of the contact.html file above: Involved files: [.js]Rich-Text Editor: /scripts/whizzywig_61.txt [.js]File that spawns preview window: /scripts/load.txt [.php]File called by form action: test_mail.txt [.php]PHPMailer: /lib/PHPMailer_v5.1/class.phpmailer.txt [.php]Config file: /config.txt [.inc]Include file: MailClass.inc.txt Basic flow is: Customer goes to the Contact Page, then enters in rich text, and clicks "Preview" - this spawns a new window "DEMO" and writes the contents of the WizzyWig Iframe to a hidden field. From there, the customer can click "Submit", and it send the email to a Godaddy email account. Here's the problem: I've got a .replace command in the load.js file that replaces the double quotes with singles. If left as doubles, it completely breaks the code. When that email is received, all single quotes are backslashed(escaped?) ( \') so only portions of the HTML (that don't use quotes) show up. (examples: Highlight, insert image, insert link, spans, etc) I'm not fluent with Javascript, so I've been beating my head against the wall for 5 days now trying to get this to work. It's time to ask for some help lol. I'm not sure where / and in what file is causing this to break. Sent a test HTML email to the same Godaddy email address to make sure it could recieve HTML emails, and it worked fine. Any help would greatly be appreciated!! ~ John P.S.: I know there's browser issues with FF etc - I'll correct that once I can get the basic functionality of the pages to work Hi, I am trying to make a fuinction that, when called, will return the string that is retrned in text form from my php code. This is what i currently have, but it is just failing when it is run, what am i doing wrong? Code: function shortenUrl(url) {
var response;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://10.1.1.10/projects/short/?ext&url=" + encodeURIComponent(url), false);
xmlhttp.send(null);
xmlhttp.onload = function() {
var response = xmlhttp.responseText;
return response;
}
return "Failed!";
}
alert(shortenUrl("http://www.google.com.au/"));
Thanks Edit: ohh, and this is running chrome, so no standards issues Hi - I have an ASP.Net 4.0 solution that runs fine on a Windows 2008 server. However, I've just been given a new Windows 7 64-bit machine to use as my development machine and I'm having a problem with one of my aspx pages. This page has some javascript on it, which runs fine, but then it gets to the following code: Code: <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
This not code that I've written; it's code that's generated client-side that I see as I'm debugging my app in Visual Studio 2010 (trying to figure out what the $^#$ is going on). At any rate, once this code completes, the app does nothing. The debugger should take me to some server-side code, but it doesn't. It just sits there. The result is that the page doesn't do what it's supposed to do (no inserts to databases, no success messages, no nothing). As I said, this problem is restricted to my W7 64-bit machine; it runs fine on W2008. Other pages with javascript in the same solution work fine on my W7 machine. I found a post (http://dopostback.net/index.php/net-...anel-problems/) that discusses a similar issue within an UpdatePanel, but I'm not using UpdatePanel. My page does have hidden controls on it, but so do other pages that work just fine. Does anyone know what could be causing this? Thanks! I have an javascript coding issue with regards to a tabbed menu. The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises. The source code is viewable he http://www.kenaani.co.uk I was following this tutorial: http://www.elated.com/articles/javascript-tabs/ Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue. Am hoping that someone can spot whatever is going wrong. I've been running into some trouble with a script that just isn't working, and since I'm not encountering any error messages and a similar script on the same page is working just fine, I'm really puzzled. Anyways, here's the code I'm having trouble with: Code: function ShowHide(Numb){
Ident1 = AdIDList[Numb]+"Tx";
Ident2 = AdIDList[Numb]+"Lnk";
if (AdLink[Numb] == "hidden"){
document.getElementById(Ident1).style.height = "355px";
AdLink[Numb] = "visible";
}
if (AdLink[Numb] =="visible"){
document.getElementById(Ident1).style.height = "55px";
AdLink[Numb] = "hidden";
}
}
And here's the page code calling it (The page is assembled via PHP from a database, but I'm grabbing the code from my browser) Code: <a href="#Good ShepherdLnk" id="Good ShepherdLnk" onclick="ShowHide(2);return false;" class="AdLink">Stories</a><br> And, here's a similar bit of code on the same page that is working just as it's supposed to. Code: function hideimage(){
for (Count=0; Count<AdTotal; Count ++){
if (VisPic[Count]=="visible"){
Ident = AdIDList[Count]+"AdB";
document.getElementById(Ident).style.visibility = "hidden";
VisPic[Count]="hidden";
}
}
}
function bigimage(Item){
hideimage();
Ident1 = AdIDList[Item]+"AdB";
document.getElementById(Ident1).style.left="35%";
document.getElementById(Ident1).style.visibility = "visible";
VisPic[Item] = "visible";
}
I'm hoping someone can help correct a small problem with this script, which is intended to highlight particular text strings. Background: The script is being used at a MediaWiki site, and is adapted from a working script from Wikipedia (highlightmyname.js). The original script highlights the logged-in user's username (represented by wgUserName). I've made a copy of the script, which you can see in full here, and adapted it to work on a pre-defined array of names, adding: Code: var Admin; var ArrayAdmins = ['Adam', 'Axiomist', 'Matt', 'Steve']; for (Admin in ArrayAdmins) I also replaced each instance of wgUserName with ArrayAdmins[Admin] The problem: is that, instead of highlighting all instances of every element in ArrayAdmins, only the last element listed ('Steve') is being used. So my question is, what change(s) need to be made to apply function highlightmyname to every element in ArrayAdmins? Any help would be hugely appreciated! I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery): http://docs.jquery.com/Using_jQuery_...ther_Libraries (Including jQuery before Other Libraries) My code (in a cold fusion environment, which should be irrelevant) looks like this: Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 });
});
</script>
</head>
<body>
<select id="cbo_status" name="cbo_status" multiple="multiple">
<option value="-1">All</option>
<option value="1" SELECTED>Assigned</option>
<option value="2" SELECTED>In Progress</option>
<option value="3" SELECTED>Complete</option>
<option value="4" SELECTED>Verified Resolved</option>
<option value="5" SELECTED>Will not be addressed</option>
<option value="6" SELECTED>Wishlist</option>
</select>
</body>
</html>
When I run the debugger, here's the error I'm still receiving: Error: Object doesn't support this property or method (pointing to the line below, character 3) jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); Does anyone have any idea why this might still be failing? Hello all I have a video playlist useing iframe http://alohainvesting.com/html5/Html5player.html Is there a way to get same results without iframes? i just want to switch items on nav to the wrapper window. can this be done? Thanks just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default. but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing? to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other? all opinions appreciated, and I hope I don't start another argument. Hi There, I need your help, I can't seem to get this work, which it theorecticly should work any ideas? <script> var x = 3 switch(x){ case x > 0: alert("overdue") break case x = 0: alert("due today") break case x < 0: alert("will be due") break } </script> Much thanks for everyones help. Cheers, Jay Give me an example for switch statements. I had to create one that tests value of parameter using a text string, I came up with this value Code: function createBar(partyType,percent){
switch(partyType) {
case D: <td class='dem'></td>
break;
Should I use " or ' between the dem? I am using break statements. do all breaks should end with string or do i need the bracket? I hope this does not seem like i getting people to do homework for me again,, just want to verify if i did this area correctly? I want to make a function that will also play a sound byte when you click on the large image. i need the sound byte to change with the images. Here is the code that i am using. Code: intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "images/picture1-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 2;
return(false);
case 2:
IMG1.src = "images/picture2-lg-over.png"
IMG2.src = "images/picture1-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 3;
return(false);
case 3:
IMG1.src = "images/picture3-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture1-sm-btm.png"
intImage = 1;
return(false);
}
}
i have tried many things that involved each case to contain a different IMG1.onClick=""; value but it doesnt seem to change when the case changes. I have also tried making another switch/case that would change the value of the onClick event.. nothing. any sugestions? Here is the code, in full: <htmll"> <head><title></title> <script type="text/javascript"> <!-- HIDE FROM INCOMPATIBLE BROWSERS function checkGrade(grade, value) { switch (grade) { case "A": if(grade == '90') window.alert("Your grade is excellent."); break; case "B": window.alert("Your grade is good."); break; case "C": window.alert("Your grade is fair."); break; case "D": window.alert("You are barely passing."); break; case "F": window.alert("You failed."); break; } } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> </script> </head> <body> <form name="gradeForm"action="Your Grades"> <input type="text" name="grade" /> <input type="button" value="Check Grade" onclick="checkGrade(document.gradeForm.grade.value);" /> </form> </body> </html> What's throwing me off is the "A" in the case. As well, "(document.gradeForm.grade.value)" I need to make it a IF statement, but not sure how to call that function. I have a function I call like this: var theBase = getBase(percent); then, the function: function getBase(percent) { var base=''; switch (percent) { case percent.indexOf("this") == 4: base = "that" break; case percent.indexOf("thisOther") == 9: base = "thatOther" break; } return base; } However, even if percent.indexOf("this")==4 (or if any other case matches perfectly), it never enters that case and assigns a value to 'base'. What am I doing wrong? how to make a switch that goes on a button(sorry that i cant describe it better)
This works fine in IE only. Any thoughts. function DisplaySelectedColor(cColor) { var elToFill = document.getElementById(cFieldOnFocus) elToFill.value = cColor; switch(cFieldOnFocus){ case"Page-Background":document.getElementById("Page").style.backgroundColor =cColor; break; case"Page-Background": document.getElementById("Page").style.backgroundColor =cColor; break; case"Outside-Border": document.getElementById("main_container").style.borderColor =cColor; break; case"Logo-Background": document.getElementById("logo_area").style.backgroundColor =cColor; break; case"Logo-Font": document.getElementById("logo_area").style.color =cColor; break; case"Outside-Area-Background": document.getElementById("main_container").style.backgroundColor =cColor; document.getElementById("linktestdiv").style.backgroundColor =cColor; break; case"Outside-Area-Font": document.getElementById("main_container").style.color =cColor; document.getElementById("main_nav").style.color =cColor; document.getElementById("right_column_content").style.color =cColor; document.getElementById("linktestdiv").style.color =cColor; document.getElementById("footer").style.color =cColor; break; case"Content-Background": document.getElementById("main_content").style.backgroundColor =cColor; break; case"Content-Font": document.getElementById("main_content").style.color =cColor; break; case"Footer-Background": document.getElementById("footer").style.backgroundColor =cColor; break; case"Hyper-Link": document.getElementById("activelink").style.color = cColor; break; case"Hyper-Link-Hover": document.getElementById("hoverlink").style.color = cColor; break; case"Hyper-Link-Visited": document.getElementById("visitedlink").style.color = cColor; break; } } Thanks for any help. Can't figure it out. Hi, Any help would be greatly appreciated. Below is the javascript that I am having a problem with. The two id's in question are at the end of the javascript. fyi Its for a form. What will happen is that the user selects the first dropdown with an id of 00N20000001HjsR. They then selects another dropdown with an id of 00N20000001Hp9Q. What I want is that on the second dropdown, if the user selects the value of Beauty Therapy, it will change the value of the first dropdown (id 00N20000001HjsR) to 'ANCB'. The problem I have at the moment is that it is not overriding the original dropdown selection. Any ideas on how to solve this? Much appreciated in advance, thanks!!! Code: <script type="text/javascript">
//check if prospectus is on
document.formRec.onsubmit = function() { return ValidForm(); };
function ValidForm(){
if (document.getElementById("first_name").value == ""){
alert("Please enter your first name");
document.getElementById("first_name").focus();
return false;
}
if (document.getElementById("last_name").value == ""){
alert("Please enter you last name");
document.getElementById("last_name").focus();
return false;
}
if (document.getElementById("email").value == ""){
alert("Please enter your email address");
document.getElementById("email").focus();
return false;
}
if (document.getElementById("phone").value == ""){
alert("Please enter your contact number");
document.getElementById("phone").focus();
return false;
}
if (document.getElementById('00N20000001Hp9a').value== "--None--"){
alert("Please choose you country of citizenship");
document.getElementById('00N20000001Hp9a').focus();
return false;
}
if (document.getElementById('00N20000001HjsR').value== "--None--"){
alert("Please select type of study you are interested in");
document.getElementById('00N20000001HjsR').focus();
return false;
}
switch (document.getElementById('00N20000001Hp9Q').value) {
case "--None--":
alert("Please select area of study you are interested in");
document.getElementById('00N20000001Hp9Q').focus();
return false;
break;
case "Beauty Therapy":
document.getElementById('00N20000001Hp9Q').value = "Beauty Therapy";
document.getElementById('00N20000001HjsR').value = "ANCB";
break;
}
return true;
}
</script>
Currently I have the following javascript switch statement ... Code: switch(firstchar){
case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9":
orderlist[0] += addthis; break;
case "a": case "A": orderlist[1] += addthis; break;
case "b": case "B": orderlist[2] += addthis; break;
case "c": case "C": orderlist[3] += addthis; break;
case "d": case "D": orderlist[4] += addthis; break;
case "e": case "E": orderlist[5] += addthis; break;
case "f": case "F": orderlist[6] += addthis; break;
case "g": case "G": orderlist[7] += addthis; break;
case "h": case "H": orderlist[8] += addthis; break;
case "i": case "I": orderlist[9] += addthis; break;
case "j": case "J": orderlist[10] += addthis; break;
case "k": case "K": orderlist[11] += addthis; break;
case "l": case "L": orderlist[12] += addthis; break;
case "m": case "M": orderlist[13] += addthis; break;
case "n": case "N": orderlist[14] += addthis; break;
case "o": case "O": orderlist[15] += addthis; break;
case "p": case "P": orderlist[16] += addthis; break;
case "q": case "Q": orderlist[17] += addthis; break;
case "r": case "R": orderlist[18] += addthis; break;
case "s": case "S": orderlist[19] += addthis; break;
case "t": case "T": orderlist[20] += addthis; break;
case "u": case "U": orderlist[21] += addthis; break;
case "v": case "V": orderlist[22] += addthis; break;
case "w": case "W": orderlist[23] += addthis; break;
case "x": case "X": orderlist[24] += addthis; break;
case "y": case "Y": orderlist[25] += addthis; break;
case "z": case "Z": orderlist[26] += addthis; break;
default: alert('Illegal Entry'); break;
}
... that I wish to optimize so that I do not need to write out so many lines of code. Also, I wish to take into the following as consideration ... Code: case "aa": case "Aa": case "aA": case "AA": orderlist[1] += addthis; break; ... for each two-character combination. (aa to zz) Appreciate any help. |
|||||||