While no option is perfect, there are a few choices:

1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444

2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/

3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/

4.) There is the option to display flash for IE8 and below.

5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.

Based on your reason for the animation - I would recomend 4 or 5.



There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):

 1. Chrome Frame: if you&#39;re going to get an extension, get that one
 2. Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back. 

If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg. 

You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.



The best option probably is to diplomatically encourage them to use a real browser, but then it&#39;s not always possible for those who live under the rule of an unskilled IT department ;)





Just wondering if anyone knows whether it is possible to format the content of an element as currency using only CSS. It would be nice to have how the value is presented in CSS if possible, can&#39;t find anything though so I&#39;m not holding my breath :)

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .dollars:before { content:&#39;$&#39;; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Pure CSS: &lt;span class=&quot;dollars&quot;&gt;25153.3&lt;/span&gt;
        &lt;br /&gt;
        Ideal format: &lt;span&gt;$25,153.30&lt;/span&gt;
    &lt;/body&gt;
    &lt;/html&gt;

That example comes out as:

_Pure CSS: $25153.3_

_Ideal format: $25,153.30_

Also I&#39;m aware that it&#39;s fairly trivial using javascript - http://css-tricks.com/snippets/javascript/format-currency/.

Formatting a number as currency using CSS

Steve Sanderson gave a very interesting presentations at Techdays 2012 in the Netherlands. In one of them [he presented](http://www.techdays.nl/AgendaDetail.aspx?cid=2159&amp;lang=en) a library that he used for client-server communication in MVC application: Upshot.

I was really amazed how easy it was to use it, so I wanted to download and test it. I found the download link here [through NuGet](http://nuget.org/packages/Upshot), but I cannot find any documentation. Does anyone have something that works? I would also appreciate the sample code that Steve showed as during presentation.

*EDIT:*

I found the online presentation I attended at Techdays. It&#39;s soooo much worth seeing. You will get a glance of what upshot is capable of and also get an idea how to start with it. Good luck and have fun.

The link: http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159


Where can I find Upshot.js examples and documentation?

I created animation in flash and converted it into HTML5 using [Swiffy](http://www.google.com/doubleclick/studio/swiffy/).

I think it&#39;s using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.

Thanks!

SVG support for Internet Explorer 8 and below

I created animation in flash and converted it into HTML5 using <a href="http://www.google.com/doubleclick/studio/swiffy/" target="_blank" rel="noopener noreferrer">Swiffy</a>.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!

I want to get the absolute value of a number in JavaScript. That is, drop the sign. 
I know mathematically I can do this by squaring the number then taking the square root, but I also know that this is horribly inefficient. 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    x = -25
    x = x * x 
    x = Math.sqrt(x)
    console.log(x)

&lt;!-- end snippet --&gt;


Is there a way in JavaScript to simply drop the sign of a number that is more efficient than the mathematical approach?

Get the absolute value of a number in Javascript

I need to write a few extension methods in JS.  I know just how to do this in C#.  Example:

    public static string SayHi(this Object name)
    {
        return &quot;Hi &quot; + name + &quot;!&quot;;
    }

and then called by:

    string firstName = &quot;Bob&quot;;
    string hi = firstName.SayHi();

How would I do something like this in JavaScript?

How do I write an extension method in JavaScript?

I have a standard jQuery plugin set up that creates default settings at the top:

    jQuery.fn.myPlugin = function(options) { 
        var defaults = {  
            starts: &quot;0px,0px&quot;,
            speed: 250, ...
        };
        o = $.extend(defaults, options);
    }

I have another variable called `numberOfObjects`.

I&#39;m trying to loop through the default variables. For each object found (from `numberOfObjects`) I need to duplicate the value of the variable value. So, if the `numberOfObjects` variable is 3, the `defaults.starts` should be `0px,0px &gt; 0px,0px &gt; 0px,0px`. The &amp; gt; is used to split values.

This is what I currently have. `X` represents the variable name inside defaults. `Y` represents the variable for the current value of `x`. I&#39;ve gotten this far and have no clue what to do next.

	for (x in defaults) {   // x is defaults.x
		defaults.x = defaults.x + &quot; &gt; y&quot;;
	}


Iterate over Object Literal Values

Given the object:

    var firstObject = {
        key1 : &#39;value1&#39;,
        key2 : &#39;value2&#39;
    };

**how can I copy the properties inside another object** (`secondObject`) like this:

    var secondObject = {
        key1 : &#39;value1&#39;,
        key2 : &#39;value2&#39;,
        key3 : &#39;value3&#39;,
        key4 : &#39;value4&#39;
    };

using a reference to the `firstObject`? Something like this:

    var secondObject = {
        firstObject,
        key3 : &#39;value3&#39;,
        key4 : &#39;value4&#39;
    };

(this doesn&#39;t work... I put it just to show in big lines how I would like to structure the code).

Is a solution possible **without** using any JavaScript frameworks?

How to duplicate object properties in another object?

I want to convert the following string to the provided output. 

    Input:  &quot;\\test\red\bob\fred\new&quot;
    Output: &quot;testredbobfrednew&quot;

I&#39;ve not found any solution that will handle special characters like `\r`, `\n`, `\b`, etc.

Basically I just want to get rid of anything that is not alphanumeric. Here is what I&#39;ve tried...

    Attempt 1: &quot;\\test\red\bob\fred\new&quot;.replace(/[_\W]+/g, &quot;&quot;);
    Output 1:  &quot;testedobredew&quot;

    Attempt 2: &quot;\\test\red\bob\fred\new&quot;.replace(/[&#39;`~!@#$%^&amp;*()_|+-=?;:&#39;&quot;,.&lt;&gt;\{\}\[\]\\\/]/gi, &quot;&quot;);
    Output 2:  &quot;testedobred [newline] ew&quot;
    
    Attempt 3: &quot;\\test\red\bob\fred\new&quot;.replace(/[^a-zA-Z0-9]/, &quot;&quot;);
    Output 3:  &quot;testedobred [newline] ew&quot;
    
    Attempt 4: &quot;\\test\red\bob\fred\new&quot;.replace(/[^a-z0-9\s]/gi, &#39;&#39;);
    Output 4:  &quot;testedobred [newline] ew&quot;

One other attempt with multiple steps

    function cleanID(id) {
    	id = id.toUpperCase();
    	id = id.replace( /\t/ , &quot;T&quot;);
    	id = id.replace( /\n/ , &quot;N&quot;);
    	id = id.replace( /\r/ , &quot;R&quot;);
    	id = id.replace( /\b/ , &quot;B&quot;);
    	id = id.replace( /\f/ , &quot;F&quot;);
    	return id.replace( /[^a-zA-Z0-9]/ , &quot;&quot;);
    }

with results

    Attempt 1: cleanID(&quot;\\test\red\bob\fred\new&quot;);
    Output 1: &quot;BTESTREDOBFREDNEW&quot;

Any help would be appreciated.

Working Solution:

    Final Attempt 1: return JSON.stringify(&quot;\\test\red\bob\fred\new&quot;).replace( /\W/g , &#39;&#39;);
    Output 1: &quot;testredbobfrednew&quot;


Remove not alphanumeric characters from string

If I have a variable to pass through a URL and it has a question mark in it, do I just need to escape the question mark?

If not, how can I make sure it passes through like it&#39;s supposed to?





Question mark in the middle of a URL variable

I am having a problem with removing linebreaks after the `&lt;h1&gt;` tag, as everytime it prints, it adds a line break straight after it, so something like `&lt;h1&gt;Hello World!&lt;/h1&gt; &lt;h2&gt;Hello Again World!&lt;/h2&gt;` prints out like this:

    Hello World!

    Hello Again World!

I am unsure on what tags I need to change in CSS, but I expect it&#39;s something to do with the padding or margins

I also want to keep the vertical padding if at all possible.

Removing newline after &lt;h1&gt; tags?

My understanding is that `width: 100%` lets the element&#39;s width be the same as its parent&#39;s, whereas `width: inherit` does that only when the parent&#39;s width is explicitly specified. Is this understanding correct?

If so, it looks to me that when `width: inherit` works, then `width: 100%` would always work, so you could always use the latter. Then, what is the purpose of writing `width: inherit`? When does it become useful?

If my understanding is wrong, what is the difference between the two?

Similarly with `height`.

width:100% vs. width:inherit

I need to disable textarea horizontal resize. Sometimes I want to allow vertical resize on the textarea. 

Whenever I create a contact us page the textarea is making  my design ugly.

could any one give me a solution to disable it please?

How to disable textarea resizing?

How can I view the contents of HTML5 local storage in IE? Chrome and FireFox provide a way through their developer tools to view the contents of local storage but I couldn&#39;t find that information using IE9 developer tool.

Viewing local storage contents on IE

I&#39;ve read conflicting information regarding Internet Explorer&#39;s silly CSS limits. I am (think I am) understanding that you can only have 31 `&lt;style&gt;` and `&lt;link&gt;` tags (combined), and that each sheet can have up to 31 `@import`-s (so 31 `&lt;link&gt;`-s, each to 31 `@import`-s is fine, albeit insane).

However, the 4095 rule is less clear - is this 4095 rules per document, or per sheet? For instance, can I `&lt;link&gt;` to two stylesheets, each with 4000 rules, and have it work, or will this break the limit?

### 3rd party edit 2018

On this [msdn blog post stylesheet-limits-in-internet-explorer][1] further information is given.


  [1]: https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/

Internet Explorer&#39;s CSS rules limits

I&#39;m using Javascript&#39;s `self.open()` to open a link in a new window and i&#39;d like that window to be maximized. I tried the `fullscreen=yes` option, which really doesn&#39;t do what I want. I am using below code:

    self.open(pageLoc,popUpName,&#39;height=1600,width=1800,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=yes&#39;); 
    
If i also mention `fullscreen=yes`, then window opens up like you press F11. But i don&#39;t want it that. What i want is when i double click on **IE** and click maximize icon on top right corner.

As i have given the `height` and `width` value so large, it is close to maximized window but not actual maximized window. (the reason i am saying this because
    even now if i click maximize button, it further expans little bit)

How to open maximized window with Javascript?

Aim of this guide:

*  Running **multiple unmodified native** versions of Internet Explorer,  
  Safari, Opera, Chrome and Firefox **on a single machine, side-by-side**.

Covered in [part 1]:

* Table of contents
* Which browsers have to be tested? 
* How to create a Windows XP VM which boots quickly, and never expires?
* Where can the necessary software (VM image, browsers, ... ) be downloaded?

Also covered in [part 2]:

* Installation and configuration guide for IE, Firefox, Opera, Chrome and Safari.
* Developer tools and shortcuts.
* **Time and disk space costs**.

*Many sections are independent. Eg, instructions on running multiple versions of a browser are generally applicable.*

  [part 1]: https://stackoverflow.com/questions/10541225/cross-browser-testing-all-major-browsers-on-one-machine#10541470
  [part 2]: https://stackoverflow.com/questions/10541225/cross-browser-testing-all-major-browsers-on-one-machine#10541484

Cross-browser testing: All major browsers on ONE machine

I am testing a highly-customized web application in Internet Explorer 10 on Windows 8, since it is an up and coming release, and will likely be using my application some day. Take a look at this sample screenshot of some text input controls from the application:

![enter image description here][1]

Is there a way, either within HTML or CSS, to remove the action icons that are located to the right of the text and password input controls?

Thank you for your time.


  [1]: http://i.stack.imgur.com/GQ5Yh.png

Internet Explorer 10 Windows 8 Remove Text Input and Password Action Icons

I have the following code:

      &lt;span&gt;
         &lt;svg height=&quot;32&quot; version=&quot;1.1&quot; width=&quot;32&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;&quot;&gt;
            &lt;desc&gt;&lt;/desc&gt;
            &lt;defs/&gt;
            &lt;path style=&quot;&quot; fill=&quot;#333333&quot; stroke=&quot;none&quot; d=&quot;M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z&quot;/&gt;
          &lt;/svg&gt;&amp;nbsp;
      &lt;/span&gt;

Is it possible to change the fill color of the SVG path with CSS or some other means without actually changing it inside the path tag?

Can I change the fill color of an svg path with CSS?

I want to convert SVG images to PNG files with transparent background and anti-aliased edges (using semi-transparent pixels). Unfortunately I can&#39;t get ImageMagick to do the anti-aliasing, the edges always look terrible. Here&#39;s what I tried:

    convert +antialias -background transparent  in.svg -resize 25x25 out.png

Any ideas or a different command line tool I could use?

Convert SVG to transparent PNG with antialiasing, using ImageMagick

I have tried many variants of the `svg` parameters, but have had no joy in scaling this particular SVG.

I am trying to contain [this SVG][1] into a container element that controls the size of the SVG.

I&#39;m aiming for 500x309px.

What combination of `width`, `height`, `viewBox` and `preserveAspectRatio` can help me achieve this without having the SVG masked or cropped?


  [1]: http://en.wikipedia.org/wiki/File:Blank_US_Map.svg

Scale SVG to container without mask/crop

I am about to create my first Android **native** (so not browser based) app and looking for some good practices regarding icon creating/provisioning.
Since it should support multiple devices/resolutions I thought it is best to use SVG to create them. There is at least this lib: http://code.google.com/p/svg-android/ that promises to offer support for SVG on Android.

So far, I have not found resources describing the usage of this or another library as a means to render SVG Icons on the device, so I am a bit reluctant in using it. The best I have seen so far is using SVG as the source format for pre-rendering png based icons in different resolutions.

So my questions is: Are SVG icons a good option to use directly on the device without a png pre-rendering step (does it work at all), and if, why does nobody seem to use this approach?


What are best practices for using SVG icons on Android?

I have a SVG file that has a defined size of 16x16. When I use ImageMagick&#39;s convert program to convert it into a PNG, then I get a 16x16 pixel PNG which is way too small:

    convert test.svg test.png

I need to specify the pixel size of the output PNG. `-size` parameter seems to be ignored, `-scale` parameter scales the PNG **after** it has been converted to PNG. The best result up to now I got by using the `-density` parameter:

    convert -density 1200 test.svg test.png

But I&#39;m not satisfied, because I want to specify the output size in pixels without doing math to calculate the density value. So I want to do something like this:

    convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

So what is the magic parameter I have to use here? 

How to convert a SVG to a PNG with ImageMagick?

I am having a hard time  collecting publically available statistics on the percentage of web users that browse with JavaScript disabled.

[Yahoo has published data from 2010][1] and [R. Reid published data from 2009][2] (picked from a site he had access to). 

The findings from Yahoo were rather interesting at that time:

&gt; We took a combination of access logs and beacon data (previously
&gt; included in the page) and filtered out all of the automated requests,
&gt; leaving us with a set of requests we could confirm were sent by actual
&gt; users. This data, which is completely anonymous, gave us a good
&gt; indication of traffic patterns in several countries.
&gt; 
&gt; After crunching the numbers, we found a consistent rate of
&gt; JavaScript-disabled requests hovering around 1% of the actual visitor
&gt; traffic, with the highest rate being roughly 2 percent in the United
&gt; States and the lowest being roughly 0.25 percent in Brazil. All of the
&gt; other countries tested showed numbers very close to 1.3 percent.
&gt; 
&gt; ![Yahoo browser percentage with JavaScript disabled, 2010][3]


This is about what I could find so far. But since this data is getting old, I wonder what the percentages are today. 

I also looked at [Statcounter][4], which seems to be the only company left to still openly publish browser statistics. But they do not publish data about JavaScript. I know that [W3schools also publish stats][5], but since the target is aimed at developers, this data is extremely biased and therefore not interesting for me. (it has to be representative for ordinary users).


I, therefore, ask you to provide:

 * links to any open, freely available statistics which touches this area
 * Your own stats, preferably from larger sites with do not target developers



  [1]: http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/
  [2]: http://blog.strictly-software.com/2009/09/javascript-usage-browser-breakdown.html
  [3]: http://i.stack.imgur.com/fpIkl.jpg
  [4]: http://gs.statcounter.com/
  [5]: http://www.w3schools.com/browsers/browsers_stats.asp

Browser statistics on JavaScript disabled

I would like to put

    var minValue = 0;
    if ( typeof callback == &#39;function&#39; ) {
        setTimeout( callback, minValue );
    }

this code when I implement callback function with JavaScript.

But I&#39;ve found that modern browsers and some old browsers 

have different minimum timeout value.

I know that Zero cannot be minimum value.

**What would be minimum value of setTimeout for**

**modern browsers and some old browsers for compatibility issues?**

What is minimum millisecond value of setTimeout?

See http://jsfiddle.net/aJ333/1/ in Chrome and then in either Firefox or Internet Explorer. The image is originally 120px, and I&#39;m scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.

The image is a PNG and it has an alpha channel (transparency).

Here&#39;s the relevant code:

HTML:

    &lt;a href=&quot;http://tinypic.com?ref=2z5jbtg&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://i44.tinypic.com/2z5jbtg.png&quot; border=&quot;0&quot; alt=&quot;Image and video hosting by TinyPic&quot;&gt;
    &lt;/a&gt;​

CSS:

    a {
        width: 28px;
        height: 28px;
        display: block;
    }

    img {
        max-width: 100%;
        max-height: 100%;
        image-rendering: -moz-crisp-edges;
        -ms-interpolation-mode: bicubic;
    }

The `image-rendering` and `-ms-interpolation-mode` lines of CSS didn&#39;t seem to do anything, but I found them online while doing some research on the problem.

Image scaling causes poor quality in firefox/internet explorer but not chrome

I have installed a BigBlueButton server, and it seems to work fine in that I
can access the BBB demo and also access it from a PHP application
using the BBB API.

The problem starts when I try to open the BBB client in a modal window
created using the Colorbox jQuery plug in using the iframe content type. It works as expected whenI use Firefox or Google Chrome in that the BBB client opens and the
user is joined to the meeting as either moderator or attendee.

**Problem 1:** When I try to do so in Internet Explorer or Safari, the
modal window does not open the BBB client. Instead it takes me to the
BBB demo page on my BBB server. And I cannot seem to join even the BBB
demo in the modal window. But it gets worse. I have added debugging
code to make sure that the url being used in the modal window to call
the BBB client is correct. If I  simply take this URL  and put it into
a new tab in Internet Explorer or Safari, then the BBB client opens as
expected. It just does not seem to be doing so in the modal window.

**Problem 2:** After I have accessed the BBB client using the URL in
another tab in the browser, when I reload my PHP application, and
access the page again, the BBB client will now load as expected in the
modal window generated with Colorbox. (So, the URL generated by the
BBB API is correct). This behavior is consistent for IE and Safari.)
So, for some reason, accessing the BBB client in browser tab seems to
be necessary before IE or Safari will allow me to access it in a modal
window generated by Colorbox. Also, note that once I have accessed a
BBB client in the browser tab, then I can access any meeting in the
modal window (not only the one which I had joined in the browser tab.)
When I close the browser and start it again, then accessing the BBB
client in the modal window does not work again. It seems that in the modal window generated by Colorbox, in IE and Safari, all the components of BBB are not able to load properly.

Please help. I have been trying to figure this out for a couple days
with no luck. Has anyone else had similar issues and have guidance for
resolving them?

Thanks very much.


Content Type	Original Author	Original Content on Stackoverflow
Question	Pennf0lio	View Question on Stackoverflow
Solution 1 - Javascript	Todd Moses	View Answer on Stackoverflow
Solution 2 - Javascript	Morg.	View Answer on Stackoverflow

SVG support for Internet Explorer 8 and below

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Where can I find Upshot.js examples and documentation?

Formatting a number as currency using CSS

Attributions