JavaScript Discussion Boards

Tried TypeScript? I've been playing around with it for a few days and I'm not sure what I think of it. It's almost javascript, but you get some benefits by using types and maybe a easier syntax.
I installed Mads Kristensen's Web Essentials 1.3 and of course the official plug-in for Visual Studio
Web Essentials crashes from time to time, but Mads is working on it Smile | :)

Do you have any experiences using TypeScript? Maybe some examples to share? How do you solve using libraries like jQuery(ui), knockout, underscore etc? It's really boring to write all these typescript interfaces. Typescripts homepage should have a directory for interfaces for the most used js-libraries (or maybe such directory exists somewhere?)

--------------------
When Chuck Norris' dreams come true, your worst nightmares begin.

Had installed this plugin and must say that it is tragically slow for me.
Now it is disabled and i don't think I will ever enable this again since it don't add anything useful.

And for type script? I really don't understand why people want to do C from JS. It is dynamic language. Type checking is fun
and make thinks little easier. But JS is for DOM manipulation and client events. Nothing serious really.

I had written bigger library with JS for WebGL, and I must say that this language is not for that kind of work. Now trends for doing rich, complicated web apps is good, but in my opinion we trying to force JS to do work it not suppose to. I think we need better language for this, and experiments coffe script, and type script is half step into good direction. If you have know JS anyway it isn't a solution.

No more Mister Nice Guy... >: |

n.podbielski wrote:
in my opinion we trying to force JS to do work it not suppose to.

