JavaScript - Confirm Box On Clicking Link With Html Class "external"
Hey guys,
This is my first time ever posting in a programming forum so please be nice! :) I'll admit right away that this is for a homework assignment, but I really did try to solve it myself before I decided to post here. The instructions are to have a confirm box pop up when links with the HTML class value "external" are clicked. If the user clicks "OK" they should be directed to the linked page. If they click "Cancel" they should not be directed anywhere. Here's my code: Code: function checkClass() { var links = document.getElementsByTagName("a"); for ( var i = 0 ; i < links.length ; i++ ) { var link = links[i]; if (link.className == "external") { link.onclick = clickHandler(); } } } window.onload = checkClass; function clickHandler() { if (confirm("You clicked an external link. Do you really want to leave this site?")) { return true; } return false; } The problem is that the confirm box is triggered on page load and not on link click. I know I wrote Code: window.onload = checkClass; but how else should I call the function? I thought Code: if (link.className == "external") would keep it from going as far as to the confirm box until an external link was clicked. Thanks for pointing me in the right direction, Johanna Similar TutorialsHello, how could I run an external (but still on the same server) ".js" file from a <a href> or a button? Is it possible and how? Thanks. If you need any details just ask. so that the form only submits when 2 fields are identical? this is the code I am trying to edit Code: <div class="title">ENROLLMENT</div> <p>You are on your way to receiving <strong>generous cash backs</strong> <em>PLUS</em> a <strong>steady stream of free dinners</strong> just for shopping at your favorite stores!</p> <br /> <form action="" class="registration" id="cform"> <div> To begin, please complete the following:<br /> <div class="f11"> <input type="text" name="name" value="Name:" onfocus="if(this.value=='Name:')this.value=''" /><br /> <input type="text" name="address" value="Address:" onfocus="if(this.value=='Address:')this.value=''" /><br /> <input type="text" name="phone" value="Phone:" onfocus="if(this.value=='Phone:')this.value=''" /><br /> <input type="text" name="email" value="E-mail:" onfocus="if(this.value=='E-mail:')this.value=''" /><br /> <input type="text" name="confirm" value="Confirm Email:" onfocus="if(this.value=='Confirm Email:')this.value=''" /><br /> <fieldset style="width:330px"> How would you like your free restaurant gift certificates sent to you? <br /> <input class="checkbox" name="gift_1" id="c1" type="checkbox" value="yes" /> <label for="c1">U.S. Mail</label> <input class="checkbox" name="gift_2" id="c2" type="checkbox" value="yes" /> <label for="c2">E-mail</label> </fieldset> </div> <br /> <div class="align-center"><a href="javascript:void(0);" id="sbm"><img alt="" src="images/button-submit.gif" /></a></div> </div> </form> <center><img src="/images/registration.jpg" ALT="registration" class="border" style="margin-top:20px" /></center> Code: /** * @author bob4ik */ $(document).ready(function(){ html = '<div id="displayResponse" style="display:none;"><div id="inner">Processing...</div></div>'; $('#cform').before(html); $('#sbm').click(function(){ $('#cform').submit(); }); var options = { target: '#displayResponse', // target element(s) to be updated with server response beforeSubmit: before, // pre-submit callback // success: success, // post-submit callback url: 'includes/mail.ctrl.php', // override for form's 'action' attribute type: 'post', // 'get' or 'post', override for form's 'method' attribute resetForm: true // reset the form after successful submit }; // bind to the form's submit event $('#cform').submit(function(){ error = '<div id="inner">Processing...</div>'; $('#displayResponse').empty(); $('#displayResponse').append(error); $('#displayResponse').toggle(); $(this).ajaxSubmit(options); return false; }); }); function before(formData, jqForm, options){ var error = ''; var form = jqForm[0]; if (!form.name.value && !form.email.value && !form.address.value && !form.phone.value && !form.hear.value && !form.confirm.value) { error = error + '<div style=""><b>Please fill all fields</b></div>'; } else { if (!form.name.value||form.name.value=="Name:")error = error + '<div style=""><b>Please fill "Name" field</b></div>'; if (!form.address.value||form.address.value=="Address:")error = error + '<div style=""><b>Please fill "Address" field</b></div>'; if (!form.phone.value||form.phone.value=="Phone:")error = error + '<div style=""><b>Please fill "Phone" field</b></div>'; if (!form.c1.checked && !form.c2.checked)error = error + '<div style=""><b>Please fill "How would you like your free restaurant gift certificates sent to you?" field</b></div>'; if (!form.email.value||form.email.value=="E-mail:")error = error + '<div style=""><b>Please fill "E-mail address" field</b></div>'; if (!form.confirm.value||form.confirm.value=="Confirm Email:")error = error + '<div style=""><b>Please fill "Confirm E-mail address" field</b></div>'; if ((form.email.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.email.value && (form.email.value.match(/^.+@.+\..+$/) == null)&& form.email.value!="E-mail:") { error = error + '<div style=""><b>Invalid e-mail</b></div>'; } if ((form.confirm.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.confirm.value && (form.confirm.value.match(/^.+@.+\..+$/) == null)&& form.confirm.value!="Confirm Email:") { error = error + '<div style=""><b>Invalid e-mail</b></div>'; } } if (error != '') { error = error + '<br><a href="#" onclick="javascript: $(\'#displayResponse\').toggle(); return false;"><img src="images/close.gif" border="0"></a>'; error = '<div id="inner">' + error + '</div>'; $('#displayResponse').empty(); $('#displayResponse').append(error); return false; } else { return true; } } Hi all.I found this code on a forum to confirm that the user wants to delete the record from database and that the link has not pressed accidently.But it is not deleting the record even after pressing ok.This is may be because the id is not passed properly. Can anyone tell why?Do I need to modify the javascript function?Here is my code: Code: function confirmation() { var answer = confirm("Delete Record?") if (!answer){ window.location = "by_hand.php"; } else { window.location = "delete.php?delete=$id&action=deleteemployee"; } } PHP Code: <a href=# onclick='confirmation()'><img src='images/delete.png' alt='Delete' title='Delete' class='pngfix'></a> All, So I have the following code. It works great. When I add this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> It doesn't work. I need it for some aspects of my CSS to work. The code that works without that is: Code: <html> <script> function resizeAll( ) { var divs = document.getElementsByTagName("div"); for ( var d = 0; d < divs.length; ++d ) { var div = divs[d]; if ( div.className == "fn-area" ) { divid = divs[d].getAttribute("id"); imgid = "Img" + divid; var Div1Width, Div1Height; Div1Width = document.getElementById(divid).offsetWidth; Div1Height = document.getElementById(divid).offsetHeight; document.getElementById(imgid).style.width = Div1Width; document.getElementById(imgid).style.height = Div1Height; } } } </script> <head> </head> <body onLoad="resizeAll()"> <div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv1').style.display='block';" onmouseout="document.getElementById('ImgDiv1').style.display='none';"> <img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/> </div> <div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv2').style.display='block';" onmouseout="document.getElementById('ImgDiv2').style.display='none';"> <img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/> </div> </body </html> Function to Read-In External "XML" datafiles on For Loop Can anyone help ? see: http://www.jcsweb.biz/mef/AnimGIF/XMLtemp_04c.htm for required output Javascript Function required: To read in 7 successive "XML" files (not pure XML format & held in "Gallery/Data" external dir in a For Loop: (US_SUMlev_2008.xml,US_SUMlev_2009.xml.....to US_SUMlev_2014.xml) These XML then succesively update a string variable "strXML" which forms the "data" populating a time-series chart. "strXML" then acts as the input to "setDataXML" which is the Chart's data update method (?) The sequential updating of "strXML" in a For Loop should the create a psuedo-animation effect in the chart. My code (see below in edited format or view source at above URL) will achieve what I want but the "strXML" variable update is currently HARD-CODED (rather than read from the XML files held in external directory "Gallery/Data" ). The required function will also need to strip out all linbreaks ("\n") from the external XML files in order to produce a single line of stringtext: eg HTML Code: Code: <chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart> The sequential updating of "strXML" is also NOT yet done in a For Loop but a fixed timing Animate() function which successivley activates the generateXML_200?() on a timedelay. Summary: Required Runstream in Function For Loop: Loop1: Read-in "Gallery/Data/US_SUMlev_2008.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 Loop2: Read-in "Gallery/Data/US_SUMlev_2009.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 etc etc until Loop7: Read-in "Gallery/Data/US_SUMlev_2014.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1 If there was a way to "Freeze" and "Restart" this above function (ie pause the read-in of the next XML) as in current code that would be mighty fine too. Any help much appreciated Code: Code: <HTML> <HEAD> <script language="Javascript" SRC="FC_v3_2.js"></script> <script language="JavaScript"> var strXML; function generateXML_2008(){ strXML = "<chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart>" ; return strXML; } function generateXML_2009(){ TRUNCATED - extends data by 1 year} function generateXML_2010(){ TRUNCATED - extends data by 1 year} function generateXML_2011(){ TRUNCATED - extends data by 1 year} function generateXML_2012(){ TRUNCATED - extends data by 1 year} function generateXML_2013(){ TRUNCATED - extends data by 1 year} function generateXML_2014(){ strXML = "<chart animation='0' showValues='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column'><set value='0.000000' /><set value='-0.055113' /><set value='-0.022272' /><set value='0.052834' /><set value='0.029910' /><set value='0.016847' /><set value='0.003139' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /><set value='0.000470' /><set value='-0.009643' /><set value='0.004135' /><set value='0.000321' /><set value='0.000019' /><set value='-0.000719' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /><set value='0.142439' /><set value='0.130952' /><set value='0.102297' /><set value='0.083231' /><set value='0.062888' /><set value='0.043371' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /><set value='0.238348' /><set value='0.000000' /><set value='0.002127' /><set value='0.001261' /><set value='0.011962' /><set value='0.015624' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /><set value='-0.000155' /><set value='-0.006479' /><set value='-0.007280' /><set value='-0.000895' /><set value='0.003701' /><set value='0.005333' /></dataset></chart>" ; return strXML; } </script> <script language="JavaScript"> function UpdatestrXML_2008(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2008()); } //Update XML going to Fusion charts function UpdatestrXML_2009(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2009()); } //Update XML going to Fusion charts function UpdatestrXML_2010(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2010()); } //Update XML going to Fusion charts function UpdatestrXML_2011(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2011()); } //Update XML going to Fusion charts function UpdatestrXML_2012(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2012()); } //Update XML going to Fusion charts function UpdatestrXML_2013(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2013()); } //Update XML going to Fusion charts function UpdatestrXML_2014(){ var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID chartObj.setDataXML(generateXML_2014()); } //Update XML going to Fusion charts </script> <script language="JavaScript"> var start = 250 ; var delay = 350 // var delay = 2000 function Animate() { t1_2008=setTimeout("javascript:UpdatestrXML_2008();", start+delay*1 ) ; t1_2009=setTimeout("javascript:UpdatestrXML_2009();", start+delay*2 ) ; t1_2010=setTimeout("javascript:UpdatestrXML_2010();", start+delay*3 ) ; t1_2011=setTimeout("javascript:UpdatestrXML_2011();", start+delay*4 ) ; t1_2012=setTimeout("javascript:UpdatestrXML_2012();", start+delay*5 ) ; t1_2013=setTimeout("javascript:UpdatestrXML_2013();", start+delay*6 ) ; t1_2014=setTimeout("javascript:UpdatestrXML_2014();", start+delay*7 ) ; LOOP =setTimeout("javascript:Animate();", start+delay*8) ; } </script> <script language="JavaScript"> function FreezeAll() { clearTimeout(t1_2008); clearTimeout(t1_2009); clearTimeout(t1_2010); clearTimeout(t1_2011); clearTimeout(t1_2012); clearTimeout(t1_2013); clearTimeout(t1_2014); clearTimeout(LOOP); } </script> </HEAD> <body onload="Animate();" > <FORM NAME='Form1' Id='Form1' action='' method=''> <INPUT TYPE="button" class="button" value="Animate" onClick="Animate(); "> <INPUT TYPE="button" class="button" value="Freeze" onClick="FreezeAll();"> </FORM> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("MSColumnLine3D.swf", "chart1Id", "600", "400", "0", "1"); chart1.setDataXML("<chart></chart>"); //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event. chart1.render("chart1div"); </script> </body> </HTML> Hi all, Edit: Got it. I saved that source page and investigated closely and I realized that there's "Cookie plugin" script, which is not mentioned to add(?), in that tutorial I've been trying to implement the method given at http://dev.akabillposters.com/dom-js...-links-jquery/, but can't make it work. Nothing happens when I click the check box. I'm not a jquery expert, though tried some alerts statements to trace the issue, with no luck. Can anyone see what I'm missing? [link removed] Any help would be appreciated. Thanks. Had no replies to my previous post ! http://www.codingforums.com/search.php?searchid=6740324 I have tried to manipulate some (pretty complex) code for reading external code seen here on CF but there was nothing on doing this in a "For Loop" so had no real success Can anyone assist ? Most Kind JavaScript: Code: function confirmchamber(ChambersID) { var answer = confirm("Delete Chamber ?") if (answer){ alert("Chamber Deleted") window.location = "delete_chamber.php?chambers_id="+ChambersID; } else{ alert("No action taken") } } HTML PHP Code: <tbody> <?php $loops=0; for ($i=0;$i<$chambercount;$i++){ if ($loop==0) { $bgclass="odd"; $loop=1; } else { $bgclass="even"; $loop=0; } echo '<tr class="'; echo $bgclass; echo '">'; ?> <td class="btr"><?php echo $chambername[$i]; ?></td> <td align="center" class="bt"> <a href="javascript:popUp('edit_chamber.php?chambers_id=<?php echo $chamberid[$i]; ?>')"><img src="images/icons/edit.gif" alt="Edit" height="16" width="16" border="0" /></a> <a href="javascript:confirmchamber(<?php echo $chamberid[$i]; ?>)"><img src="images/icons/action_delete.gif" alt="Delete" height="16" width="16" border="0" /></a></td> </tr> <?php } ?> </tbody> hi all, im on a really tight deadline with this and have been strugglign all day. (i know nothing about JS!) here's my code: Code: <script language="Javascript"> var allHTMLTags = new Array(); function fadeIn(SRC) { var allHTMLTags=document.getElementsByTagName("*"); for (i=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className.indexOf(",") !== -1) { allHTMLTags[i].style.opacity='1'; } } } function fadeOut(SRC) { var allHTMLTags=document.getElementsByTagName("*"); for (i=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className.indexOf(",") !== -1) { allHTMLTags[i].style.opacity='0.5'; } } } </script> <li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)"> <div class="foo" style="opacity: 0.5;"> test 1 </div> <div class="foo bar" style="opacity: 0.5;"> test 2 </div> The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1. the problem is, the above script only seems to work with numbers?! E.G - class="1 2" works fine. problem is i need to use words not numbers for the classes. clearly my code is rubbish, i've bodged it together from bits and pieces of different forums. PLEASE can somebody help? the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li> then give them an opacity of 1, then on mouseOut return the opacity to 0.5 im sure this is newb stuff, but thanks in advance for any help you can give! Hi all, I've messing around with CSS and I would like to change the <body> 'class' when the user selects a hyperlink. To do this I've employed the OnClick method within the hyperlink which calls the function updateBodyClass(). Within upDateBodyClass() I would like to add the string "extraMenu" to the body class. Before selecting the hyperlink the body is: <body id="twoColLayout" class="tools"> I want this to change to: <body id="twoColLayout" class="tools extraMenu"> This is the code I currently have but it doesn't work. Please can someone point me in the right direction. Thankyou in advance for your time. <html> <head> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script> function updateBodyClass() { document.getElementById("body").className="tools"; document.getElementById("body").className+=" extraMenu" return; } </script> </head> <body id="twoColLayout" class="tools"> <a href="index.php" onClick="updateBodyClass()">Search Bookmarks</a> </body> </html> I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked. I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight... The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway. I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below. Thanks. Code: /* designImages[x][0] = the image source on the page; * designImages[x][1] = the destination url on clicking the image; */ var designImages = new Array(); designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin"); designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" ); designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" ); designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" ); designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" ); designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" ); designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" ); designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" ); designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" ); designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" ); designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" ); designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" ); designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" ); designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" ); designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" ); designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" ); designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" ); designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" ); designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" ); designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" ); designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" ); designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" ); designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" ); designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" ); designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" ); designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" ); designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" ); designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" ); designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" ); designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" ); designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" ); designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" ); designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" ); designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" ); designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" ); designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" ); designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" ); window.onload = function() { creationCompleteHandler(); } function creationCompleteHandler() { calcNumDesigns(); setLinks(); } function calcNumDesigns() { var numDesignBoxes = designImages.length; var numGalleryRows = Math.ceil( numDesignBoxes / 3 ); for ( n = 0 ; n <= numGalleryRows - 1 ; n++ ) { var newGalleryBox = document.createElement('div'); var newGalleryBoxID = ("galleryRow" + n); newGalleryBox.setAttribute('id',newGalleryBoxID); newGalleryBox.setAttribute('class',"galleryBox"); document.getElementById('content').appendChild(newGalleryBox); squareOff(newGalleryBox); var rowBoxes; if ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) } else rowBoxes = 2; for ( m = 0 ; m <= rowBoxes ; m++ ) { var boxNum = ( n * 3 ) + m; var newDesignBox = document.createElement('div'); var newDesignBoxID = "design" + boxNum; newGalleryBox.appendChild(newDesignBox); newDesignBox.setAttribute('id',newDesignBoxID); newDesignBox.setAttribute('class',"designBox"); var newDesignImg = document.createElement('img'); var newDesignImgID = "designImg" + boxNum; newDesignImg.setAttribute('id',newDesignImgID); newDesignImg.setAttribute('class',"designImage"); newDesignImg.src = designImages[boxNum][0]; newDesignBox.appendChild(newDesignImg); } } } function squareOff(frame) { document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px'; } function setLinks() { for (x in designImages) { document.getElementById("design"+x).onclick = function(){ sendToURL(x) } }; } function sendToURL(x) { var url = designImages[x][1] MM_goToURL('self',url); return document.MM_returnValue; } function MM_goToURL() { //v3.0 var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'"); } Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hello, recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags! I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)? Any comments? Hi all, I'm having a bit of a problem.. I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked. the problem is, it wont do this.. it literally stays disabled, even after check mark.. code: Code: <html> <head><title>Metal Detecting</title></head> <body onload="disable()" oncontextmenu="return false;"> <script> function disable(){ if(document.forms.test.agree.checked == false){ document.forms.test.s1.disabled = true; } } function enable(){ if(document.forms.test.agree.checked == true){ document.forms.test.s1.disabled = false; } } function checkCheckBox(f) { if (f.agree.checked == false) { alert('You MUST agree to the terms by checking the box above.'); return false; }else{ enable() return true; } } var max=255; function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit){ // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter }else{ countfield.value = maxlimit - field.value.length; } } function submitonce(theform){ //if IE 4+ or NS 6+ if (document.all||document.getElementById){ //screen thru every element in the form, and hunt down "submit" and "reset" for (i=0;i<theform.length;i++){ var tempobj=theform.elements[i] if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset") //disable em tempobj.disabled=true } } } function checkdata(which) { var pass=true; var t1 = document.forms.test; for (i=0;i<which.length;i++) { var tempobj=which.elements[i]; if (tempobj.name.substring(0,8)=="required") { if (((tempobj.type=="text"||tempobj.type=="textarea")&& tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&& tempobj.selectedIndex==0)) { pass=false; break; } } } if (!pass) { shortFieldName=tempobj.name.substring(8,30).toUpperCase(); alert("The "+shortFieldName+" field is a required field."); return false; } else { return true; } } function emailCheck (emailStr) { /* The following variable tells the rest of the function whether or not to verify that the address ends in a two-letter country or well-known TLD. 1 means check it, 0 means don't. */ var checkTLD=1; /* The following is the list of known TLDs that an e-mail address must end with. */ var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/; /* The following pattern is used to check if the entered e-mail address fits the user@domain format. It also is used to separate the username from the domain. */ var emailPat=/^(.+)@(.+)$/; /* The following string represents the pattern for matching all special characters. We don't want to allow special characters in the address. These characters include ( ) < > @ , ; : \ " . [ ] */ var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]"; /* The following string represents the range of characters allowed in a username or domainname. It really states which chars aren't allowed.*/ var validChars="\[^\\s" + specialChars + "\]"; /* The following pattern applies if the "user" is a quoted string (in which case, there are no rules about which characters are allowed and which aren't; anything goes). E.g. "jiminy cricket"@disney.com is a legal e-mail address. */ var quotedUser="(\"[^\"]*\")"; /* The following pattern applies for domains that are IP addresses, rather than symbolic names. E.g. joe@[123.124.233.4] is a legal e-mail address. NOTE: The square brackets are required. */ var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/; /* The following string represents an atom (basically a series of non-special characters.) */ var atom=validChars + '+'; /* The following string represents one word in the typical username. For example, in john.doe@somewhere.com, john and doe are words. Basically, a word is either an atom or quoted string. */ var word="(" + atom + "|" + quotedUser + ")"; // The following pattern describes the structure of the user var userPat=new RegExp("^" + word + "(\\." + word + ")*$"); /* The following pattern describes the structure of a normal symbolic domain, as opposed to ipDomainPat, shown above. */ var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$"); /* Finally, let's start trying to figure out if the supplied address is valid. */ /* Begin with the coarse pattern to simply break up user@domain into different pieces that are easy to analyze. */ var matchArray=emailStr.match(emailPat); if (matchArray==null) { /* Too many/few @'s or something; basically, this address doesn't even fit the general mould of a valid e-mail address. */ alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)"); return false; } var user=matchArray[1]; var domain=matchArray[2]; // Start by checking that only basic ASCII characters are in the strings (0-127). for (i=0; i<user.length; i++) { if (user.charCodeAt(i)>127) { alert("Ths username contains invalid characters."); return false; } } for (i=0; i<domain.length; i++) { if (domain.charCodeAt(i)>127) { alert("Ths domain name contains invalid characters."); return false; } } // See if "user" is valid if (user.match(userPat)==null) { // user is not valid alert("The username doesn't seem to be valid."); return false; } /* if the e-mail address is at an IP address (as opposed to a symbolic host name) make sure the IP address is valid. */ var IPArray=domain.match(ipDomainPat); if (IPArray!=null) { // this is an IP address for (var i=1;i<=4;i++) { if (IPArray[i]>255) { alert("Destination IP address is invalid!"); return false; } } return true; } // Domain is symbolic name. Check if it's valid. var atomPat=new RegExp("^" + atom + "$"); var domArr=domain.split("."); var len=domArr.length; for (i=0;i<len;i++) { if (domArr[i].search(atomPat)==-1) { alert("The domain name does not seem to be valid."); return false; } } /* domain name seems valid, but now make sure that it ends in a known top-level domain (like com, edu, gov) or a two-letter word, representing country (uk, nl), and that there's a hostname preceding the domain or country. */ if (checkTLD && domArr[domArr.length-1].length!=2 && domArr[domArr.length-1].search(knownDomsPat)==-1) { alert("The address must end in a well-known domain or two letter " + "country."); return false; } // Make sure there's a host name preceding the domain. if (len<2) { alert("This address is missing a hostname!"); return false; } // If we've gotten this far, everything's valid! return true; } </script> Please contact us!<br><br> *Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br> <form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php"> <div id = "div01" style="width: 100; height: 25;"> Firstname: <input name="requiredfirstname" id="firstname" type="text" /> Lastname: <input name="requiredlastname" id="lastname" type="text" /> Email: <input name="requiredemail" id="email" type="text" /><br /><br /> </div> <H4>Your statement: </H4> <textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br /> Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br /> <textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/> <input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/> <input name="s1" id="s1" value="Submit" type="submit" /> <input type="reset" name="rset" value="Reset" /><br/> </form> </body> </html> if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example. ANY help is GREATLY appreciated! Hi, I'm having some trouble with XBrowser compatibility. I was just wondering if there is an alternative to getAttribute("class") that works in IE8 and its proceeding versions. The code below checks to see if the current tab/div has the hideDiv class, if it doesn't then it finds the position and dimensions of this and adds them to variables. Pre IE9 sets all the values as it should on the first pass but then when it goes through a second and third time to check the other tabs the values are set to zero as the divs have the display:none property in the CSS. Code: if(tabs[l].getAttribute("class") != "hideDiv"){ findPos(tabs[l]); tabWidth = tabs[l].offsetWidth; tabHeight = tabs[l].offsetHeight; } If you would like to see the full code my development area is dev.creativepanda.co.uk - the function called to start it all off is tabChange code for this is at dev.creativepanda.co.uk/js/tabber.js Thanks for any help that you can give. First I have a performance question. Which would be better: Load a full table from the database first and display a portion with a "Show More..." link --OR-- Load just the small portion with a "Show More..." link and then do an ajax call to load the rest of the table? And secondly, I sort of know how to do the second option but it can get a bit complicated. You need to know the offset of which to search a database to load the rest. and the "append" that to the table. If I do the first option, it seems a bit more easier but I can't seem to come up with the logic. How would I truncate a table showing only a few entries and have the rest of the table hidden while having a link that shows the rest of the table when clicked? Thanks in advance. . . My website with "ideas for education" will have two sitemaps -- a diagram, and a text-outline -- each located in the left i-frame, with links opening in the right i-frame. My homepage promises that each sitemap will "show where where you've been (green links), where you are (red highlighting), and where you can go (blue links) in your explorations." . . The diagram-sitemap uses "swap images" (with code written by Dreamweaver) and 14 gifs, each with a red rectangle behind one of the 14 main links. (But it doesn't have green visited-links to show "where you've been.") . . In my text-sitemap, red-highlighting a visited link was easy, again by using DW's javascript tools. But this makes every visited link retain its red background, until the page re-loads. My goal is to red-highlight ONLY the last-visited link, to clearly show "where you are" in the sitemap. . . In one attempt to remove the red, I tried forcing a page-reload onMouseDown (with DW's "Go to URL") but DW refuses to recognize the sitemap's iframe (named "left") so it can only load the text-sitemap into a top-frame instead of the left iframe of its frameset. And this reload would be an awkward solution anyway, especially if a user has scrolled the page so the cursor would have to be moved back to the link for the onMouseUp part of clicking a link. . . A more elegant solution, found in a web-search, claims that "You can put an onclick event in all your links and then when the user clicks on a link, you can use the onclick event to call a function that changes that link's color to, say, green; and then uses the 'links' array to change all the other links to another color. The 'this' keyword can be used to identify the current link." . . This sounds promising, and JS-experts will see the two bold steps -- to "put..." and then "use..." -- and say "this is easy." But for me, doing these steps is a mystery I haven't solved. Some clues are below, gathered from various sources, but I don't know how to put it all together. A solution requires that everything is coded exactly the way it must be, with no mistakes, and I don't know how to do this. . . Here are some "pieces of the puzzle" that might be useful: . . Each sitemap has three areas, symbolized by colored page-backgrounds -- light blue & light green & yellow -- DDEEFF, DDFFEE, and FFFFBB. The js-code below, made in DW, works to change a link with red-background (from a previous link-click) to blue-background (onMouseDown) and back to red-background (onMouseUp). Code: <a href="blue1.htm" target="self" onMouseDown=" MM_effectHighlight (this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)" onMouseUp=" MM_effectHighlight (this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)"> blue, then red</a> . . This works. But the challenge is to change OTHER links (not "this") from red to a color (blue, green, or yellow) that matches the page-background of the area where each link is. And for this I'm failing in two ways. First, I don't know how to make the link being clicked ("this") change the background-color of other links, by ""using the 'links' array to change all the other links to another color." Second, if I want to make three color changes (from red back to blue, or to green, or to yellow) the triple-change code below, which is the code above but with the onMouseDown line repeated 3 times, doesn't work in DW: [a comment added January 7: I've now abandoned this triple-change idea, and instead I want all links changed (onMouseDown) to a GOLD background-highlighting in a link-rectangle that surrounds each of the 14 main-topic links, but not the 40 sub-topic links.] Code: <a href="blue1.htm" target="self" onMouseDown=" MM_effectHighlight (this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)" onMouseDown=" MM_effectHighlight (this, 1, '#DDFFEE', '#DDFFEE', '#DDFFEE', false)" onMouseDown=" MM_effectHighlight (this, 1, '#FFFFBB', '#FFFFBB', '#FFFFBB', false)" onMouseUp=" MM_effectHighlight (this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)"> blue-green-yellow, then red</a> . . Imagine that two links (blue0.htm, blue1.htm) are in a blue-background area of the text-sitemap, while two other links (2,3) are in a green-background area, and two links (4,5) are in a yellow-background area. By copying the code I found in another page, I think the code below might describe the links-array I want. But this raises two more problems: Third, the array probably contains errors or omissions. Fourth, even if it was correct, I don't know where to put it: in the head section? body section? inside the js-code for a link? if yes, would I have to repeat this code for each of the 14 main links, or should I write it once (with a name) and then "call up" this name for each of the 14 links. These are things an expert will know, but I don't. Code: <div class="box_broadstyle"><script> var linksArray = new Array(); links[0] = "blue0.htm"; links[1] = "blue1.htm"; links[2] = "green2.htm"; links[3] = "green3.htm"; links[4] = "yellow4.htm"; links[5] = "yellow5.htm"; </script></div> . . And I think the code below might be useful to make a "for loop" to control the triple-change by telling the browser which links (0 and 1) should have blue-highlighting (ending with #DDEEFF), and which (2,3) should end with green, and which (4,5) will be yellow. But... Fifth, I don't know if this code is correct or (a tougher challenge) where to put it so it will be functional. Code: for (y=0;y<=1;y++) for (y=2;y<=3;y++) for (y=4;y<=5;y++) . . Thanks for your patience in reading through this question, which is long because I've tried to clearly describe my goals and what I think might be parts of a solution. Any help in solving these mysteries (first, ... fifth) will be greatly appreciated. CraigR Can anyone tell me what code I can add to a webform textarea box that will replace all instances of "\n" with "\\n" when a user pastes in JavaScript like this: <script language="javascript"> var message = '**\n\n W A I T !\n\n CLICK CANCEL\n TO STAY ON THE CURRENT PAGE.\n\n I HAVE SOMETHING FOR YOU!\n\n**'; var page = 'http://google.com'; </script> <script language="javascript" src="http://siteactor.com/test.js"></script> The form is on a .php page. The form posts via a .cgi script. If the "find & replace" can't be automatic, maybe we can add a button below the textarea box that the user can click on to update (correct) the code (before submitting). I am not a programmer... so any specifics you can give me will be much appreciated. Thank you. Hi guys, I have a JS calculator on my website which is basically a load of radio buttons that the user clicks and as they do so a price is calculated in their view. At the moment - the price box starts with a blank box but is essentially "0". Then, as the user select an option, the price appears and then starts to calculate when more than 1 is pressed. All I want to do is have the price start at "300" instead of a blank box or "0". Then the rest of the options calculate onto that. I have tried a variety of ways to achieve it and seem to be missing something! I am pretty new to JS although do have a basic understanding ..... clearly not enough to do this thou! lol Basically imagine 300 is the initial price. That only gets charged once ... Here's my code .... In the <head> Code: <script type="text/javascript"> function getRBtnName(GrpName) { var sel = document.getElementsByName(GrpName); var fnd = -1; var str = ''; for (var i=0; i<sel.length; i++) { if (sel[i].checked == true) { str = sel[i].value; fnd = i; } } return fnd; // return option index of selection // comment out next line if option index used in line above // return str; } function chkrads(rbGroupName) { var ExPg = [ [0,''], [100,"1 extra page"], [200,"2 extra pages"], [250,"3 extra pages"], [300,"4 extra pages"], [350,"5 extra pages"] ]; var ExEm = [ [0,''], [10,"1 extra email"], [20,"2 extra emails"], [30,"3 extra emails"], [40,"4 extra emails"], [50,"5 extra emails"] ]; var ImgBun = [ [0,''], [10,"3 extra image"], [20,"5 extra images"], [30,"7 extra images"], [40,"10 extra images"] ]; var rbtnGroupNames = ['extrapages','extraemail','imagebundles']; var totalprice = 0; var tmp = ''; var items = []; for (var i=0; i<rbtnGroupNames.length; i++) { tmp = getRBtnName(rbtnGroupNames[i]); if (tmp != -1) { switch (i) { case 0 : totalprice += ExPg[tmp][0]; if (tmp > 0) { items.push(ExPg[tmp][1]); } break; case 1 : totalprice += ExEm[tmp][0]; if (tmp > 0) { items.push(ExEm[tmp][1]); } break; case 2 : totalprice += ImgBun[tmp][0]; if (tmp > 0) { items.push(ImgBun[tmp][1]); } break; } } } document.getElementById('QUOTED_PRICE').value = totalprice; document.getElementById('ITEMS_SELECTED').value = items.join('\n'); document.getElementById('PRICE_IN_VIEW').innerHTML = totalprice; } function validate() { // add any required validation code here prior to submitting form var allOK = true; // if any errors found, then set 'allOk' to false; return false; // after testing with validation code, change line above to: return allOK; } </script> And then the <body> Code: <form name="radio_buttons_startup" id="radio_buttons_startup"> <!--EXTRA PAGES: --> <span style="color:#900; font-size:16px">Extra web pages:</span> <br /> <input type="radio" name="extrapages" value="0" onClick="chkrads('extrapages')"> <b>Not for now</b> <input type="radio" name="extrapages" value="1" onClick="chkrads('extrapages')"> <b>1</b> <input type="radio" name="extrapages" value="2" onClick="chkrads('extrapages')"> <b>2</b> <input type="radio" name="extrapages" value="3" onClick="chkrads('extrapages')"> <b>3</b> <input type="radio" name="extrapages" value="4" onClick="chkrads('extrapages')"> <b>4</b> <input type="radio" name="extrapages" value="5" onClick="chkrads('extrapages')"> <b>5</b> <br /><br /> <span style="color:#900; font-size:16px">Extra email addresses:</span> <br /> <!-- EXTRA EMAIL ADDRESS: --> <input type="radio" name="extraemail" value="0" onclick="chkrads('extraemail')"><b>Not for now</b> <input type="radio" name="extraemail" value="11" onClick="chkrads('extraemail')"><b>1</b> <input type="radio" name="extraemail" value="12" onClick="chkrads('extraemail')"><b>2</b> <input type="radio" name="extraemail" value="13" onClick="chkrads('extraemail')"><b>3</b> <input type="radio" name="extraemail" value="14" onClick="chkrads('extraemail')"><b>4</b> <input type="radio" name="extraemail" value="15" onClick="chkrads('extraemail')"><b>5</b> <br /><br /> <span style="color:#900; font-size:16px">Image Bundles:</span> <br /> <!--Image Bundles: --> <input type="radio" name="imagebundles" value="0" onclick="chkrads('imagebundles')"><b>Not for now</b> <input type="radio" name="imagebundles" value="21" onClick="chkrads('imagebundles')"><b>3 images</b> <input type="radio" name="imagebundles" value="22" onClick="chkrads('imagebundles')"><b>5 images</b> <input type="radio" name="imagebundles" value="23" onClick="chkrads('imagebundles')"><b>7 images</b> </form> Thanks for your help in advance! |