I encountered some code in "Javascript the good part" from Douglas Crockford.There is a way to passing callback function as second argument to string.replace() method.
Code:
var entity = {
quot: '"',
lt: '<',
[code]....
1. How do I know what the number of parameters should be in callback function ( function(a,b) ) ?
2. How do I know what will be passed in as a and b when I am defining the callback function?
I'm sure this question has been asked many times before, but I can't seem to get the correct terms to find the answer in Google.I understand basic JavaScript inheritance. However, everything I've read makes the inheritance work something like this:
Code JavaScript:
var ChildClass = new Function();
ChildClass.prototype = new ParentClass();
ChildClass.constructor = ChildClass;
That's fine, but what happens when ParentClass's constructor needs parameters?As an example, look at the following code:
Code JavaScript:
function Furniture(color){
this.color = color;[code)....
How could I "copy" Furniture's constructor into the Chair object? Better yet, how could I copy Furniture's constructor and then add some functionality to it?
I'm trying to replace an element's style on the fly like this
Code:
var sc = document.getElementById("someElement").innerHTML;
scorecard = sc.replace("class="thisclass"","style="width:"+width+"px;float:left;margin-top:"+topmargin+"px;"");
where width and topmargin are values that I calculated earlier.This works fine in all browsers except IE. The trouble, I'm quite sure, is with the escaped quotes " in the arguments of the replace() function.What this seems to be doing (in IE) is just just returning the same string sc, but with the quotes stripped off of "thisclass".
need to call two functions say func1(a,b) and func2()i used the following code. But only the first function works, second one not working
Code:
<input type="button" value="Start" onclick="func1('A','B');func2()">
I am trying to create a script that will cover cross-browser limitations in adding event listeners to elements. I have found plenty of resources to add a listener but can't find any way of assigning a function containing arguments. Here is what I have so far:
/* Attach events regardless of browser */
function addEvent(obj, evType, fn)
{
if (obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent)
{
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else
{
return false;
}}
/* Contains all attachments to be made on page load */
function load()
{
item = document.getElementById('toggleControl');
addEvent(item, 'click', toggle);
item = document.getElementById('alertLink');
addEvent(item, 'click', runAlert);
}
/* Add event to page load and assign load() function */
addEvent(window, 'load', load);
The actual functions for toggle and runAlert are in a seperate .js file, but are standard functions. the problem is that I can't find a way to perform the equivalent of:
item = document.getElementById('toggleControl');
addEvent(item, 'click', toggle('toggleID'));
It simply does not work.
So in the Tutorials:How jQuery Works, I've noticed that you can make a call to .get like this : $.get('myhtmlpage.html', myCallBack);
I've also noticed that in the docs jQuery.get() is described as jQuery.get( url, [data,] [success(data, textStatus, jqXHR),] [dataType] ). My question is, in the above example, the callback function is the second argument, whereas in the docs the second argument is data, and the third is the callback function. How does this work? Also, what does it mean when the arguments are laid out in an array-like fashion with commas in the square brackets? i.e. arg1, [arg2,]...
I don't think this is "do-able" but thought I'd better check. Say I
want to replace certain names in some source code as long as they are
not properties (dot properties) of objects. I could use a regular
expression like:
rx = /(?:(.)|)(?:name1|name2|name3)/g;
map = [];
map["name1"] = "a";
map["name2"] = "b";
map["name3"] = "c";
source = source.replace(rx, function ($0, $1) {return $1?
$0:map[$0]});
Dot properties like .name1 are not replaced by anything new and they
need to be "skipped" over by this regular expression but other name1
identifiers need replacement with "a".
One problem with this approach is that dot properties like .name1 are
replaced by themselves and this is just unnecessary work. Something
like a "false" return to skip replacement would be nice but the
following doesn't work.
source = source.replace(rx, function ($0, $1) {return $1?
false:map[$0]});
There are other ways to get around this by using something else
besides replace() but I wanted to see if it could be done with the
replace() method.
I have a page where when a button is clicked, I want that div to be replaced by the content of another div (which loads as display:none).
I first tried fadeOut/fadeIn but the div will not occupy the same space as the div it's replacing, no matter what I try (such as giving it a high z-index).
The way I was able to achieve what i wanted to do was like this:
$(document).ready(function(){
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());
});
});
The above works fine, but it gets more complicated once I add in a "cancel" button which should toggle the div back to its original content:
$(document).ready(function(){
var showprofile_orig = $('#showprofile').html();
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());
[Code]....
The above works but the runs into a problem. If they click to cancel, then click reply once more, nothing happens. I suspect I need to put the reply-button function inside the reply-cancel function there to make that work, but then I need to nest the cancel function inside that and so on to infinity.
I've been using a hidden iframe for remote server scripting - how i've been doing it is that a load(); function changes the src component of the iframe with $_GET variables to pass to PHP:
this.load = function () {
this.iframe.src = this.file + "?action=load&gid=" + this.gid + "&last_modified=" + this.last_modified;
}
The frame itself then has an "onload" function that calls a doLoad(); function that handles receipt of any information back from the server. declared this way:
<iframe id="loader" onload="loader.doLoad();" style="width:0px;height:0px;border:none;"></iframe>
The trouble with this as you may guess is that the page was reloading every time src was changed and the history list of the browser was messed up. So I did some research and came up with this method that solves that problem:
this.load = function () {
//this.iframe.src = '';
this.iframe.contentWindow.document.location.replace(this.file + "?action=load&gid=" + this.gid + "&last_modified=" + this.last_modified);
}
Which is great, but now onload doesn't call!
I've seen an other post talking about not being able to perform a .html().replace() also, but no one replied.
[URL]
Why is this? I ran into the same problem and from what I was seeing, the replace() was only replacing the very first match. My work around was pretty simple, I just keep running replace() until it was done, but I'm dumbfounded as to why this would need to be done.
while (newLastRow.html().indexOf(settings.placeholder) > -1){
newLastRow.html(newLastRow.html().replace(settings.placeholder, curTotal)); }
As with the other post, I'm dynamically adding html to the page using a template, where the replace() method is updating the IDs of the fields when adding a new instance.
What's special about the value returned by the html() method? Is there a different preferred way to do this?
I have been trying to use the following:
document.getElementById('someId').setExpression('s omeExpression');
This works ok.
But in my actual implementation, I have over 20 different elements
which need to be positioned using this method. When I made the code, I
found that my CPU would be at 100% for even trival events such as
mouseover() and mouseout()
Am I doing something wrong?
I am hiding a login panel like:
$(document).ready(function() {
$("#login").css({marginTop: "-105px"});
});
But in IE 8 it takes very long to hide? I don't like to set it in CSS because if javascript is turned off people can still login as it is visible... is there anyway to make it faster ?
I want to start out by entering an investment amount as well as an interest amount. Then I want to find out how many years it would take to become a millionaire, using each cycle through a looping statement as one year. What would be the best way to do this?
View 13 Replies View Related[I posted this on the Developing jQuery UI forum as well, but perhaps it is more relevant in this forum since it is about the html() method...] Is it possible to "override"/"hook"/"replace" the html() method on particular elements, and if so, how? Or, are there any events raised when the html is changed by a call to html()? The reason I am asking is that I would like to detect when html() is called on an element in order to do some pre-processing before the html is changed and some post-processing after the html has changed. Further background: I am creating a ui widget myDialog, extending ui.dialog.
var myDialog = $('<div></div>').myDialog({...});
And if the user loads or changesthe content with
myDialog.html('here is some content');
[code]....
We are using JQuery for one of our software projects, and it's a very nice library. It's making things far easier. We are also using the Validation plugin, which is working wonders for form validation.However there's one wrinkle that we have not been able to figure out.Is there any way to run a function before the validation takes place?We have help text displayed in some of our text inputs and text areas,which are cleared onFocus (and restored onBlur if the user has not entered anything). We would like to clear those help text before validation is run, so that we don't get any false validations based on the help text, rather than the actual value of the field, which is blank.
View 1 Replies View RelatedIn our application we have used json data and we get json data from the server and on client side we display in grid. We have functionality of paging and filter. so on paging and filtering we process that json data and show to user. For filtering we are comparing each value to the filtered criteria and when json value is more thatn 35 kb it takes around 8-10 second to filter it. So is there any way that we can minimize the processing tiem.
View 1 Replies View RelatedCode:
function getCount1(){
sndReq("count&queue=1");
newCount1 = document.getElementById("count1").innerHTML;
if(count1 != newCount1){
[Code].....
I have no other animations on my page, yet "updateQueue1()" happens way before the animation...
jQuery using getJSON calls specific handler, lets say MyHandler.ashx $.getJSON(/MyHandler.ashx?param1=someVal, function(data) {
some code;
}
In Opera and Explorer this is executed immediately. In FireFox it takes over 1s before request is executed. Even when I set breakpoint in my handler it will be hit after 1s... could you tell me why it is so slow? I got latest version of firefox.
ser is able to create queries and issue them. The query is sent to the web-app by means of an ajax call. Then, the server computes the result set and a small subset (100) of tuples are sent back to the client for visualization.
These thing works with queries that are simple and do not require to the database long computations. As soon as I try a more complex query (computation requires ~ 7secs), the answer returned to the client is empty.
I suspect that this is a problem of timing out the connection, is that possible?
(edit) I have almost forgot, I'm using Prototype as JS library
I'm trying to create a page that takes data and turns it into images - I'm starting very simply. For each row of text, I first:
if(j.match(/[a-z]+_\d+/)){
colorval='red';
} else {
colorval='blue';
}
then I add a sequence of numbers for positioning to an object called pixs (with a numerical index as well that may or may not be useful):
var xpos = startwidth+d_num;
var ypos= startheight+d_scroll;
pixs[num]= {};
pixs[num]['xpos']=xpos;
pixs[num]['ypos']=ypos;
pixs[num]['color']=colorval;
As I loop through my arrays of little pieces of data, all of this information is stocked into pixs - BUT then- I have to insert this information from pixs to a function, like:
$(container).fillRect(xpos,ypos, width, height, {color: color}) where width and height are each preset vars.
My challenges here are to 1) successfully loop through the pixs object. 2)Use jquery if possible (or if easier) to get these variable values into the function to evaluate. 3) Successfully '.fillRect' with each loop. 4) Use the append method (or something?! again, I am a n00b) to get all of these instances of fillRect onto the container in the html document (which appears to be set up and working with instances of fillRect not using variables as parameters)
I have a very large tree data structure and I want to display some of its sections on a HTML page. I wrote the following JavaScript that loads parts of the tree dynamically injecting the desired HTML code.
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>[code]....
Each show_xxxxxxxx() function displays desired part of the tree on HTML.The problem is each time I load the HTML file it takes a lot of time to read the JavaScript (there are many show_xxxxxxxx() functions with a lot of HTML to insert).Is it possible to cache the loaded JavaScript into browser memory so it won't read the entire script when I reload the page with different content?
My problem is that it takes ages to perform the element.focus() function. This is not a function I have written myself but is part of the Javascript language itself. There are probably a lot of reasons why this might be slow but I cannot find the right one. Let me describe my problem. We have a product which was created around 2004 and has been developed on since. The HTML and Javascript used for the product was based on a prototype which we then converted into a server based solution (we use Servlets/JSP).
Due to the nature of the prototype (and also the graphical layout) the major page consists of one huge HTML page which a lot of hidden DIV tags. These DIV tags are then toggled visible/invisible to make it look like we have a kind of tab functionality. We also do not load all tabs when we load the mail page, instead each tab is loaded into a hidden iframe and then with Javascript we grab the resulting HTML content and paste it into the main page, making that one tab visible while hiding all other tabs.
In one of these tabs we also do some more magic. The layout is as follows; we have sets of three columns each and then a lot of rows. Each set of three columns contains one text field per column. The last text field contains a percentage value and when edited, we check if the value is lower then before the edit and if it is, then we split the column, creating another set of three columns.
When we load the page the first time, there exists only one set of columns with the last column having the value 100. There can however easily be 100 rows as well. For the larger pages we can have (at load time) three columns which makes it 900 text fields. I do not know if this is much or not.So, with the above info, to my problem. First off, when I try to move the marker and click on a given field (so that the marker starts blinking on the selected field) it takes maybe 2-3 second (although not always, seems to be more the first time). If I then tab to the next field it goes very fast (like one would expect).When I try to edit a value (by simply adding or removing values) it again takes a very long time (the first time).
When I then try to tab, it takes ages (this happens always, not only the first time).My Javascript then. I have two events, onchange and onkeydown. onkeydown checks if a variable is set to true or not. If it is set to true, the method does nothing. If set to false it does a bunch of tests and sets the variable to true. onkeydown is what I think causes my first lag but the code is not really that advanced (no loops or anything). onchange does the same checks plus all the magic (with the split etc). One of the last things it does is try to set focus on the next text field and this goes extremely slow all the time.
We use IE8. We (sadly) have a lot of IE specific stuff so the site doesn't even work in Firefox. I have used IE8 Developer Tools and used the Profiler which basically gives a list of Javascript calls and their execution times. My own functions take basically zero time, but there are A LOT of calls to functions that are not named, or anonymous, according to the Profiler.
How do I find what the anonymous function calls are?Why is it the focus() function that takes time, can it (or is it) still some of our own Javascript that makes that function go slow, even though it is part of the Javascript language?Can it be the amount of elements on the page (900 text fields)? Is that much?Can it be IE8? Are there known issues with this?
I heard that when we put javascript in website, then site takes time to open, is it correct ? If yes then which script is good for website.
View 1 Replies View RelatedI'm having a hard time getting my head round it again. I know it could be more efficient in jQuery, but I'd be happy just to get it working, with an extra variable, in straight js.The function takes an array and progressively hides each element at constant interval, in this case 50ms:
function hide_50(arrayA,visibility,current) {
if ( current == null ) current = 0;
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
[code]....
I have a simple calculator here that takes the number of songs from the input text box and multiplies it by 500 and then tells you the total. I am doing this on a simple web page for a project for college. I know document.write overwrites my entire page to print the result but I would like to keep the page and design that I have made and to print the result on the same paragraph as where the script and text box are.
Below is my javascript:
Code:
I'm trying to do something, but I don't know if it's possible.
Basically, I want to have a public static class method that could
access a private object's method. I would like to be able to do :
Class.method(InstanceOfClass);
The method would then access a private function from Class by doing
something like
function method(param) {
param.privateMethodOfClass();
}
I've done a lot research and experimentations but just can't come up
with a solution... I don't even know if what I'm trying to do is
possible.