Search Results

Search found 23754 results on 951 pages for 'unobtrusive javascript'.

Page 236/951 | < Previous Page | 232 233 234 235 236 237 238 239 240 241 242 243  | Next Page >

  • In Firefox, how do I bring an existing popup window with multiple tabs to the front using javascript

    - by brahn
    I would like to have a button on a web page with the following behavior: On the first click, open a pop-up. On later clicks, if the pop-up is still open, just bring it to the front. If not, re-open. The below code generally works in Firefox, Safari, and IE8 (see here for Chrome woes). However, I have found a failure mode in Firefox that I don't know how to deal with: If for some reason the user has opened a second tab in the pop-up window and that second tab has focus within that window, the popupWindow.focus() command fails to have any effect. (If the first tab has focus within that window, everything works just great.) So, how can I focus the popup and the desired tab in Firefox? <head> <script type="text/javascript"> var popupWindow = null; var doPopup = function () { if (popupWindow && !popupWindow.closed) { popupWindow.focus(); } else { popupWindow = window.open("http://google.com", "_blank", "width=200,height=200"); } }; </script> </head> <body> <button onclick="doPopup(); return false"> create a pop-up </button> </body>

    Read the article

  • How can you determine the file size in JavaScript?

    - by Daniel Lew
    I help moderate a forum online, and on this forum we restrict the size of signatures. At the moment we test this via a simple Greasemonkey script I wrote; we wrap all signatures with a <div>, the script looks for them, and then measures the div's height and width. All the script does right now is make sure the signature resides in a particular height/width. I would like to start measuring the file size of the images inside of a signature automatically so that the script can automatically flag users who are including huge images in their signature. However, I can't seem to find a way to measure the size of images loaded on the page. I've searched and found a property special to IE (element.fileSize) but I obviously can't use that in my Greasemonkey script. Is there a way to find out the file size of an image in Firefox via JavaScript? Edit: People are misinterpreting the problem. The forums themselves do not host images; we host the BBCode that people enter as their signature. So, for example, people enter this: This is my signature, check out my [url=http://google.com]awesome website[/url]! This image is cool! [img]http://image.gif[/img] I want to be able to check on these images via Greasemonkey. I could write a batch script to scan all of these instead, but I'm just wondering if there's a way to augment my current script.

    Read the article

  • How bad is it to embed JavaScript into the body of HTML?

    - by Andrew
    A team that I am working on has gotten into the habit of using <script> tags in random places in the body of our HTML pages. For example: <html> <head></head> <body> <div id="some-div"> <script type="text/javascript">//some javascipt here</script> </div> </body> </html> I had not seen this before. It seems to work in the few browsers that I've tested. But as far as I know, it's not valid to put script tags in places like this. Am I wrong? How bad is it that we are putting script tags within div tags like this? Are there any browser compatibility issues I should be aware of?

    Read the article

  • Is it possible to access the SMIL timer from javascript?

    - by Will
    I'm trying to use SMIL to animate the typing of text into a field embedded in a SVG. I tried the following code in both Chrome and a SMIL-enable Firefox nightly, but it has no effect: <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <foreignObject> <html:input type="text" value=""> <set attributeName="value" to="Hello World" begin="0" dur="10s" fill="freeze" /> </html:input> </foreignObject> </svg> The text field appears, but remains empty. So, I thought I would register for the beginEvent and do the substitution manually. To test the events, I added: <rect id="rect" x="0" y="0" width="10" height="10"> <animate id="dx" attributeName="x" attributeType="XML" begin="0s" dur="1s" fill="freeze" from="0" to="-10" /> </rect> As well as the javascript that made sense from the event model: window.addEventListener( 'load', function() { function listen( id ) { var elem = document.getElementById( id ) elem.addEventListener( 'beginEvent', function() { console.log( 'begin ' + id ) }, false ) elem.addEventListener( 'endEvent', function() { console.log( 'end ' + id ) }, false ) } listen( 'rect' ) listen( 'dx' ) }) But there's no events fired on either the rect or the animate in either browser. The next logical step seems to be to simulate the animation (ala. FakeSmile), but I want to use the browser's animation timer if at all possible.

    Read the article

  • How to update a number in html via javascript?

    - by Will Merydith
    After a voter votes, I want to update the count. <form class="vote-form" action=""> <div id="{{key}}" class="vote-count">{{votes}}</div> <input class="vote-button" type="submit" class="text-button" value="vote+"/> <input type="hidden" class="brag" name="brag" value="{{key}}"> <input type="hidden" class="voter" name="voter" value="{{current_user.fb_id}}"> </form> <script type="text/javascript"> $(function() { $('.error').hide(); $(".vote-form").submit(function() { var inputs = $(this).find('input:hidden'); var key = $('input.brag', this).val(); $.ajax({ type: "POST", url: "/bean", data: inputs, success: function() { //not sure how to do this, I want to increment {{votes}} $('#' + key).innerHTML = "foo"; } }); return false; }); }); </script>

    Read the article

  • JavaScript library not working in IE, can't see error information.

    - by Wolfy87
    Hi there. I have been writing a JavaScript library for a few weeks now and it works brilliantly in Firefox, Chrome and Safari. I had not tested it in IE until recently. I do not own a Windows box so after testing it on my friends and realising it wasnt working I started going over my code for things that could be causing it to break. So far I have found nothing. I could not find any descriptions of the errors in the browser while I was there either. So I wondered if anyone could run my test script in an IE browser (6, 7 or 8) and let me know any information they can find as to why it crashed. Please ignore any information saying it works in IE6, I put that up there after testing it through http://ipinfo.info/netrenderer/ I just assumed it was working because I could set transparency and size via my script and see it run in this tool. Here is the link to my GitHub repository: https://github.com/Wolfy87/Spark If you download it and run spark.html it will attempt to run all of my functions from the library. So if anyone could be kind enough to run it in IE and either let me know what errors they are getting and possibly how to fix them then I will be extreamly grateful. Thank you in advance. EDIT: Here is it's website http://sparkjs.co.uk/

    Read the article

  • Why can't I dynamically add rows to a HTML table using JavaScript in Internet Explorer?

    - by karlthorwald
    In Firefox it works, in my Internet Explorer 6 or 7 it doesn't: <html> <head> <script type="text/javascript"> function newLine() { var tdmod = document.createElement('td'); tdmod.appendChild(document.createTextNode("dynamic")); var tr = document.createElement('tr'); tr.appendChild(tdmod); var tt = document.getElementById("t1"); tt.appendChild(tr); } </script> </head> <body> <a href="#" onclick="newLine()">newLine</a> <table id="t1" border="1"> <tr> <td> static </td> </tr> </table> </body> The user clicks on the link "newLine" and new rows should be added to the table. How to make this work also in IE? Edit: Thanks to the accepted answer I changed it like this and now it works: <table border="1"> <tbody id="t1"> <tr> <td> static </td> </tr> </tbody> </table>

    Read the article

  • What rules govern the copying of variables in Javascript closures?

    - by int3
    I'd just like to check my understanding of variable copying in Javascript. From what I gather, variables are passed/assigned by reference unless you explicitly tell them to create a copy with the new operator. But I'm a little uncertain when it comes to using closures. Say I have the following code: var myArray = [1, 5, 10, 15, 20]; var fnlist = []; for (var i in myArray) { var data = myArray[i]; fnlist.push(function() { var x = data; console.log(x); }); } fnlist[2](); // returns 20 I gather that this is because fnlist[2] only looks up the value of data at the point where it is invoked. So I tried an alternative tack: var myArray = [1, 5, 10, 15, 20]; var fnlist = []; for (var i in myArray) { var data = myArray[i]; fnlist.push(function() { var x = data; return function() { console.log(x); } }()); } fnlist[2](); // returns 10 So now it returns the 'correct' value. Am I right to say that it works because a function resolves all variable references to their 'constant' values when it is invoked? Or is there a better way to explain it? Any explanations / links to explanations regarding this referencing / copying business would be appreciated as well. Thanks!

    Read the article

  • Must JsUnit Cases Reside Under the Same Directory as JsUnit?

    - by chernevik
    I have installed JsUnit and a test case as follows: /home/chernevik/Programming/JavaScript/jsunit /home/chernevik/Programming/JavaScript/jsunit/testRunner.html /home/chernevik/Programming/JavaScript/jsunit/myTests/lineTestAbs.html /home/chernevik/Programming/JavaScript/lineTestAbs.html When I open the test runner in a browser as a file, and test lineTestAbs.html from the jsunit/myTests directory, it passes. When I test the same file from the JavaScript directory, the test runner times out, asking if the file exists or is a test page. Questions: Am I doing something wrong here, or is this the expected behavior? Is it possible to put test cases in a different directory structure, and if so what is the proper path reference to to JsUnitCore.js? Would JsUnit behave differently if the files were retrieved from an HTTP server? <html> <head> <title>Test Page line(m, x, b)</title> <script language="JavaScript" src="/home/chernevik/Programming/JavaScript/jsunit/app/jsUnitCore.js"></script> <script language="JavaScript"> function line(m, x, b) { return m*x + b; } function testCalculationIsValid() { assertEquals("zero intercept", 10, line(5, 2, 0)); assertEquals("zero slope", 5, line(0, 2, 5)); assertEquals("at x = 10", 25, line(2, 10, 5)); } </script> </head> <body> This pages tests line(m, x, b). </body> </html>

    Read the article

  • How to load src in html5 Video tag from JavaScript?

    - by luis_laurent
    Here is the thing, I'm working with ASP.NET and I'm using this particular SignalR library to broadcast a video to my clients, but as far as I know I can not stream video because signalR is a messaging system and it is not intended to stream video, files or things like that. Now what I am trying to do is to split the video into buffers that is Base64-encoded into a string, then on the client I am decoding this string and I am trying to load it into the source of a Video tag. Here I show you what I am doing on the client: HTML Code: <video id="myVideo"> <source id="video_source"> </video> Javascript Code: //here somehow I am getting the string with the base64-encoded video function playVideo(message) { var myVideo = document.getElementById("myVideo"); var mySource = document.getElementById("video_source"); mySource.setAttribute("src", getEncodedVideoString("avi", message)); myVideo.load(); myVideo.play(); }; // here I am formatting and concatenating the string for my source attribute function getEncodedVideoString(type, file) { return 'data:video/' + type + ';base64,' + $.base64.decode(file); } Well as you can see, at the moment I'm facing a scenario a little weird, but I already have the video encoded on the client, now I just need to find out the way to reproduce that video. And here is when my question comes up, does any one has done something like this before, or you have any idea or suggestion to do that? P.S I am using this jquery-base64 library to decode my string

    Read the article

  • What is the most efficient way to handle points / small vectors in JavaScript?

    - by Chris
    Currently I'm creating an web based (= JavaScript) application thata is using a lot of "points" (= small, fixed size vectors). There are basically two obvious ways of representing them: var pointA = [ xValue, yValue ]; and var pointB = { x: xValue, y: yValue }; So translating my point a bit would look like: var pointAtrans = [ pointA[0] + 3, pointA[1] + 4 ]; var pointBtrans = { x: pointB.x + 3, pointB.y + 4 }; Both are easy to handle from a programmer point of view (the object variant is a bit more readable, especially as I'm mostly dealing with 2D data, seldom with 3D and hardly with 4D - but never more. It'll allways fit into x,y,z and w) But my question is now: What is the most efficient way from the language perspective - theoretically and in real implementations? What are the memory requirements? What are the setup costs of an array vs. an object? ... My target browsers are FireFox and the Webkit based ones (Chromium, Safari), but it wouldn't hurt to have a great (= fast) experience under IE and Opera as well...

    Read the article

  • How to fill in form field, and submit, using javascript?

    - by cannyboy
    If I have an html document whose rough structure is <html> <head> </head> <body class="bodyclass" id="bodyid"> <div class="headerstuff">..stuff...</div> <div class = "body"> <form action="http://example.com/login" id="login_form" method="post"> <div class="form_section">You can login here</div> <div class="form_section"> <input xmlns="http://www.w3.org/1999/xhtml" class="text" id="username" name="session[username_or_email]" tabindex="1" type="text" value="" /> </div> <div class="form_section">etc</div> <div xmlns="http://www.w3.org/1999/xhtml" class="buttons"> <button type="submit" class="" name="" id="go" tabindex="3">Go</button> <button type="submit" class="" name="cancel" id="cancel" tabindex="4">Cancel</button> </div> </form> </div> </body> </html> You can see that there is a username field and a Go button. How would I, using Javascript, fill in the username and press Go...? I would prefer to use plain JS, rather than a library like jquery.

    Read the article

  • How to structure Javascript programs in complex web applications?

    - by mixedpickles
    Hi there. I have a problem, which is not easily described. I'm writing a web application that makes heavy usage of jquery and ajax calls. Now I don't have experience in designing the architecture for javascript programms, but I realize that my program has not a good structure. I think I have to many identifiers referring to the same (at least more or less) thing. Let's have an exemplary look at an arbitrary UI widget: The eventhandlers use DOM elements as parameters. The DOM element represents a widget in the browser. A lot of times I use jQuery objects (I think they are basically a wrapper around DOM elements) to do something with the widget. Sometimes they are used transiently, sometimes they are stored in a variable for later purposes. The ajax function calls use strings identifiers for these widgets. They are processed server side. Beside that I have a widget class whose instances represents a widget. It is instantiated through the new operator. Now I have somehow four different object identifiers for the same thing, which needs to be kept in sync until the page is loaded anew. This seems not to be a good thing. Any advice?

    Read the article

  • Install the Ajax Control Toolkit from NuGet

    - by Stephen Walther
    The Ajax Control Toolkit is now available from NuGet. This makes it super easy to add the latest version of the Ajax Control Toolkit to any Web Forms application. If you haven’t used NuGet yet, then you are missing out on a great tool which you can use with Visual Studio to add new features to an application. You can use NuGet with both ASP.NET MVC and ASP.NET Web Forms applications. NuGet is compatible with both Websites and Web Applications and it works with both C# and VB.NET applications. For example, I habitually use NuGet to add the latest version of ELMAH, Entity Framework, jQuery, jQuery UI, and jQuery Templates to applications that I create. To download NuGet, visit the NuGet website at: http://NuGet.org Imagine, for example, that you want to take advantage of the Ajax Control Toolkit RoundedCorners extender to create cross-browser compatible rounded corners in a Web Forms application. Follow these steps. Right click on your project in the Solution Explorer window and select the option Add Library Package Reference. In the Add Library Package Reference dialog, select the Online tab and enter AjaxControlToolkit in the search box: Click the Install button and the latest version of the Ajax Control Toolkit will be installed. Installing the Ajax Control Toolkit makes several modifications to your application. First, a reference to the Ajax Control Toolkit is added to your application. In a Web Application Project, you can see the new reference in the References folder: Installing the Ajax Control Toolkit NuGet package also updates your Web.config file. The tag prefix ajaxToolkit is registered so that you can easily use Ajax Control Toolkit controls within any page without adding a @Register directive to the page. <configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> <pages> <controls> <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" /> </controls> </pages> </system.web> </configuration> You should do a rebuild of your application by selecting the Visual Studio menu option Build, Rebuild Solution so that Visual Studio picks up on the new controls (You won’t get Intellisense for the Ajax Control Toolkit controls until you do a build). After you add the Ajax Control Toolkit to your application, you can start using any of the 40 Ajax Control Toolkit controls in your application (see http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ for a reference for the controls). <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Rounded Corners</title> <style type="text/css"> #pnl1 { background-color: gray; width: 200px; color:White; font: 14pt Verdana; } #pnl1_contents { padding: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Panel ID="pnl1" runat="server"> <div id="pnl1_contents"> I have rounded corners! </div> </asp:Panel> <ajaxToolkit:ToolkitScriptManager ID="sm1" runat="server" /> <ajaxToolkit:RoundedCornersExtender TargetControlID="pnl1" runat="server" /> </div> </form> </body> </html> The page contains the following three controls: Panel – The Panel control named pnl1 contains the content which appears with rounded corners. ToolkitScriptManager – Every page which uses the Ajax Control Toolkit must contain a single ToolkitScriptManager. The ToolkitScriptManager loads all of the JavaScript files used by the Ajax Control Toolkit. RoundedCornersExtender – This Ajax Control Toolkit extender targets the Panel control. It makes the Panel control appear with rounded corners. You can control the “roundiness” of the corners by modifying the Radius property. Notice that you get Intellisense when typing the Ajax Control Toolkit tags. As soon as you type <ajaxToolkit, all of the available Ajax Control Toolkit controls appear: When you open the page in a browser, then the contents of the Panel appears with rounded corners. The advantage of using the RoundedCorners extender is that it is cross-browser compatible. It works great with Internet Explorer, Opera, Firefox, Chrome, and Safari even though different browsers implement rounded corners in different ways. The RoundedCorners extender even works with an ancient browser such as Internet Explorer 6. Getting the Latest Version of the Ajax Control Toolkit The Ajax Control Toolkit continues to evolve at a rapid pace. We are hard at work at fixing bugs and adding new features to the project. We plan to have a new release of the Ajax Control Toolkit each month. The easiest way to get the latest version of the Ajax Control Toolkit is to use NuGet. You can open the NuGet Add Library Package Reference dialog at any time to update the Ajax Control Toolkit to the latest version.

    Read the article

  • Lazy HTML attributes wrapping in Internet Explorer

    - by AGS777
    Having encountered this Internet Explorer (all versions) behavior several times previously, I eventually decided to share this most probably useless knowledge. Excuse my lengthy explanations because I am going to show the behavior along with a very simple case when one can come across it inadvertently. Let's say I want to implement some simple templating solution in JavaScript. I wrote an HTML template with an intention to bind data to it on the client side: Please note, that name of the “sys-template” class is just a coincidence. I do not use any ASP.NET AJAX code in this simple example. As you can see we need to replace placeholders (property name wrapped with curly braces) with actual data. Also, as you can see, many of the placeholders are situated within attribute values and it is where the danger lies. I am going to use <a /> element HTML as a template and replace each placeholder pattern with respective properties’ values with a little bit of jQuery like this: You can find complete code along with the contextFormat() method definition at the end of the post. Let’s assume that value for the name property (that we want to put in the title attribute) of the first data item is “first tooltip”. So it consists of two words. When the replacement occurred, title attribute should contain the “first tooltip” text which we are going to see as a tooltip for the <a /> element. But let’s run the sample code in Internet Explorer and check it out. What you’ll see is that only the first word of the supposed “title” attribute’s content is shown. So, were is the rest of my attribute and what happened? The answer is obvious once you see the result of jQuery(“.sys-template”).html() line for the given HTML markup. In IE you’ll get the following <A id={id} class={cssClass} title={name} href="{source}" myAttr="{attr}">Link to {source}</A> See any difference between this HTML and the one shown earlier? No? Then look carefully. While the original HTML of the <a /> element is well-formed and all the attributes are correctly quoted, when you take the same HTML back in Internet Explorer (it doesn’t matter whether you use html() method from jQuery library or IE’s innerHTML directly), you lose attributes’ quotes for some of the attributes. Then, after replacement, we’ll get following HTML for our first data item. I marked the attribute value in question with italic: <A id=1 class=first title=first tooltip href="first.html" myAttr="firstAttr">Link to first.html</A> Now you can easily imagine for yourself what happens when this HTML is inserted into the document and why we do not see the second (and any subsequent words if any) of our title attribute in the tooltip. There are still two important things to note. The first one (and it actually the reason why I named the post “lazy wrapping” is that if value of the HTML attribute does contains spaces in the original HTML, then it WILL be wrapped with quotation marks. For example, if I wrote following on my page (note the trailing space for the title attribute value) <a href="{source}" title="{name}  " id="{id}" myAttr="{attr}" class="{cssClass}">Link to {source}</a> then I would have my placeholder quoted correctly and the result of the replacement would render as expected: The second important thing to note is that there are exceptions for the lazy attributes wrapping rule in IE. As you can see href attribute value did not contain spaces exactly as all the other attributes with placeholders, but it was still returned correctly quoted Custom attribute myAttr is also quoted correctly when returned back from document, though its placeholder value does not contain spaces either. Now, on account of the highly unlikely probability that you found this information useful and need a solution to the problem the aforementioned behavior introduces for Internet Explorer browser, I can suggest a simple workaround – manually quote the mischievous attributes prior the placeholder pattern is replaced. Using the code of contextFormat() method shown below, you would need to add following line right before the return statement: result = result.replace(/=({([^}]+)})/g, '="$1"'); Below please find original sample code:

    Read the article

  • Namespaces are obsolete

    - by Bertrand Le Roy
    To those of us who have been around for a while, namespaces have been part of the landscape. One could even say that they have been defining the large-scale features of the landscape in question. However, something happened fairly recently that I think makes this venerable structure obsolete. Before I explain this development and why it’s a superior concept to namespaces, let me recapitulate what namespaces are and why they’ve been so good to us over the years… Namespaces are used for a few different things: Scope: a namespace delimits the portion of code where a name (for a class, sub-namespace, etc.) has the specified meaning. Namespaces are usually the highest-level scoping structures in a software package. Collision prevention: name collisions are a universal problem. Some systems, such as jQuery, wave it away, but the problem remains. Namespaces provide a reasonable approach to global uniqueness (and in some implementations such as XML, enforce it). In .NET, there are ways to relocate a namespace to avoid those rare collision cases. Hierarchy: programmers like neat little boxes, and especially boxes within boxes within boxes. For some reason. Regular human beings on the other hand, tend to think linearly, which is why the Windows explorer for example has tried in a few different ways to flatten the file system hierarchy for the user. 1 is clearly useful because we need to protect our code from bleeding effects from the rest of the application (and vice versa). A language with only global constructs may be what some of us started programming on, but it’s not desirable in any way today. 2 may not be always reasonably worth the trouble (jQuery is doing fine with its global plug-in namespace), but we still need it in many cases. One should note however that globally unique names are not the only possible implementation. In fact, they are a rather extreme solution. What we really care about is collision prevention within our application. What happens outside is irrelevant. 3 is, more than anything, an aesthetical choice. A common convention has been to encode the whole pedigree of the code into the namespace. Come to think about it, we never think we need to import “Microsoft.SqlServer.Management.Smo.Agent” and that would be very hard to remember. What we want to do is bring nHibernate into our app. And this is precisely what you’ll do with modern package managers and module loaders. I want to take the specific example of RequireJS, which is commonly used with Node. Here is how you import a module with RequireJS: var http = require("http"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } This is of course importing a HTTP stack module into the code. There is no noise here. Let’s break this down. Scope (1) is provided by the one scoping mechanism in JavaScript: the closure surrounding the module’s code. Whatever scoping mechanism is provided by the language would be fine here. Collision prevention (2) is very elegantly handled. Whereas relocating is an afterthought, and an exceptional measure with namespaces, it is here on the frontline. You always relocate, using an extremely familiar pattern: variable assignment. We are very much used to managing our local variable names and any possible collision will get solved very easily by picking a different name. Wait a minute, I hear some of you say. This is only taking care of collisions on the client-side, on the left of that assignment. What if I have two libraries with the name “http”? Well, You can better qualify the path to the module, which is what the require parameter really is. As for hierarchical organization, you don’t really want that, do you? RequireJS’ module pattern does elegantly cover the bases that namespaces used to cover, but it also promotes additional good practices. First, it promotes usage of self-contained, single responsibility units of code through the closure-based, stricter scoping mechanism. Namespaces are somewhat more porous, as using/import statements can be used bi-directionally, which leads us to my second point… Sane dependency graphs are easier to achieve and sustain with such a structure. With namespaces, it is easy to construct dependency cycles (that’s bad, mmkay?). With this pattern, the equivalent would be to build mega-components, which are an easier problem to spot than a decay into inter-dependent namespaces, for which you need specialized tools. I really like this pattern very much, and I would like to see more environments implement it. One could argue that dependency injection has some commonalities with this for example. What do you think? This is the half-baked result of some morning shower reflections, and I’d love to read your thoughts about it. What am I missing?

    Read the article

  • Is x a reserved keyword in Javascript FF/Safari not in IE?

    - by Marco Demaio
    A web page of a web application was showing a strange error. I regressively removed all the HTML/CSS/JS code and arrived to the basic and simple code below. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>test</title> <script type="text/javascript"> var TestObj = { foo: function() {} } alert(x); //ok displays "undefined" var x = TestObj.foo; var z = TestObj.foo; </script> </head><body> <p onclick='alert(x);'>Click shows function foo!</p> <img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'> <p onclick='alert(x);'>Click shows function foo!</p> </body></html> It's crazy: when clicking on P elements the string "function(){}" is displaied as expected. But when clicking on IMG element it shows a number as if x function got in some way removed from memory or deinstantiated (it does not even show x as "undefined" but as a number). To let you test it quickly I placed the working test above also here. This can be reproduced on both Firefox 3.6 and Safari 4.0.4. Everything works properly only on IE7+. I'm really clueless, I was wondering if x is maybe a reserved keyword in JS Firefox/Safari. Thanks to anyone who could help! FYI: if you repalce x() with z() everything work prefectly in all browsers (this is even more crazy to me) adding a real image in src attribute does not fix the problem removing style in img does not fix the problem (i gave style to image only to help you clicking on image thus you can see the imnage border)

    Read the article

  • JavaScript: Given an offset and substring length in an HTML string, what is the parent node?

    - by Bungle
    My current project requires locating an array of strings within an element's text content, then wrapping those matching strings in <a> elements using JavaScript (requirements simplified here for clarity). I need to avoid jQuery if at all possible - at least including the full library. For example, given this block of HTML: <div> <p>This is a paragraph of text used as an example in this Stack Overflow question.</p> </div> and this array of strings to match: ['paragraph', 'example'] I would need to arrive at this: <div> <p>This is a <a href="http://www.example.com/">paragraph</a> of text used as an <a href="http://www.example.com/">example</a> in this Stack Overflow question.</p> </div> I've arrived at a solution to this by using the innerHTML() method and some string manipulation - basically using the offsets (via indexOf()) and lengths of the strings in the array to break the HTML string apart at the appropriate character offsets and insert <a href="http://www.example.com/"> and </a> tags where needed. However, an additional requirement has me stumped. I'm not allowed to wrap any matched strings in <a> elements if they're already in one, or if they're a descendant of a heading element (<h1> to <h6>). So, given the same array of strings above and this block of HTML (the term matching has to be case-insensitive, by the way): <div> <h1>Example</a> <p>This is a <a href="http://www.example.com/">paragraph of text</a> used as an example in this Stack Overflow question.</p> </div> I would need to disregard both the occurrence of "Example" in the <h1> element, and the "paragraph" in <a href="http://www.example.com/">paragraph of text</a>. This suggests to me that I have to determine which node each matched string is in, and then traverse its ancestors until I hit <body>, checking to see if I encounter a <a> or <h_> node along the way. Firstly, does this sound reasonable? Is there a simpler or more obvious approach that I've failed to consider? It doesn't seem like regular expressions or another string-based comparison to find bounding tags would be robust - I'm thinking of issues like self-closing elements, irregularly nested tags, etc. There's also this... Secondly, is this possible, and if so, how would I approach it?

    Read the article

  • Nice, clean, simple way of getting a dataset from ASP.NET to plain HTML jQuery or JavaScript library

    - by David S
    I know this is a probable open ended question, and I have tried looking around so much over the last year or two... maybe I am looking for a perfect place that doesn't exist! of course it's all about perception no less.. Anyway, just to clarify what I am trying to do and why: I want to be able to use (primarily for the moment) ASP.NET or services thereof to get a dataset - whatever the source data, I can obviously get a dataset of rows/Columns. I want to be able to, as simply as possible, get that data over to the client via xml/json/whatever, to then use in a "variety" of ways. "Variety" of ways meaning I would like to "easily" bind that data to say a grid, or a combo dropdown or just simply render to a textbox - BUT by referencing the dataset as I would say on the serverside. Now I know this all sounds simplistic, and I know there are lots of complications.. so I have tried the following so far over the last year or so: ExtJS - very good, nice solid framework, but just found it a bit too much to use in everyday basic apps - great if I was building a whole application with it Yahoo YUI - not looked recently, but I guess some of the concepts with ExtJS were similar? JQuery - of course to get data etc, it was ok, and I guess there are so many 3rd party plugins, that a mix and match might work? Adobe SPRY - ironically this was as close to getting a dataset style structure to Javascript/client, although it seemed to drop off/go quiet..? I maybe wrong.. I did have a very cursory play with Tibco GI and another one I cannot remember the name of! but again, it felt like it was great to build a whole app perhaps? Anyway, I am very amazed by all of the technologies coming out, and really not biased one way or the other, I really just want a very simple way of getting data from the server, and having a basic/very flexible way of working with that data in the client without using server technologies.. I need to keep the server flexible as I may need to use PHP, or java technologies not just .NET So again, sorry for the rambles, but if anyone out there has had a simple experience, or would like to share some ideas, it would be very welcomed!! David.

    Read the article

  • Javascript in the adress bar. is this malicious?

    - by David
    I got a message on facebook telling me to coppy paist this into my adress bar. I thought i'd post it here and see what everyone thinks about it. What does it do? how does it work? Here's the source code: // (DO NOT DO THIS!) Javascript:var a=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x61\x70\x70\x34\x39\x34\x39\x37\x35\x32\x38\x37\x38\x5F\x61\x70\x70\x34\x39\x34\x39\x37\x35\x32\x38\x37\x38\x5F\x64\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x3C\x61\x20\x69\x64\x3D\x22\x73\x75\x67\x67\x65\x73\x74\x22\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x61\x6A\x61\x78\x69\x66\x79\x3D\x22\x2F\x61\x6A\x61\x78\x2F\x73\x6F\x63\x69\x61\x6C\x5F\x67\x72\x61\x70\x68\x2F\x69\x6E\x76\x69\x74\x65\x5F\x64\x69\x61\x6C\x6F\x67\x2E\x70\x68\x70\x3F\x63\x6C\x61\x73\x73\x3D\x46\x61\x6E\x4D\x61\x6E\x61\x67\x65\x72\x26\x61\x6D\x70\x3B\x6E\x6F\x64\x65\x5F\x69\x64\x3D\x31\x31\x32\x36\x38\x32\x36\x39\x35\x34\x31\x38\x35\x32\x33\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x20\x70\x72\x6F\x66\x69\x6C\x65\x5F\x61\x63\x74\x69\x6F\x6E\x20\x61\x63\x74\x69\x6F\x6E\x73\x70\x72\x6F\x5F\x61\x22\x20\x72\x65\x6C\x3D\x22\x64\x69\x61\x6C\x6F\x67\x2D\x70\x6F\x73\x74\x22\x3E\x53\x75\x67\x67\x65\x73\x74\x20\x74\x6F\x20\x46\x72\x69\x65\x6E\x64\x73\x3C\x2F\x61\x3E","\x73\x75\x67\x67\x65\x73\x74","\x4D\x6F\x75\x73\x65\x45\x76\x65\x6E\x74\x73","\x63\x72\x65\x61\x74\x65\x45\x76\x65\x6E\x74","\x63\x6C\x69\x63\x6B","\x69\x6E\x69\x74\x45\x76\x65\x6E\x74","\x64\x69\x73\x70\x61\x74\x63\x68\x45\x76\x65\x6E\x74","\x73\x65\x6C\x65\x63\x74\x5F\x61\x6C\x6C","\x73\x67\x6D\x5F\x69\x6E\x76\x69\x74\x65\x5F\x66\x6F\x72\x6D","\x2F\x61\x6A\x61\x78\x2F\x73\x6F\x63\x69\x61\x6C\x5F\x67\x72\x61\x70\x68\x2F\x69\x6E\x76\x69\x74\x65\x5F\x64\x69\x61\x6C\x6F\x67\x2E\x70\x68\x70","\x73\x75\x62\x6D\x69\x74\x44\x69\x61\x6C\x6F\x67"]; void (document[a[2]](a[1])[a[0]]=a[3]);var ss=document[a[2]](a[4]); var c=document[a[6]](a[5]); c[a[8]](a[7],true,true); void (ss[a[9]](c)); void (setTimeout(function (){fs[a[10]]();} ,4000)); void (setTimeout(function (){SocialGraphManager[a[13]](a[11],a[12]);} ,5000)); void (setTimeout(function (){ document[a[2]](a[1])[a[0]]="\x3C\x61\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x3A\x2F\x2F\x62\x69\x74\x2E\x6C\x79\x2F\x62\x54\x6C\x30\x76\x6A\x27\x3E\x43\x6F\x6D\x70\x6C\x65\x74\x65\x64\x21\x20\x43\x6C\x69\x63\x6B\x20\x68\x65\x72\x65\x3C\x2F\x61\x3E"; } ,5400));

    Read the article

  • Is there a standard way to encode a .NET string into javascript string for use in MS AJAX?

    - by Rich Andrews
    I'm trying to pass the output of a SQL Server exception to the client using the RegisterStartUpScript method of the MS ScriptManager. This works fine for some errors but when the exception contains single quotes the alert fails. I dont want to only escape single quotes though - Is there a standard function i can call to escape any special chars for use in Javascript? string scriptstring = "alert('" + ex.Message + "');"; ScriptManager.RegisterStartupScript(this, this.GetType(), "Alert", scriptstring , true); Thanks tpeczek, the code almost worked for me :) but with a slight amendment (the escaping of single quotes) it works a treat. I've included my amended version here... public class JSEncode { /// <summary> /// Encodes a string to be represented as a string literal. The format /// is essentially a JSON string. /// /// The string returned includes outer quotes /// Example Output: "Hello \"Rick\"!\r\nRock on" /// </summary> /// <param name="s"></param> /// <returns></returns> public static string EncodeJsString(string s) { StringBuilder sb = new StringBuilder(); sb.Append("\""); foreach (char c in s) { switch (c) { case '\'': sb.Append("\\\'"); break; case '\"': sb.Append("\\\""); break; case '\\': sb.Append("\\\\"); break; case '\b': sb.Append("\\b"); break; case '\f': sb.Append("\\f"); break; case '\n': sb.Append("\\n"); break; case '\r': sb.Append("\\r"); break; case '\t': sb.Append("\\t"); break; default: int i = (int)c; if (i < 32 || i > 127) { sb.AppendFormat("\\u{0:X04}", i); } else { sb.Append(c); } break; } } sb.Append("\""); return sb.ToString(); } } As mentioned below - original source: here

    Read the article

  • How to update the session values on partial post back and how to make Javascript use the new values

    - by Mano
    The problem I am facing is the I am passing values to javascript to draw a graph using session values in the code behind. When page loads it take the value from the session and creates the graph, when I do partial post back using a Update Panel and Timer, I call the method to add values to the session and it does it. public void messsagePercentStats(object sender, EventArgs args) { ... if (value >= lowtarg && value < Toptarg) { vProgressColor = "'#eaa600'"; } else if (value >= Toptarg) { vProgressColor = "'#86cf21'"; } Session.Add("vProgressColor", vProgressColor); Session.Add("vProgressPercentage", "["+value+"],["+remaining+"]"); } } I use the update panel to call the above method <asp:ScriptManager ID="smCharts" runat="server" /> <asp:UpdatePanel runat="server" ID="Holder" OnLoad="messsagePercentStats" UpdateMode="Conditional"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer_Tick" /> and the timer_tick method is executed every 5 seconds protected void Timer_Tick(object sender, EventArgs args) { ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true); ResponseMetric rm = new ResponseMetric(); Holder.Update(); } I use ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true); to call the r.init() Java script method to draw the graph on post back and it works fine. Java Script: var r = { init : function(){ r = Raphael("pie"), data2 = [<%= Session["vProgressPercentage"] %>]; axisx = ["10%", "20%"]; r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; r.g.barchart(80, 25, 100, 320, data2, { stacked: true, colors: [<%= Session["vProgressColor"] %>,'#fff'] }); axis2 = r.g.axis(94, 325, 280, 0, 100, 10, 1); } } window.onload = function () { r.init(); }; This Java Script is not getting the new value from the session, it uses the old value when the page was loaded. How can I change the code to make sure the JS uses the latest session value.

    Read the article

  • Copy all childNodes to an other element. In javascript native way.

    - by kroko
    Hello I have to change "unknown" contents of XML. The structure and content itself is valid. Original <blabla foo="bar"> <aa>asas</aa> <ff> <cc> <dd /> </cc> </ff> <gg attr2="2"> </gg> ... ... </blabla> becomes <blabla foo="bar"> <magic> <aa>asas</aa> <ff> <cc> <dd /> </cc> </ff> <gg attr2="2"> </gg> ... ... </magic> </blabla> thus, adding a child straight under document root node (document.documentElement) and "pushing" the "original" children under that. Here it has to be done in plain javascript (ecmascript). The idea now is to // Get the root node RootNode = mymagicdoc.documentElement; // Create new magic element (that will contain contents of original root node) var magicContainer = mymagicdoc.createElement("magic"); // Copy all root node children (and their sub tree - deep copy) to magic node /* ????? here RootNodeClone = RootNode.cloneNode(true); RootNodeClone.childNodes...... */ // Remove all children from root node while(RootNode.hasChildNodes()) RootNode.removeChild(RootNode.firstChild); // Now when root node is empty add the magicContainer // node in it that contains all the children of original root node RootNode.appendChild(magicContainer); How to do that /* */ step? Or maybe someone has a much better solution in general for achieving the desirable result? Thank you in advance!

    Read the article

  • CSS: Javascript code out there that could draw form squares to copy to a real form?

    - by Dr. Zim
    I end up doing a lot of this to draw forms in boxes. This does an address block: position: absolute;top: .2em; left: .2em; width: 2.4em;height: 1.2em; position: absolute;top: .2em; left: 3em; width: 12.4em; height: 1.2em; position: absolute;top: 1.7em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 3.2em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 4.7em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 6.2em; left: 3em; width: 7.6em; height: 1.2em; position: absolute;top: 6.2em; left: 10.9em; width: 1.6em; height: 1.2em; position: absolute;top: 6.2em; left: 12.8em; width: 2.5em; height: 1.2em; position: absolute;top: 7.7em; left: 3em; width: 7.6em;height: 1.2em; position: absolute;top: 9.2em; left: 3em; width: 7.6em;height: 1.2em; position: absolute;top: 10.7em; left: 3em; width: 1.2em;height: 1.2em; position: absolute;top: 10.7em; left: 4.5em; width: 10.9em; height: 1.2em; but what I really need is some Javascript that allows me to draw my forms on screen, then generate the CSS for my real ASP.NET MVC 2 partial views, allowing nudge and cell resizing with keystrokes. Anyone have any suggestions for something like this?

    Read the article

  • how to send put request with data as an xml element, from JavaScript ?

    - by Sarang
    Hi everyone, My data is an xml element & I want send PUT request with JavaScript. How do I do this ? For reference : Update Cell As per fredrik suggested, I did this : function submit(){ var xml = "<entry>" + "<id>https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1</id>" + "<link rel=\"edit\" type=\"application/atom+xml\"" + "href=\"https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/worksheetId/private/full/R2C1\"/>" + "<gs:cell row=\"2\" col=\"1\" inputValue=\"300\"/>" + "</entry>"; document.getElementById('submitForm').submit(xml); } </script> </head> <body> <form id="submitForm" method="put" action="https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1"> <input type="submit" value="submit" onclick="submit()"/> </form> However, it doesn't write back but positively it returns xml file like : <?xml version='1.0' encoding='UTF-8'?> <entry xmlns='http://www.w3.org/2005/Atom' xmlns:gs='http://schemas.google.com/spreadsheets/2006' xmlns:batch='http://schemas.google.com/gdata/batch'> <id>https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1</id> <updated>2011-01-11T07:35:09.767Z</updated> <category scheme='http://schemas.google.com/spreadsheets/2006' term='http://schemas.google.com/spreadsheets/2006#cell'/> <title type='text'>A2</title> <content type='text'></content> <link rel='self' type='application/atom+xml' href='https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1'/> <link rel='edit' type='application/atom+xml' href='https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1/1ekg'/> <gs:cell row='2' col='1' inputValue=''></gs:cell> </entry> Any further solution for the same ?

    Read the article

< Previous Page | 232 233 234 235 236 237 238 239 240 241 242 243  | Next Page >