fyi: accidental find: using JavaScript DOM in browser to parse a URL - JavaScript Discussion Boards

Fantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc.

BillWoodruff25-Sep-12 13:46

25-Sep-12 13:46

Hi, I recently mentioned this site on a Lounge post, but I feel it's so relevant to the area of "responsive design," using the web-centric tools, JavaScript + jQuery, HTML 5, CSS 3, etc., that it really deserves mention, again, here.

Brad Frost's site, "This is Responsive:" [^]: this is perhaps the best site in this area I've come across.

Check out his UI demonstrations, as well as his source-code, and fluently expressed comments and explanations.

best, Bill

"Takuan Sōhō died in Edo (present-day Tokyo) in December of 1645. At the moment before his death, Takuan painted the Chinese character 'meng' ("dream"), laid down his brush and died."

Re: Fantastic site demonstrating and teaching "responsive" UI concepts using JavaScript, HTML 5, etc.

Steve Bondy7-Dec-12 12:38

Steve Bondy

7-Dec-12 12:38

Thanks for this Bill, looks like some good stuff there.

Steve

Using Jquery in DataList

mrkeivan19-Sep-12 6:17

mrkeivan

19-Sep-12 6:17

Hey guys, I'm new to Jquery and I'm trying to use

jCapSlide

in a datalist,

ASP.NET

<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
                    RepeatColumns="5" CellPadding="5" CellSpacing="5" 
                    OnItemDataBound="DataListList_ItemDataBound">
                    <ItemTemplate>
                        <div id="capslide_img_cont" class="ic_container">
                            <asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
                                CssClass="NewsImage1" runat="server" />
                            <div class="overlay" style="display: none;">
                            </div>
                            <div class="ic_caption">
                                <p class="ic_category">
                                    '<%# Eval("Category.cName")%>'</p>
                                <h3>
                                    '<%# Eval("pTitle") %>'</h3>
                                <p class="ic_text">
                                    '<%# Eval("pTitle") %>'
                                </p>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:DataList>

with this Function

JavaScript

<script type="text/javascript">
    $(function () {
        $("#capslide_img_cont").capslide({
            caption_color: 'white',
            caption_bgcolor: 'black',
            overlay_bgcolor: 'black',
            border: '',
            showcaption: false
        });
    });
        </script>

There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated

id="capslide_img_cont"

but can't seem to fix it.
can you help me out ?
It's deeply appreciated

Re: Using Jquery in DataList

jkirkerx25-Sep-12 18:01

jkirkerx

25-Sep-12 18:01

try

$('[id*="capslide_img_cont"]')

it's a wildcard that accepts any prefix, and the suffix you enter. asp.net will inject a prefix like $content100 in front of your id name. so it becomes something like $content100_capside_img_cont

As far as the 2nd and 3rd record goes, I'm not sure yet, not enough info

Re: Using Jquery in DataList

gjllyl9-Oct-12 19:36

gjllyl

9-Oct-12 19:36

$("#capslide_img_cont") will get the first element.if you use 'Id' attribute,there will be not only one div with 'id' attribute.it's not good.so I suggest using 'name' attribute ,and then $("div[name='capslide_img_cont']").capslide.or using 'class' attribute if no one use 'ic_container' except this div.zhe code below:

JavaScript

<script type="text/javascript">
    $(function () {
        $(".capslide_img_cont").capslide({
            caption_color: 'white',
            caption_bgcolor: 'black',
            overlay_bgcolor: 'black',
            border: '',
            showcaption: false
        });
    });
        </script>

How to calculate difference between two dates

Robymon17-Sep-12 23:46

Robymon

17-Sep-12 23:46

I want to calculate the difference between two dates and the result should get in Year,Month and Date format. While calculating the difference it should take the end date also.

eg: 01/09/2012 - 30/09/2012 = 1 Month
01/02/2012 - 29/02/2012 = 1 Month
01/08/2012 - 10/08/2012 = 1 Month and 10 Days
01/01/2012 - 31/12/2012 = 1 Year
01/01/2012 - 10/01/2013 = 1 Year and 10 days

Re: How to calculate difference between two dates

Joan M18-Sep-12 4:59

Joan M

18-Sep-12 4:59

Crossposting is evil...

You should never do that here, it is annoying.
We wander from forum to forum willing to help.

For easy/fast questions Q&A, for longer questions forums. Keep in mind that crossposting will get you downvotes though.

