You can&#39;t append HTML to SVG (technically you can with `foreignObject`, but it&#39;s a rabbit hole). Furthermore, visible elements in SVG can&#39;t be nested, so elements such as `circle`, `rect`, `path` and such can&#39;t have children elements.

I would also consider using `&lt;g&gt;` element as it serves similar purpose as `&lt;div&gt;` by grouping objects. [More about it here][1].


  [1]: https://developer.mozilla.org/en/docs/Web/SVG/Element/g

You are trying to append &quot;rect&quot; as well as &quot;div&quot; in the same line. Porbably that is where you are failing
Check out these tutotials for D3... Its an amazing library based on SVG
http://alignedleft.com/tutorials/d3/drawing-svgs/



Nobody has actually asked this (from all the &#39;suggestions&#39; I&#39;m getting and also from searching before I asked here).

So why is node.js asynchronous?

From what I have deduced after some research:

Languages like PHP and Python are scripting languages (I could be wrong about the actual languages that are scripting languages) whilst JavaScript isn&#39;t. (I suppose this derives from the fact that JS doesn&#39;t compile?)

Node.js runs on a single thread whilst scripting languages use multiple threads.

Asynchronous means stateless and that the connection is persistent whilst synchronous is the (almost) opposite.

Maybe the answer is found somewhere stated above, but I&#39;m still not sure.

My second and last question related to this topic is this:

Could JavaScript be made into a synchronous language?

PS. I know some of you will ask &quot;why would you want to make JS synchronous?&quot; in your answers, but the truth is that I don&#39;t. I&#39;m just asking these types of questions because I&#39;m sure there are more people out there than just myself that have thought about such questions.

Why is node.js asynchronous?

I am using Sql server 2012(Denali). I wonder why all identity column values start from 1001 and so on. At the beginning `Identity` column starts from 1,2 and so on and adding identity smoothly, but suddenly it jumps to 1001,1002 and onwards for all the table in the database containing identity column. What could be the reason? Please assist.

Identity column value suddenly jumps to 1001 in sql server

I am trying to append an HTML div inside an SVG, which I am trying to create a graph. I am trying to append it using the code below, but when I inspect element using Firebug, the div is shown inside `rect` element code, but it doesn&#39;t show up in the graph UI. 

Is it something wrong with the method that I am trying or is it impossible to append a div inside an SVG?

        marker.append(&quot;rect&quot;)
       .attr(&quot;width&quot;, &quot;50px&quot;)
       .attr(&quot;height&quot;, &quot;50px&quot;)
       .append(&quot;div&quot;)
       .attr(&quot;id&quot;, function(d) {
          return &quot;canvas_&quot; + d.key.split(&quot; &quot;).join(&quot;_&quot;);
       })
       .style(&quot;width&quot;, &quot;50px&quot;).style(&quot;height&quot;, &quot;50px&quot;);



Is it possible to append a div inside an SVG element?

I am trying to append an HTML div inside an SVG, which I am trying to create a graph. I am trying to append it using the code below, but when I inspect element using Firebug, the div is shown inside <code>rect</code> element code, but it doesn't show up in the graph UI.
Is it something wrong with the method that I am trying or is it impossible to append a div inside an SVG?
<pre><code class="hljs language-vbnet"> marker.append("rect")
 .attr("width", "50px")
 .attr("height", "50px")
 .append("div")
 .attr("id", function(d) {
 return "canvas_" + d.key.split(" ").join("_");
 })
 .style("width", "50px").style("height", "50px");
</code></pre>

I am passing `date` value to my custom filter this way:

    angular.module(&#39;myapp&#39;).
      filter(&#39;filterReceiptsForDate&#39;, function () {
        return function (input, date) {
          var out = _.filter(input, function (item) {
            return moment(item.value.created).format(&#39;YYYY-MM-DD&#39;) == date;
          });
          return out;
        }
      });

I would like to inject a couple of scope variables there too, like what I can do in directives. Is that possible to do this without having to passing these vars explicitly as function arguments?


Access scope variables from a filter in AngularJS

I&#39;m having some trouble loading my javascript when I use a link_to helper in rails. When I either manually enter the url with &#39;localhost:3000/products/new&#39; or reload the page, the javascript loads, but when I go through a link as written below, the jQuery `$(document).ready` will not load on the new page. 

Link_to, javascript does not load when I click this link:

    &lt;%= link_to &quot;New Product&quot;, new_product_path %&gt;

products.js file

    $(document).ready(function() {
    	alert(&quot;test&quot;);
    });


Any help would be much appreciated. Thanks in advance!

Rails, javascript not loading after clicking through link_to helper

I need to be able to parse XML using JavaScript. The XML will be in a variable. I would prefer not to use jQuery or other frameworks.

I have looked at this, [XML &gt; jQuery reading][1].

  [1]: https://stackoverflow.com/questions/14782408/xml-jquery-reading

Parse XML using JavaScript

The following code outputs the content of the index.html (it just contains the text hello world) to the browser. However, when I replace `readFile()` with `readFileSync()`, the request times out.

What am I missing? Is a different kind of buffer required? I am using node 0.61 and express 2.4.

    var express = require(&#39;express&#39;);
    var fs = require(&#39;fs&#39;);
    
    var app = express.createServer(express.logger());
    
    app.get(&#39;/&#39;, function(request, response) {
    	fs.readFile(&#39;index.html&#39;, function(err, data){
    		response.send(data.toString());
    	});
    });
    
    var port = process.env.PORT || 5000;
    app.listen(port, function() {
      console.log(&quot;Listening on &quot; + port);
    });

Difference between readFile() and readFileSync()

Is there a well-known mistake I could be making here?  

I&#39;ve got a script that&#39;s using .on() because an element is dynamically generated, and it isn&#39;t working.  Just to test it out, I replaced the selector with the dynamic element&#39;s wrap, which is static, and it still didn&#39;t work!  When I switched to plain old .click for the wrap it worked, though.  
(This just won&#39;t work for the dynamic element obviously, the one that matters.)

**This works:**

    $(&quot;#test-element&quot;).click(function() {
        alert(&quot;click&quot;);
    });

**This doesn&#39;t:**

    $(document).on(&quot;click&quot;,&quot;#test-element&quot;,function() {
        alert(&quot;click&quot;);
    });

***UPDATE:***

I right-clicked and did &quot;Inspect Element&quot; in Chrome to just double-check something, and then after that the click event worked.  I refreshed and it didn&#39;t work, inspected element, and then it worked.  What does this mean?

$(document).on(&quot;click&quot;... not working?

How do I detect when `.click` event triggers if textarea is already focused?

I have this jquery:

    $(&quot;.status&quot;).on(&quot;click&quot;,&quot;textarea&quot;,function(){
    		if ($(this) == &quot;focused&quot;) {
    			// fire this step
    		}else{
                $(this).focus();
    			// fire this step
    	}


Javascript/jQuery detect if input is focused

I have a json file in a Content folder within my asp.net project:

    &lt;projectName&gt;
    	\Content
    		NBCCJr.json

...and the code to access it:

    $.getJSON(&#39;~/Content/NBCCJr.json&#39;, function (data) {
        $.each(data, function(i, dataPoint) {
            // Bla
          });
      });
    )

...but nothing happens when the code is called; the browser console says, &quot;Failed to load resource: the server responded with a status of 404 (Not Found)&quot;

Why is it not found? Isn&#39;t &quot;tilde whack filename&quot; the correct route to the file?

UPDATE
------

I also tried it with the &quot;whacks&quot; backwards:

    $.getJSON(&#39;~\Content\NBCCJr.json&#39;, function (data) {

...and got the same result (&quot;*Failed to load resource: the server responded with a status of 404 (Not Found)*&quot;)

UPDATE 2
--------

Then I tried it sans a prepended whack thusly:

    $.getJSON(&#39;Content/NBCCJr.json&#39;, function (data) {

...and I get this ambiguous message in the console:

    *GET http://localhost:9702/Content/NBCCJr.json 404 (Not Found) jquery.js:8724
    XHR finished loading: &quot;http://localhost:9702/Content/NBCCJr.json&quot;.*


So it was not found and yet loaded anyway?

UPDATE 3
--------

When I attempted to navigate to the file in the browser by changing:

    http://localhost:9702/Default.cshtml

...to:

    http://localhost:9702/Content/NBCCJr.json

I got an informative WSOD message from Vint Cerf, Tim Berners-Lee, and/or Al Gore saying:

*HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.*

UPDATE 4
--------

Thanks to JAM, it is now working. 

I had to add this to Web.Config:

      &lt;system.webServer&gt;
        &lt;staticContent&gt;
          &lt;mimeMap fileExtension=&quot;.json&quot; mimeType=&quot;application/json&quot; /&gt;
        &lt;/staticContent&gt;
      &lt;/system.webServer&gt;

Why is my json file not found?

I recently asked another (related) question, which lead to this follow up question:
https://stackoverflow.com/questions/17643142/submitting-data-instead-of-a-file-for-an-input-form

Reading through the jQuery.ajax() documentation (http://api.jquery.com/jQuery.ajax/), it seems the list of accepted dataTypes doesn&#39;t include images.

I&#39;m trying to retrieve an image using jQuery.get (or jQuery.ajax if I have to), store this image in a Blob and upload it to another server in a POST request. Currently, it looks like due to the mismatch in datatypes, my images end up being corrupt (size in bytes mismatch, etc.).

The code to perform this is as follows (it is in coffeescript but shouldn&#39;t be difficult to parse):

    handler = (data,status) -&gt;
      fd = new FormData
      fd.append(&quot;file&quot;, new Blob([data], { &quot;type&quot; : &quot;image/png&quot; }))
      jQuery.ajax {
        url: target_url,
        data: fd,
        processData: false,
        contentType: &quot;multipart/form-data&quot;,
        type: &quot;POST&quot;,
        complete: (xhr,status) -&gt;
          console.log xhr.status
          console.log xhr.statusCode
          console.log xhr.responseText

      }
    jQuery.get(image_source_url, null, handler)

How can I retrieve this image as a blob instead?

Using jQuery&#39;s ajax method to retrieve images as a blob

Is it possible to have a placeholder on a select tag?

    &lt;select placeholder=&quot;select your beverage&quot;&gt;
       
       &lt;option&gt;Tea&lt;/option&gt;

       &lt;option&gt;coffee&lt;/option&gt;

       &lt;option&gt;soda&lt;/option&gt;

    &lt;/select&gt;

or may be a possible work around?

placeholder for select tag

![click to see the image][1]

How can I create a table like the above example in HTML and CSS.
I&#39;ve tried the following: 

    &lt;table&gt; 
      &lt;tr&gt; 
        &lt;td style=&quot;width:50%&quot;&gt;TEXT&lt;/td&gt;
        &lt;td style=&quot;width:50%&quot;&gt;TEXT&lt;/td&gt; 
      &lt;/tr&gt;
      &lt;tr&gt; 
        &lt;td style=&quot;width:100%&quot;&gt;TEXT&lt;/td&gt; 
      &lt;/tr&gt;


but it won&#39;t work. Can anyone help?


  [1]: http://i.stack.imgur.com/HoKXX.png

How to make one &lt;td&gt; span both columns in a two column table?

I&#39;ve read a dozen of times now that the state object could exists of multiple key|value pairs and that it is associated with the new history entry.
But could someone please give me an example of the benefits of the state object? Whats the practical use of it? I can&#39;t imagine why not just typing in {}

pushState: what exactly is the state object for?

I want home.html to load in `&lt;div id=&quot;content&quot;&gt;`.   


    &lt;div id=&quot;topBar&quot;&gt; &lt;a href =&quot;#&quot; onclick=&quot;load_home()&quot;&gt; HOME &lt;/a&gt; &lt;/div&gt;
    &lt;div id =&quot;content&quot;&gt; &lt;/div&gt;
    &lt;script&gt;
          function load_home(){
                document.getElementById(&quot;content&quot;).innerHTML=&#39;&lt;object type=&quot;type/html&quot; data=&quot;home.html&quot; &gt;&lt;/object&gt;&#39;;
	  }
    &lt;/script&gt;

This works fine when I use Firefox. When I use Google Chrome, it asks for plug-in. How do I get it working in Google Chrome?

How do I load an HTML page in a div using JavaScript?

What I&#39;m trying to do is change the *tooltip* color to red. However, I also want to have multiple other colors so I don&#39;t simply want to replace the original tooltip&#39;s color.

How would I go about doing this?

Change Bootstrap tooltip color

I&#39;m using the svg circles in my project like this,

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 160 120&quot;&gt;
        &lt;g&gt;
            &lt;g id=&quot;one&quot;&gt;
                &lt;circle fill=&quot;green&quot; cx=&quot;100&quot; cy=&quot;105&quot; r=&quot;20&quot; /&gt;
            &lt;/g&gt;
            &lt;g id=&quot;two&quot;&gt;
                &lt;circle fill=&quot;orange&quot; cx=&quot;100&quot; cy=&quot;95&quot; r=&quot;20&quot; /&gt;
            &lt;/g&gt;
        &lt;/g&gt;
    &lt;/svg&gt;

And I&#39;m using the z-index in the `g` tag to show the elements the first. In my project I need to use only z-index value, but I can&#39;t use the z-index to my svg elements. I have googled a lot but I didn&#39;t find anything relatively.
So please help me to use z-index in my svg.

Here is the [DEMO.][1]


  [1]: http://jsfiddle.net/hu2pk/2/

How to use z-index in svg elements?

The SVG I&#39;m working with has a drop shadow via `feGaussianBlur` filter.

The shadow itself is displayed properly, but gets cut off on top and bottom edges.

Like so:

![image of cutoff shadow][1]

The SVG in question is:

    &lt;?xml version=&quot;1.0&quot; standalone=&quot;no&quot; ?&gt;
    &lt;!DOCTYPE svg
      PUBLIC &#39;-//W3C//DTD SVG 1.1//EN&#39;
      &#39;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&#39;&gt;
    &lt;svg height=&quot;600&quot; version=&quot;1.1&quot; width=&quot;700&quot; xml:space=&quot;preserve&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
      &lt;defs/&gt;
      &lt;filter id=&quot;SVGID_0&quot;&gt;
        &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;6.6&quot;/&gt;
        &lt;feOffset dx=&quot;0&quot; dy=&quot;0&quot;/&gt;
        &lt;feMerge&gt;
          &lt;feMergeNode/&gt;
          &lt;feMergeNode in=&quot;SourceGraphic&quot;/&gt;
        &lt;/feMerge&gt;
      &lt;/filter&gt;
      &lt;path d=&quot;M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122&quot; stroke-linecap=&quot;round&quot; style=&quot;stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);&quot; transform=&quot;translate(50 50)&quot; /&gt;
    &lt;/svg&gt;

The cropping seems to happen consistently in Chrome (30), Firefox (25), and Opera (12).

I can see that it&#39;s not a viewbox limitation, as it&#39;s set to 600x700.

I can also see in devtools inspector the bounding box of `&lt;path&gt;` element, and it&#39;s almost as if that&#39;s what cuts off the shadow:

![path bounding box][2]

If that&#39;s the case:

  1. Why is the shadow only cut off vertically and not horizontally?
  2. How to work around it, so that it&#39;s not clipped like this?

If it&#39;s not the bounding box, what causes this and how to avoid this clipping?


  [1]: http://i.stack.imgur.com/hE52X.png
  [2]: http://i.stack.imgur.com/UnvzK.png

SVG shadow cut off

I&#39;m using a SVG logo as a background image and I can&#39;t seem to get it to align correctly to the left in Internet Explorer _(edit: and Safari)_.

The containers look like so:

    &lt;div id=&quot;header&quot;&gt;
		&lt;div id=&quot;logo&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

With the styles:

    #header{
		width: 100%;
		max-width: 1200px; 
		height: 100%;}

    #logo{
		background: url(../images/ss_logo.svg);
		background-position: left center;
		width: 100%;
		height: 100%;
		float: left;}

You can see that the `&lt;div&gt;` should span 100% of its parent but display the logo to the left of the element. This works fine in Chrome and Safari, but the logo is always centered inside the `&lt;div id=&quot;logo&quot;&gt;` in IE.
 
Information seems to be really hard to find on this, has anyone else had the same problem?

Here&#39;s a link to an [example version of the problem](http://magma.acidic.co.nz/sites/example), the green box is the SVG.

svg background image position is always centered in internet explorer, despite background-position: left center;

I want to get the SVG path data from [Font Awesome][1] glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from [fontawesome-webfont.svg][2], but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why?

(See [**Fiddle**][3])

**Font Awesome SVG:**  

    &lt;glyph unicode=&quot;&amp;#xf007;&quot; horiz-adv-x=&quot;1408&quot; d=&quot;M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z&quot; /&gt;

**... Ported to HTML SVG (and scaled down):**

    &lt;svg width=&quot;1000&quot; height=&quot;1000&quot; &gt;&lt;path transform=&quot;scale(0.1,0.1)&quot; d=&quot;M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z&quot;/&gt;&lt;/svg&gt;


  [1]: http://fortawesome.github.io/Font-Awesome/icons/
  [2]: https://github.com/FortAwesome/Font-Awesome/blob/master/font/fontawesome-webfont.svg
  [3]: http://jsfiddle.net/DBQQU/3/

Extracting SVG from Font Awesome

What is the proper way to get the dimensions of an `svg` element?

http://jsfiddle.net/langdonx/Xkv3X/

Chrome 28:

    style x
    client 300x100
    offset 300x100

IE 10:

    stylex 
    client300x100 
    offsetundefinedxundefined 

FireFox 23:

    &quot;style&quot; &quot;x&quot;
    &quot;client&quot; &quot;0x0&quot;
    &quot;offset&quot; &quot;undefinedxundefined&quot;

There are width and height properties on `svg1`, but `.width.baseVal.value` is only set if I set the width and height attributes on the element.

---

The fiddle looks like this:

**HTML**

    &lt;svg id=&quot;svg1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;&gt;
        &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; fill=&quot;red&quot; /&gt;
        &lt;circle cx=&quot;150&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; fill=&quot;green&quot; /&gt;
        &lt;circle cx=&quot;250&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; fill=&quot;blue&quot; /&gt;
    &lt;/svg&gt;

**JS**

    var svg1 = document.getElementById(&#39;svg1&#39;);

    console.log(svg1);
    console.log(&#39;style&#39;, svg1.style.width + &#39;x&#39; + svg1.style.height);
    console.log(&#39;client&#39;, svg1.clientWidth + &#39;x&#39; + svg1.clientHeight);
    console.log(&#39;offset&#39;, svg1.offsetWidth + &#39;x&#39; + svg1.offsetHeight);

**CSS**

    #svg1 {
        width: 300px;
        height: 100px;
    }

Content Type	Original Author	Original Content on Stackoverflow
Question	sam	View Question on Stackoverflow
Solution 1 - Javascript	methodofaction	View Answer on Stackoverflow
Solution 2 - Javascript	Karolis Ramanauskas	View Answer on Stackoverflow
Solution 3 - Javascript	AnaMaria	View Answer on Stackoverflow

Is it possible to append a div inside an SVG element?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Identity column value suddenly jumps to 1001 in sql server

Why is node.js asynchronous?

Attributions