I agree with you. Frown | :(

/ravi

My new year resolution: 2048 x 1536
Home | Articles | My .NET bits | Freeware
ravib(at)ravib(dot)com

I am not agreed with everything from news from today insider, but it still interesting lecture concerning the subject:
http://webreflection.blogspot.com/2012/10/javascript-made-everyone-crazy.html[^]

No more Mister Nice Guy... >: |

Please open any website like msn.com or yahoo.com and hover the mouse over links you will get underline effect then click on any sub menu and do the same again this time you will notice that underline have still persist under links even you will go to other links on the page. how can we resolve this issue, feel free to ask me if any thing specific required input from my side.

Thanks,
Ambesha

Ambesha wrote:
feel free to ask me if any thing specific required input from my side.

Yes. we ask that you post your question ONCE. Crossposting like this only annoys those who might otherwise help you.

Peter

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

function favAnimal(button) {
alert('You like '+button.value+'s.');
}

Kangaroo

Opossum

Tasmanian Tiger

Custom and high Qualified ASP.Net Web Development Services

Does any of the message you posted have a purpose?

Regards,
Jon

One approach is to provide a message that the form has been submitted, and then provide some means to prevent the web page reader from submitting the form again. In its simplest variation, the following would work:

function validateSubmission(evt) {
...
alert("Thank you, we're processing your order right now");
document.getElementById("submitbutton").disabled=true; // disable

Multiple concurrent form submissions are one of the worst problems that can occur in a user interface. Most people would be unhappy if, say, they found they had purchased two of the same item when they were only expecting to purchase one.

There are several different approaches you can take to prevent duplicate form submissions, and how strict you want to be depends on the seriousness of the double submission.

Custom and high Qualified ASP.Net Web Development Services

asp.net development

I would like to incorporate unit testing into my Javascript development but am clueless how to begin. Can anyone point me to resources that can help me get started?

Custom and high Qualified ASP.Net Web Development Services

Custom and high Qualified ASP.Net Web Development Services

It really depends on what you are doing. There are a lot of UI test suites out there.

I personally do a lot of jQuery development and find that the qUnit framework works great. You could give that a go.

Thanks!
Spiff Cool | :cool:

-------------------------
Spiffdog Design
It's ok... he doesn't bite...

I have been working on a project that requires me to create a vertical auto-hide toolbar that appears on the right side of the webpage. I am not even sure if that is possible using javascript as I am quite new to javascript.

If you question is if it is possible in Javascript?

My Answer is yes quite possible. As a matter of fact you just gave me the idea. I will implement this for my in house application today.

For your help:
read about
1. CSS visibility
2. OnMouseOver action
3. OnMouseOut action

I wish I could believe there is an after life.

Ok, thanks for your help.

I have one for the left side, the right side required some heavy math to calculate the right side position for the tab and the flyout panel, to align with the right side of the form.

I thinking about posting some code to help out, but every circumstance if different. It's actually a combo of jquery and javascript, and i'm afraid you won't understand it.

It takes a panel you create in asp.net at left -360px with the id of "_ib_ProductEditor_Toolbox_Next", create a event bind in the dom for click, loads up dynamic html for a progress wheel, and then loads data, parts list, and fly's out to the right using animation. Requires Jquery 1.6 something. it makes a close link in the upper right, and create another bind, to animate the close back to -360px.

It should give you and idea of how to start yours at least.

// Binding when the dom is ready
$(document).ready(function () {
    // Product Editor Toolbox Tabs
    $('[id*="_ib_ProductEditor_Toolbox_Next"]').click(function () {
        toolbox_ProductItem_Next_MouseOver();
        return false;
    });
});

function toolbox_ProductItem_Next_MouseOver() {

    var panelPosition = $('[id*="_panel_ProductEditor_ToolBox_Next"]').css("left");
    if (panelPosition == "32px") {
        unload_Navigator_Tab();
    }
    else if (panelPosition == "-360px") {

        var table_Navigator_Container = document.createElement("table");
        table_Navigator_Container.id = "_table_Navigator_Container";
        table_Navigator_Container.cellSpacing = 0;
        table_Navigator_Container.cellPadding = 0;
        table_Navigator_Container.style.width = "320px";
        table_Navigator_Container.style.margin = "15px";
        table_Navigator_Container.style.backgroundColor = "rgb(217,215,197)";
        table_Navigator_Container.style.borderRadius = "12px";
        table_Navigator_Container.style.border = "solid 2px rgb(176,167,144)";

        var tr_Navigator_Container_Close = table_Navigator_Container.insertRow(-1);
        var td_Navigator_Container_Close = document.createElement("td");
        td_Navigator_Container_Close.style.width = "100%";
        td_Navigator_Container_Close.style.height = "16px";
        td_Navigator_Container_Close.style.textAlign = "right";
        tr_Navigator_Container_Close.appendChild(td_Navigator_Container_Close);

        var lb_Navigator_Close = document.createElement("a");
        lb_Navigator_Close.id = "toolbox_close";
        lb_Navigator_Close.style.color = "rgb(0,0,0)";
        lb_Navigator_Close.style.fontSize = "0.8em";
        lb_Navigator_Close.style.textDecoration = "underline";
        lb_Navigator_Close.style.paddingRight = "25px";
        lb_Navigator_Close.style.cursor = "hand";
        lb_Navigator_Close.style.cursor = "pointer";
        lb_Navigator_Close.innerText = "Close Panel";
        lb_Navigator_Close.innerHTML = "Close Panel";
        td_Navigator_Container_Close.appendChild(lb_Navigator_Close);

        var tr_Navigator_Container_Title = table_Navigator_Container.insertRow(-1);
        var td_Naviator_Container_Title = document.createElement("td");
        td_Naviator_Container_Title.style.width = "100%";
        td_Naviator_Container_Title.style.height, "32px";
        td_Naviator_Container_Title.style.textAlign = "left";
        tr_Navigator_Container_Title.appendChild(td_Naviator_Container_Title);

        var span_Navigator_Container_Title = document.createElement("span");
        span_Navigator_Container_Title.style.color = "rgb(0,0,0)";
        span_Navigator_Container_Title.style.fontSize = "1.2em";
        span_Navigator_Container_Title.style.fontWeight = "bold";
        span_Navigator_Container_Title.style.letterSpacing = "-1px";
        span_Navigator_Container_Title.style.paddingLeft = "10px";
        span_Navigator_Container_Title.innerText = "Quick Navigator";
        span_Navigator_Container_Title.innerHTML = "Quick Navigator";
        td_Naviator_Container_Title.appendChild(span_Navigator_Container_Title);

        var tr_Navigator_Container_Content = table_Navigator_Container.insertRow(-1);
        var td_Naviator_Container_Content = document.createElement("td");
        td_Naviator_Container_Content.style.width = "100%";
        td_Naviator_Container_Content.style.height, "490px";
        td_Naviator_Container_Content.style.textAlign = "center";
        td_Naviator_Container_Content.style.valign = "top";
        td_Naviator_Container_Content.style.paddingTop = "10px";
        td_Naviator_Container_Content.style.paddingBottom = "10px";
        tr_Navigator_Container_Content.appendChild(td_Naviator_Container_Content);

        var panel_Navigator_Container_Content = document.createElement("div");
        panel_Navigator_Container_Content.id = "_panel_Navigator_Container_Content";
        panel_Navigator_Container_Content.style.width = "320px";
        panel_Navigator_Container_Content.style.height = "470px";
        panel_Navigator_Container_Content.style.verticalAlign = "top";
        panel_Navigator_Container_Content.style.overflowX = "hidden";
        panel_Navigator_Container_Content.style.overflowY = "scroll";
        panel_Navigator_Container_Content.style.textAlign = "center";
        panel_Navigator_Container_Content.style.margin = "2px auto";
        //panel_Navigator_Container_Content.style.border = "solid 1px red";
        td_Naviator_Container_Content.appendChild(panel_Navigator_Container_Content);

        var table_Container_Progress = document.createElement("table");
        table_Container_Progress.cellpadding = 0;
        table_Container_Progress.cellspacing = 0;
        table_Container_Progress.style.width = "100%";
        panel_Navigator_Container_Content.appendChild(table_Container_Progress);

        var tr_Container_Progress_Image = table_Container_Progress.insertRow(-1);
        var td_Container_Progress_Image = document.createElement("td");
        td_Container_Progress_Image.style.width = "100%";
        td_Container_Progress_Image.style.height = "180px";
        td_Container_Progress_Image.style.textAlign, "center";
        td_Container_Progress_Image.style.verticalAlign = "Bottom"
        tr_Container_Progress_Image.appendChild(td_Container_Progress_Image);

        var img_Navigator_Container_Progress = document.createElement("img");
        img_Navigator_Container_Progress.src = $('[id*="_txt_ProductEditor_ProgressIndicator"]').val();
        td_Container_Progress_Image.appendChild(img_Navigator_Container_Progress);

        var tr_Container_Progress_Message = table_Container_Progress.insertRow(-1);
        var td_Container_Progress_Message = document.createElement("td");
        td_Container_Progress_Message.style.width = "100%";
        td_Container_Progress_Message.style.height = "320px";
        td_Container_Progress_Message.style.textAlign, "center";
        td_Container_Progress_Message.style.verticalAlign = "top";
        tr_Container_Progress_Message.appendChild(td_Container_Progress_Message);

        var span_Navigator_Container_Message = document.createElement("span");
        span_Navigator_Container_Message.style.fontSize = "1.4em";
        span_Navigator_Container_Message.style.fontWeight = "bold";
        span_Navigator_Container_Message.innerText = "Loading Items";
        td_Container_Progress_Message.appendChild(span_Navigator_Container_Message);        

        $('[id*="_panel_ProductEditor_ToolBox_Next"]').empty();
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').append(table_Navigator_Container);
        
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);
        $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(51,51,51)" }, 300);

        if (panelPosition != "32px") {
            $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "32px" }, 300);          
        }
            
        load_Navigator_Tab();

        $("#toolbox_close").click(function () {
            unload_Navigator_Tab();
            return false;
        });       
    }    
 }

 function unload_Navigator_Tab() {

    $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ backgroundColor: "rgb(32,32,32)" }, 300);
    $('[id*="_panel_ProductEditor_ToolBox_Next"]').animate({ "left": "-360px" }, 300);    

}

Oh men! Why your simple auto-hide panel is so complicated? 2 css classes and maybe one ajax for dynamic loading of content should be enough! OMG | :OMG:

No more Mister Nice Guy... >: |

It auto loads a product database based on filters, so you don't have to leave the page to edit a product SKU with over 100 fields.

It's what evolved after hundreds of complaints from the initial simple ones we made in the beginning.

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:

CSS

.parent-container:hover .autohider{
 display:block;
}
.parent-container .autohider{
 display:none;
}

and html

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:

HTML

<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:

JavaScript

$('.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

JavaScript

$('.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.
Wink | ;)

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. Smile | :)

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."