|
JavaScript - Image.onload Fails To Fire
Greetings.
I am using an image galery script written by another person - frogjs (http://www.puidokas.com/portfolio/frogjs/) This script is showing current pic in the middle of the screen and next/previous little tumbnails on right/left sides of the current. When you click the next pic, current pic is zoomed out to the left and next pic is zoomed in to the middle, then replaced by a full-size pic. Then a new tumbnail appears on the place of the next pic you clicked. Zooming and stuff is done with another thirdparty script "effects" (script.aculo.us effects.js v1.7.0) My problem is, the actual next tumbnail is not being shown until the big image is preloaded for this thumbnail. This is done to make it look smooth. So, when i click "next" picture, the next picture is shown, but switching to the following one is delayed until that following one is actually loaded. It is done by making an imgpreloader=Image() object and setting imgpreloader.onload to a function, then setting imgpreloader.src to the big image path. The big image then is supposed to be automatically loaded by browser. When its done, an onload event should fire and that should execute the function that shows the thumbnail for the big picure. Problem is, sometimes the onload event won't happen! And since it wont happen, my gallery will "stall" - it will never show next thumbnail and never allow to continue viewing. And if i show next thumbnail immediately, the next picture would be shown partially and that does not look good. Moreover, i've seen numerous image galeries on numerous sites and all of them seem to work with onload because i only see the image when its loaded, until that i see some "wait" or "grey screen" thing. Never had a problem with those stalling. Problem happens mostly with Opera and Chrome and happens seldom with IE. So, question is, do you probably know what can prevent browsers from firing and OnLoad event or from loading a picture when its suppied as an src for an Image() object? Do you know a workaround that can "poke" the browser to remind it to get the damn picture again and not to stall. Similar TutorialsI'm trying to get a select box to populate onload but can't get it to go. It works fine onchange. This populates the city select box from my db depending on what state is selected. Here are the functions: Code: function handleOnChange(dd1)
{
var idx = dd1.selectedIndex;
var val = dd1[idx].text;
var par = document.forms["cbcheckedadminForm", "adminForm"];
var parelmts = par.elements;
var cb_citysel = parelmts["cb_city"];
var state = val;
var directory = ""+document.location;
directory = directory.substr(0, directory.lastIndexOf('/'));
Http.get({
url: "./components/com_helloworld/js/regvalues/" + state + ".php",
callback: fillcb_city,
cache: Http.Cache.Get
}, [cb_citysel]);
}
function fillcb_city(xmlreply, cb_cityelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var cb_cityresponse = xmlreply.responseText;
var cb_cityar = cb_cityresponse.split("|");
cb_cityelmt.length = 1;
cb_cityelmt.length = cb_cityar.length;
for (o=1; o < cb_cityar.length; o++)
{
cb_cityelmt[o].text = cb_cityar[o];
}
}
else
{
alert("Cannot handle the Ajax call.");
}
}
And here's how I'm trying to do the onload: Code: function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
ajaxFunction(document.getElementById('country').value);
});
addLoadEvent(function() {
setupDependencies('cbcheckedadminForm', 'adminForm', 'locationsearch');
});
addLoadEvent(function() {
handleOnChange(dd1);
});
addLoadEvent(function() {
fillcb_city(xmlreply, cb_cityelmt);
});
I've tried variations of handleOnChange(cb_state), handleOnChange(document.getElementById('cb_state'), handleOnChange(ydntuwrkupceofcrp), I've tried chaining the 2 functions together, but nothing I do seems to get this to work. What am I missing here? I have an aspx with javascript, and I used to call a script func whenever the page was loaded. Suddenly it doesn't work. I then tried to simplify things to <body onload="alert('hello');" and no alert is shown, nor do I get any error. How come the onload event doesn't fire? How do I fix it? thanks in advance I have a function called onload that includes this: Code: window.onload=new function(){
...
if (menuletter!=false){
document.cookie="hddrv="+(menuletter)+"; path=/; expires="+exp.toGMTString();
document.enterIndex.src='enter2.gif';
// window.setTimeout("goIndex()",7000);
// return false;
}
...
}
<img border="0" name="enterIndex" src="enter1.gif" width="413" height="41">
If I uncomment the two lines and comment the document image swap line, they execute perfectly, so the routine works. But if I try to do the image swap instead of the two commented lines, it doesn't swap. Of course, the image enter1.gif and enter2.gif exist. What am I doing wrong? I've been looking for a way to fade a selection of images in on load while keeping their background present until they fade in. similar to whats been used on this site: http://inventorystudio.co.uk/ thought this would be relatively simple but seems to be harder than i expected. any suggestions? Hello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone Hi CF, I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle. I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page. This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth). Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width. I've tried maybe a dozen different scripts, but here's my most recent: Code: function testImage(){
if (defaultImage.naturalWidth > 320){
wideMode = true;
}
placeImage();
}
function loadFirstImage(){
defaultImage.src = "images/myGIF.gif";
defaultImage.onLoad = testImage();
}
Any ideas on how to accurately get an image object's width after loading, but before placing it on the page? Any help is much appreciated. Thanks, ~gyz Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/ When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up. I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again. Thanks to anyone who can help me with this! I've built a site which involves some cool scrolling effects via javascript. I tested it in Chrome, Firefox, Safari, Opera and IE8. Worked Perfectly. Then, I try IE7, and its a dud. Tried from multiple computers, so it is an IE7 issue. Here's the issue. When the page loads normally, a flash intro plays and then the menu shows up. When you click on a menu option (only products and services work), it scrolls the image/layer inside of the div to the proper layerID. (so far, I only have products and services working.. ) When you click on the menu option in IE7, or earlier I'm guessing, It just scrolls to the menu image slice, not the proper layerID it calls for. Heres the link: www.designbyryanboog.com/spa Sorry about not posting code, but there is a lot. I appreciate ANY help, thanks! How can we fire/invoke ondragstart diagrammatically in Mozilla?
Hello I am trying to display an image (url stored in a variable) in an iframe, and write some text (which is also stored in a variable) to a div when the user clicks on another image. (hope that makes sense!) The image display part works fine, but I cant find out how to make the part of my javascript which writes the text work. My code is below, I think the problem is to do with the OnClick event but I'm not sure. Any help you can offer might save what little hair I have left! [CODE] ******************************************** This script displays the image in the iframe <script type="text/javascript"> function fitTable(Jvar) { var swidth1= window.innerWidth-230; var sheight1= window.innerHeight-170; var swidth2= document.body.clientWidth-200; var sheight2= document.documentElement.clientHeight-170; if(window.innerWidth) { //checking for browsers that support window.innerWidth document.getElementById("divone").style.width = swidth1 + "px" document.getElementById("divone").style.height = sheight1 + "px" } else if (document.body.clientWidth) { //checking for browsers that support document.body.clientWidth document.getElementById("divone").style.width = swidth2 + "px" document.getElementById("divone").style.height = sheight2 + "px" } var txt=document.getElementById("divdescr") txt.innerHTML="Some Content"; } window.onload=fitTable; window.onresize=fitTable; </script> **************************************** This script writes the text in the div <script language=javascript> function swDescrip(Jvar) { document.getElementById('divdescr').innerHTML = Jvar;} </script> ****************************************** This is the ASP code: <% RS.MoveFirst For d = 1 to recs %> <div ID=d> <% ***************************************************** What I really want is for this bit to display the image in the iframe AND write the text into the div when I click the image in RS(2) desc(d) = "<p>" & RS(1) & "</p>" Response.Write "<A HREF=" & RS(3) & " target='iframe'><img src=" & RS(2) & " width=200 height=120 border=0 onClick = javascript:swDescrip(" & desc(d)) & ") alt='click to display photo' /></a><br>" ****************************************************** %> This bit works OK if I click it but its not what I want <a href="javascript:swDescrip('<%= desc(d)%>')">click</a> ***************************************************** </div/> <% d = d+1 RS.MoveNext Next %> I am registering the ondrag event handler on mousedown event as follows: td.addEventListener("drag", MyMethodName, false); But the drag event fires only if I select the entrie Td with mouse and not when right click over td and try to drag. My browser is mozila. Any ideas on this one? I have created a Blackjack program. I have noticed that clicking on the vertical part of the 'D' on the "Deal" button doesn't always fire the onclick event. I use JS to change the div's style when clicking on it to give the appearance of a normal button. Here's the link: http://www.myfsjournal.com/blackjack/index.php username: test password: test Here's relevant code: HTML: Code: <div id="dealButton" style="position:relative;float:left;width:100%;z-index:10;">
<div id="deal" title="Deal" style="cursor:pointer;background:#CCC;padding:3px;width:75px;height:auto;border-top:1px solid;border-left:1px solid;border-bottom:3px solid;border-right:3px solid;" onclick="window.location = 'index.php?a=deal'" onmousedown="javascript:buttonDown('deal');" onmouseup="javascript:buttonUp('deal');" onmouseout="javascript:buttonUp('deal');">
Deal
</div>
</div>
And my JS code: Code: function buttonDown(id)
{
document.getElementById(id).style.borderBottom = "1px solid";
document.getElementById(id).style.borderRight = "1px solid";
document.getElementById(id).style.borderTop = "3px solid";
document.getElementById(id).style.borderLeft = "3px solid";
}
function buttonUp(id)
{
document.getElementById(id).style.borderBottom = "3px solid";
document.getElementById(id).style.borderRight = "3px solid";
document.getElementById(id).style.borderTop = "1px solid";
document.getElementById(id).style.borderLeft = "1px solid";
}
Hi I have a problem where I have a drop down menu above a flash banner. The drop down is being hidden by the banner when you hover over it. I added the following to stop that <param name='wmode' value='transparent'>. Its working fine in IE 6 where the drop down options are over the banner but it wont work with IE7/8 or firefox. Any suggestions for code that will work for all browsers? Code: document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='381' height='130'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='/content/images/flash/abc.swf'><param name='quality' value='high'><param name='wmode' value='transparent'><embed src='/content/images/flash/abc.swf' wmode='transparent' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='381' height='130'></embed></object>");
I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) {
if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
staying_in_site = true;
}
});
window.onbeforeunload = popup;
function popup() {
if (staying_in_site) {
return;
}
if (popup_displayed) {
return;
}
popup_displayed = true;
//popup displayed here
}
The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? Hi, I'm having some problems with some javascript events firing in the wrong order under certain workflows. Here's the gist of it: I have a form with many fields, mostly input type = text. Each field as an OnBlur and OnFocus event tied to javascript functions. IE's website (http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx) states that "The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus." and that is exactly what happens when tabbing through the fields. The tricky part is that it doesn't perform this way when CLICKING to another field. When clicking to another field it performs the new field's OnFocus first, and then the first field's OnBlur event after. This is bad because the OnFocus sets a global variable's value to whatever value is in that box at the time it gets focus and if the onblur validation fails, that value is inserted back into the box. So what's happening is the validation for field 1 fails and the value from field 2 is then written into field 1. This also seems to only happen when the page is opened as a modal window as opposed to just opening the page on it's own. It doesn't happen in FireFox, I've only been able to get it to happen on IE 8 + (haven't tried any other browsers.) Anyone else have this happen to them? Does it sound like an IE bug? Thanks **just realised I have put this in the wrong section
Hi all, Please keep in mind: this is the first code I have ever written -- much of it with help from this forum and the skeleton from other corners of the JS community. Thanks! But now for the problem... I'm developing am income tax calculator, and everything is going swell. Currently the user can type in their adjusted gross income (AGI), hit submit, and learn the amount of income tax they would pay, their tax rate, and their income after tax. I've played around with the events to get the submit button to work in FF, IE, Chrome and Safari -- and I've gotten the enter button to work before with some stock code, but here's the catch: when the user presses enter, i want the focus to leave the input box. I don't care where it goes (submit button, I suppose?) but i need it to leave the input field so the onfocus="clearText(this);" event can fire when they return to type in a new income. Any ideas? Thanks in advance. Code: <script language="javascript" type="text/javascript">
function TotalGrossPerYear() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
if ((Calc.AGI.value > 500000)) {
Bracket3();
}
if ((Calc.AGI.value > 200000 ) && (Calc.AGI.value <= 500000)) {
Bracket1();
}
if ((Calc.AGI.value <= 200000)) {
Bracket2();
}
}
else
if (Calc.InputRad[1].checked) {
if ((Calc.AGI.value > 1000000)) {
Bracket3();
}
if ((Calc.AGI.value > 400000 ) && (Calc.AGI.value <= 1000000)) {
Bracket1();
}
if ((Calc.AGI.value <= 400000)) {
Bracket2();
}
}
}
function Bracket1() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * .05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket2() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket3() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 300000) * 0.09) + (300000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 600000) * .09) + (600000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Couple() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function Individual() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function clearText(thefield){
if (thefield.value==thefield.value)
thefield.value = ""
}
</script>
</head>
and the html... Code: <body> <form name=NetIncome> <table border=5> <th align=left> <ol> <li>Select Individual or Joint filing status. <li>Enter your Adjusted Gross Income. <li>Submit to calculate. <li>Please reset after each calculation. </ol> </th> <tr> <td><font size=5><input type=radio name=InputRad value=PerHour onclick="Individual()"><u>Individual</u> <input type=radio name=InputRad value=PerYear onclick="Couple()"><u>Joint</u></font></td> </tr> <tr><td><input type=text name=AGI size=30 id="txtExamplethree" onfocus="clearText(this);" onsubmit="TotalGrossPerYear();" onblur="this.value=this.value.replace(/[^\d\.]/g, '');" value="Select filing status" maxlength="20" />Adjusted Gross Income </td></tr> <tr><td><input type=text name=TaxableIncome id="txtExampletwo" readonly="readonly" size=30 value="">Taxable Income</td></tr> <tr><td><input type=text name=AmtDue id="txtExampleone" size=30 readonly="readonly" value="">Amount Due in Taxes</font></td></tr> <tr><td><input type=text name=AmtLeft id="txtExample" size=30 readoanly="readonly" value="">Income after Tax</font></td></tr> <tr><td><input type=text name=TaxRate size=10 readonly="readonly">Tax Rate</td></tr> <tr><td align=center><input type="button" value="Submit" onfocus="TotalGrossPerYear(); formatNumber(); formatNumberone(); formatNumbertwo(); formatNumberthree();" /><input type=reset value="Reset Form"></td></tr> </table> </form> Here is the PHP: PHP Code: <?php if (($totalRows_getDie = mysql_num_rows($getDie)) != NULL) { echo "Die Category: <select name='DieCatId' class='dropMenu' id='DieCatId' onchange='jobDieChange(this.value)'> <option value='NULL'></option>"; do { echo "<option value='".$row_dieCatList['DieCatID']."'"; if (!(strcmp($row_dieCatList['DieCatID'], $row_getDie['DieCatID']))) {echo "selected=\"selected\"";} echo ">".$row_dieCatList['DieCatDesc']."</option>"; } while ($row_dieCatList = mysql_fetch_assoc($dieCatList)); $rows = mysql_num_rows($dieCatList); if($rows > 0) { mysql_data_seek($dieCatList, 0); $row_dieCatList = mysql_fetch_assoc($dieCatList); } echo "</select> <a href='popup.php?getpage=dieins' onclick='window.open(this.href, 'popupwindow', 'width=770,height=675,scrollbars,resizable'); return false;'>Add Die</a><br />"; echo "Die: <select name='DieID' class='dropMenu' id='DieID'>"; if ($totalRows_getDie != 0) { echo "<option value='".$row_getDie['DieID']."'>".$row_getDie['DieDesc']."</option>"; } echo "</select><br />"; echo "<input type='hidden' name='DiecutID' value='".$row_getDie['DiecutID']."' />"; } ?> And the JS: Code: var xmlhttpJDie;
function jobDieChange(str)
{
xmlhttpJDie=GetXmlHttpObject();
if (xmlhttpJDie==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="/scripts/jobdie.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttpJDie.onreadystatechange=JobDieGet;
xmlhttpJDie.open("GET",url,true);
xmlhttpJDie.send(null);
}
function JobDieGet()
{
if (xmlhttpJDie.readyState==4)
{
document.getElementById("DieID").innerHTML=xmlhttpJDie.responseText;
}
}
In all browsers except IE, it works fine, but IE gets a Script error and won't update the second select. I've gone over this so many times I'm cross eyed! If someone could please help me figure out why IE doesn't like this I would appreciate it. Thank you! This is the code part that fails it's if check. Code: while (n<=30)
{
var slot='#slot'+n;
$( slot ).data({no: n, id: itemId[i], name: itemName[i], equip: itemEquip[i], lvl: itemLvl[i], bonus: itemBonus[i], rstr: itemRStr[i], rdef: itemRDef[i]});
$( slot ).draggable({ handle: slot, stack: slot, revert: "invalid", snap: "div#"+itemEquip[i], snapMode: 'inner',
start: function(event, ui)
{
$('div#'+$(this).data('equip')).css({'border': '2px dashed #0066CC', 'background': 'rgba(255,255,255,0.2)'})
.droppable
({
drop: function(event, ui)
{
if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr'))
{
alert(pLvl+", "+$('.ui-draggable-dragging').data('lvl'));
$('.ui-draggable-dragging').css({'display':'none'});
$('div#'+$('.ui-draggable-dragging').data('equip')).html
(
"<img src='items/equipped/"+$('.ui-draggable-dragging').data('name')+$('.ui-draggable-dragging').data('id')+".png' />"
)
$.ajax({type:"GET", url:"items/change.php", data:"id="+$('.ui-draggable-dragging').data('id')+"&no="+$('.ui-draggable-dragging').data('no'), cache:false, timeout:5000,
error: function() {
$('div.nogood').html
(
"There was an error. Please inform us about it in the forum."
).css({'width':'400px','margin-left':'-200px'});
$( 'div.nogood' ).fadeIn(500, away);
function away()
{
$( 'div.nogood' ).delay(2000).fadeOut(500);
};
}
});
}
else
{
alert("HUh");
$( 'div.nogood' ).fadeIn(500, away).css({'width':'400px','margin-left':'-200px'});;
$('.ui-draggable-dragging').draggable({revert: true});
if (pLvl<$('.ui-draggable-dragging').data('lvl'))
{
alert("Good");
}
else if (pStr<$('.ui-draggable-dragging').data('rstr'))
{
$('div.nogood').html("Not enough strength.")
}
function away()
{
$( 'div.nogood' ).delay(1400).fadeOut(500);
};
}
}
});
},
stop: function(event, ui)
{
$('div#'+$(this).data('equip')).css({'border':'none', 'background':'transparent'}).droppable("destroy");
}
});
n++;
i++;
}
This if comparison if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr')) somehow goes through. After the if statement I check the values with the alert but it displays 5 for pLvl and 10 for the draggables data (which are the correct numbers) so can anyone tell me why does this if statement still go through when pLvl is lower? I have a form that is used to insert a new classified ad or to update an existing ad. When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red. This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it. Here is the code snipit: Code: function submitbutton(mfrm) {
var me = mfrm.elements;
var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
var r_num = new RegExp("[^0-9\.,]", "i");
var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");
var errorMSG = '';
var iserror=0;
// set notification background color
var warnColor = '#<?php echo $this->error_color; ?>';
// loop through all input elements in form
for (var i=0; i < me.length; i++) {
// check if element is mandatory; here mosReq="1"
if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
if (me[i].type == 'radio' || me[i].type == 'checkbox') {
var rOptions = me[me[i].getAttribute('name')];
var rChecked = 0;
if(rOptions.length > 1) {
for (var r=0; r < rOptions.length; r++) {
if (rOptions[r].checked) {
rChecked=1;
}
}
} else {
if (me[i].checked) {
rChecked=1;
}
}
if(rChecked==0) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
// notify user by changing background color, in this case to red
me[i].style.background = warnColor;
iserror=1;
}
}
if ((me[i].value == '') || (me[i].value.length < 2)) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
me[i].style.background = warnColor;
iserror=1;
}
}
}
if(iserror==1) {
alert(errorMSG);
return false;
}
}
|
|||||||