Re: Progress Bar - JavaScript Discussion Boards

The unfortunate thing is that you can't do a true progress bar, because you don't have access to the count of downloaded bytes. What most sites do is to display an animated gif image that acts as a placebo. It makes people feel like something is happening, but gives no true measure of it.
Sign In·View Thread·Permalink

Thanks for your reply. I was also thinking to do same but looking for somekind of notification when object is fully downloaded and I have to stop the animation. Manish Agarwal manish.k.agarwal @ gmail DOT com
Sign In·View Thread·Permalink

readyState
==========

Retrieves the current state of the object.

Syntax

Scripting [ vState = ] object.readyState

Possible Values

vState Variant that receives one of the following values.uninitialized Object is not initialized with data.
loading Object is loading its data.
loaded Object has finished loading its data.
interactive User can interact with the object even though it is not fully loaded.
complete Object is completely initialized.

The property is read-only. The property has no default value.

Remarks

The states through which an object passes are determined by that object; an object can skip certain states
(for example, interactive) if those states do not apply to that object.

Standards Information

There is no public standard that applies to this property.

Applies To

A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON,
CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED,
FIELDSET, FONT, FORM, FRAMESET, HEAD, hn, HR, HTML, I, IFRAME, INS, ISINDEX, KBD, LABEL, LEGEND, LI,
LISTING, MAP, MARQUEE, MENU, namespace, nextID, NOBR, NOFRAMES, NOSCRIPT, OL, OPTION, P, PLAINTEXT,
PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TEXTAREA, TITLE, TT, U, UL, VAR, XML, XMP

----------------------------------------------------------

[ nState = ] XMLHttpRequest.readyState
Possible Values

nState Integer that receives one of the following values.0 The object has been created, but not initialized (the open method has not been called).
1 The object has been created, but the send method has not been called.
2 The send method has been called, but the status and headers are not yet available.
3 Some data has been received. Calling the responseBody and responseText properties at this state to obtain
partial results will return an error, because status and response headers are not fully available.
4 All the data has been received, and the complete data is available.

The property is read-only. The property has no default value.

Applies To
XMLHttpRequest

My js looks like as

function fnLoadMyo()
{
window.status="Myo Loading..";
var s = <object classid="clsid:A6S60BCD-BC5E-4088-EFCE-B9EED1D84CB3" id=myo height=100% width=100%/>';

document.getElementById('myoSection').innerHTML = s;

alert(myo.readyState);

}

In above alert, I always get 4, irrespective of activex downloaded or registered on client or not.

Manish Agarwal
manish.k.agarwal @ gmail DOT com

create an activeX object

don't forget
'OBJECT ID="' ... + '"'
+ ' CLASSID="' .... + '"'
+ ' TYPE="' .... + '"'

....

e.g.
"CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"; Mediaplayer Class-ID
"application/x-oleobject" type of Class-ID and media

-----------------------------------

create object directly, not with innerHTML.

X12=document.createElement(....);
X13=document.body.appendChild(X12);

try
{
X13.classid=....
X13.type=....
}
catch(e)
{
...
}

or

X12=document.createElement("<OBJECT ID= ... CLASSID= ...">); // e.g IE
X13=document.body.appendChild(X12);

after that maybe readystate is 4, but
pointer X13 must be !=null and !=undefined
X13.property too e.g. X14.classid

at this point activex exists (installed an callable)

e.g. Mediapalyer and try ..catch

// - - - check MediaPlayer createable, only IE
function checkMediaPlayer()
{
var X00=false;
var X01;

// ----- only if IE exist

// ----- create
X01=document.createElement("OBJECT");
// X01 mus be !=null and !=undefinded

// ----- set object try-catch so no place for readystate
try
{
// attention: activex must be allowed by user

// maybe NOT possible
// X01.classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95";
// X01.type="application/x-oleobject";
// X01.filename= ..... // dummy-wmv 1 sec must exists !

// maybe only that possible
X01.type="application/x-mplayer2"; // EMBED and not activeX
X01.filename= ..... // dummy-wmv 1 sec must exist !
}
catch(e1)
{X00=false;}

// ----- no append to body so no remove from body

if(X00)
{
try{X01.filename='';}
catch(e3){X00=false;}
}

// ----- clear object
X01=null; // no append to body so no remove from body

return X00;
}

how i do check the checkbox on tablerow by clicking datarow.for example in xampp phpmyadmin اسلام پیروز است
Sign In·View Thread·Permalink

You should have a look at line 522 of functions.js

If you right-click a table-row with Chrome or Opera, you can then select Inspect Element.
This will open the Dev Tools console. with the table-row still selected, you can then open the Event Listeners entry in the accordian. When I did this, I saw that the code for handling mouse-clicks on table-rows was to be found on line 522 of functions.js

With that done, one can see that the function basically looks for all any child elements of the row of type 'input' it then does some logic checking before checking/unchecking the checkbox.

Here's the function for reference. (I've marked what was line 522 with *****)

/**
 * This array is used to remember mark status of rows in browse mode
 */
var marked_row = new Array;
 
/**
 * enables highlight and marking of rows in data tables
 *
 */
