Search Results

Search found 24348 results on 974 pages for 'javascript overlay'.

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 274/974 | < Previous Page | 270 271 272 273 274 275 276 277 278 279 280 281  | Next Page >

  • How to cache dynamic javascript/jquery/ajax/json content with Akamai

    - by Starfs
    Trying to wrap my head around how things are cached on a CDN and it is new territory for me. In the document we received about sending in environment requests, it says "Dynamically-generated content will not benefit much from EdgeSuite". I feel like this is a simplified statement and there has to be a way to make it so you cache dynamically generated content if the tools are configured correctly. The site we are working with runs off a wordpress database, and uses javascript and ajax to build the pages, based on the json objects that php scripts have generated. The process - user's browser this URL, browser talks to edgesuite tools which will have cached certain pre-defined elements, and then requests from the host web server anything that is not cached, once edgesuite has compiled a combination of the two, it sends that information back to the browser. Can we not simply cache all json objects (and of course images, js, css) and therefore the web browser never has to hit the host server's database, at which point in essence, we have cached our dynamic content? Does anyone have any pointers on the most efficient configuration for this type of system -- Akamai/CDN -- to served javascript/ajax/json generated pages that ideally already hit pre-cached json data? Any and all feedback is welcome!

    Read the article

  • Replacement Text Syntax for JavaScript’s String.replace()

    - by Jan Goyvaerts
    A RegexBuddy user told me that he couldn’t easily find a detailed explanation of the replacement text syntax supported by the String.replace() function in JavaScript. I had to admin that my own web page about JavaScript’s regular expression support was also lacking. I’ve now added a new Replacement Syntax section that has all the details. I’ll summarize it here: $1: Text matched by the first capturing group or the literal text $1 if the regex has no capturing groups. $99: Text matched by the 99th capturing group if the regex has 99 or more groups. Text matched by the 9th capturing group followed by a literal 9 if the regex has 9 or more but less than 99 groups. The literal text $99 if the regex has fewer than 9 groups. $+: Text matched by the highest-numbered capturing group. Replaced with nothing if the highest-numbered group didn’t participate in the match. $&: Text matched by the entire regex. You cannot use $0 for this. $` (backtick): Text to the left of the regex match. $' (single quote): Text to the right of the regex match. $_: The entire subject string.

    Read the article

  • Good practices when optimizing HTML5/Javascript Game Developement [closed]

    - by hustlerinc
    I'm just starting out as a game developer and have created a few crappy but playable clones of classic games like pong, and bomberman. Being self taught (bless the internet) I do this by just stuffing in code to make the games work. Now I feel the time has come to create something complete, for this I need to know how a game is structured. I've searched on the web but there isn't that much to be found. The only "high-level" language I know is javascript so reading a tutorial or article based on C++ doesn't help me that much. I'm looking for good resource's pedagogically covering the theory and possibly examples (in Javascript or pseudo code that is understandable for a beginner) of how the game pieces fit together. From the start screen to asset loading and running the game loop. I'm not looking for anything complicated like reading through a 4000 line source code. All I want to learn is where, how and when the main parts of every game should be called. If you know any good resources to share, or maybe even have an answer for me I would deeply appreciate it.

    Read the article

  • How to call parent window function in chrome browser?

    - by Pier Luigi
    HI, I've surprisingly found problems, in Chrome browser, in calling window parent javascript functions. If I have a window with a javascript function defined in it <script type="text/javascript"> function dolink() { . . . } </script> and I have an iframe inside that window that makes this call using jquery <script type="text/javascript"> $(function() { $('a.arglink').click(function() { window.parent.dolink($(this).attr('href')); return false; }); }); </script> the call to dolink function doesn't work. Stepping with chrome javascript debugger, it appears that window.parent.dolink is undefined. It's by design or a mistake that I made? In Firefox and IE it works fine.

    Read the article

  • Multiple ASP.Net Controls On One Page

    - by Duracell
    We have created a User Control for ASP.Net. At any one time, a user's profile page could contain between one and infinity of these controls. The Control.ascx file contains quite a bit of javascript. When the control is rendered by .Net to HTML, you notice that it prints the javascript for each control. This was expected. I'd like to reduce the amount of HTML output by the server to increase page load times. Normally, you could just move the javascript to an external file and then you only need one extra HTTP request which will serve for all controls. But what about instances in the javascript where we have something like document.getElementById('<%= txtTextBox.ClientID %'); How would the javascript know which user control work with? Has anyone done something like this, or is the solution staring me in the face?

    Read the article

  • Validate Form with PHP AND Javascriipt?

    - by J M 4
    Is it possible to validate a form with PHP AND Javascript? I am currently able to do both using my existing form but only on an individual basis. My overall goal is this: Validate form using javascript client side and present any errors to the user immediately If javascript validation passes, a flag is created and then the PHP script can begin. When doing my javascript validation, i use the following code within the form tag: <form id="Enroll_Form" action="review.php" method="post" name="Enroll_Form" onsubmit="return Enroll_Form_Validator(this)" language="javascript"> if I want to process the PHP validation, I am forced to rename the action to the PHP_SELF file (or simply the same file name i'm using) and remove the 'onsubmit' function. Any ideas?

    Read the article

  • What is wrong with selecting with my drop down element.

    - by Babiker
    <html> <head> <script type='text/javascript' language='javascript' src="http://localhost/javascript/jquery-1.4.2.js"> </script> <script type='text/javascript' language='javascript'> $(document).ready(function(){ $("#button").mousedown(function(){ dropDownMenu = $("#dropDownMenu"); alert(dropDownMenu.options[0].text); }); }); </script> </head> <body> <select id="dropDownMenu"><option>Test</option></select><br> <input id="button" type="button"> </body> </html>

    Read the article

  • Capture STDOUT/STDERR of Windows Applictation

    - by Mark Roddy
    I am using an open source application (conkeror) which is configured via a file containing javascript. Any issues with the javascript is printed to the console. This is fine under Linux as all the information is shown as long as the it is started from a shell. However, under Windows none of the information is show even when started from a shell. Is there a way to make this information displayed in the shell or to capture it in say a file?

    Read the article

  • Performing full screen grab in windows

    - by Steven Lu
    I am working an idea that involves getting a full capture of the screen including windows and apps, analyzing it, and then drawing items back onto the screen, as an overlay. I want to learn image processing techniques and I could get lots of data to work with if I can directly access the Windows screen. I could use this to build automation tools the likes of which have never been seen before. More on that later. I have full screen capture working for the most part. HWND hwind = GetDesktopWindow(); HDC hdc = GetDC(hwind); int resx = GetSystemMetrics(SM_CXSCREEN); int resy = GetSystemMetrics(SM_CYSCREEN); int BitsPerPixel = GetDeviceCaps(hdc,BITSPIXEL); HDC hdc2 = CreateCompatibleDC(hdc); BITMAPINFO info; info.bmiHeader.biSize = sizeof(BITMAPINFOHEADER); info.bmiHeader.biWidth = resx; info.bmiHeader.biHeight = resy; info.bmiHeader.biPlanes = 1; info.bmiHeader.biBitCount = BitsPerPixel; info.bmiHeader.biCompression = BI_RGB; void *data; hbitmap = CreateDIBSection(hdc2,&info,DIB_RGB_COLORS,(void**)&data,0,0); SelectObject(hdc2,hbitmap); Once this is done, I can call this repeatedly: BitBlt(hdc2,0,0,resx,resy,hdc,0,0,SRCCOPY); The cleanup code (I have no idea if this is correct): DeleteObject(hbitmap); ReleaseDC(hwind,hdc); if (hdc2) { DeleteDC(hdc2); } Every time BitBlt is called it grabs the screen and saves it in memory I can access thru data. Performance is somewhat satisfactory. BitBlt executes in 50 milliseconds (sometimes as low as 33ms) at 1920x1200x32. What surprises me is that when I switch display mode to 16 bit, 1920x1200x16, either through my graphics settings beforehand, or by using ChangeDisplaySettings, I get a massively improved screen grab time between 1ms and 2ms, which cannot be explained by the factor of two reduction in bit-depth. Using CreateDIBSection (as above) offers a significant speed up when in 16-bit mode, compared to if I set up with CreateCompatibleBitmap (6-7ms/f). Does anybody know why dropping to 16bit causes such a speed increase? Is there any hope for me to grab 32bit at such speeds? if not for the color depth, but for not forcing a change of screen buffer modes and the awful flickering.

    Read the article

  • What makes a Winform position initially stale?

    - by msorens
    The code below demonstrates a very simple problem; I am hoping that I am just missing a setting that someone might be able to reveal. Goal (1) Launch main winform (MainForm). (2) Press button to display secondary winform (ShadowForm) that is semi-transparent and should exactly overlay MainForm. What Actually Happens Scenario 1: Launch main winform then press button: ShadowForm displays with correct size but incorrect location, lower and to the right (as if it was cascaded). Press button to close ShadowForm again. Press button once more to reopen ShadowForm and now it is in the correct position, covering MainForm. Scenario 2: Launch main winform, move it around, then press button: ShadowForm displays with correct size but incorrect location (where the MainForm was before moving it). Press button to close; press again to reopen and now ShadowForm is in the correct position. using System; using System.Windows.Forms; namespace LocationTest { static class Program { static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new MainForm()); } } public class MainForm : Form { ShadowForm shadowForm = new ShadowForm(); Button button1 = new Button(); System.ComponentModel.IContainer components = null; public MainForm() { this.SuspendLayout(); this.button1.Location = new System.Drawing.Point(102, 44); this.button1.Size = new System.Drawing.Size(75, 23); this.button1.Text = "button1"; this.button1.Click += new System.EventHandler(this.button1_Click); this.ClientSize = new System.Drawing.Size(292, 266); this.Controls.Add(this.button1); this.ResumeLayout(false); } private void button1_Click(object sender, EventArgs e) { if (shadowForm.Visible) { shadowForm.Hide(); } else { shadowForm.Size = Size; // this always works shadowForm.Location = Location; // this fails first time, but works second time! shadowForm.Show(); } } protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } } public class ShadowForm : Form { private System.ComponentModel.IContainer components = null; public ShadowForm() { this.SuspendLayout(); this.BackColor = System.Drawing.Color.Black; this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; this.Opacity = 0.5; this.Click += new System.EventHandler(this.ShadowForm_Click); this.ResumeLayout(false); } private void ShadowForm_Click(object sender, EventArgs e) { Hide(); } protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } } }

    Read the article

  • Toggling between instances of NiftyPlayer on a page - won't stop playing when hidden on IE

    - by Ashley
    Hi, i've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed. The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox. In IE it will only auto-start and NOT auto-stop. This is what I would like to solve. This is an example HTML with link and player <a href="Beat The Radar - Misunderstood What You Said.mp3" onclick="toggle_visibility('player662431');return false;" class="mp3caption">Misunderstood What You Said</a> <div id="player662431" class="playerhide"><embed src="http://www.xxx.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> Here is the javascript (i've got jquery installed to let me hide all the open players on this page apart from the new one) function toggle_visibility(id) { $('.playerhide').hide(); var e = document.getElementById(id); e.style.display = 'block'; } I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string) There is some javascript that comes with NiftyPlayer to allow this EG niftyplayer('niftyPlayer1').play() there is also a stop method. I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another) I also would like to be able to do niftyplayer('niftyPlayer1').stop() to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed? Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it! Thanks

    Read the article

  • JQuery set img src depending on where you click

    - by Anna
    Hello ! I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked... I had something like that : <script type="text/javascript"> function viewImage(src, legende) { document.getElementById("imageBig").src = "images/photos/"+src; document.getElementById("legend").innerHTML = legende; } </script> and in html simply : things like that : <li><a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')"><img src="images/photos/carre-09.jpg" alt="" /></a> <a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')"><img src="images/photos/carre-03.jpg" alt="" /></a></li> <li><a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')"><img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" /></a> <a href="#centre" onclick="javascript:viewImage('01.jpg','')"><img src="images/photos/carre-01.jpg" alt="" /></a></li> so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument... but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked... stuck here : $(document).ready(function(){ $('#ulPhotos').click(function() { var newSrc= $('#imageBig').attr("src", "images/photos/11.jpg"); }); }); I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos... I hope I'm clear enough sorry !

    Read the article

  • How can I refactor these script tags?

    - by Shpigford
    I have the following script tags in the <head> so that they don't prompt any security errors when going back and forth between SSL and non-SSL pages. But it just looks hairy. Any way I can combine them or reduce some of the code? <script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>\<\/script>"].join(''));</script> <script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","html5shiv.googlecode.com/svn/trunk/html5.js' type='text/javascript'>\<\/script>"].join(''));</script> <script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","use.typekit.com/12345.js' type='text/javascript'>\<\/script>"].join(''));</script>

    Read the article

  • Dynamically adjust padding on an image?

    - by Cory
    What I'm basically attempting to do is dynamically change a padding value for a scrubber image based on player position data provided by an app. I have been able to leverage the provided number to dynamically increase the width of a progress overlay image and create a progress bar, but I would like a scrubber diamond at the leading edge of the progress bar. To do this, I have positioned the scrubber diamond at the same starting point as the progress overlay and would like to increase the padding on the diamond at the same rate as the width is increasing for the progress overlay, allowing them to pace each other with the scrubber diamond moving as the song plays. Any help with the script necessary to manipulate padding-left dynamically would be very much appreciated. var progress = Ecoute.playerPosition(); var width = 142.5 / length * progress + 1.63; EcouteSel('Progression').width = width.toString(); EcouteSel('Scrubber').style('padding-left', 'width'); We define progress as the player position, width as a function of the progress and then apply that function to the ID applied to the progress over lay image. But how do I accomplish that for padding-left? style.paddingLeft ...based functions have broken the controller outright. I'm at a loss and any help would be appreciated.

    Read the article

  • Constant isolate of hovered elements

    - by nailer
    I'm trying to make an element isolation tool, where: All elements are shaded Selected elements, while hovered, are not shaded Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers: $(function() { window.alert('started'); $('<div id="overlay" />').hide().appendTo('body').fadeIn('slow'); $("p").hover( function () { $(this).css( {"z-index":5} ); }, function () { $(this).css( {"z-index":0} ); } ); Alternatively, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below: $(function() { $("a").click(function() { alert("Hello world!"); }); // Mask whole page $(document).mask("#222"); // Mask and expose on however / unhover $("p").hover( function () { $(this).expose(); }, function () { $(this).mask(); } ); }); Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!

    Read the article

  • Java scripts conflict on my home page

    - by naveen
    <script type="text/javascript" src="jquery-1.js"></script> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="slideshow.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, '2.jpg': { caption: 'A Ceibu tree.' }, '3.jpg': { caption: 'The view from Volcano Maderas.' }, '4.jpg': { caption: 'Beer and ice cream.' } }; var myShow = new Slideshow('show', data, {controller: true, height: 400, hu: 'images/', thumbnails: true, width: 500}); }); //]]> </script> <script type="text/javascript"> $(document).ready(function() { //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); }); </script> <!--[if lt IE 7]> <script type="text/javascript" src="unitpngfix.js"></script> <![endif]-->

    Read the article

  • What's the difference between UI development and front-end development?

    - by Nick Lowman
    I'm a front-end developer and really enjoy jQuery and JavaScript. I've built a lot a websites, done some good jQuery work and built a few JavaScript based applications and would really like to get in UI development. Or so I thought. I guessed it would be pretty similar to what I already do except maybe a little more JavaScript heavy but when I looked into it all the job specs said I needed to know about Scrum or Agile development, knowledge of testing frameworks and a good knowledge of JavaScript frameworks and custom events. So, from the specs I get the idea that a UI developer is actually a dedicated JavaScript developer. Is that the case? I understand (with much help from the users on stackoverflow), about JavaScript OO, inheritance, closures, custom events, debugging in Firefox or Aptana etc, and the people I work with seem to think I pretty OK at what I do but clearly my knowledge is not good enough to go for UI jobs. If anyone could tell me a little more about UI development and if there are any good resources for learning about it I would be most grateful as I couldn't find much on the internet.

    Read the article

  • Apache returns 304, I want it to ignore anything from client and send the page

    - by Ayman
    I am using Apache HTTPD 2.2 on Windows. mod_expires is commented out. Most other stuff are not changed from the defaults. gzip is on. I made some changes to my .js files. My client gets one 304 response for one of the .js files and never gets the rest. How can I force Apache to sort of flush everything and send all new files to the client? The main html file includes these scripts in the head section of the main page: <script src="js/jquery-1.7.1.min.js" type="text/javascript"> </script> <script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script> <script src="js/trex.utils.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.core.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.codes.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.emv.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.b24xtokens.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.iso.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.span2.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.amex.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.abi.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.barclays.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.bnet.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.visa.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.atm.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.apacs.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.pstm.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.stm.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.thales.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.fps-saf.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.fps-iso.js" type="text/javascript" charset="utf-8"></script> <script src="js/trex.app.js" type="text/javascript" charset="utf-8"></script> Apache access log has the following: [07/Jul/2013:16:50:40 +0300] "GET /trex/index.html HTTP/1.1" 200 2033 "-" [07/Jul/2013:16:50:40 +0300] "GET /trex/js/trex.fps-iso.js HTTP/1.1" 304 [08/Jul/2013:07:54:35 +0300] "GET /trex/index.html HTTP/1.1" 304 - "-" [08/Jul/2013:07:54:35 +0300] "GET /trex/js/trex.iso.js HTTP/1.1" 200 12417 [08/Jul/2013:07:54:35 +0300] "GET /trex/js/trex.amex.js HTTP/1.1" 200 6683 [08/Jul/2013:07:54:35 +0300] "GET /trex/js/trex.fps-saf.js HTTP/1.1" 200 2925 [08/Jul/2013:07:54:35 +0300] "GET /trex/js/trex.fps-iso.js HTTP/1.1" 304 Chrome request headers are as below: THis file is ok, latest: Request URL:http://localhost/trex/js/trex.iso.js Request Method:GET Status Code:200 OK (from cache) THis file is ok, latest: Request URL:http://localhost/trex/js/trex.amex.js Request Method:GET Status Code:200 OK (from cache) This one is also ok: Request URL:http://localhost/trex/js/trex.fps-iso.js Request Method:GET Status Code:200 OK (from cache) The rest of the scrips all have 200 OK (from cache).

    Read the article

  • Calling AS3 function from html link - Javascript? php? swfaddress?

    - by wdense51
    I have an actionscript function that loads an external swf and is currently linked to a button in the same swf... function btnClick(event:MouseEvent):void{ SoundMixer.stopAll(); removeChild(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onSWFLoaded); loader.load(movieSWF) loader.x=Xpos loader.y=Ypos addChild(loader) } button.addEventListener(MouseEvent.CLICK,btnClick); I'm wondering if there is a way to call this function from a link on the page that the swf is housed on. I'm guessing javascript, php or swfaddress would be the most likely way, but I'm unbelievably new to all this so I'm not sure where to start or how to go about it. Any help would be appreciated.

    Read the article

  • How to get the height of an iframe with javascript from inside the iframe? What about pages with multiple iframes?

    - by VKen
    Hi all, Is there a way to detect the height and width of an iframe, by executing a script from inside the iframe? I need to dynamically position some elements in the iframe according to the different height/width of the iframe. Would there be any difference if there are multiple iframes in the same page? i.e. each iframe wants to find its own dimensions. Javascript or jquery solutions welcomed. Thanks! <iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>

    Read the article

  • FAQ: GridView Calculation with JavaScript - Formatting and Validation

    - by Vincent Maverick Durano
    In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox. Here are the code blocks below: ASPX Source:   <!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></title> <script type="text/javascript"> function CalculateTotals() { var gv = document.getElementById("<%= GridView1.ClientID %>"); var tb = gv.getElementsByTagName("input"); var lb = gv.getElementsByTagName("span"); var sub = 0; var total = 0; var indexQ = 1; var indexP = 0; var price = 0; for (var i = 0; i < tb.length; i++) { if (tb[i].type == "text") { ValidateNumber(tb[i]); price = lb[indexP].innerHTML.replace("$", "").replace(",", ""); sub = parseFloat(price) * parseFloat(tb[i].value); if (isNaN(sub)) { lb[i + indexQ].innerHTML = "0.00"; sub = 0; } else { lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ; } indexQ++; indexP = indexP + 2; total += parseFloat(sub); } } lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", "."); } function ValidateNumber(o) { if (o.value.length > 0) { o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers } } function isThousands(position) { if (Math.floor(position / 3) * 3 == position) return true; return false; }; function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) { var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100)); theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2); theNumber = "" + Math.floor(theNumber); var theOutput = theCurrency; for (x = 0; x < theNumber.length; x++) { theOutput += theNumber.substring(x, x + 1); if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) { theOutput += theThousands; }; }; theOutput += theDecimal + theDecimalDigits; return theOutput; } </script> </head> <body> <form id="form1" runat="server"> <asp:gridview ID="GridView1" runat="server" ShowFooter="true" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="RowNumber" HeaderText="Row Number" /> <asp:BoundField DataField="Description" HeaderText="Item Description" /> <asp:TemplateField HeaderText="Item Price"> <ItemTemplate> <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox> </ItemTemplate> <FooterTemplate> <b>Total Amount:</b> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Sub-Total"> <ItemTemplate> <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label> </FooterTemplate> </asp:TemplateField> </Columns> </asp:gridview> </form> </body> </html> Code Behind Source:   public partial class GridCalculation : System.Web.UI.Page { private void BindDummyDataToGrid() { DataTable dt = new DataTable(); DataRow dr = null; dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); dt.Columns.Add(new DataColumn("Description", typeof(string))); dt.Columns.Add(new DataColumn("Price", typeof(decimal))); dr = dt.NewRow(); dr["RowNumber"] = 1; dr["Description"] = "Nike"; dr["Price"] = "1000"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 2; dr["Description"] = "Converse"; dr["Price"] = "800"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 3; dr["Description"] = "Adidas"; dr["Price"] = "500"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 4; dr["Description"] = "Reebok"; dr["Price"] = "750"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 5; dr["Description"] = "Vans"; dr["Price"] = "1100"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 6; dr["Description"] = "Fila"; dr["Price"] = "200"; dt.Rows.Add(dr); //Bind the Gridview GridView1.DataSource = dt; GridView1.DataBind(); } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyDataToGrid(); } } } Running the code above will display something like this: On initial load After entering the quantity in the TextBox That's it! I hope someone find this post useful! Technorati Tags: ASP.NET,C#,ADO.NET,JavaScript,GridView

    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 | 270 271 272 273 274 275 276 277 278 279 280 281  | Next Page >