|
Ok. I understand that but why not replace those hardcoded styles with css classes and jQuery().addClass("xxx")?
Why you using selector: panel_ProductEditor_ToolBox_Next? Its obviously part of asp.net generated id. Why not set CssClass property just for selecting?
Than you have clear selector that will not change when you edit parent container(s)?
Why you setting both innerText and innerHtml? For simple string like "Close Panel" one from them is enough and they mean the same?
For simple case like in question this is achievable with single css rule:
.parent-container:hover .autohider{
display:block;
}
.parent-container .autohider{
display:none;
}
and html
<div class="parent-container">
<div class="autohider">
some hider content
</div>
</div>
I don't say that it's wrong. Just overcomplicated.
No more Mister Nice Guy... >: |
|
|
|
|
|
It's part of a back end application, that controls the front end of the website.
Customers were changing the css and messing it up, so we just hard coded the fonts. Got tired of having to fix it all on every installation.
We just use css names now for jquery on certain modules, so we can do a mass edit using each on css types. It appeared to be more effective and faster in speed.
on the innertext versus innerhtml, that's something I'm still messing with. It dates back to earlier in the year with compatibility issues between IE, Firefox, it use to be 2 different scripts, but I tried to combine them into one. Still working on that, and help was hard to find.
That script is still experimental, and is the 5th revision of it. At least the complaints went away on it, and it renders correctly every time, on both browsers and versions. It can use more optimization, but the speed and performance of the fly out tab is quite impressive and very reliable.
Feel free to suggest some optimizations, and I'll rewrite that module in October using your feedback.
|
|
|
|
|
So it's customer doings... I should suspect that.
In that case. Maybe you should consider using css from webresource.axd as part of some assembly. Just like DevExpress. But it is harder to maintain and deploy than just simple css file.
But maybe it can suit your situation.
I was also experimenting in doing something like this purely in css. It's posible, but seems to work for now nice only in FF. It's works like flag on/off in IE, Opera. In Chrome looks like crap.
But maybe you can do something with that:
http://jsfiddle.net/LnbuM/[^]
Another idea: http://jqueryui.com/demos/hide/[^]
But since this framework uses css as well and your customer is breaking that...
But this not change fact that you hardcoded part of asp.net id into js. I stumble on bugs coming from that few times. In current project I created in aspx file js object containing aspx controls ids for selecting them from jQuery. I benefit from compilation of pages:
<script>
var selector = '<%=control.ClientId%>'
</script>
but it's have to be separated from main js script in .js file.
So next time i will use some css class to avoid this separation.
But mainly i would cut if parts with "-360px" and use some predefined even only for this (without css rules). jQuery().hasClass(), addClass, toggleClass, removeClass functions are specifically for something like this. Since you have in auto hider only 2 states (visible/not visible) you can toggle this in single event:
$('.autohider').toggleClass('visible');
As for innerText/Html. What differences between browsers you have found? I am not specification expert. But it's pretty basic. Text sets text, and html set html. If it's not in all browsers, use
$().text and $().html functions.
Creating elements? I would rather use
$('.container').append('<td style="someStyle">someText</td>'). It's hardcoded to but for me easier for eyes and cause of that for maintain.
Maybe I sound like jQuery fan boy, but why you should reinvent the wheel since jQuery folks done that before and it's works? I think they wheel is more... round then yours or main.
No more Mister Nice Guy... >: |
|
|
|
|
|
I found that IE has a different way or syntax for creating html in the dom. Firefox, Safari was pretty straight forward, but IE used table.insertRow(-1), and InnerText instead of InnerHTML. So I spent a week looking at the difference between the two, and found that you can set stuff, but it won't work or produce an error unless it's way off base. So IE just ignores InnerHTML, but picks up InnerText. Go Figure?. I didn't want to mess with more asp.net elements, so I just made them in Javascript. The main point was that if it's even used, then it's created on the fly by the client, if not, there's no extra asp.net code needed.
Drove me nuts!
So the big picture here, is that it's a very small piece of code in a large Server DLL Control (6 megs). The script is embedded, and everything is code behind.
The hard coded id is on the asp.net side, the jquery uses a wildcard for the id, in which the prefix can be anything, as long as the suffix matches. So masterpages are not a problem.
I didn't think of using CSS at the time, just wrote it all in mostly javascript. I suppose there are a dozen ways to do it.
I use to type out the HTML like your example and append it, just thought I would try something different this time. The createElement seems a little faster than just appending text.
I'm amazed at really fast it runs, so I'm going to stick with it for now.
|
|
|
|
|
jkirkerx wrote: I'm amazed at really fast it runs, so I'm going to stick with it for now.
Just out of curiosity how did you tested it?
No more Mister Nice Guy... >: |
|
|
|
|
|
Visual test, plus count 1 one thousand, 2 one thousand,
It was quite obvious compared to the previous version, may be it was better tsql, no wrote that last.
|
|
|
|
|
Ok. Thanks. 
No more Mister Nice Guy... >: |
|
|
|
|
|
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."
|
|
|
|
|
Thanks for this Bill, looks like some good stuff there.
Steve
|
|
|
|
|
Hey guys, I'm new to Jquery and I'm trying to use
jCapSlide in a datalist,
<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
<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
|
|
|
|
|
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
|
|
|
|
|
$("#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:
<script type="text/javascript">
$(function () {
$(".capslide_img_cont").capslide({
caption_color: 'white',
caption_bgcolor: 'black',
overlay_bgcolor: 'black',
border: '',
showcaption: false
});
});
</script>
|
|
|
|
|
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
|
|
|
|
|
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.
|
|
|
|
|
"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
|
|
|
|
|
I only worry about the performance of this method.
|
|
|
|
|
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
|
|
|
|
|
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.
<script>
function selectAll(selectBox, selectAll, ensureOneSelected) {
var selectBoxElement = null;
var selectBoxOption = null;
var boolSelect = selectAll;
if (typeof selectBox == "string") {
selectBoxElement = document.getElementById(selectBox);
selectBoxOption = selectBoxElement.options;
}
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
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
Developed a working solution on IE8 though I did run into a select option truncate bug where the first option in innerHTML is removed. 
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.
cheers.
|
|
|
|
|
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>
|
|
|
|
|
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
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