[www.tamautomation.com] Robots, CNC and PLC machines for grinding and polishing.

fyi: accidental find: using JavaScript DOM in browser to parse a URL

BillWoodruff14-Sep-12 22:54

BillWoodruff

14-Sep-12 22:54

"The Lazy Man’s URL Parsing in JavaScript"[^] on Joe Zim's blog.

Excerpt: "This method – originally posted on Github by John Long, though probably not originally discovered by him – uses native parsing abilities built into the DOM to give you simple access to the parts of a URL simply by querying properties of an anchor element. Check it out:"

best, Bill

<color>"When it comes to atoms, language can be used only as in poetry. The poet, too, is not nearly so concerned with describing facts as with creating images." Niels Bohr

Re: fyi: accidental find: using JavaScript DOM in browser to parse a URL

ziggyfish10-Oct-12 6:26

ziggyfish

10-Oct-12 6:26

I only worry about the performance of this method.

google map splite write problem

chogrf13-Sep-12 2:48

chogrf

13-Sep-12 2:48

iframe
width="3000"
height="3000"
/iframe

i made iframe for google big image

1. i would like to move 3000 pixel to pan above with javascript , no google api
2. i would like to split save image with java because big image save error
no capture utill

Fastest way to select all elements in a *ListBox*

A*****12-Sep-12 19:32

A*****

12-Sep-12 19:32

I am trying to select all the elements in a Listbox/SelectBox.

At the moment I am using the following function *which is working*, the only thing is it takes around 10 seconds to select all elements(of which there are 652).

I'm a beginner at javascript so I was wondering whether anyone knew of a faster way to select all elements.

JavaScript

//selectBox is the selectbox ID, selectall is a boolean whether to select all elements,
//ensureOneSelected applies when false is specified for selectall
//it then ensures that the first element is always selected.

<script>

function selectAll(selectBox, selectAll, ensureOneSelected) {
    // have we been passed an ID
    var selectBoxElement = null;
    var selectBoxOption = null;

    var boolSelect = selectAll;

    if (typeof selectBox == "string") {
        selectBoxElement = document.getElementById(selectBox);
        selectBoxOption = selectBoxElement.options;
    }
    // is the select box a multiple select box?
    if (selectBoxElement.type == "select-multiple") {
        var max = (selectBoxOption.length);

        var modMaxUnrollFactor = (max % 4);

        max -= modMaxUnrollFactor ;

        for(var i = 0; i < max; i+=4){
            selectBoxOption[i].selected = boolSelect;
            selectBoxOption[i + 1].selected = boolSelect;
            selectBoxOption[i + 2].selected = boolSelect;
            selectBoxOption[i + 3].selected = boolSelect;

        }
        for (var i = max; i < selectBoxOption.length; i++) {
            selectBoxOption[i].selected = boolSelect;
        }

        if (typeof ensureOneSelected == "boolean") {
            if(selectBoxOption[0].selected == false)
            {
                selectBoxOption[0].selected = ensureOneSelected;
            }
        }
    }
}
</script>

thanks in advance

My blog:[^]

Re: Fastest way to select all elements in a *ListBox*

BobJanova12-Sep-12 23:04

BobJanova

12-Sep-12 23:04

What is with the unroll factor and two loops? That is pointless ... running a for loop 600 times isn't what's slow.

Manipulating the DOM can be slow. You might do better to get .innerHTML, do a regex replace for '<option( selected)?' with either '<option' or '<option selected', and then reassign .innerHTML.

Re: Fastest way to select all elements in a *ListBox*

A*****13-Sep-12 12:27

A*****

13-Sep-12 12:27

BobJanova wrote:
Manipulating the DOM can be slow. You might do better to get .innerHTML, do a
regex replace for '<option( selected)?' with either '<option' or
'<option selected', and then reassign .innerHTML.

Thanks, I'll look into it.

BobJanova wrote:
What is with the unroll factor and two loops? That is pointless ... running a
for loop 600 times isn't what's slow.

I'm a c/c++ programmer predominately, force of habit Smile | :)

My blog:[^]

Re: Fastest way to select all elements in a *ListBox*

A*****13-Sep-12 18:55

A*****

13-Sep-12 18:55

Developed a working solution on IE8 though I did run into a select option truncate bug where the first option in innerHTML is removed. Hmmm | :|

