Place this is the `&lt;head&gt;` section of your page, before any CSS files are loaded.

    &lt;!--[if lte IE 8]&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see resig&#39;s [blog post](http://ejohn.org/blog/html5-shiv/).

Yes, IE&lt;9 will ignore any HTML5 elements (reason #3162 no one should ever have used IE) but there are javascript solutions for that which my groggy mind can&#39;t think of this morning. I&#39;m sure others will post those solutions below. :)

[First is the html5 shiv][1]


  [1]: http://code.google.com/p/html5shiv/

This is similar to https://stackoverflow.com/questions/2558606/stream-data-with-node-js, but I don&#39;t feel that question was answered sufficiently.

I&#39;m trying to use a jQuery ajax call (get, load, getJSON) to transfer data between a page and a node.js server. I can hit the address from my browser and see &#39;Hello World!&quot;, but when I try this from my page, it fails and shows that I get no response back. I setup a simple test page and hello world example to test this:

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    	&lt;meta charset=&quot;utf-8&quot; /&gt;
    	&lt;title&gt;get test&lt;/title&gt;	
    &lt;/head&gt;
    &lt;body&gt;
    	&lt;h1&gt;Get Test&lt;/h1&gt;
    	&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;
    
    	&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js&quot;&gt;&lt;/script&gt;
    	&lt;script&gt;
    		$(document).ready(function() {
    			//alert($(&#39;h1&#39;).length);
    		  	$(&#39;#test&#39;).load(&#39;http://192.168.1.103:8124/&#39;);
    			//$.get(&#39;http://192.168.1.103:8124/&#39;, function(data) {				  
    			//	alert(data);
    			//});
    		});
    	&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
and

    var http = require(&#39;http&#39;);
    
    http.createServer(function (req, res) {
    	console.log(&#39;request received&#39;);
    	res.writeHead(200, {&#39;Content-Type&#39;: &#39;text/plain&#39;});
    	res.end(&#39;Hello World\n&#39;);
    }).listen(8124);

how to use jQuery ajax calls with node.js

The below first logs `0`, and then logs `1`. How do I store a *copy* of the object, rather than a *reference* to it?

	debug.log(vi.details.segment);
	vi.nextSegment = vi.details;
	vi.nextSegment.segment++;
	debug.log(vi.details.segment);

Cloning an object in JavaScript

I am eager to start using Html5 in particular the `&lt;header&gt;/&lt;footer&gt;/&lt;article&gt;/&lt;nav&gt;` tags.

What happens if the browser doesn&#39;t support these?

Also I need to style these so: For Example: The `nav` has borders and margins etc. You know standard CSS stuff.

So if I style them using the `nav` tag then IE7 &amp; IE8 etc are going to ignore this?


header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don&#39;t support HTML5?

I am eager to start using Html5 in particular the <code>&#x3C;header>/&#x3C;footer>/&#x3C;article>/&#x3C;nav></code> tags.
What happens if the browser doesn't support these?
Also I need to style these so: For Example: The <code>nav</code> has borders and margins etc. You know standard CSS stuff.
So if I style them using the <code>nav</code> tag then IE7 &#x26; IE8 etc are going to ignore this?

I have the following in my CSS. All margins/paddings/borders are globally reset to 0.

&lt;!-- language: lang-css --&gt;

    #wrapper{width: 75%; min-width: 800px;}
    .content{text-align: justify; float: right; width: 90%;}
    .lbar{text-align: justify; float: left; width: 10%;}

Now when I write my HTML as 

    &lt;div id=&quot;wrapper&quot;&gt;
        &lt;div class=&quot;content&quot;&gt;
            some text here
        &lt;/div&gt;
        &lt;div class=&quot;lbar&quot;&gt;
            some text here
        &lt;/div&gt;
    &lt;/div&gt;

the page renders correctly. However, when I inspect the elements, `div#wrapper` is shown as being `0px` high. I would&#39;ve expected it to expand till the end of `div.content` and `div.lbar`... Why does this happen? 

Again, the page renders fine. This behaviour just perplexes me.

Why is the parent div height zero when it has floated children

I&#39;m trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?

    &lt;html&gt;
	&lt;head&gt; 
		&lt;title&gt;blah&lt;/title&gt;
		&lt;script type=&quot;text/javascript&quot;&gt;
            alert(document.getElementById(&quot;abc&quot;));
		&lt;/script&gt;
	&lt;/head&gt; 
	&lt;body&gt;
		&lt;div id=&quot;abc&quot;&gt;

		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;



getElementById() returns null even though the element exists

I have a tag `&lt;a href=&quot;#&quot;&gt; Previous &lt;/a&gt; 1 2 3 4 &lt;a href=&quot;#&quot;&gt; Next &lt;/a&gt;` and in some conditions I want this tag to be completely disabled.

*Code from comments (this is how the link is generated)*

    if (n_index != n_pages) 
        a = a+&#39;&lt;li&gt;&lt;a href=&quot;#&quot; onclick=&quot;javascript:paginateAjaxPage(&#39;+(n_index+1) +&#39;,&#39;+stype+&#39;);&quot;&gt;&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot; onclick=&quot;javascript:paginateAjaxPage(&#39;+n_pages+&#39;,&#39;+stype+&#39;);&quot; &gt;&gt;&gt;&lt;/a&gt;&lt;/li&gt;&#39;; 
    else 
        a = a+&#39;&lt;li&gt;&lt;a style=&quot;cursor: pointer;&quot; onclick=&quot;return false;&quot;&gt;&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a style=&quot;cursor: pointer;&quot; onclick=&quot;return false&quot; &gt;&gt;&gt;&lt;/a&gt;&lt;/li&gt;&#39;; 
    a = a+&#39;&lt;/ul&gt;&lt;/div&gt;&#39;;

How do I disable a href link in JavaScript?

There seems to be lots of info on how to submit a form using javascript, but I am looking for a solution to capture when a form has been submitted and intercept it in javascript.

HTML

    &lt;form&gt;
     &lt;input type=&quot;text&quot; name=&quot;in&quot; value=&quot;some data&quot; /&gt;
     &lt;button type=&quot;submit&quot;&gt;Go&lt;/button&gt;
    &lt;/form&gt;

When a user presses the submit button, I do **not** want the form to be submitted, but instead I would like a JavaScript function to be called.

    function captureForm() {
     // do some stuff with the values in the form
     // stop form from being submitted
    }

A quick hack would be to add an onclick function to the button but I do not like this solution... there are many ways to submit a form... e.g. pressing return while on an input, which this does not account for.

Ty



Intercept a form submit in JavaScript and prevent normal submission

I am coding a Frontend which works well in IE7 Standards Mode and IE8 Standards Mode.

When I start up Internet Explorer and load the page both IE7 and IE8 go to Quirks Mode directly. How can I force both IE7 and IE8 to always load the page in Standards Mode?

I have no special meta tags added so far.

Thanks for helping me out

Edit: My doctype and head looks as follows at the moment:

    &lt;!DOCTYPE html&gt; 
    &lt;html lang=&quot;de&quot;&gt; 
    &lt;head&gt; 
    	&lt;title&gt;...&lt;/title&gt; 
    	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    	&lt;meta charset=&quot;utf-8&quot; /&gt;
    	&lt;script src=&quot;js/html5.js&quot;&gt;&lt;/script&gt; 
    
    	(...)
    &lt;/head&gt;

How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

I want to set Opacity of div&#39;s background without affecting contained element in IE 8. have a any solution and don&#39;t answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color admin can change that

I used that but not working in IE 8

    #alpha {
        filter: alpha(opacity=30);
        -moz-opacity: 0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
    }


   and

    rgba(0,0,0,0.3)

also.

Opacity of div&#39;s background without affecting contained element in IE 8?

Does IE8 not support the following CSS media query:

    @import url(&quot;desktop.css&quot;) screen and (min-width: 768px);

If not, what is the alternate way of writing?
The same works fine in Firefox.

Any issues with the code below?

    @import url(&quot;desktop.css&quot;) screen; 
    @import url(&quot;ipad.css&quot;) only screen and (device-width:768px);



IE8 support for CSS Media Query

Why the [following example][1] shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8?

HTML:

    &lt;div style=&quot;background-image: url(&#39;http://www.mypicx.com/uploadimg/1312875436_05012011_2.png&#39;)&quot;&gt;&lt;/div&gt;

CSS:
   
    div {
        width: 60px;
        height: 60px;
        border: 1px solid black;
    }

Any ideas for workarounds?

  [1]: http://jsfiddle.net/dvqU8/13/

Why an inline &quot;background-image&quot; style doesn&#39;t work in Chrome 10 and Internet Explorer 8?

I am wondering how do you stop people who are using IE 8 from going to Compatibility mode?

&lt;!-- language: lang-html --&gt;

    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; /&gt;

I found this tag and I think this forces people to stay in IE-8 mode but I am not too sure and can&#39;t check as I have IE 9.

If people are in IE 9 mode I force them to not go into IE 8 or IE 7 Compatibility mode?

I tried to put the above line in my code and went to IE 9 -&gt; Tools -&gt; Compatibility View(Grayed Out) 

but &quot;Compatibility View Settings&quot; was not grayed out and it seems you could add the site through there.

So should that not disable?

How to disable Compatibility View in IE

I have two divs that are not nested, one below the other. They are both within one parent div, and this parent div repeats itself. So essentially:

    &lt;div id=&#39;parent_div_1&#39;&gt;
      &lt;div class=&#39;child_div_1&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;child_div_2&#39;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&#39;parent_div_2&#39;&gt;
      &lt;div class=&#39;child_div_1&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;child_div_2&#39;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&#39;parent_div_3&#39;&gt;
      &lt;div class=&#39;child_div_1&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;child_div_2&#39;&gt;&lt;/div&gt;
    &lt;/div&gt;

I want to get each pair of `child_div_1` and `child_div_2` next to each other. How can I do this?

How to get these two divs side-by-side?

Let&#39;s say I have this text that I want to display in an HTML table cell:

    Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

and I want the line to break preferentially after one of the commas. 

**Is there a way to tell the HTML renderer to try breaking at some designated spot, and do that first before trying to break after one of the spaces, *without* using non-breaking spaces?** If I use non-breaking spaces then it makes the width larger unconditionally. I *want* the line break to happen after one of the spaces, if the line-wrapping algorithm has tried it with the commas first and can&#39;t get the line to fit.

I tried wrapping text fragments in `&lt;span&gt;` elements but that doesn&#39;t seem to do anything helpful.

    &lt;html&gt;
      &lt;head&gt;
    	  &lt;style type=&quot;text/css&quot;&gt;
    		div.box { width: 180px; }
    		table, table td { 
    		  border: 1px solid; 
    		  border-collapse: collapse; 
    		}
    	  &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
    	&lt;div class=&quot;box&quot;&gt;
    	  &lt;table&gt;
    	  &lt;tr&gt;
    		  &lt;td&gt;lorem ipsum&lt;/td&gt;
    		  &lt;td&gt;lorem ipsum&lt;/td&gt;
    		  &lt;td&gt;lorem ipsum&lt;/td&gt;
    	  &lt;/tr&gt;
    	  &lt;tr&gt;
    		  &lt;td&gt;lorem ipsum&lt;/td&gt;
    		  &lt;td&gt;
    		    &lt;span&gt;Honey Nut Cheerios,&lt;/span&gt;
    		    &lt;span&gt;Wheat Chex,&lt;/span&gt;
    			&lt;span&gt;Grape-Nuts,&lt;/span&gt;
    			&lt;span&gt;Rice Krispies,&lt;/span&gt;
    			&lt;span&gt;Some random cereal with a very long name,&lt;/span&gt;
    			&lt;span&gt;Honey Bunches of Oats,&lt;/span&gt;
    			&lt;span&gt;Wheaties,&lt;/span&gt;
    			&lt;span&gt;Special K,&lt;/span&gt;
    			&lt;span&gt;Froot Loops,&lt;/span&gt;
    			&lt;span&gt;Apple Jacks&lt;/span&gt;
    		  &lt;/td&gt;
    		  &lt;td&gt;lorem ipsum&lt;/td&gt;
    	  &lt;/tr&gt;
    	  &lt;/table&gt;
    	&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

-----

note: It looks like the [CSS3 `text-wrap: avoid`][1] behavior is what I want, but I can&#39;t seem to get it to work.


  [1]: http://www.w3.org/TR/2011/WD-css3-text-20110215/#example-avoid

Denoting a preferred place for a line break

Is there any way of getting rounded corners on the outline of a `div` element, similar to `border-radius`?

Outline radius?

I&#39;ve inherited a project I&#39;m working on and I&#39;m updating some jquery animations (very little practice with jquery).

I have a div I need to add and remove the style attribute from. Here is the div:

    &lt;div id=&#39;voltaic_holder&#39;&gt;

At one point in the animation I need to add a style to it:

    &lt;div id=&#39;voltaic_holder&#39; style=&#39;position:absolute;top:-75px&#39;&gt;

I&#39;ve searched around and found the `.removeAttr()` method but I can&#39;t see how to add it, or even remote parts of it (like the top:-75px only).

Thanks,

Adding and removing style attribute from div with jquery

I have a drop down navigation menu in which some of the title should not navigate to other page when clicked(these title open a drop down menu when clicked on) while others should navigate (these dont have dropdown and navigate directly).However, both types have `href` defined to them

To solve this i added the following css for the former type of titles

    pointer-events: none;

and it is working fine.But since this property is not supported by IE, i am looking for some work-around.
The annoying thing is that **i don&#39;t have access and privilege to change the HTML and JavaScript code** completely.

Any ideas?

css &#39;pointer-events&#39; property alternative for IE

What are all the browsers that support the `window.postMessage` call now? I am looking for browsers that support it natively, not through an iFrame hack.

What browsers support the window.postMessage call now?

Not sure why this isn&#39;t working.

When people click the &#39;edit&#39; button of my application, the disabled textfields become editable:

    $(&quot;#bewerken&quot;).click(function(e)	{
		$(&quot;input[disabled=&#39;disabled&#39;]&quot;).removeAttr(&#39;disabled&#39;);
	});

I then want to disable the textfields again when the user saves; I have this code bound to my save button:

    $(&quot;#save_school_changes&quot;).click(function(e)	{
		//stuff
		
		$.ajax({
			type: &quot;POST&quot;,
			url: &quot;/school/save_changes&quot;,
			data: { //stuff },
			success: function(data)
			{
				$(&quot;#feedback_top&quot;).html(&quot;&lt;p&gt;&quot; + data[&#39;message&#39;] + &quot;&lt;/p&gt;&quot;).slideDown(&#39;slow&#39;).delay(2000).slideUp();
				$(&quot;input[type=&#39;text&#39;]&quot;).attr(&#39;disabled&#39;, &#39;disabled&#39;);
				
			}
		});
		
		e.preventDefault();
	});

As far as I know, this should disable the textfields again. However, this does not seem to be working in Chrome. It does work in Firefox. I haven&#39;t had the chance to test in IE or Safari yet. Is there any way to make this work in Chrome aswell? Thanks a lot!

jQuery .attr(&quot;disabled&quot;, &quot;disabled&quot;) not working in Chrome

I have a bit of an issue with a function running in chrome that works properly in Safari, both webkit browsers...

I need to customize a variable in a function for Chrome, but not for Safari.

Sadly, I have been using this to detect if it is a webkit browser:

    if ($.browser.webkit) {

But I need to detect:

    if ($.browser.chrome) {

Is there any way to write a similar statement (a working version of the one above)?

How to detect if a browser is Chrome using jQuery?

I&#39;m looking for a solution to fit a child `div` into it&#39;s parent&#39;s `width`.

Most solutions I&#39;ve seen here **are not cross-browser compatible** (eg. `display: table-cell;` isn&#39;t supported in IE `&lt;=8`).

![image showing intended result with a child div being the full size of it&#39;s parent, with inner padding][1]

  [1]: http://i.stack.imgur.com/Fon6P.jpg 

Content Type	Original Author	Original Content on Stackoverflow
Question	Martin	View Question on Stackoverflow
Solution 1 - Html	Andrew Tubbs	View Answer on Stackoverflow
Solution 2 - Html	Rob	View Answer on Stackoverflow

header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Cloning an object in JavaScript

how to use jQuery ajax calls with node.js

Attributions