Hi Joe and Andy -

I've created my site's new skin by following the html5 boilerplate video tutorial listed on DnnCreative.

I have tried my best to set up the forty fingers style helper and modernizer scripts verbatim so that they will give me the html5 support I need. However, it would seem something is a muk. I am having the "no-js" class added to browsers that are definitely running js. It would also seem that the fortyfigers style helper is either not correctly identifying the browser loading the page, or is not running properly.

You can view this issue in action at www.yandasmusic.com

I will lay out my skin object configurations and js skin calls below. Maybe you will spot something that I can not see?

Here are the skin objects for fortyfingers:
< %@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
<fortyfingers:STYLEHELPER ID="SHIE6" IfBrowser="IE=6" AddHtmlAttribute="class,no-js lt-ie9 lt-ie8 lt-ie7" runat="server" />
< fortyfingers:STYLEHELPER ID="SHIE7" IfBrowser="IE=7" AddHtmlAttribute="class,no-js lt-ie9 lt-ie8" runat="server" />
< fortyfingers:STYLEHELPER ID="SHIE8" IfBrowser="IE=8" AddHtmlAttribute="class,no-js lt-ie9" runat="server" />
< fortyfingers:STYLEHELPER ID="SHGTIE8" IfBrowser="IE>8" AddHtmlAttribute="class,no-js" runat="server" />
< fortyfingers:STYLEHELPER ID="SHNOTIE" IfBrowser="!IE" AddHtmlAttribute="class,no-js" runat="server" />
< fortyfingers:STYLEHELPER ID="INCLUDE" AddToHead='' AddCssFile="css/normalize.min.css" runat="server" />

Here is the skin call for the modernizer js:
< script type="text/javascript" src="<%=skinpath%>js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>


I hope this information helps. There is defiantly some crazy stuff going on.

Thanks so much!
Alex

Hey guys,

I've spent the morning trying to track down the reason for the modernizer script to not run properly. I've found a few possible causes, although I am still getting the "no-js" class on all browsers.

1. Calling the modernizer script in the document head:
After re-downloading the modernizer package to update to the latest version, I noticed that the call to load the modernizer javascript:
< script type="text/javascript" src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js">< /script>
was actually placed in the html document's head section. In the tutorial skin, it is placed in the body.

(On a side note, check out line 14 in default.ascx in the tutorial project files. You have an extra quotation mark which would cause that skin to also not load the modernizer script. This was the reason initially for mine not loading >.< )

2. Linking the normalize.min.css file:
In the coding of the tutorial files, line 13, you use the code "AddCssFile="css/normalize.min.css".
For some reason, IE 10 Developer Tools was throwing an error on this call saying "Unexpected end tag". I'm not sure if it was actually loading the file or not.

3. main.js is an empty file with no code:
Whats up with that?


I correct the first two issues by substituting the following fortyfinger calls:
< fortyfingers:STYLEHELPER ID="INCLUDE" AddToHead='< meta name="viewport" content="width=device-width">' runat="server" />
< fortyfingers:STYLEHELPER ID="INCLUDE2" AddToHead='< script type="text/javascript" src="http://www.yandasmusic.com/Portals/_default/Skins/Yandas-Response/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js">< /script>' runat="server" />
< fortyfingers:STYLEHELPER ID="INCLUDE3" AddToHead='< link rel="stylesheet" type="text/css" href="http://www.yandasmusic.com/Portals/_default/Skins/Yandas-Response/css/normalize.min.css" />' runat="server" />

You can see this setup live at: www.yandasmusic.com

However, through all my troubleshooting, all broswers are still getting the class of "no-js" added to them... What is left to try? I would REALLY like to get this boilerplate rocking!

Do you still have a demo site up that is working with the modernizer correctly loading? Maybe I can compare notes, and find the issue?

Thanks! Alex

Update:

The script is loading the "lt-ie9" to the html tag on IE8. Does this mean that it is working, just not completely?

Alex


Edit:
I forgot that the "lt-ie9" tag is added by the fortyfingers style helper, and does not necessairly indicate that the modernizer is working, as there is still a "no-js" class.

Also - it would seem that the modernizer and jquery are both throwing sytax errors, and breaking the page in IE8. Any idea what it's only happening in IE8? Modernizer issues again?

I'm assuming that the modernizer script is the script that translated the CSS media queries for IE8 and below. I notice on my homepage in IE8 that the media queries were loaded even with the errors, but any other page does not load the media queries at all.

Another Update:

I found the demo page for the responsive html5 boilerplate:
http://www.initializr.com/try

After inspecting the page, I found that my html tag still had the "no-js" class on it. Why is this?

I looked at this page with several different browsers, and did not see no-js with any of them.

Is it possible that you are using a browser that has js turned off?

Hey Joe - Thanks for your reply.

I have opened both yandasmusic.com and initializr.com/try on Firefox, IE, Chrome, and Opera. All of them are showing the no-js class added to the html element. Strange, to be sure.

From your inspection, does it appear to you like the modernizer script is loading correctly? On my end everything looks good to go until I try opening the website in IE8. Then I get nailed with a number of javascript bugs and page load errors.

Also - Does the modernizer script include the javascript to interpret css media queries for IE8? I notice when I open my homepage up in IE8 that the media queries load before the JS starts to break the page.

Though some help at stack overflow, I was able to get the modernizer working on my site. However, the blips referring to the modernizer javascript that I mentioned in my second response to this thread should be addressed in the tutorial files Joe. Save guys like me a few headaches!

Alex

Forwarding to Andy ...