Search Results

Search found 31578 results on 1264 pages for 'javascript functions'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 58/1264 | < Previous Page | 54 55 56 57 58 59 60 61 62 63 64 65  | Next Page >

  • Responding to the page unload in a managed bean

    - by frank.nimphius
    Though ADF Faces provides an uncommitted data warning functionality, developers may have the requirement to respond to the page unload event within custom application code, programmed in a managed bean. The af:clientListener tag that is used in ADF Faces to listen for JavaScript and ADF Faces client component events does not provide the option to listen for the unload event. So this often recommended way of implementing JavaScript in ADF Faces does not work for this use case. To send an event from JavaScript to the server, ADF Faces provides the af:serverListener tag that you use to queue a CustomEvent that invokes method in a managed bean. While this is part of the solution, during testing, it turns out, the browser native JavaScript unload event itself is not very helpful to send an event to the server using the af:serverListener tag. The reason for this is that when the unload event fires, the page already has been unloaded and the ADF Faces AdfPage object needed to queue the custom event already returns null. So the solution to the unload page event handling is the unbeforeunload event, which I am not sure if all browsers support them. I tested IE and FF and obviously they do though. To register the beforeunload event, you use an advanced JavaScript programming technique that dynamically adds listeners to page events. <af:document id="d1" onunload="performUnloadEvent"                      clientComponent="true"> <af:resource type="javascript">   window.addEventListener('beforeunload',                            function (){performUnloadEvent()},false)      function performUnloadEvent(){   //note that af:document must have clientComponent="true" set   //for JavaScript to access the component object   var eventSource = AdfPage.PAGE.findComponentByAbsoluteId('d1');   //var x and y are dummy variables obviously needed to keep the page   //alive for as long it takes to send the custom event to the server   var x = AdfCustomEvent.queue(eventSource,                                "handleOnUnload",                                {args:'noargs'},false);   //replace args:'noargs' with key:value pairs if your event needs to   //pass arguments and values to the server side managed bean.   var y = 0; } </af:resource> <af:serverListener type="handleOnUnload"                    method="#{UnloadHandler.onUnloadHandler}"/> // rest of the page goes here … </af:document> The managed bean method called by the custom event has the following signature:  public void onUnloadHandler(ClientEvent clientEvent) {  } I don't really have a good explanation for why the JavaSCript variables "x" and "y" are needed, but this is how I got it working. To me it ones again shows how fragile custom JavaScript development is and why you should stay away from using it whenever possible. Note: If the unload event is produced through navigation in JavaServer Faces, then there is no need to use JavaScript for this. If you know that navigation is performed from one page to the next, then the action you want to perform can be handled in JSF directly in the context of the lifecycle.

    Read the article

  • Insert random <script> for using $(document).ready(function()}); in Joomla

    - by Anriëtte Combrink
    Hi I have an article in which I use PHP code inside the text editor in Joomla, in the backend. I can see jQuery already called when the page loads, here is my code inside the Article edit textbox: <?php $username="XXX"; $password="XXX"; $database="XXX"; mysql_connect('localhost',$username,$password) or die(mysql_error()); mysql_select_db($database) or die("Unable to select database"); $result=mysql_query("SELECT * FROM birthdays ORDER BY name") or die(mysql_error()); echo "<table width='100%' cellspacing='10' cellpadding='0' border='0'>"; echo "<tr valign='top'><th align='left'></th><th align='left'>Name</th><th align='left'>Email</th><th align='left'>Day</th><th align='left'>Month</th></tr><tr><td>&nbsp;</td></tr>"; while ($row = mysql_fetch_array($result)) { echo "<tr>"; echo '<td valign="top"><a href="#" id="'.$row['id'].'" class="delete_birthday"><img src="administrator/components/com_media/images/remove.png" alt="Delete user" /></a><input type="hidden" name="id[]" value="'.$row['id'].'" /></td>'; echo "<td valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['name']; echo "</td>"; echo "<td valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['email']; echo "</td>"; echo "<td align='center' valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['birthday']; echo "</td>"; echo "<td align='center' valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['birthmonth']; echo "</td>"; echo "</tr>"; } echo "</table>"; ?> <script type="text/javascript"> $(document).ready(function() { alert("hello"); }); </script> At the moment, nothing alerts (just alerting for testing if jQuery gets recognised, I am obviously going to put in click handlers), so I assume the $(document).ready() never gets triggered. I can see the code in the source, but it just never gets called. Anybody have any advice? BTW. the SC jQuery plugin is installed already to prevent library conflicts.

    Read the article

  • Rendering ASP.NET Script References into the Html Header

    - by Rick Strahl
    One thing that I’ve come to appreciate in control development in ASP.NET that use JavaScript is the ability to have more control over script and script include placement than ASP.NET provides natively. Specifically in ASP.NET you can use either the ClientScriptManager or ScriptManager to embed scripts and script references into pages via code. This works reasonably well, but the script references that get generated are generated into the HTML body and there’s very little operational control for placement of scripts. If you have multiple controls or several of the same control that need to place the same scripts onto the page it’s not difficult to end up with scripts that render in the wrong order and stop working correctly. This is especially critical if you load script libraries with dependencies either via resources or even if you are rendering referenced to CDN resources. Natively ASP.NET provides a host of methods that help embedding scripts into the page via either Page.ClientScript or the ASP.NET ScriptManager control (both with slightly different syntax): RegisterClientScriptBlock Renders a script block at the top of the HTML body and should be used for embedding callable functions/classes. RegisterStartupScript Renders a script block just prior to the </form> tag and should be used to for embedding code that should execute when the page is first loaded. Not recommended – use jQuery.ready() or equivalent load time routines. RegisterClientScriptInclude Embeds a reference to a script from a url into the page. RegisterClientScriptResource Embeds a reference to a Script from a resource file generating a long resource file string All 4 of these methods render their <script> tags into the HTML body. The script blocks give you a little bit of control by having a ‘top’ and ‘bottom’ of the document location which gives you some flexibility over script placement and precedence. Script includes and resource url unfortunately do not even get that much control – references are simply rendered into the page in the order of declaration. The ASP.NET ScriptManager control facilitates this task a little bit with the abililty to specify scripts in code and the ability to programmatically check what scripts have already been registered, but it doesn’t provide any more control over the script rendering process itself. Further the ScriptManager is a bear to deal with generically because generic code has to always check and see if it is actually present. Some time ago I posted a ClientScriptProxy class that helps with managing the latter process of sending script references either to ClientScript or ScriptManager if it’s available. Since I last posted about this there have been a number of improvements in this API, one of which is the ability to control placement of scripts and script includes in the page which I think is rather important and a missing feature in the ASP.NET native functionality. Handling ScriptRenderModes One of the big enhancements that I’ve come to rely on is the ability of the various script rendering functions described above to support rendering in multiple locations: /// <summary> /// Determines how scripts are included into the page /// </summary> public enum ScriptRenderModes { /// <summary> /// Inherits the setting from the control or from the ClientScript.DefaultScriptRenderMode /// </summary> Inherit, /// Renders the script include at the location of the control /// </summary> Inline, /// <summary> /// Renders the script include into the bottom of the header of the page /// </summary> Header, /// <summary> /// Renders the script include into the top of the header of the page /// </summary> HeaderTop, /// <summary> /// Uses ClientScript or ScriptManager to embed the script include to /// provide standard ASP.NET style rendering in the HTML body. /// </summary> Script, /// <summary> /// Renders script at the bottom of the page before the last Page.Controls /// literal control. Note this may result in unexpected behavior /// if /body and /html are not the last thing in the markup page. /// </summary> BottomOfPage } This enum is then applied to the various Register functions to allow more control over where scripts actually show up. Why is this useful? For me I often render scripts out of control resources and these scripts often include things like a JavaScript Library (jquery) and a few plug-ins. The order in which these can be loaded is critical so that jQuery.js always loads before any plug-in for example. Typically I end up with a general script layout like this: Core Libraries- HeaderTop Plug-ins: Header ScriptBlocks: Header or Script depending on other dependencies There’s also an option to render scripts and CSS at the very bottom of the page before the last Page control on the page which can be useful for speeding up page load when lots of scripts are loaded. The API syntax of the ClientScriptProxy methods is closely compatible with ScriptManager’s using static methods and control references to gain access to the page and embedding scripts. For example, to render some script into the current page in the header: // Create script block in header ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "hello_function", "function helloWorld() { alert('hello'); }", true, ScriptRenderModes.Header); // Same again - shouldn't be rendered because it's the same id ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "hello_function", "function helloWorld() { alert('hello'); }", true, ScriptRenderModes.Header); // Create a second script block in header ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "hello_function2", "function helloWorld2() { alert('hello2'); }", true, ScriptRenderModes.Header); // This just calls ClientScript and renders into bottom of document ClientScriptProxy.Current.RegisterStartupScript(this,typeof(ControlResources), "call_hello", "helloWorld();helloWorld2();", true); which generates: <html xmlns="http://www.w3.org/1999/xhtml" > <head><title> </title> <script type="text/javascript"> function helloWorld() { alert('hello'); } </script> <script type="text/javascript"> function helloWorld2() { alert('hello2'); } </script> </head> <body> … <script type="text/javascript"> //<![CDATA[ helloWorld();helloWorld2();//]]> </script> </form> </body> </html> Note that the scripts are generated into the header rather than the body except for the last script block which is the call to RegisterStartupScript. In general I wouldn’t recommend using RegisterStartupScript – ever. It’s a much better practice to use a script base load event to handle ‘startup’ code that should fire when the page first loads. So instead of the code above I’d actually recommend doing: ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "call_hello", "$().ready( function() { alert('hello2'); });", true, ScriptRenderModes.Header); assuming you’re using jQuery on the page. For script includes from a Url the following demonstrates how to embed scripts into the header. This example injects a jQuery and jQuery.UI script reference from the Google CDN then checks each with a script block to ensure that it has loaded and if not loads it from a server local location: // load jquery from CDN ClientScriptProxy.Current.RegisterClientScriptInclude(this, typeof(ControlResources), "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js", ScriptRenderModes.HeaderTop); // check if jquery loaded - if it didn't we're not online string scriptCheck = @"if (typeof jQuery != 'object') document.write(unescape(""%3Cscript src='{0}' type='text/javascript'%3E%3C/script%3E""));"; string jQueryUrl = ClientScriptProxy.Current.GetWebResourceUrl(this, typeof(ControlResources), ControlResources.JQUERY_SCRIPT_RESOURCE); ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "jquery_register", string.Format(scriptCheck,jQueryUrl),true, ScriptRenderModes.HeaderTop); // Load jquery-ui from cdn ClientScriptProxy.Current.RegisterClientScriptInclude(this, typeof(ControlResources), "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", ScriptRenderModes.Header); // check if we need to load from local string jQueryUiUrl = ResolveUrl("~/scripts/jquery-ui-custom.min.js"); ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "jqueryui_register", string.Format(scriptCheck, jQueryUiUrl), true, ScriptRenderModes.Header); // Create script block in header ClientScriptProxy.Current.RegisterClientScriptBlock(this, typeof(ControlResources), "hello_function", "$().ready( function() { alert('hello'); });", true, ScriptRenderModes.Header); which in turn generates this HTML: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof jQuery != 'object') document.write(unescape("%3Cscript src='/WestWindWebToolkitWeb/WebResource.axd?d=DIykvYhJ_oXCr-TA_dr35i4AayJoV1mgnQAQGPaZsoPM2LCdvoD3cIsRRitHKlKJfV5K_jQvylK7tsqO3lQIFw2&t=633979863959332352' type='text/javascript'%3E%3C/script%3E")); </script> <title> </title> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof jQuery != 'object') document.write(unescape("%3Cscript src='/WestWindWebToolkitWeb/scripts/jquery-ui-custom.min.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> $().ready(function() { alert('hello'); }); </script> </head> <body> …</body> </html> As you can see there’s a bit more control in this process as you can inject both script includes and script blocks into the document at the top or bottom of the header, plus if necessary at the usual body locations. This is quite useful especially if you create custom server controls that interoperate with script and have certain dependencies. The above is a good example of a useful switchable routine where you can switch where scripts load from by default – the above pulls from Google CDN but a configuration switch may automatically switch to pull from the local development copies if your doing development for example. How does it work? As mentioned the ClientScriptProxy object mimicks many of the ScriptManager script related methods and so provides close API compatibility with it although it contains many additional overloads that enhance functionality. It does however work against ScriptManager if it’s available on the page, or Page.ClientScript if it’s not so it provides a single unified frontend to script access. There are however many overloads of the original SM methods like the above to provide additional functionality. The implementation of script header rendering is pretty straight forward – as long as a server header (ie. it has to have runat=”server” set) is available. Otherwise these routines fall back to using the default document level insertions of ScriptManager/ClientScript. Given that there is a server header it’s relatively easy to generate the script tags and code and append them to the header either at the top or bottom. I suspect Microsoft didn’t provide header rendering functionality precisely because a runat=”server” header is not required by ASP.NET so behavior would be slightly unpredictable. That’s not really a problem for a custom implementation however. Here’s the RegisterClientScriptBlock implementation that takes a ScriptRenderModes parameter to allow header rendering: /// <summary> /// Renders client script block with the option of rendering the script block in /// the Html header /// /// For this to work Header must be defined as runat="server" /// </summary> /// <param name="control">any control that instance typically page</param> /// <param name="type">Type that identifies this rendering</param> /// <param name="key">unique script block id</param> /// <param name="script">The script code to render</param> /// <param name="addScriptTags">Ignored for header rendering used for all other insertions</param> /// <param name="renderMode">Where the block is rendered</param> public void RegisterClientScriptBlock(Control control, Type type, string key, string script, bool addScriptTags, ScriptRenderModes renderMode) { if (renderMode == ScriptRenderModes.Inherit) renderMode = DefaultScriptRenderMode; if (control.Page.Header == null || renderMode != ScriptRenderModes.HeaderTop && renderMode != ScriptRenderModes.Header && renderMode != ScriptRenderModes.BottomOfPage) { RegisterClientScriptBlock(control, type, key, script, addScriptTags); return; } // No dupes - ref script include only once const string identifier = "scriptblock_"; if (HttpContext.Current.Items.Contains(identifier + key)) return; HttpContext.Current.Items.Add(identifier + key, string.Empty); StringBuilder sb = new StringBuilder(); // Embed in header sb.AppendLine("\r\n<script type=\"text/javascript\">"); sb.AppendLine(script); sb.AppendLine("</script>"); int? index = HttpContext.Current.Items["__ScriptResourceIndex"] as int?; if (index == null) index = 0; if (renderMode == ScriptRenderModes.HeaderTop) { control.Page.Header.Controls.AddAt(index.Value, new LiteralControl(sb.ToString())); index++; } else if(renderMode == ScriptRenderModes.Header) control.Page.Header.Controls.Add(new LiteralControl(sb.ToString())); else if (renderMode == ScriptRenderModes.BottomOfPage) control.Page.Controls.AddAt(control.Page.Controls.Count-1,new LiteralControl(sb.ToString())); HttpContext.Current.Items["__ScriptResourceIndex"] = index; } Note that the routine has to keep track of items inserted by id so that if the same item is added again with the same key it won’t generate two script entries. Additionally the code has to keep track of how many insertions have been made at the top of the document so that entries are added in the proper order. The RegisterScriptInclude method is similar but there’s some additional logic in here to deal with script file references and ClientScriptProxy’s (optional) custom resource handler that provides script compression /// <summary> /// Registers a client script reference into the page with the option to specify /// the script location in the page /// </summary> /// <param name="control">Any control instance - typically page</param> /// <param name="type">Type that acts as qualifier (uniqueness)</param> /// <param name="url">the Url to the script resource</param> /// <param name="ScriptRenderModes">Determines where the script is rendered</param> public void RegisterClientScriptInclude(Control control, Type type, string url, ScriptRenderModes renderMode) { const string STR_ScriptResourceIndex = "__ScriptResourceIndex"; if (string.IsNullOrEmpty(url)) return; if (renderMode == ScriptRenderModes.Inherit) renderMode = DefaultScriptRenderMode; // Extract just the script filename string fileId = null; // Check resource IDs and try to match to mapped file resources // Used to allow scripts not to be loaded more than once whether // embedded manually (script tag) or via resources with ClientScriptProxy if (url.Contains(".axd?r=")) { string res = HttpUtility.UrlDecode( StringUtils.ExtractString(url, "?r=", "&", false, true) ); foreach (ScriptResourceAlias item in ScriptResourceAliases) { if (item.Resource == res) { fileId = item.Alias + ".js"; break; } } if (fileId == null) fileId = url.ToLower(); } else fileId = Path.GetFileName(url).ToLower(); // No dupes - ref script include only once const string identifier = "script_"; if (HttpContext.Current.Items.Contains( identifier + fileId ) ) return; HttpContext.Current.Items.Add(identifier + fileId, string.Empty); // just use script manager or ClientScriptManager if (control.Page.Header == null || renderMode == ScriptRenderModes.Script || renderMode == ScriptRenderModes.Inline) { RegisterClientScriptInclude(control, type,url, url); return; } // Retrieve script index in header int? index = HttpContext.Current.Items[STR_ScriptResourceIndex] as int?; if (index == null) index = 0; StringBuilder sb = new StringBuilder(256); url = WebUtils.ResolveUrl(url); // Embed in header sb.AppendLine("\r\n<script src=\"" + url + "\" type=\"text/javascript\"></script>"); if (renderMode == ScriptRenderModes.HeaderTop) { control.Page.Header.Controls.AddAt(index.Value, new LiteralControl(sb.ToString())); index++; } else if (renderMode == ScriptRenderModes.Header) control.Page.Header.Controls.Add(new LiteralControl(sb.ToString())); else if (renderMode == ScriptRenderModes.BottomOfPage) control.Page.Controls.AddAt(control.Page.Controls.Count-1, new LiteralControl(sb.ToString())); HttpContext.Current.Items[STR_ScriptResourceIndex] = index; } There’s a little more code here that deals with cleaning up the passed in Url and also some custom handling of script resources that run through the ScriptCompressionModule – any script resources loaded in this fashion are automatically cached based on the resource id. Raw urls extract just the filename from the URL and cache based on that. All of this to avoid doubling up of scripts if called multiple times by multiple instances of the same control for example or several controls that all load the same resources/includes. Finally RegisterClientScriptResource utilizes the previous method to wrap the WebResourceUrl as well as some custom functionality for the resource compression module: /// <summary> /// Returns a WebResource or ScriptResource URL for script resources that are to be /// embedded as script includes. /// </summary> /// <param name="control">Any control</param> /// <param name="type">A type in assembly where resources are located</param> /// <param name="resourceName">Name of the resource to load</param> /// <param name="renderMode">Determines where in the document the link is rendered</param> public void RegisterClientScriptResource(Control control, Type type, string resourceName, ScriptRenderModes renderMode) { string resourceUrl = GetClientScriptResourceUrl(control, type, resourceName); RegisterClientScriptInclude(control, type, resourceUrl, renderMode); } /// <summary> /// Works like GetWebResourceUrl but can be used with javascript resources /// to allow using of resource compression (if the module is loaded). /// </summary> /// <param name="control"></param> /// <param name="type"></param> /// <param name="resourceName"></param> /// <returns></returns> public string GetClientScriptResourceUrl(Control control, Type type, string resourceName) { #if IncludeScriptCompressionModuleSupport // If wwScriptCompression Module through Web.config is loaded use it to compress // script resources by using wcSC.axd Url the module intercepts if (ScriptCompressionModule.ScriptCompressionModuleActive) { string url = "~/wwSC.axd?r=" + HttpUtility.UrlEncode(resourceName); if (type.Assembly != GetType().Assembly) url += "&t=" + HttpUtility.UrlEncode(type.FullName); return WebUtils.ResolveUrl(url); } #endif return control.Page.ClientScript.GetWebResourceUrl(type, resourceName); } This code merely retrieves the resource URL and then simply calls back to RegisterClientScriptInclude with the URL to be embedded which means there’s nothing specific to deal with other than the custom compression module logic which is nice and easy. What else is there in ClientScriptProxy? ClientscriptProxy also provides a few other useful services beyond what I’ve already covered here: Transparent ScriptManager and ClientScript calls ClientScriptProxy includes a host of routines that help figure out whether a script manager is available or not and all functions in this class call the appropriate object – ScriptManager or ClientScript – that is available in the current page to ensure that scripts get embedded into pages properly. This is especially useful for control development where controls have no control over the scripting environment in place on the page. RegisterCssLink and RegisterCssResource Much like the script embedding functions these two methods allow embedding of CSS links. CSS links are appended to the header or to a form declared with runat=”server”. LoadControlScript Is a high level resource loading routine that can be used to easily switch between different script linking modes. It supports loading from a WebResource, a url or not loading anything at all. This is very useful if you build controls that deal with specification of resource urls/ids in a standard way. Check out the full Code You can check out the full code to the ClientScriptProxyClass here: ClientScriptProxy.cs ClientScriptProxy Documentation (class reference) Note that the ClientScriptProxy has a few dependencies in the West Wind Web Toolkit of which it is part of. ControlResources holds a few standard constants and script resource links and the ScriptCompressionModule which is referenced in a few of the script inclusion methods. There’s also another useful ScriptContainer companion control  to the ClientScriptProxy that allows scripts to be placed onto the page’s markup including the ability to specify the script location and script minification options. You can find all the dependencies in the West Wind Web Toolkit repository: West Wind Web Toolkit Repository West Wind Web Toolkit Home Page© Rick Strahl, West Wind Technologies, 2005-2010Posted in ASP.NET  JavaScript  

    Read the article

  • How can I create and animate 2D skeletons for HTML5 Javascript games? [on hold]

    - by user414209
    I'm trying to make a 2D fighting game in HTML5(somewhat like street fighter). So basically there are two players, one AI and one Human. The players need to have animations for the body movements. Also, there needs to be some collision detection system. I'm using createjs for coding but to design models/objects/animations, I need some other software. So I'm looking for a software that can: easily make custom animation of 2d objects. The objects structure(skeleton etc.) will be same once defined but need to be defined once. Can export the animations and models in a js readable format(preferably json) Collision detection can be done easily after the exported format is loaded in a game engine. For point 1, I'm looking for some generic skeleton based animation. Sprite-sheet based animations will be difficult for collision detection.

    Read the article

  • How do I do Collisions in my JavaScript Game Code Below?

    - by Henry
    I'm trying to figure out how would I add collision detection to my code so that when the "Man" character touches the "RedHouse" the RedHouse disappears? Thanks. By the way, I'm new to how things are done on this site, so thus, if there is anything else needed or so, let me know. <title>HMan</title> <body style="background:#808080;"> <br> <canvas id="canvasBg" width="800px" height="500px"style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas> <canvas id="canvasRedHouse" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas> <canvas id="canvasEnemy" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas> <canvas id="canvasEnemy2" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas> <canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas> <script> var isPlaying = false; var requestAnimframe = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame; var canvasBg = document.getElementById('canvasBg'); var ctxBg = canvasBg.getContext('2d'); var canvasRedHouse = document.getElementById('canvasRedHouse'); var ctxRedHouse = canvasRedHouse.getContext('2d'); var House1; House1 = new RedHouse(); var canvasMan = document.getElementById('canvasMan'); var ctxMan = canvasMan.getContext('2d'); var Man1; Man1 = new Man(); var imgSprite = new Image(); imgSprite.src = 'SpritesI.png'; imgSprite.addEventListener('load',init,false); function init() { drawBg(); startLoop(); document.addEventListener('keydown',checkKeyDown,false); document.addEventListener('keyup',checkKeyUp,false); } function drawBg() { var SpriteSourceX = 0; var SpriteSourceY = 0; var drawManOnScreenX = 0; var drawManOnScreenY = 0; ctxBg.drawImage(imgSprite,SpriteSourceX,SpriteSourceY,800,500,drawManOnScreenX, drawManOnScreenY,800,500); } function clearctxBg() { ctxBg.clearRect(0,0,800,500); } function Man() { this.SpriteSourceX = 10; this.SpriteSourceY = 540; this.width = 40; this.height = 115; this.DrawManOnScreenX = 100; this.DrawManOnScreenY = 260; this.speed = 10; this.actualFrame = 1; this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Man.prototype.draw = function () { clearCtxMan(); this.updateCoors(); this.checkDirection(); ctxMan.drawImage(imgSprite,this.SpriteSourceX,this.SpriteSourceY+this.height* this.actualFrame, this.width,this.height,this.DrawManOnScreenX,this.DrawManOnScreenY, this.width,this.height); } Man.prototype.updateCoors = function(){ this.leftX = this.DrawManOnScreenX; this.rightX = this.DrawManOnScreenX + this.width; this.topY = this.DrawManOnScreenY; this.bottomY = this.DrawManOnScreenY + this.height; } Man.prototype.checkDirection = function () { if (this.isUpKey && this.topY > 240) { this.DrawManOnScreenY -= this.speed; } if (this.isRightKey && this.rightX < 800) { this.DrawManOnScreenX += this.speed; } if (this.isDownKey && this.bottomY < 500) { this.DrawManOnScreenY += this.speed; } if (this.isLeftKey && this.leftX > 0) { this.DrawManOnScreenX -= this.speed; } if (this.isRightKey && this.rightX < 800) { if (this.actualFrame > 0) { this.actualFrame = 0; } else { this.actualFrame++; } } if (this.isLeftKey) { if (this.actualFrame > 2) { this.actualFrame = 2; } function checkKeyDown(var keyID = e.keyCode || e.which; if (keyID === 38) { Man1.isUpKey = true; e.preventDefault(); } if (keyID === 39 ) { Man1.isRightKey = true; e.preventDefault(); } if (keyID === 40 ) { Man1.isDownKey = true; e.preventDefault(); } if (keyID === 37 ) { Man1.isLeftKey = true; e.preventDefault(); } } function checkKeyUp(e) { var keyID = e.keyCode || e.which; if (keyID === 38 || keyID === 87) { Man1.isUpKey = false; e.preventDefault(); } if (keyID === 39 || keyID === 68) { Man1.isRightKey = false; e.preventDefault(); } if (keyID === 40 || keyID === 83) { Man1.isDownKey = false; e.preventDefault(); } if (keyID === 37 || keyID === 65) { Man1.isLeftKey = false; e.preventDefault(); } } function clearCtxMan() { ctxMan.clearRect(0,0,800,500); } function RedHouse() { this.srcX = 135; this.srcY = 525; this.width = 265; this.height = 245; this.drawX = 480; this.drawY = 85; } RedHouse.prototype.draw = function () { clearCtxRedHouse(); ctxRedHouse.drawImage(imgSprite,this.srcX,this.srcY, this.width,this.height,this.drawX,this.drawY,this.width,this.height); }; function clearCtxRedHouse() { ctxRedHouse.clearRect(0,0,800,500); } function loop() { if (isPlaying === true){ Man1.draw(); House1.draw(); requestAnimframe(loop); } } function startLoop(){ isPlaying = true; loop(); } function stopLoop(){ isPlaying = false; } </script> <style> .top{ position: absolute; top: 4px; left: 10px; color:black; } .top2{ position: absolute; top: 60px; left: 10px; color:black; } </style> <div class="top"> <p><font face="arial" color="black" size="4"><b>HGame</b><font/><p/> <p><font face="arial" color="black" size="3"> My Game Here <font/><p/> </div> <div class="top2"> <p><font face="arial" color="black" size="3"> It will start now <font/><p/> </div>

    Read the article

  • How to open the JavaScript console in different browsers?

    - by Šime Vidas
    Updated on October 7th 2012 Chrome: Press either CTRL + SHIFT + J to open the "Console" tab of the Developer Tools. Alternative method: Press either CTRL + SHIFT + I or F12 to open the Developer Tools. Press ESC (or click on "Show console" in the bottom right corner) to slide the console up. Note: In Chrome's dev tools, there is a "Console" tab. However, a smaller "slide-up" console can be opened while any of the other tabs is active. Safari: Press CTRL + ALT + I to open the Web Inspector. See Chrome's step 2. (Chrome and Safari have pretty much identical dev tools.) Note: Step 1 only works if the "Show Develop menu in menu bar" check box in the Advanced tab of the Preferences menu is checked! IE9: Press F12 to open the developer tools. Click the "Console" tab. Firefox: Press CTRL + SHIFT + K to open the Web console. or, if Firebug is installed (recommended): Press F12 to open Firebug. Click on the "Console" tab. Opera: Press CTRL + SHIFT + I to open Dragonfly. Click on the "Console" tab.

    Read the article

  • What tools, libraries, or framework is needed to create a completely offline Javascript application?

    - by makerofthings7
    I am interested in creating a HTML application that can run as disconnected from the server as possible. Two examples of this include OWA in Exchange 2013 and to a lesser extent and the client available at www.ripple.com With the focus on OWA in Exchange 2013, what is needed to replicate the offline functionality available in a different application? A list technologies, frameworks, etc would be immensely helpful

    Read the article

  • how to retrieve img alt text with jquery or javascript? [on hold]

    - by kate
    Which is the code with which we can retreive alternative text of image: It is a Cataloge with clothes. Dressers, Shirts, Skirts e.t.c. in front page of a site. The featured images of the categories can be changed manually from someone. I did a check and it is asking me to give alt text. I did it to some images with alt="". But to the cataloge I cannot do it. the code is below: {{ 'option_selection.js' | shopify_asset_url | script_tag }} {{ 'api.jquery.js' | shopify_asset_url | script_tag }} {% if template contains 'customers' %} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {{ 'customer_area.js' | shopify_asset_url | script_tag }} {% endif %} {% if settings.display_slideshow %}{{ 'jquery.slider.js' | asset_url | script_tag }}{% endif %} {% if settings.include_masonry %}{{ 'jquery.masonry.js' | asset_url | script_tag }}{% endif %} {% if settings.enable_product_image_zoom %}{{ 'jquery.zoom.js' | asset_url | script_tag }}{% endif %} {{ 'fancy.js' | asset_url | script_tag }} {{ 'shop.js' | asset_url | script_tag }} Shopify.money_format = '{{ shop.money_format }}'; {% if template contains "product" %} jQuery(document).ready(function($){ {% if product.variants.size 1 or product.options.size 1 %} new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); {% assign found_one_in_stock = false %} {% for variant in product.variants %} {% if variant.available and found_one_in_stock == false %} {% assign found_one_in_stock = true %} {% for option in product.options %} $('#product-select-option-' + {{ forloop.index0 }}).val({{ variant.options[forloop.index0] | json }}).trigger('change'); {% endfor %} {% endif %} {% endfor %} {% endif %} }); $(function() { $( "#tabs" ).tabs(); });

    Read the article

  • How to change internet explorer settings through Javascript? [on hold]

    - by Abhi
    I have a webpage which fetched value dynamically from a config file(whose contents changes after some interval). Initially i thought it might be some problem with my code but later when i cross checked it with other browsers it ran successfully. On my further research i changed some settings in internet explorer regarding the temporary file. Tool-internet options-browsing history(settings). i selected "Everytime i visit the webpage" from amongst the 4 options that i had. I wanted to know can set it programatically?

    Read the article

  • Are "Compile to JavaScript" Frameworks Hostile to Continuous Integration?

    - by joshin4colours
    Lately we've been looking at ways to improve automated testing and related tooling of our enterprise-level GWT web app. I've realized that in some ways, GWT is a bit hostile to automated testing, mainly because of the nature of the long GWT compile times from Java to JS. This makes unit testing somewhat challenging, but it also puts some roadblocks up for testing in a CI environment. I've also found out that some of our build and deployment processes are somewhat complicated due to the nature of GWT's compile process. Is this a general problem for "compile to JS" frameworks for webapps? I don't have much experience with them, but I can see some potential problems for automated testing and continuous integration and deployment. Some issues I see: Long build and compile times preventing quick deployments Language the app is developed in != JS, preventing good unit testing Obfuscated JS in the actual app makes it more like a executable than a web app Are these issues present in other similar frameworks, or is this more a GWT issue?

    Read the article

  • Abandoment to blame for the last JavaScript file not always being loaded?

    - by Larsenal
    I have a code snippet for an app that users are loading as a 3rd party script on their site. The general sequence is as follows: Site loads http://www.example.com/foo.js foo.js does stuff 1 to 2 seconds later, foo.js loads bar.js Now in a perfect world, I'd want to see matching counts for the calls to foo.js and bar.js. However, bar.js loads only about 94% of the time. I'm wondering how much of this discrepancy might be attributable to site abandonment given the fact that bar.js is delayed by 1 or 2 seconds. I posted here instead of StackOverflow since I think it's more a question about what would be typical time on page when users abandon the page.

    Read the article

  • Removing/Adding a specific variable from an object inside javascript array? [migrated]

    - by hustlerinc
    I have a map array with objects stuffed with variables looking like this: var map = [ [{ground:0, object:1}, {ground:0, item:2}, {ground:0, object:1, item:2}], [{ground:0, object:1}, {ground:0, item:2}, {ground:0, object:1, item:2}] ]; Now I would like to be able to delete and add one of the variables like item:2. 1) What would I use to delete specific variables? 2) What would I use to add specific variables? I just need 2 short lines of code, the rest like detecting if and where to execute I've figured out. I've tried delete map[i][j].item; with no results. Help appreciated.

    Read the article

  • Possible to create "fake" forum (for prototyping) using html, javascript, jquery, css? [closed]

    - by htmlNewbie
    I am trying to figure out if it might be possible to create a small forum without any use of a database and php coding. I have created a small (local and will only be local) webpage with a couple of menus. I have a forum button which will take me to another .html location. Here i would like to create something that looks like a forum and which you somewhat could interact with like a forum, without any database or PHP. I would probably want/need a form with a heading and text input. When i have given some input, i want it to be displayed as a thread, probably on top of the other threads (which will have to be created beforehand). When I refresh the forum will obviously be set to default, without saving what i just entered since I'm not using a database to save any data. So the new posts will not be saved, just displayed, neatly, when submitted. I'm doing this webpage with forum just as a prototype, and that is why it doesn't have to work as a professional forum. :) Would be very thankful for some tips, tricks, ideas or links to helpful threads.

    Read the article

  • Advise how to write a simple test for this javascript snippet?

    - by resting
    I'm trying to start unit testing (not using any testing frameworks) for my javascripts. Here's one example of it. var obj = {}; obj.disableBtn = function ($btn, style) { $btn.attr('disabled','disabled').addClass('disabled').removeClass(style); }; The use case is as such: obj.disableBtn($('.submit'), 'btn-blue'); What it does is simply add the disabled attribute, add the disabled class, and remove the btn-blue style. Please advise how would a typical test case look like in this case. I have a little knowledge on testing using assert(), but have no idea how to go about it when it involves verifying the result on HTML elements.

    Read the article

  • Are there any good javascript libraries for programming with html5 canvas element? [closed]

    - by marko
    I think there are some js-libraries with programming the html5 canvas element. Which one to choose? I've done some js-coding with canvas and are somewhat familiar with the api. But I think somekind of library which encapsulates the somewhat tedious canvas api would be a good thing, so it speeds up the development. Easeljs http://www.createjs.com/#!/EaselJS/download and Paper.js - http://paperjs.org/about/ Anybody who has any experience with any js-libraries for canvas? And any recommendations?

    Read the article

  • How do you make a 2D character in Javascript? [on hold]

    - by user36507
    How do you actually make a character in JS? I know you are supposed to use objects like var character = new Object(); (If the code has errors I apologise.)But how do you make the character move using keys WASD or let the character pick up items. What I want to know is that whether you need a canvas created specially for the character, how to add attributes and use keys to move it all in code. Also it would be great if you could help me on how to import pictures to JS to use it.

    Read the article

  • How far did DevExpress get with Javascript refactoring?

    - by MattX
    Over a year ago, I remember watching one of DevExpress evangelists previewing or at least promoting rich Javascript refactoring (beyond just limited intellisense) within the Visual Studio shell, I recall part of CodeRush/DevExpress product line. I was excited. On checking today (lmgtfy) I can find only very very limited reference to it, just one small italtic line about beta in product description, no videos, no blog posts, no community buzz. Was it dropped? Vapourware? Poor implementation that they dont even promote it? With Javascript arguably the most popular programming language ever and with a VM for it on practically every machine in last 10 years, why is editor support so poor? (Compared with those for Java and C#)? You see the likes of ScottGu bragging we now have jQuery intellisense but compare this to richness of C# support in the IDE it is a joke. Someone once said since there are many style of writing Javascript a rich IDE (beyond intellisense) with refactoring support is difficult, but if several engines can interpret/compile JS with same result surely it should be hard to analysis it to support stuff like rename variable, extract method, move to another namespace (or JS minic of it), etc.. Am I wrong?

    Read the article

  • Javascript errors from Google Adsense

    - by Arjun
    Hey there, On several of my adsense running sites, I have been getting the following errors: Unable to post message to [http://]googleads.g.doubleclick.net. Recipient has origin http://www.anekdotz.com. Unsafe JavaScript attempt to access frame with URL [http://]www.anekdotz.com/ from frame with URL [http://]googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9099580055602120&output=html&h=250&slotname=9210181593&w=300&flash=10.0.42&url=http%3A%2F%2Fwww.anekdotz.com%2F&dt=1269901036429&correlator=1269901036438&frm=0&ga_vid=711000587.1269901037&ga_sid=1269901037&ga_hid=654061172&ga_fc=0&u_tz=-240&u_his=2&u_java=1&u_h=900&u_w=1440&u_ah=878&u_aw=1436&u_cd=24&u_nplug=10&u_nmime=101&biw=1365&bih=806&eid=44901212&fu=0&ifi=1&dtd=153&xpc=Xkfk1oufPQ&p=http%3A//www.anekdotz.com. Domains, protocols and ports must match. (from the Chrome javascript console) The ads seem to show properly and it doesn't affect my native javascript code. However sometimes these errors seem to slow down page loading. How can I fix this problem? (I modified the URLs to let me post this as I'm a new user)

    Read the article

  • Eclipse Outline View - Visible JavaScript Categories in Eclipse?

    - by leeand00
    I just found an option in the little white down arrow in Eclipse that reads "Visible Categories..." How can I use this? It seems to me that it could be used to only show functions that have an @category in their comments, but I haven't been able to make that work. If it did work it would be incredibly useful for separating out Unit Tests from their common-functions and separating them from the setUp and tearDown methods, so what is it really for? By the way I'm editing a Javascript file in the Eclipse "Javascript Editor", I don't know if that makes any difference or not.

    Read the article

  • Problem with Java Applet <--> Javascript communication

    - by davr
    I'm having trouble getting a Java Applet to communicate with the Javascript code on the page the applet is hosted on. It works sometimes, but othertimes it throws an obscure exception, that googling for has not turned up any useful information, besides a few Java bug reports that were never resolved (thanks Sun). Here is the code I am using: JSObject win = JSObject.getWindow(this); Object[] args = new Object[1]; args[0] = "test argument"; String result = (String) win.call("testJSfunc", args); // XXX Here is the exception I get on the line marked // XXX. Note that it is intermittent. Often it works, but sometimes it does not, using the same exact code. Reloading the page repeatedly will produce the error pretty quickly. netscape.javascript.JSException: No registered plugin for applet ID 1 at sun.plugin2.main.client.MessagePassingJSObject.newJSException(Unknown Source) at sun.plugin2.main.client.MessagePassingJSObject.waitForReply(Unknown Source) at sun.plugin2.main.client.MessagePassingJSObject.call(Unknown Source) at TestApplet.testCallJS(TestApplet.java:159) at TestApplet.init(TestApplet.java:139) at sun.plugin2.applet.Plugin2Manager$AppletExecutionRunnable.run(Unknown Source) at java.lang.Thread.run(Unknown Source) Is there another more stable way of communicating between Java and Javascript that I should be using?

    Read the article

  • How to use javascript-xpath

    - by Nirmal Patel
    I am using Selenium RC with IE 6 and XPath locators are terribly slow. So I am trying to see if javascript-xpath actually speeds up things. But could not find enough/clear documentation on how to use native x- path libraries. I am doing the following: protected void startSelenium (String testServer, String appName, String testInBrowser){ selenium = new DefaultSelenium("localhost", 4444, "*" +testInBrowser, testServer+ "/"+ appName + "/"); echo("selenium instance created:"+selenium.getClass()); selenium.start(); echo("selenium instance started..." + testServer + "/" + appName +"/"); selenium.runScript("lib/javascript-xpath-latest-cmp.js"); selenium.useXpathLibrary("javascript-xpath"); selenium.allowNativeXpath("true"); } This results in speed improvement of XPath locator but the improvements are not consistent. On some runs the time taken for a locator is halved; while sometimes its randomly high. Am I missing any configuration step here? Would be great if someone who has had success with this could share their views and approach. Thanks, Nirmal

    Read the article

  • Getting gridview column value as parameter for javascript function

    - by newName
    I have a gridview with certain number of columns and the ID column where I want to get the value from is currently set to visible = false. The other column is a TemplateField column (LinkButton) and as the user clicks on the button it will grab the value from the ID column and pass the value to one of my javascript function. WebForm: <script language=javascript> function openContent(contentID) { window.open('myContentPage.aspx?contentID=' + contentID , 'View Content','left=300,top=300,toolbar=no,scrollbars=yes,width=1000,height=500'); return false; } </script> <asp:GridView ID="gvCourse" runat="server" AutoGenerateColumns="False" OnRowCommand="gvCourse_RowCommand" OnRowDataBound="gvCourse_RowDataBound" BorderStyle="None" GridLines="None"> <RowStyle BorderStyle="None" /> <Columns> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="lnkContent" runat="server" CommandName="View" CommandArgument='<%#Eval("contentID") %>' Text='<%#Eval("contentName") %>'> </asp:LinkButton> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="contentID" HeaderText="contentID" ReadOnly="True" SortExpression="contentID" Visible="False" /> <asp:BoundField DataField="ContentName" HeaderText="ContentName" ReadOnly="True" SortExpression="ContentName" Visible="False" /> </Columns> <AlternatingRowStyle BorderStyle="None" /> Code behind: protected void gvCourse_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "View") { intID = Convert.ToInt32(e.CommandArgument); } } protected void gvCourse_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { ((LinkButton)e.Row.FindControl("lnkContent")).Attributes.Add("onclick", "return openContent('" + intID + "');"); } } right not i'm trying to get the intID based on user selected item so when the user clicks on the linkbutton it will open a popup window using javascript and the ID will be used as querystring.

    Read the article

  • Jquery html grab + calling a controller action using javascript (ruby on rails)

    - by Zind
    Preface: I consider myself "slightly effective" in ruby on rails, and a complete novice in javascript. Also, yes, I have installed jQuery and associated plugins instead of the default Prototype library. I am in a situation where I am pulling in a table from off-site in an iframe (which is taking care of all internal JS for me) such that when a part of the table is clicked, a td will gain the class "active." What I would like to do is take this info (I'm assuming I can get it in a string format), and pass it to a method (in my controller, I'm assuming) which will parse the html, pull out the pertinent info, and then call a creation method in the same controller with the parsed info, the end result being a new item in that table. What I have so far is javascript which I believe is correct so far: <script type="text/javascript"> var ImportInfo = function() { var info = $('td.active').html(); // call controller action which parses the given string, //checks for existence in database, and adds new row if needed } $("#Import").click(ImportInfo); </script> and, of course, a button with id="ImportLocation." I have looked at this question: http://stackoverflow.com/questions/1334447/using-jquery-to-call-a-controller-action but am somewhat unsure as to how to call a controller action to pass the contents of the td as a string. Is this doable with the jQuery post method?

    Read the article

  • DHTML with Javascript and CSS is not working

    - by Dennis Hodapp
    So for some reason this unobtrusive javascript code is not working and I can't figure out for the life of me why it won't work. I dynamically change the className of a div element and therefore I expect the CSS to reflect that change. However it doesn't. Here's the simplified code. html: <head> <title>Your Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="us.js"></script> </head> <body> <div id="wrapper"> <h1 id="title">Your Page</h1> </div> </body> javascript: window.onload = function() { document.getElementById("wrapper").className = "2"; } css: #wrapper{ background-color: white; } #wrapper.1 { background-color: black; } #wrapper.2 { background-color: red; } #wrapper.3 { background-color: blue; } I look at the wrapper div in firebug and it shows the class being changed to "2". However, the webpage doesn't reflect that by changing the background color to be red. (it doesn't work with changing text color either. I tried that.). I know the CSS is correctly loading. So what is the problem?

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 54 55 56 57 58 59 60 61 62 63 64 65  | Next Page >