|
JavaScript - Weird Issue (solution Related To Callbacks?)
Hey guys.
I have a weird issue (you kind of have to see it for yourself to understand). If you double click on the next or previous button quickly (within 500 miliseconds of each other) it creates a double of the next slide. http://insidehb.com/imageofday/ Let me know if you can help. Thanks. Similar TutorialsCode: <html>
<script>
function doit(){
document.write(document.getElementById('myIMG').getAttribute('src'));
}
</script>
<body onLoad="doit()">
<img src="blabla.jpg" id="myIMG">
My question is, why is it, that after loading the page, the image that should be displayed at the page is not being displayed. The only thing that can be seen is text generated by the document.write function. So I have the following code in javascript that creates an iframe: Code: var iframe = document.createElement("iframe");
iframe.id = 'offerframe';
iframe.name = 'offerframe';
iframe.width = '975';
iframe.height = '650';
iframe.align = 'center';
iframe.src = 'http://example.com';
document.getElementById("offer-frame-div").appendChild(iframe);
It works fine in Firefox and Safari but in IE8 it generates the iframe name attribute to "submitName" Code: <iframe width="975" height="650" align="center" id="offerframe" submitName="offerframe" src="http://example.com"> Notice how it sets all the other attributes fine, however the name attribute is now called "submitName". This issue only happens in IE. This there any alternatives to setting my iframe name dynamically with javascript. Now this is really stumping me otherwise i wouldnt be here. I have a Javascript that i have that runs in a php site, i have a section where i can save the code to a part in my admin section for loading special images in diffrent locations. So i used java script for rotation on those images. The funny thing is it loads up in a few pages where it calls the php code. but in other pages it doesnt load anything at all. The call function works. in all pages but where the javascript doesnt work the static image i can place works. But i need it to use the javascript code so i can rotate them aswell. For example: Code: <div id="footads">
<div id="fad">
<? echo $foot1 ?>
</div>
<div id="fad2">
<? echo $foot2 ?>
</div>
<div id="fad1"></div>
</div>
the $foot1 and 2 are footer call function which pulls the java script. I have no problem running multi versions of this script as i change the vars etc in java to make them run. How ever like i said its not loading in some pages. but others it will? here is some linked examples. Working - Default advert images set on 10 sec delays Working diff page - Default advert images set on 10 sec delays not Working - Default advert images set on 10 sec delays Its like its not calling the code from the function, But it is because if you view source. Quote: <div id="footads"> <div id="fad"> <script language="JavaScript" src="/adverts/addbanner1.js" type="text/javascript"></script> <div class='addbanner1'><div id='addbanner1'></div></div><div style="clear:both;"></div> </div> <div id="fad2"> <script type= "text/javascript" src="/adverts/addbanner2.js" type="text/javascript"></script> <div class='addbanner3'><div id='addbanner3'></div></div><div style="clear:both;"></div> </div> <div id="fad1"></div> </div> Hey guys, here's my code Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
#box {
background: red;
width: 300px;
height: 300px;
display: none;
}
#box2 {
background: green;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a.about').click(function() {
$('#box').stop().slideToggle(2000);
});
});
$(function() {
$('a.contact').click(function() {
$('#box2').stop().slideToggle(2000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<a href="#" class="about" />about</a>
<a href="#" class="contact" />contact</a>
</body>
</html>
Basically I want to make it so that if you click about, and about is open, once you click contact it closes about before opening contact? I'm not sure how to approach this though whether I should use if statements or something? I'm pretty new to jquery I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be... Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment. What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another. My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself. Let's set up a simple class called "App" to demonstrate what I mean... Code: var myApp = new App("MyFirstApp");
function App(argName) {
this.name = argName;
this.GetDirectory("C:\Program Files");
}
App.prototype.GetDirectory = function(argPath) {
// "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}
App.prototype.GetDirectoryCallback = function(argFilePaths) {
// "this" equals the "window" object (bad!), meaning this.name should equal a null reference
// argFilePaths contains a string of file paths (delimited using ;) returned by the server
var mFilePaths = split(argFilePaths, ";");
// for each file path, add a div to the document body containing that file path, with an onclick handler
for (var i in mFilePaths) {
var mFilePath = mFilePaths[i];
var mFilePathDiv = document.createElement("div");
mFilePathDiv.innerHTML = mFilePath;
mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
document.getElementById("body").appendChild(mFilePathDiv);
}
}
App.prototype.FilePathDivClickHandler = function() {
// I need a reference to the App object instance here, but I'm not sure where to grab it...
// what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
this.GetDirectory(event.target.innerHTML);
}
The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory). Code: App.prototype.GetDirectory = function(argPath) {
// "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
// "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
var instance = this;
Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
function GetDirectoryCallback(argFilePaths) {
// "this" equals the window object (bad!), meaning this.name should equal a null reference
// "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
// argFilePaths contains a string of file paths (delimited using ;) returned by the server
var mFilePaths = split(argFilePaths, ";");
// for each file path, add a div to the document body containing that file path, with an onclick handler
for (var i in mFilePaths) {
var mFilePath = mFilePaths[i];
var mFilePathDiv = document.createElement("div");
mFilePathDiv.innerHTML = mFilePath;
mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
document.getElementById("body").appendChild(mFilePathDiv);
}
}
}
Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object. Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler? Ok guys, im willing to pay for the solution, got to get this site finished today!! Im having some trouble with a site im working on. In a nutshell, im using a navigation bar with dropdown and JS Fadeshow. When using the navbar dropdown, it goes BEHIND the fade show. If anyone could advise it would be great! I didnt attach the code as i think the best thing to do is just take a look yourself. Its alhambrarenovations. COM Thanks in advance Tell me what other info you need and i'll suply it. I am a govt. employee wanting to make a multi-user database. This is a replacement for the current solution: 1. Single-user Excel sheet on a shared network folder. Here are my design limits: 1. The system uses Windows XP only. 2. I do not have communication with the network admins. 3. I will never have permission to install servers anywhere. They are forbidden. 4. I do not have permission to install any software on any computer. 5. My group only has access to one shared network folder. I've brainstormed some solutions, including: A. Marrying a VB Application with SQLite, with the SQLite file sitting in the shared folder. B. Using how to use SharePoint to develop my application. C. Using Microsoft Access as a client-side GUI which connects to another .mdb on the shared folder. D. Using Internet Explorer with Javascript and ADO ActiveX Objects to manipulate records in a .mdb on the shared folder. I choose D. Choice A is out because I can not install any software development tools. B may not work for me because my database is heirarchical in nature and I want more control over the GUI. Same reason for C, and Access is a little micky-mouse. Amazingly, the security settings on IE allow the creation of ActiveX objects through Javascript. I can also develop with javascript because I have Wordpad. To test the code I can simply run it by launching the HTML. This allows users to open the same HTML file in the shared folder instead of distributing front-ends. The javascript must all be client-side, including all data manipulation. However, I am not concerned about security issues because only our group will be using the system, and all traffic is already contained within Navy networks. So I don't care if I use window.location for storing variables since it works for this case. Does anyone have anything to say about this? I'm looking for pointers, gotchas, guidelines, and any other, better solutions. Thanks. Hi, Normally when i try to put a form in a html page i use the Code: <form action="http://www.site.com/test.php" method="post"> and so on with the respective input (Something i learn over here) Today i was trying to create a html box whith the purpose of submiting to a external site but the problem i got is that the external site doesn't use the Code: <form> tag to submit and uses javascript in an onclick event. Is there any way i can still submit? Note: I tried an iframe 0 to load up the site and the respective scripts and emulate the submition in the top page but didn't work out. Thanks for all the help... but I just can't figure it out. I have trawled the net for a solution and tried many different things that I have seen but still no luck. Maybe the answer is staring me right in the face and I just can't see it. The code it executing the first time but as the setTimeout tries to start the second loop I get an error 'box is not defined'. Any suggestions and explanations of what I am doing wrong much appreciated! Code: function expand(box) {
var box = document.getElementById(box);
var originalHeight = parseInt(box.style.height);
var inc = 5;
newHeight = (originalHeight + inc);
box.style.height = newHeight + "px";
int = setTimeout('expand(box)',100); }
Hi, javascript method downloadUrl() is very very slow at chrome. means, i am not able to see the data from mysql server at chrome browser.. But this works fine at IE. Pls suggest me with some alternative javascript methods.. thanks, VK Okay so if you go to this website: http://gameusd.com/ You can pick your game & country -- say its world of warcraft US And then you pick your realm and faction, and then it gives you the prices on those particular realms/factions. What i wanted to know was if it was possible to somehow make a program that fetches the prices of EVERY single realm/faction and lists them all side by side and in order of lowest to highest price or whatever. Would massively appreciate if somehow could tell me if its possible. Because obviously doing it all manually would be a huge pain in the *** and take hours. I made some code to factor a quadratic equation and I could use some help finding situations where it finds the wrong answer. If you can find any problems, let me know. Thanks http://www.wdroom.com/factor.html Hi Guys & Girls, I am looking for help with a technical issue, which my programmer can't find the answer to. My website has a demonstration facility which allows a client to enter their website which then in turn creates a video transparency overlaying their own website. The problem is some sites with Flash, overlay my transparency video so that you cant see my demo video. Any ideas please. Thanks Maximillion I was trying to find a way to preload images using javascript or PHP or anything that would work - specifically I wanted a way to preload all images from a directory AND its sub-directories. Well, there are solutions out there and some are pretty complex. In the end I chose to do a simple thing which works well for particular image-heavy pages. It is so easy I am wondering why it isn't more often mentioned. OK, it's simply including on a chosen "lead-in" page some almost invisible inline frames (1 px x 1px) of the image-heavy pages you want to preload the images from: Code: <iframe name="I1" src="index1.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> <iframe name="I2" src="index1b.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> etc. Sure, you have to stay long enough on the lead-in page, but even if you don't, its a help. Here is my solution in action: http://maraboni.aapress.com.au/html/...y/gallery.html (my site went down just as I posted! but it'll be on in a short while, I hope!) You can see that I have used a nice bouncing ball loader routine (pace.js) top right to partially alert the user to what is going on, but it is not essential. Without the inline frames, clicking on the nav links at the top of the page will usually result in a less than optimum visual experience and a necessary page reload of the image-heavy pages. I can't see any downside. Can anyone? I want to create dynamic Select option in form, I want that whenever user clicks on add member button then new row will get added & i have done that by taking help of DOM createElement method & I want that by using same, I want to create select option drop down list.
Hi everyone, I am setting up a website where we want a drag n drop solution for a customer to place an email. To give you an idea on what we want, picture this... A form where the customer can enter there details. Below the form are icons of items. The customer can then drag these items into an image of a box below. Would also be nice if it could list what is "in" the box. Once customer is satisfied, the contents get emailed to us and we can provide further details from there. Mainly has to look nice from the customers side, on our side we are happy to receive just the titles or codes of what they are dragging into this box. Hopefully i have made this simple to understand, if anyone needs any more information, please do not hesitate to ask me. Also, this will be implemented into a Joomla site once sorted out, if that makes any difference. Thank you in advance! I already got the following JavaScript code working somewhat (originally taken from a different thread in a different forum and tweaked to give qty ceiling [10] and floor [2] values). However, it seems to work for only one qty variable, and the subtractQty function doesn't seem to subtract properly (at least in Opera 11). Code: <html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function subtractQty(){
var x=document.getElementById("qty").value;
var y=document.getElementById("maxqty").value;
if(x - 1 < 2 || y + x <= 40)
return;
else {
document.getElementById("qty").value--;
document.getElementById("maxqty").value=y+x*4;
document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
}
}
function additionQty(){
var x=document.getElementById("qty").value;
var y=document.getElementById("maxqty").value;
if(x >= 10 || y - x < 2)
return;
else{
document.getElementById("qty").value++;
document.getElementById("maxqty").value=y-x*4;
document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
}
}
</script>
</head>
<body>
<form name="f1">
<input type='hidden' name='qty' id='qty' value=2 />
<input type='hidden' name='maxqty' id='maxqty' value=40 />
<div id="textqty">2</div>
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
<input type='button' name='add' onclick='javascript: additionQty();' value='+'/>
<div id='textmaxqty'>40</div>
</form>
</body>
</html>
What I'd want to happen would be the following: if let's say we have 5 pairs of buttons, making it look something like this: A: 2 [+] [-] B: 2 [+] [-] C: 2 [+] [-] D: 2 [+] [-] E: 2 [+] [-] maxqty: 40 Whenever the user clicks on the [+] button for A, it would subtract (current value + 1) * 4 from maxqty and raise A to 3, then when the user clicks on the [+] for C, it would subtract (current value + 1) * 4 from maxqty and raise C to 3, without having to copy paste multiple functions. I'm already thinking of arrays, but being more used to PHP than Javascript -- and I'm thinking I might actually have to use AJAX for this, although I'm really in the dark with AJAX in particular -- I'm rather confused and somewhat stumped on the coding. Suggestions? im new to webpage programming,but do hav some basic c/c++ programming skill. in order for me to understand the following codes, what should i read? i had read thru w3schools.com html and javascript tutorials but it is stil difficult for me to understand the codes,can somebody help me?thanks! Code: function getQuery() {
var scoping = "&project=${currentProject}&projectScopeUp=" + projectScopeUp + "&projectScopeDown=" + projectScopeDown;
var paging = "&pagesize=100";
return {
"currentProject" : "/iteration:current/project",
"#storyType" : "/typedefinition?query=(Name = \"Hierarchical Requirement\")",
"taskUnit" : "${iteration/workspace/workspaceConfiguration/taskUnitName}",
"storyStates" : "${#storyType/attributes[name=schedule state]/allowedvalues/stringvalue}",
"iteration" : "/iteration:current?fetch=name,objectid&order=StartDate",
"iterations" : "/iterations?fetch=name,objectid&order=StartDate,Name&project=${currentProject}&projectScopeUp=false&projectScopeDown=false" + paging,
"users" : "/users?fetch=displayname,loginname,emailaddress,objectid" + paging,
"tasks" : "/tasks?fetch=taskindex,name,objectid,formattedid,owner,blocked,estimate,todo,actuals,state,workproduct&query=(Iteration = ${iteration})" + scoping + paging,
"stories" : "/hierarchicalrequirement?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal,tasks&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
"defects" : "/defect?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
"defectsuite" : "/defectsuite?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
"testsets" : "/testset?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&query=(Iteration = ${iteration})" + scoping + paging
};
}
Hi Friends, i have a smal task i.e i have textbox1 ,botton,textbox2 when i enter 21 value then i click button its get in sama row values in textbox2. i have xml file like this <DATAPACKET > <ROWDATA> <R_ID>101</R_ID> <R_NAME>R-12</R_NAME> <R_TEMP>4.266</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>20</R_ID> <R_NAME>R-22</R_NAME> <R_TEMP>4.266</R_TEMP> <R_COLOR>Green</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>21</R_ID> <R_NAME>R-32</R_NAME> <R_TEMP>4.266</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>104</R_ID> <R_NAME>R-134A</R_NAME> <R_TEMP>4.246</R_TEMP> <R_COLOR>Light Blue</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>21</R_ID> <R_NAME>R-290</R_NAME> <R_TEMP>4.246</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>31</R_ID> <R_NAME>R-401A</R_NAME> <R_TEMP>4.246</R_TEMP> <R_COLOR>Pink</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>32</R_ID> <R_NAME>R-401B</R_NAME> <R_TEMP>4.264</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>108</R_ID> <R_NAME>R-402A</R_NAME> <R_TEMP>4.426</R_TEMP> <R_COLOR>Light Greem</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>129</R_ID> <R_NAME>R-402B</R_NAME> <R_TEMP>4.266</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>110</R_ID> <R_NAME>R-404A</R_NAME> <R_TEMP>4.246</R_TEMP> <R_COLOR>Orange</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>121</R_ID> <R_NAME>R-407A</R_NAME> <R_TEMP>4.267</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>122</R_ID> <R_NAME>R-408A</R_NAME> <R_TEMP>4.267</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>113</R_ID> <R_NAME>R-409A</R_NAME> <R_TEMP>4.267</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>134</R_ID> <R_NAME>R-407C</R_NAME> <R_TEMP>4.264</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> <ROWDATA> <R_ID>115</R_ID> <R_NAME>R-410A</R_NAME> <R_TEMP>4.426</R_TEMP> <R_COLOR>White</R_COLOR> </ROWDATA> </DATAPACKET > then i try this hear i get all values function gettxt() { results = new Array; var searchterm = document.getElementById("searchme").value; if (searchterm == null || searchterm == "") { alert("Enter textbox value"); return false; } var istrlen1 = searchterm.length; var tempname1; if (istrlen1 == 1) { tempname1 = searchterm; } if (istrlen1 == 2) { tempname1 = searchterm; } if (istrlen1 == 3) { tempname1 = searchterm; } if (istrlen1 == 4) { tempname1 = searchterm; } for (i = 0; i < x.length; i++) { var name = x[i].getElementsByTagName("R_ID")[0].firstChild.nodeValue; var name1 = x[i].getElementsByTagName("R_NAME")[0].firstChild.nodeValue; var exp = new RegExp(tempname1, "i"); if (name.match(exp) != null) { y = y + 1; results.push(name1); } } textbox2.value = results; } i try the above code hear small problom when i enter 21 and click button its display 21,121,123... related values i dont want like that for example textbox1=21 buttonclick textbox2=R-32,r-407A,r-408A like that i dont want like that i want textbox1=21 buttonclick textbox2=R-32 only in same row value please any one knows well in js please resolve my problom |
|||||||