But in the end I developed a workaround for this bug and have a working ~~hack~~ solution which is much much faster, so all is good. Smile | :)

cheers.

My blog:[^]

javascript _> activex passing by reference

Johan000112-Sep-12 1:40

Johan0001

12-Sep-12 1:40

Hi I hope somebody can help.
Apologies if the code below is not clear ,because this is my first post/query.

Basically i have a javascript function that is executed on the client side using onclientclick in my aspx , html page.

The javascript function "capt(fingerpos)" below invokes the activex objects which is declared in the aspx page in an object tag( see below).It is also registered in the client machine.

All the method calls work correctly , until i need to pass an array ( buf) by reference to the method
CSDCtrlClass.GetMemoryBuffer("BMP", buf);
This always returns an empty array . Ive tried declaring an object (BmpObject) and sending it to the activex method with the same result.

In c#( windows application) this com object works correctly when declaring BmpObject as object ,
and the return value of (buf) is populated by the activex method CSDCtrlClass.GetMemoryBuffer("BMP", buf);
My problem is i cannot understand why this method does not return the buffer/object in javascript , but does work in a normal windows application.

Obviously the handeling of the reference variable( either array or object) is different in javascript. But i have tried many different approaches , the return variable is always the same ( empty or null).
Any suggestions on how to handle this?

The actual return data is just a block of 8 bit bytes( bmp image) when executed in the working windows application.

html code snippet:

<object id="CSDCtrlClass" name="CSDCtrlClass"classid="CLSID:B228B13B-AD31-4523-AD58-5D52553EEC47" width="100" height="100"></object>

<script type ="text/javascript">