function PMA_markRowsInit() {
    // for every table row ...
    var rows = document.getElementsByTagName('tr');
    for ( var i = 0; i < rows.length; i++ ) {
        // ... with the class 'odd' or 'even' ...
        if ( 'odd' != rows[i].className.substr(0,3) && 'even' != rows[i].className.substr(0,4) ) {
            continue;
        }
        // ... add event listeners ...
        // ... to highlight the row on mouseover ...
        if ( navigator.appName == 'Microsoft Internet Explorer' ) {
            // but only for IE, other browsers are handled by :hover in css
            rows[i].onmouseover = function() {
                this.className += ' hover';
            }
            rows[i].onmouseout = function() {
                this.className = this.className.replace( ' hover', '' );
            }
        }
        // Do not set click events if not wanted
        if (rows[i].className.search(/noclick/) != -1) {
            continue;
        }
 
/******************************************************************
 The code below was line 522 - it handles the clicking on the table row
the other code is for setup/assorted functionality of the table
******************************************************************/
        // ... and to mark the row on click ...
        rows[i].onmousedown = function() {
            var unique_id;
            var checkbox;
 
            checkbox = this.getElementsByTagName( 'input' )[0];
            if ( checkbox && checkbox.type == 'checkbox' ) {
                unique_id = checkbox.name + checkbox.value;
            } else if ( this.id.length > 0 ) {
                unique_id = this.id;
            } else {
                return;
            }
 
            if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {
                marked_row[unique_id] = true;
            } else {
                marked_row[unique_id] = false;
            }
 
            if ( marked_row[unique_id] ) {
                this.className += ' marked';
            } else {
                this.className = this.className.replace(' marked', '');
            }
 
            if ( checkbox && checkbox.disabled == false ) {
                checkbox.checked = marked_row[unique_id];
            }
        }
 
        // ... and disable label ...
        var labeltag = rows[i].getElementsByTagName('label')[0];
        if ( labeltag ) {
            labeltag.onclick = function() {
                return false;
            }
        }
        // .. and checkbox clicks
        var checkbox = rows[i].getElementsByTagName('input')[0];
        if ( checkbox ) {
            checkbox.onclick = function() {
                // opera does not recognize return false;
                this.checked = ! this.checked;
            }
        }
    }
}
window.onload=PMA_markRowsInit;

Make it work. Then do it better - Andrei Straut

Thanks enhzflep ! But How i do it with PHP اسلام پیروزاست.اسلامنا غالب
Sign In·View Thread·Permalink

You're welcome. Smile | :)

Well, you can't do it with PHP. That is to say, PHP is only good for performing calculations before outputting to a web-browser.

You can't do it with the keyboard, since the keyboard just allows you to create the page that is then displayed. Well, for the purpose of this discussion, PHP works just like the keyboard, except a little faster.

So, where does that leave you if you want to create a page with PHP and have it behave in the same way?

Well, you simply put the appropriate javascript into a js file. You then link that file to the html output, with a
<script src='......'></script> tag.

You can see from the last line of the code I posted, that the onload function for the document calls a function which attaches an event handler to each of the table-rows in the page.

So, you could put the function into the javascript file.
You can link that file to the output of the PHP
You can call the function either with <body onload='yourInitFunc();'> in the html
or with window.onload = yourInitFunc; in the javascript.

Presumably, you're assembling the page in PHP perl-style, I.e you're using print, printf or echo to output each line of content as you go. In that case, you just output the required tags with a print statement at the appropriate place.

If on the other hand, you're using DOM objects to construct the page - then you'll need to create the script node & set it's src attribute to point to the javascript file.

To be perfectly honest, if I was in your shoes then I'd just make a quick html file that did nothing but try to attach a function to the onclick event of each of the table rows.
Okay, I got bored - have a play around with this. Make it work the way you'd like, then output the file dynamically, instead of with the keyboard (or in your case, copy/paste)

<!doctype html>
<html>
<head>
<script>
 
function myRowClickFunction()
{
	alert('row clicked');
}
 
function myBtnClicked()
{
	alert('btn clicked');
}
 
function addBtnToRow()
{
	// *** 'this' points to the row that was clicked ***
	
	// make a new table-cell element
	td = document.createElement('td');
	
	// make a new input element
	btnInput = document.createElement('input');
	btnInput.setAttribute('value', 'click me');
	btnInput.setAttribute('type', 'button');
	btnInput.onclick = myBtnClicked;
	
	// place the btn inside the new table cell
	td.appendChild(btnInput);
 
	// place this new cell inside the row that was clicked
	this.appendChild(td);
	
	// remove the onclick handler from the row, to prevent adding a button multiple times
	this.onclick = null;
}
 
// attach the specified function to the onclick event of all 'tr' elements in the document
function attachEventHandlerToTableRows(functionToAttach)
{
	var i, num;
	var tableRows = document.getElementsByTagName('tr');
 
	num = tableRows.length;
	for (i=0; i<num; i++)
	{
		tableRows[i].onclick = functionToAttach;
	}
}
 

// Sample onInit function.
// make sure you only use one function or the other here
function myInit()
{
	// the row will just tell us that we've clicked it
	attachEventHandlerToTableRows(myRowClickFunction);
	
	// the row will add a cell that contains a button, whenever the row is clicked
	// try commenting out the above line of code and uncommenting this one instead
	//attachEventHandlerToTableRows(addBtnToRow);
}
</script>
</head>
<body onload='myInit();'>
	<table>
		<tbody>
			<tr><td>This is row 1</td></tr>
			<tr><td>This is row 2</td></tr>
			<tr><td>This is row 3</td></tr>
			<tr><td>This is row 4</td></tr>
			<tr><td>This is row 5</td></tr>
		</tbody>
	</table>
</body>
</html>

Make it work. Then do it better - Andrei Straut

OKAY my friend!!! but how i get the row index and if i give a checkbox on first td how i change the checkbox state on tr click ? i create checkboxes dynamically on webpage with php . HELP ME!!!! اسلام پیروزاست.اسلامنا غالب
Sign In·View Thread·Permalink

		9,890,640 members (45,535 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using