JavaScript - Very Simple Pop-up Function Won't Work In Ie
I made a 50th anniversary guestbook to add memories/etc about our organization. The people can look at the entries and then if they want to add one of there own, there's a link that should pop up a form in a new for them to add it. I have no idea why this pop is not working in Internet Explorer (both IE6 and 7). It works beautifully in Firefox. I have no idea how you can go wrong with window.open. I'm stuck.
Again, only the actual pop up function doesn't work. Everything else seems to be working fine. I included all of my code though even for the tab navigation because the link to the pop up form changes based on what tab they are in (i.e. if they're looking at the past memories tab and click on the link, it takes them to the past memories form). I know it's probably TMI on the code, but I thought it might be somehow related and better safe than sorry, right? HTML Page Code: <html> <head> <title>50th Anniversary Reflections</title> <script type="text/javascript" src="js/guestbook.js"></script> <link href="css/guestbook.css" media="all" type="text/css" rel="stylesheet"> </head> <body> <div id="guestbook_container"> <div id="tab_nav_container"> <ul> <li><div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=1" onclick="change_value(1);">Past Memories</a></div></li> <li><div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=2" onclick="change_value(2);">Career Impact</a></div></li> <li><div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=3" onclick="change_value(3);">Future Wishes</a></div></li> <li><div id="new" class="tabs_off" onclick="popupform();">Share Your Memories</div></li> </ul> </div><!-- end tab_nav_container --> <div id="tab_content_container"> <div id="tab_1_data" class="tab_content"><p class="tab_category">What is your most important memory of NACUA?</p></div> <div id="tab_2_data" class="tab_content" style="display: none;"><p class="tab_category">How has NACUA benefitted you and your career?</p></div> <div id="tab_3_data" class="tab_content" style="display: none;"><p class="tab_category">What is your most important wish or hope for NACUA's future?</p></div> </div><!-- end tab_content_container --> <script type="text/javascript"> tabsClass.addTabs("tab_nav_container"); </script> <br class="clear" /> <div id="iframe_container"> <iframe name="gstbk_frame" id="gstbk_frame" src="guestbook_query.asp?cat=1" width="730px" height="550px" scrolling="auto" frameborder="none"></iframe> </div><!-- end iframe_container --> <br class="clear" /> </div><!-- end guestbook_container --> </body> </html> Here's the guestbook.js file: Code: //***** ASSIGN/CHANGE CATEGORY VALUES ***** function popupform(){ var href; href="guestbook_submission_form.asp?cat="+catValue; window.open(href, "Submission Form", 'width=600, height=400, scrollbars=no'); } var catValue = "1" function change_value(catChange){ catValue=catChange; change_text(); } function change_text(){ if(catValue=="1"){ document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Memories!</a>"; } if(catValue=="2"){ document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Career Experiences!</a>"; } if(catValue=="3"){ document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Add Your Own Wish!</a>"; } } //***** ASSIGN/CHANGE VALUES AND TABS ***** function assignCategory(cat){ document.form.category.value=cat; } function onLoadAssignAndSwitch(cat){ assignCategory(cat); tabsClass.addTabs("tab_nav_container"); var initialTab = "tab_" + cat + "_data" if (initialTab != "tab_1_data"){ document.getElementById(initialTab).style.display = ""; document.getElementById("tab_1_data").style.display = "none"; } document.getElementById("tab_" + cat).className = "tabs_on"; } function assignAndSwitch(element, cat){ tabsClass.switchTab(element); assignCategory(cat); } //***** TABBED MENU ***** var tabsClass = { tabSetArray: new Array(), classOn: "tabs_on", classOff: "tabs_off", addTabs: function (tabsContainer) { tabs = document.getElementById(tabsContainer).getElementsByTagName("div"); for (x in tabs) { if (typeof(tabs[x].id) != "undefined") { this.tabSetArray.push(tabs[x].id); } else {} } }, switchTab: function (element) { for (x in this.tabSetArray) { tabItem = this.tabSetArray[x]; dataElement = document.getElementById(tabItem + "_data"); if (dataElement) { if (dataElement.style.display != "none") { dataElement.style.display = "none"; } else {} } else {} tabElement = document.getElementById(tabItem); if (tabElement) { if (tabElement.className != this.classOff) { tabElement.className = this.classOff; } else {} } else {} } document.getElementById(element.id + "_data").style.display = ""; element.className = this.classOn; } }; I'm not that advanced in javascript (although not a total idiot) Any help and/or suggestions would be greatly appreciated! Thank you! Similar TutorialsHi, I am wanting to install an automatic re-direction script. I have seen some pretty complicated ones and then I came across this: Code: <script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "mobile.html"; } //--> </script> Is that going to work ? Thanks . I am a very novice web coder and can't get this to work... I've tried everything and am getting no where but frustrated! Thanks in advance!! Code: <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function calculateSavings() { var lastBill = eval(document.theForm.elements[0].value); var frequencyRating = eval(document.theForm.elements[1].value); var savingsRate = .05; var annualSavings = 0; /* if (frequencyRating == 'every day) { savingsRate = .01; } else if (frequencyRating == 'weekly) { savingsRate = .05; } else if (frequencyRating == 'monthly') { savingsRate = .15; } else if (frequencyRating == 'yearly') { savingsRate = .2; } */ annualSavings = lastBill * savingsRate; document.write(annualSavings); } // End --> </SCRIPT> </head> <body> <form name="savingsCalcForm"> How much was your last bill? <br><INPUT TYPE="text"> <br> <br> How often are you using your tractor? <br><input type="radio" name="group1" value="every day"> every day<br> <input type="radio" name="group1" value="weekly "> weekly<br> <input type="radio" name="group1" value="monthly"> monthly<br> <input type="radio" name="group1" value="yearly"> yearly<br> <br> <br> <INPUT TYPE="button" VALUE="calculate savings" onClick="calculateSavings();"> </form> </body> </html> I have the following script in the head; Code: <script type="text/javascript"> <![CDATA[ <!--This function validates the data from the three input boxes on the MAILTO form--> function validate() { Check="Valid"; Name=document.contact.name.value; Mail=document.contact.mail.value; Comment=document.contact.comment.value; if (Name=="your name" || Name.length<1) { alert("Please enter your name"); Check="Invalid"; } else if (Mail.indexOf("@")<1 || Mail.indexOf(".")<1) { alert("Please enter a valid email address"); Check="Invalid"; } else if (Comment=="your comment" || Comment.length<1) { alert("Please enter your comment"); Check="Invalid"; } if (Check=="Invalid") { return false; } else { alert("Thank you for your comment"); } } ]]> </script> and the following form in the body; Code: <div> <form name="contact" onsubmit="return validate()" action="email.asp" method="post"> <div class="input_title">Name:</div><input type="text" name="name" size="25" class="input_box" /> <br /> <div class="input_title">Your Email:</div><input type="text" name="sender" size="25" class="input_box" /> <br /> <div class="input_title">Phone Number:</div><input type="text" name="tel" size="25" class="input_box" />(Optional) <br /> Message: <br /> <textarea name="enquiry" cols="50" rows="6" class="input_box"></textarea> <br /> <input type="submit" value="Submit" name="submit" /><input type="reset" value="Reset" name="reset" /> <br /> </form> <br /><br /> </div> It is a aspx file and validates fine as XHTML Trans. Why won't it work? Right now, it only works with IE. This goes in the header... Quote: <script language="JavaScript1.2"> function makevisible(cur,which){ strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 } </script> and this goes in the image: Quote: <img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE"> It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE. Thanks for the help! hello, would you please tell me why my function does not work? what's wrong with my code Code: <html> <head> <title> Egypt </title> </head> <body> <form name="myform" action="#" onsubmit="return checkBoxes(this);"> <div align="left"><br> <input type="checkbox" name="option1" value="Top10"> Top 10 Tourist Attractions of Egypt<br> <input type="checkbox" name="option2" value="Alexandria"> Alexandria <br> <input type="checkbox" name="option3" value="POIs"> POIs<br> <br> <INPUT TYPE=SUBMIT VALUE="submit"> </div> </form> <script type="text/javascript"> function checkBoxes(theForm) { if ( theForm.option1.checked == false && theForm.option2.checked == false && theForm.option3.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; } </script> </body> </html> I'm new to JS and I can't get this function to display. Can you help me please?
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Untitled</title> <head> <script type="text/javascript"> function creatediv(){ var nwdiv=document.createElement('div'); nwdiv.style.float='right' nwdiv.id='mydiv'; var txt='hello world!'; document.body.apendChild(nwdiv); document.getElementById(mydiv).innerHTML=txt; document.write(txt); } </script> <style type="text/css"> </style> </head> <body> <form> <input type="button" value="Click me!" onclick="creatediv()" /> </form> </body> </html> Hey guys, I'm beginning to learn javascript, and I've come across functions like the one below in many scripts. I just don't understand the purpose of the parameter! Nothing is being passed into the function when it's being called- so what's the point of specifying an argument??? Code: function doSomething(e) { if (!e) var e = window.event; alert(e.type); } Why not: Code: function doSomething() { var e = window.event; alert(e.type); } I've been trying for several hours to solve this University problem but I'm just unable to get it done. I'm supposed to create a function that takes an array with all the A,B,C,D ... and shift them one place to the right (for instance array of A,B,C,D should be shifted and be like D,A,B,C - the last character goes to first position) Here is the code that I've been dealing with: Code: var abcArray = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; function shift(anyArray) { var newArray = Array(anyArray.length); for (var position = 0; position < newArray.length; position = position + 1) { if (position == 0) { newArray[position] = anyArray[anyArray.length - 1]; } else { newArray[position] = anyArray[position - 1]; } } anyArray = newArray; } shift(abcArray); document.write(abcArray); If I remove the function and try this code directly on the array it does work, but when I use the code as it is just like you see - the function shift doesn't change the Array and doesn't shift the values inside one position to the right and I have no clue why. Anyone has some ideas?! hello, I posted a threat a couple of days ago, but i got no answer. I guess it was just too messy. So i'm trying over again. You might therefore have a little deja vu, but still, any help will be greatly appreciated. I need this function to work on all my div, separately, on loading. here is the function: Code: <script> // Random Position Script var xxx = Math.floor(Math.random()* (pageWidth()-230)); var yyy = Math.floor(Math.random()* (pageHeight()-50)); function start() {var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo('myobj',x,y); setObjVis('myobj','visible');} window.onload = start; window.onscroll = start;// JavaScript Document </script> At the moment, the function is working on one object ('myObj'). I laced all my documents into separate divs and i need them all (and seperatly) to load on a random position at start. So i need to write in something that makes this function keep on going for all my objects. It might seem like a very dumb question, but 'm just starting with javascript, so not much of a coder yet. Hope you can help o this one. nice day to everybody! Hi! What am doing wrong? The script works -- identifies blank fields -- but the second function (change_subject) is ignored. This is the script: Code: <HEAD> <script> function is_filled() { if (form_1.realname.value=="") { alert("Please enter your name") form_1.realname.focus() return false } if (form_1.subject.value=="") { alert("Please enter a subject") form_1.message.focus() return false } else return true }; function change_subject { form_1.subject.value="form_1.realname.value + '_' + form_1.subject.value" }; </script> </HEAD> This is the FORM (used for MSA FormMail): Code: <form name="form_1"; onSubmit="return is_filled()"; on Submit="change_subject()"; method="post"; action="http://gb2gf.org/cgi-sys/FormMail.cgi"> <input type="hidden" name="recipient" value="drt@gb2gf.org"> <input type="hidden" name="required" value="greeting,realname,city_state,email_1,email_2,message"> <input type="hidden" name="sort" value="order:greeting,realname,city_state,email_1,email_2,message"> <input type="hidden" name="redirect" value="http://www.gb2gf.org/thanks.htm"> <!-- Input fields here --> </form> Thanks! Dr. T. How would I add up a array of numbers in a function? My numbers keep getting written as strings, instead of adding onto each other. I am a beginner. function (myNumbers) { var number = [6,9,10,13,14]; var total = 0; for(var total=0; total < number.length; total = total + 1) { total = total + number; document.write(total); } } myNumbers(); This is just an excercise. We have created this function with loops and arrays Problem is the loops work only when I take out the function when the function is in place, nothing works, it is part of exercise anyone have suggestions here is my code Code: title>Congressional Races</title> <link href="results.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="votes.js"></script> <script type="text/javascript"> function totalVotes(votes){ var total=0; for (var i = 0; i <votes1.length; i++) { total = total + votes1[i]; } document.write(total); } </script> } </head> <body> thanks all who can help My switch function just goes to the default. I've double double checked the file paths of the image on the page and it's right. So I'm not sure what's going on. here's what I got: Code: function change2(picName,imgName) { switch (document[picName].src) { case document[picName].src= "images/leaf_shapes/leaf_auriculate.gif": document[picName].src = "images/leaf_shapes/crenate/leaf_elliptic_crenate.gif"; break; case document[picName].src= "images/leaf_shapes/leaf_cordate.gif": document[picName].src= "images/leaf_shapes/serrate/leaf_elliptic_serrate.gif"; break; default: document[picName].src= "images/leaf_shapes/transparent1.gif"; } } Hello codingforums! I'm new to javascript and have a problem regarding functions. I've been trying to create a slideshow, and while testing different syntax etc. I'm getting stuck at why this works: Code: document.images.portrait.src = img2.src; And not this: Code: function slideshow(){ document.images.portrait.src = img2.src; } Thanks for any help! I am making a website where when the user clicks on a hyperlink in a list, a new browser window opens and displays a file called "faqs.html". The code for my function so far is: Code: function ValidateWebDetails { window.open("faqs.html") } To test whether the function actually worked, I first attached it to a button with this code: Code: <form method="post"> <input type="button" value="Go To FAQS" onClick="ValidateWebDetails()" </form> However, when I went to test the button, when I clicked on it, no new window was displayed and I was wondering what I could do to fix the problem. Any help is appreciated! Hi, I have PHP application and use javascript to download a file that is stored in the application. It works perfectly in FF but does not work in IE8. It does not even give an error. Below is the javascript code Code: function download(href) { document.location.href = href; } ---------------------------- function checkfile_newsletter() { document.getElementById('spn_msg').innerHTML = ''; if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { str = xmlhttp.responseText; if(str == "active") { try { //document.getElementById('anchor_nl2').click(); obj = document.getElementById('anchor_nl2'); if (obj.click) { obj.click(); } else if(document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var allowDefault = anchorObj.dispatchEvent(evt); } } catch(e) {} return false; } document.getElementById('spn_msg').innerHTML = str; } } var url = document.getElementById('hdn_contextpath').value + "index.php/download/checknewsletter/" + document.getElementById('sel_year').options[document.getElementById('sel_year').selectedIndex].value + "/" + document.getElementById('sel_month').options[document.getElementById('sel_month').selectedIndex].value + "/none/" + new Date().getTime() + '/'+ Math.random();; xmlhttp.open("GET",url,true); xmlhttp.send(url); alert(url); } The PHP code that triggers the above functions is as below PHP Code: <td> <select id="sel_month" name="sel_month" onchange="changepath();"> <?php $ctr = 1; foreach($arr_month as $month) { echo "<option value='".($ctr)."' ".($ctr++ == $curr_month ? "selected" : "")." >$month</option>"; } ?> </select> <select id="sel_year" name="sel_year" onchange="changepath();"> <?php for($ctr = $curr_year; $ctr >= $start_year; $ctr--) { echo "<option value='$ctr' ".($ctr == $curr_year ? "selected='selected'" : "").">$ctr</option>"; } ?> </select> <a id="anchor_nl2" href="<?php echo $this->config->item('base_url'); ?>index.php/download/newsletter2/<?php echo $curr_year; ?>/<?php echo $curr_month; ?>" onclick="download(this.href); "></a> <input type="button" id="btn_get" name="btn_get" value="Retrieve the Newsletter" onclick="checkfile_newsletter(); "> <input type="hidden" id="hdn_nl2_path" name="hdn_nl2_path" value="<?php echo $this->config->item('base_url'); ?>index.php/download/newsletter2/" /> <br/> <span id="spn_msg" class="display_msg"></span> I tried to debug it with alert but it goes to the checkfile_newsletter(); function but does not trigger the alert in download(this.href); when run on IE8 but in FF it works properly. Please help me to resolve this. Thanks I don't get to use javascript as much as I would like, but I am having a problem with a page so I stripped out all the extras and got down to just the part I am having a problem with and I think this should fill the div with the id testingdiv when the page loads but it doesn't. Any help would be appreciated. Code: <script type="text/javascript"> function getClientList(listtype) { document.getElementById('testingdiv').innerHTML = listtype; } window.onload = getClientList('own'); </script> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <input type="hidden" name="hidden" id="hidden" value="99" /> <title>untitled</title> </head> <body> <div id="testingdiv"></div> </body> </html> Hey all i am in need of some help trying to figure out how to pass a string into an array field for a chart. The chart i am using is this [http://www.highcharts.com/] Here is the chart code: Code: function drawChart(theDATA) { var chart = new Highcharts.Chart({ chart: {renderTo: 'container',defaultSeriesType: 'column'}, title: {text: 'March 2010 Confirmed User Visit\'s'}, xAxis: {categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']}, yAxis: {min: 0,title: {text: 'User Visit\'s'}}, legend: {layout: 'vertical',backgroundColor: '#FFFFFF',style: {left: '100px',top: '70px',bottom: 'auto'}}, tooltip: {formatter: function() {return this.y;}}, plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}}, series: [{name: 'Confirmed Users Visit\'s', data: theDATA.split(',') }] }); } With the code above, you would think that theDATA would work but it does not display the data within it. Say that theDATA is '2,5,4,7,8,9'. If i had this: Code: data: [2,5,4,7,8,9] Then it would work just fine. But if i use those same numbers... Code: theData = "2,5,4,7,8,9" data: theDATA.split(',') It does nothing on the chart... So what am i doing wrong???? David I'm still learning js core using Flanagan's 5th ed. so please bear with me; is the if ("ignore" in arguments.callee) return; below valid or a typeo? Thanks J. Code: function inspect(inspector, title) { var expression, result; // You can use a breakpoint to turn off subsequent breakpoints by // creating a property named "ignore" on this function. if ("ignore" in arguments.callee) return; ....... |