function capt(FingPos)
{
var BmpObject = {};
var buf = new Array(200000);

CSDCtrlClass.InitScannerExternal();
CSDCtrlClass.bInitKillScannerExternal = 1;
CSDCtrlClass.bAutoCapture = 1;
CSDCtrlClass.OutputFileMode = 0;
CSDCtrlClass.TransNo = "TranSample";
CSDCtrlClass.FingPos = FingPos;
CSDCtrlClass.OutputSaveFormat= "BMP_RAW_WSQ";

CSDCtrlClass.Capture();
if (CSDCtrlClass.ErrCode == -999)
{
alert("Capture Error:" + CSDCtrlClass.ErrCode);
return false;
}

try
{
CSDCtrlClass.GetMemoryBuffer("BMP", buf);
if (CSDCtrlClass.ErrCode != 0) {
alert("Capture Error:" + CSDCtrlClass.ErrCode);
return false;
}

alert(buf);

CSDCtrlClass.TerminateScannerExternal();
}
catch (err)
{
var txt = "";
txt = "ERROR[" + err.message + "]";
alert(txt);
}

</script>

Re: javascript _> activex passing by reference

twseitex16-Sep-12 1:09

twseitex

16-Sep-12 1:09

Active X for IE

IE knows ID and NAME, but use ID not directly.

CSDCtrlClass. ..... useable only for IE

// +++++ get reference for all browsers
function GetReference(X00)
// X00 string, value of ID or NAME
// returns null in case of error
// returns never undefined
{
var X01=null;
var X02=false;

if((X00!=null)&&(X00!=undefined))
{if(X00.length>0)
{
// +++++
X02=..... // code to check only IE

// +++++ 1. try
if(X02){X01=window[X00];} // only if exactly IE
else{X01=document[X00];} // non IE
if(X01==undefined){X01=null;} // set reference undefined to null

// +++++ 2. try
if(X01==null)
{
X01=document.getElementById(X00);
if(X01==undefined){X01=null;} // set reference undefined to null
if(X01!=null)
{if(X01.id==undefined)
{X01=null;}
}
}

// +++++ 3. try
if(X01==null)
{
X01=document.getElementsByName(X00);
if(X01==undefined){X01=null;} // set reference undefined to null
if(X01!=null)
{if(X01.name==undefined)
{X01=null;}
}
}
}
}

return X01;
}

<object id="CSDCtrlClass" classid="CLSID:B228B13B-AD31-4523-AD58-5D52553EEC47" width="100" height="100">

var PointerOfActiveXObject=GetReference("CSDCtrlClass");
if(PointerOfActiveXObject!=null)
{PointerOfActiveXObject.InitScannerExternal();

// ActiveX-control must support Javascript interface (an HTML-DOM)
// e.g. InitScannerExternal() callable javascript function
// e.g. bInitKillScannerExternal supported javacript property

// for every call of any function of interface use an own try-catch

// try
// {CSDCtrlClass.InitScannerExternal();
// try
// {CSDCtrlClass.bInitKillScannerExternal = 1;}
// catch(e2)
// {...}
// }
// catch(e1)
// {....}
....
}

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

Using of ClassID see in this forum "Progress Bar 3:33 31 Aug '12 " entry 3:18 4 Sep '12

Re: javascript _> activex passing by reference

Johan000117-Sep-12 0:46

Johan0001

17-Sep-12 0:46

var PointerOfActiveXObject=GetReference("CSDCtrlClass");

this has the same result all the methods are working except for the method.

PointerOfActiveXObject.GetMemoryBuffer("BMP", buf);

the 'buf' does not return the bmp byte array it is still empty.

Re: javascript _> activex passing by reference

twseitex17-Sep-12 8:30

twseitex

17-Sep-12 8:30

CSDCtrlClass.GetMemoryBuffer("BMP", buf);

what returns this function ?

var ReturnValue=CSDCtrlClass.GetMemoryBuffer("BMP", buf);

or

var buf = new Array(200000); // e.g. global var

CSDCtrlClass.GetMemoryBuffer("BMP", buf);

do something with buf

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

var buf = new Array(200000); // empty

// init
var X00=0;

for(X00=0;X00<20000;X00+´+)
{buf[X00]= ....;}

// may be buf must have init values.

CSDCtrlClass.GetMemoryBuffer("BMP", buf); // 'BMP' okay value ?, what is the range of values ?

alert(buf); // means pointer buf
alert(buf[0]; // init value or other value ?
alert(buf.length) // 20000 ?

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

try
{
CSDCtrlClass.GetMemoryBuffer("BMP", buf);
if (CSDCtrlClass.ErrCode != 0) // possible inside of try ?
// ErrorCode may be like an "catch"
{.....} // try catch generally possible ?

}

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

if (CSDCtrlClass.ErrCode != 0) // call a meber "ErrCode" of control
// so set this call between a try-catch

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

catch (err) // param err is javascript and not from control
{ ....} // so not CSDCtrlClass.ErrCode
// try catch runs inside of html DOM and parsing of javascript

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

if (CSDCtrlClass.ErrCode == -999) // CSDCtrlClass.ErrCode must be aviable inside of html DOM
// to compare with value inside of script
// CSDCtrlClass must be an pointer inside of html DOM tree

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

don't forget: vars inside function are locally
may be control need global vars.

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

crreate CSDCtrlClass dunymically with createElement() and appendChild()
so you get pointer of html DOM

var X05=document.createElement('object');
var X06=document.body.appendChild(X05);

.....

but Internet Explorer can have special way to create active-x-control dynamically.

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

ask the developer of actice-x-control: rules of javascript interface of control

Re: javascript _> activex passing by reference

Johan000117-Sep-12 21:38

Johan0001

17-Sep-12 21:38

<b>CSDCtrlClass.GetMemoryBuffer("BMP", buf);

what returns this function ?

var ReturnValue=CSDCtrlClass.GetMemoryBuffer("BMP", buf);

or

var buf = new Array(200000); // e.g. global var</b>

THE RETURN VALUE OF THE FUNCTION IS ZERO , WHICH INDICATES THAT THE FUNCTION EXECUTED SUCCESSFULLY.
HOWEVER THE FUNCTION HAS 2 ARGUMENTS 1. "BMP" which is an input string and correct!
2. "buf" which is a return object of binary bytes
This is the array that is empty all the time.
It should be populated a block of binary data
representing a bitmap image( approx 154k), after the function is called.

PS when calling this function in c#( windows application) the 'buf' is declared as Object and passed by reference i.e.

<pre lang="c#">object buf = null;

CSDCtrlClassFPLite.GetMemoryBuffer("BMP", ref buf);</pre>

IT WORKS CORRECTLY AND RETURNS THE BINARY DATA, MY QUESTION IS WHY DOES IT NOT WORK IN JAVASCRIPT FUNCTION, AND HOW SHOULD I DECLARE THE 'buf'.

Re: javascript _> activex passing by reference

twseitex18-Sep-12 8:58

twseitex

18-Sep-12 8:58

Javascript needs references of html DOM, of an active-x-control too.
Javascript data types not the same of c#.

Interface between active-x-c# and javascript needed --> <object ...="">

Internal of active x-control NOT needed for javascript.
So, if buf-array null so array-pointer "undefined".

buf=new array(value) --> define a pointer of array with length value
without init buf have no data type (after first set to value).

object buf = null; --> data type "object" ? like buf = new Object() ?

byte buf=new Byte() .... also not exist in standard javascript.

numObj = new Number(value) is a data type of javascript

control returns byte buf or other type in javascript interface ?

Another example: Flash has predfined interface for javascript --> data type conversion.

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

IE object number

JScript

Number Object
An object representation of the number data type and placeholder for numeric constants.

numObj = new Number(value)
Arguments
numobj
Required. The variable name to which the Number object is assigned.
value
Required. The numeric value of the Number object being created.
Remarks
JScript creates Number objects as required from numerical values. It is rarely necessary to create Number objects explicitly.

The primary purposes for the Number object are to collect its properties into one object, and to allow numbers to be converted into strings via the toString method.

Properties
MAX_VALUE Property | MIN_VALUE Property | NaN Property | NEGATIVE_INFINITY Property | POSITIVE_INFINITY Property | constructor Property | prototype Property

Methods
toLocaleString Method | toString Method | valueOf Method

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

IE Object Array

JScript

Array Object
Provides support for creation of arrays of any data type.

arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
Arguments
arrayObj
Required. The variable name to which the Array object is assigned.
size
Optional. The size of the array. As arrays are zero-based, created elements will have indexes from zero to size -1.
element0,...,elementN
Optional. The elements to place in the array. This creates an array with n + 1 elements, and a length of n + 1. Using this syntax, you must supply more than one element.
Remarks
After an array is created, the individual elements of the array can be accessed using [ ] notation, for example:

var my_array = new Array();
for (i = 0; i < 10; i++)
{
my_array[i] = i;
}
x = my_array[4];
Since arrays in Microsoft JScript are zero-based, the last statement in the preceding example accesses the fifth element of the array. That element contains the value 4.

If only one argument is passed to the Array constructor, and the argument is a number, it must be an unsigned 32-bit integer (< approximately four billion). That value then becomes the size of the array. If the value is a number, but is less than zero or is not an integer, a run-time error occurs.

If a single value is passed to the Array constructor, and it is not a number, the length property is set to 1, and the value of the only element becomes the single, passed-in argument.

Notice that JScript arrays are sparse arrays, that is, although you can allocate an array with many elements, only the elements that actually contain data exist. This reduces the amount of memory used by the array.

Re: javascript _> activex passing by reference

Johan000118-Sep-12 23:28

Johan0001

18-Sep-12 23:28

im not sure what you are trying to say here..

Javascript needs references of html DOM, of an active-x-control too.
Javascript data types not the same of c#.
Interface between active-x-c# and javascript needed --> <OBJECT ...>

THIS I HAVE DONE, AND METHODS ARE CALLED AND EXECUTED CORRECTLY IN ACTIVEX?

Internal of active x-control NOT needed for javascript.
So, if buf-array null so array-pointer "undefined".

buf=new array(value) --> define a pointer of array with length value
without init buf have no data type (after first set to value).

THIS I HAVE DONE

object buf = null; --> data type "object" ? like buf = new Object() ?

I TRIED THIS , SAME RESULT

byte buf=new Byte() .... also not exist in standard javascript.

UNDERSTOOD

numObj = new Number(value) is a data type of javascript

UNDERSTOOD , THIS WILL NOT WORK BECAUSE MY 'buf' RETURN VALUE IS 154000 BYTES OF DATA?

control returns byte buf or other type in javascript interface ?

NOT SURE WHAT TO DO NEXT??

Re: javascript _> activex passing by reference

Johan000117-Sep-12 1:03

Johan0001

17-Sep-12 1:03

i tried this still the same result.

All the methods in the activex object work correctly , it is only not returning the array byte buffer (buf) , which remains empty.

Re: javascript _> activex passing by reference

Manfred Rudolf Bihy19-Sep-12 1:02

Manfred Rudolf Bihy

19-Sep-12 1:02

I'm not quite sure it this will help you, but I found this (to me) interesting site where the passage to and the retrieval of arrays from ActiveX objects via JavaScript is explained: