html5shiv - Developer IT

Are there any adverse side effects to loading html5shiv in every browser?

- by Jeff

On the html5shiv Google Code page the example usage includes an IE conditional:  However on the html5shiv github page, the description explains: This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer, as well as default HTML5 styling in Internet Explorer 6 - 9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. An obvious contradiction. So to satisfy my curiosity, for anyone who has studied the code, are there any adverse side affects to loading html5shiv in every browser (without the IE conditional)? EDIT: My goal, obviously, is to use the shiv without the IE conditional.

Read the article

HTML5 Shiv not parsing quick enough

- by Mikey Hogarth

One of our web designers is working on a site at the moment and is using HTML5 elements, which she styles up in older browsers using the well documented Html5Shiv; http://css-tricks.com/html5-innershiv/ She reported some pretty weird behavior today and it looks like this is the cause. Initially it was very confusing, and went something along the lines of; "The page looks fine, I refresh it looks fine, refresh several times and occasionally it will not apply my styles to the HTML5 elements" Current best theory is that the shiv is not kicking in quick enough, and the page loads before the new elements have been registered. I was wondering if anyone could suggest a surefire way of including the shiv and making sure it's loaded and been parsed BEFORE the rest of the elements, so they will definitely get styled. EDIT (more info) Shiv is being included in the head, directly below the title/meta tags;  The bit that is being styled is in the footer and is cross-site. Many of the pages will change in size as they're being powered by a CMS that our marketing team will use so I am unable to give an exact page size. All I would say is that if page size is an issue and there is no workaround, can someone let me know as this will mean we basically can't use HTML5 on this project (or at the very least we'll need to add superflous markup such as divs to ensure that the layout doesn't go crazy) EDIT 2 There is no chance of me posting the code unfortunately - it's only re-creatable under really obscure circumstances and the project is marked "top secret" at the moment :( If nobody knows then I'm guessing it's either a case of "everyone knows it happens but kinda ignores it" or just that it's something else other than the shiv.

Read the article

Fix a jQuery/HTML5 dynamic content issue by upgrading jQuery

- by Steve Albers

The default NuGet template for MVC3 pushes down jQuery 1.5.1. You can upgrade to a new version (1.7.1 is current when this is written) to avoid a problem with the creation of “unknown” HTML5 tags in IE6-8: Take this sample HTML page using HTML5Shiv to provide support for new HTML5 tags in IE6 – IE8. The page has a number of <article> tags that are backwards compatible in Internet Explorer 6-8 thanks to the HTML5Shiv. After the article elements there is a jQuery 1.5.1 script tag, and a ready() event handler that appends a footer element with a copyright to each of the article tags. This appears correctly in IE9, but in older IE browsers the unknown tag problem reappears for the dynamic <footer> elements, even though we have the HTML5Shiv at the top of the page. The copyright text sits outside of the two separate footer tags. To solve the issue upgrade your jQuery files to an up-to-date version. For instance in Visual Studio 2010: In the Solution Explorer right click on References and choose Manage NuGet Packages. In the Manage NuGet Packages window select the jQuery item on the middle of the page and click the “Upgrade” button. You may need to upgrade your script src references to point at the new version. Using the updated jQuery library the incorrect tags should disappear and styles should work properly: You can find more information about the issue on the jQuery Bug Tracker site.

Read the article

How to "enable" HTML5 elements in IE that were inserted by AJAX call?

- by Gidon

IE does not work good with unknown elements (ie. HTML5 elements), one cannot style them , or access most of their props. Their are numerous work arounds for this for example: http://remysharp.com/2009/01/07/html5-enabling-script/ The problem is that this works great for static HTML that was available on page load, but when one creates HTML5 elements afterward (for example AJAX call containing them, or simply creating with JS), it will mark these newly added elements them as HTMLUnknownElement as supposed to HTMLGenericElement (in IE debugger). Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE? Here is a test page: <html><head><title>TIME TEST</title>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <time>some time</time> <hr> <script type="text/javascript"> $("time").text("WORKS GREAT"); $("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion $("time").text("UPDATE"); </script> </body> </html> In IE you will see the: UPDATE , and NEW ELEMENT. In any other modern browser you will see UPDATE, and UPDATE Solution Using the answer provided I came up with the following piece of javascript to HTML5 enable a whole bunch of elements returned by my ajax call: (function ($) { jQuery.fn.html5Enable = function () { if ($.browser.msie) { $("abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video", this).replaceWith(function () { if (this.tagName == undefined) return ""; var el = $(document.createElement(this.tagName)); for (var i = 0; i < this.attributes.length; i++) el.attr(this.attributes[i].nodeName, this.attributes[i].nodeValue); el.html(this.innerHtml); return el; }); } return this; }; })(jQuery); Now this can be called whenever you want to append something: var el = $(AJAX_RESULT_OR_HTML_STRING); el.html5Enable(); $("SOMECONTAINER").append(el); See http://code.google.com/p/html5shiv/issues/detail?id=4 for an explanation about what this plugin doesn't do.

Read the article

Using HTML5 Today part 2–Fixing Semantic tags with a Shiv

- by Steve Albers

Semantic elements and the Shiv! This is the second entry in the series of demos from the “Using HTML5 Today” talk. For the definitive discussion on unknown elements and the HTML5 Shiv check out Mark Pilgrim’s Dive Into HTML5 online book at http://diveintohtml5.info/semantics.html#unknown-elements Semantic tags increase the meaning and maintainability of your markup, help make your page more computer-readable, and can even provide opportunities for libraries that are written to automagically enhance content using standard tags like <nav>, <header>, or <footer>. Legacy IE issues However, new HTML5 tags get mangled in IE browsers prior to version 9. To see this in action, consider this bit of HTML code which includes the new <article> and <header> elements: Viewing this page using the IE9 developer tools (F12) we see that the browser correctly models the hierarchy of tags listed above: But if we switch to IE8 Browser Mode in developer tools things go bad: Did you know that a closing tag could close itself?? The browser loses the hierarchy & closes all of the new tags. The new tags become unusable and the page structure falls apart. Additionally block-level elements lose their block status, appearing as inline. The Fix (good) The block-level issue can be resolved by using CSS styling. Below we set the article, header, and footer tags as block tags. article, header, footer {display:block;} You can avoid the unknown element issue by creating a version of the element in JavaScript before the actual HTML5 tag appears on the page: <script> document.createElement("article"); document.createElement("header"); document.createElement("footer"); </script> The Fix (better) Rather than adding your own JS you can take advantage of a standard JS library such as Remy Sharp’s HTML5 Shiv at http://code.google.com/p/html5shiv/. By default the Modernizr library includes HTML5 Shiv, so you don’t need to include the shiv code separately if you are using Modernizr.

Read the article

IE 8 Automatically Closing <header> tag

- by djthoms

Background I am currently working on the final QA of a responsive website and I'm having an issue with IE 8 and IE 7. My client deals with government contracting so their website needs to be compatible with IE 8 and IE 7. I am using Modernizr with html5shiv built in. I am loading Modernizr in the footer of a WordPress theme that was custom built for this project. I'm not missing a doctype or any other obvious code. I am using the following scripts, all of which are loaded in the footer of WordPress: jQuery 1.10.1 Modernizr 2.6.3 (click for config) respond.js 1.3.0 superfish jQuery Waypoints 2.0.3 jQuery Waypoints Sticky 2.0.3 The Situation I'm having an issue with IE 8 automatically closing a <header> tag. First, I have used two utilities to check this issue: IETester IE 11 emulated to IE 8 w/ IE 8 User agent Here is the correct output <div class="wrapper main-header"> <header class="container"> <div class="sixteen columns alpha omega"> <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div> <div class="wrapper main-navigation desktop"> <nav id="nav" class="six columns alpha omega"> ... </nav> <div class="eight columns alpha omega overlay" style="display: none;"> ... </div> <div class="two columns alpha omega menu-ss"> ... </div> </div> </div> </header> </div> What IE 8 is rendering: <div class="wrapper main-header"> <header class="container"></header> <div class="sixteen columns alpha omega"> <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div> <div class="wrapper main-navigation desktop"> <nav id="nav" class="six columns alpha omega"> ... </nav> <div class="eight columns alpha omega overlay" style="display: none;"> ... </div> <div class="two columns alpha omega menu-ss"> ... </div> </div> </div> </header><//header> </div> What I have Tried Loading html5shiv with IE conditional in the <head> Loading Modernizr in the <head> I have looked at these Stackoverflow questions/answers: html 5 tags foorter or header in ie 8 and ie 7 html5 not rendering header tags in ie IE 8 self closing tags automatically Any assistance with this is greatly appreciated! I would really really really like to finish this website over the weekend. I've been banging my head against a wall for the past few hours over this issue. Update Here are some images from browsershack to cut out the emulation. I tested the site virtually with Windows 7 and WIndows XP (IE 8 & IE 7). http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

Read the article

JSON.stringify() supported by IE 8?

- by user246114

I need to use: JSON.stringify() which should be supported by chrome, safari, and FF (I think). I think IE8 also has support for the JSON object. I think IE7 and 6 do not, so I'm doing this:  so, I think this will import the external javascript only if IE6 & 7. I looked at the url where the script is hosted, they are including only if the IE version is less than 9: http://code.google.com/p/html5shiv/  so should I be including this for IE 8 too? Thanks --------------- Pointed script source to json parser js ---------------

Read the article

Show hide DIVs : jQuery

- by Muhammad Sajid

Hi, I have two links & I want to show / hide them one at a time, my code is : <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here $(document).ready(function() { $(function(){ $('#link').click(function(){ $('#colorDiv').slideToggle('slow'); return false; }); }); }); </script> <meta charset=utf-8 /> <title>JS Bin</title>  <style> #dv { width:100px; height:100px; border:1px solid; } </style> </head> <body> <table cellspacing="2"> <tr><td><a href="#" id="link">Color</a></td><td><a href="#" id="link">Car</a></td></tr> <tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr> </table> </body> </html> by default first div should me shown. hanks.

Read the article

jQuery.clone() IE problem

- by mofle

I'm have some that uses jQuery.clone() to get the html of a page and then add it to a pre tag. It works correctly in Firefox and Chrome, but nothing happens in IE: <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title>  <script> $(function(){ $('button').click(function(){ var $clone = $('html').clone(); $('#output').text($clone.html()); }); }); </script> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <button>run test</button> <pre id="output"></pre> </body> </html> Is there any know bug with IE that prevents this, or am I doing something wrong? (I need to clone it because I'm doing some changes to it before outputting it)

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

Javascript: selfmade methods not working correctly

- by hdr

Hi everyone, I tried to figure this out for some days now, I tried to use my own object to sort of replace the global object to reduce problems with other scripts (userscripts, chrome extensions... that kind of stuff). However I can't get things to work for some reason. I tried some debugging with JSLint, the developer tools included in Google Chrome, Firebug and the integrated schript debugger in IE8 but there is no error that explains why it doesn't work at all in any browser I tried. I tried IE 8, Google Chrome 10.0.612.3 dev, Firefox 3.6.13, Safari 5.0.3 and Opera 11. So... here is the code: HTML: <!DOCTYPE HTML> <html manifest="c.manifest"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8">   <script src="js/data.js"></script> </head> <body> <div id="controls"> <button onclick="MYOBJECTis.next()">Next</button> </div> <div id="textfield"></div> <canvas id="game"></canvas> </body> </html> Javascript: var that = window, it = document, k = Math.floor; var MYOBJECTis = { aresizer: function(){ // This method looks like it doesn't work. // It should automatically resize all the div elements and the body. // JSLint: no error (execpt for "'window' is not defined." which is normal since // JSLint does nor recognize references to the global object like "window" or "self" // even if you assume a browser) // Firebug: no error // Chrome dev tools: no error // IE8: that.documentElement.clientWidth is null or not an object "use strict"; var a = that.innerWidth || that.documentElement.clientWidth, d = that.innerHeight || that.documentElement.clientHeight; (function() { for(var b = 0, c = it.getElementsByTagName("div");b < c.length;b++) { c.style.width = k(c.offsetWidth) / 100 * k(a); c.style.height = k(c.offsetHight) / 100 * k(d); } }()); (function() { var b = it.getElementsByTagName("body"); b.width = a; b.height = d; }()); }, next: function(){ // This method looks like it doesn't work. // It should change the text inside a div element // JSLint: no error (execpt for "'window' is not defined.") // Firebug: no error // Chrome dev tools: no error // IE8: no error (execpt for being painfully slow) "use strict"; var b = it.getElementById("textfield"), a = [], c; switch(c !== typeof Number){ case true: a[1] = ["HI"]; c = 0; break; case false: return Error; default: b.innerHtml = a[c]; c+=1; } } }; // auto events (function(){ "use strict"; that.onresize = MYOBJECTis.aresizer(); }()); If anyone can help me out with this I would very much appreciate it. EDIT: To answer the question what's not working I can just say that no method I showed here is working at all and I don't know the cause of the problem. I also tried to clean up some of the code that has most likely nothing to do with it. Additional information is in the comments inside the code.

Read the article

Navbar Dropdown in Bootstrap 3

- by user2333842

I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website. I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far. <!DOCTYPE html> <html> <head> <title>WEBSITE NAME</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">   </head> <body> <h1>WEBSITE NAME</h1> <nav class="navbar navbar-default" role="navigation">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>  <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Software</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li> <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li> </ul> </li> </ul> </div> </nav>  <script src="//code.jquery.com/jquery.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html> The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?

Read the article

Array from HTML forms - Internal Server Error

- by user1392411

I try to make a requestform for our school. But if I transmit this form I get a "Internal Server Error". I searched but I found nothing like that. Also I don't get a only this error message "Internal Server Error", nothing more. Any ideas why? <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <link rel="stylesheet" href="../css/normalize.css" /> <link rel="stylesheet" href="../css/bestellformular.css" />   </head> <body> <section id="head"> </section> <form action="../php/einlesen.php" method="post"> <section id="body"> <h1>Bestellung</h1> <table> <colgroup> <col width="10%"> <col width="80%"> <col width="10%"> </colgroup> <tr> <th> Artikel-Nr. </th> <th> Artikel </th> <th> Menge </th> </tr> <tr> <td> <input type="number" placeholder="Artikel-Nr." name="articelnr[]" required /> </td> <td> <input type="text" placeholder="Name des Artikels" name="articelname[]" required /> </td> <td> <input type="number" placeholder="Menge" name="quantity[]" required /> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> <tr> <td> <input type="number" name="articelnr[]" /> </td> <td> <input type="text" name="articelname[]" /> </td> <td> <input type="number" name="quantity[]"/> </td> </tr> </table> </section> <section id="info"> <div class="left"> <hr /> <p> Kundennummer <input type="text" /> </p> </div> <div class="right"> <table> <tr> <td>Firma</td> <td><input type="text" name="company"required /></td> </tr> <tr> <td>Ort, PLZ</td> <td><input type="text" name="place" required /></td> <td><input type="number" name="plz" class="number" required /></td> </tr> <tr> <td>Straße, Nr.</td> <td><input type="text" name="street"required /></td> <td><input type="number" name="streetnr" class="number" required /></td> </tr> <tr> <td>Telefon</td> <td><input type="tel" name="tel" required /></td> </tr> <tr> <td>Fax</td> <td><input type="text" name="fax" required /></td> </tr> <tr> <td>E-Mail</td> <td><input type="email" name="email" required /></td> </tr> <tr> <td>Datum</td> <td><input type="date" name="date" required placeholder="tt.mm.jj"/></td> </tr> </table> </div> </section> <section id="submit"> <input type="checkbox" name="agb" required /> Ich habe die <a href="../docs/agb.pdf">AGB</a> gelesen und akzeptiere diese. <input type="submit" value="Bestellung Abschicken"/> </section> </form> <section id="footer"> <hr /> </section> </body> </html> Any Ideas why? The data is sent to a yet empty PHP document. The bracelets in the name tag are used to get an array. My PHP version is 5.3.8

Search Results

Search found 13 results on 1 pages for 'html5shiv'.

Page 1/1 | 1

- by Jeff

- by Mikey Hogarth

- by Steve Albers

- by Gidon

- by Steve Albers

- by djthoms

- by user246114

- by Muhammad Sajid

- by mofle

- by Shpigford

- by hdr

- by user2333842

- by user1392411