SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: IE9 JS Help

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE9 JS Help

    Hello

    I have just been updating my sites code a little bit and have come across this issue.

    I found out that the script I was using to make a few features work (Dean Edward' IE9 JS script) also fixes transparent PNG's in IE6.

    I found out how to do that and found all I had to do was add -trans.png to the end of the images filename. I have done that and it displays fine and perfect in all browsers. However, In IE6, I get a javascript error:



    The link to the live site is www.lymmog.co.uk the username and password are both "sitepoint".

    I hope someone here can help me get this fixed? This issue only occurs in IE6.

    Thanks

    Neil

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    *** WARNING ***, I'm going to be brutally frank and not color coat this. I'm going to tell you EXACTLY what I see instead of slapping the rose colored glasses on your head to lead you down the garden path... which to be frank, it looks like you already have had done to you.

    1) I see absolutely nothing on that page which should warrant the use of alpha transparency -- and if it DOES, take an axe to that element visually or put the fix in the CSS manually.

    2) There is absolutely NOTHING on that page warranting the use of that STUPID BLOATED STEAMING PILE OF MANURE KNOWN AS JQUERY, much less that "IE9" javascript NONSENSE... Now, I'm not saying jquery is pointless bloat on a page like this... no, wait, that's EXACTLY what I'm saying -- but then IMHO jquery is pointless bloat on EVERY website!!!

    3) HTML 5 is in DRAFT, not only is deploying it now jumping the gun by YEARS, it adds no actual improvements to the specification to make it worth using in the first place -- well, unless you never embraced STRICT and are just slapping the doctype on there to call your HTML 3.2 "modern". There's a reason it's called "draft" and not "recommendation". It is NOT 'recommended' for use! I also say the same thing about CSS3, which is funny since I'd probably cut the total image sizes by two-thirds while adding images to handle the drop-shadow.

    4) you might want to consider using MEDIA types on your CSS embeds.

    So, first order of business is to strip out all the pointless garbage and get it on the most recent RECOMMENDED doctype... so either X1 strict or H4 Strict... I'd also scrap all the useless/pointless meta tags like author, copyright and that X-UA-compat idiocy... much less the HTML 5 tags that are nothing but bloat like "header"... made even sillier by the "logo" div, paragraphs around non-paragraph elements, and get that presentational image out the markup

    You're ice-skating up-hill code-wise and you've not even added real content or columns yet... that you are up to 152k for THAT should be an indicator something is really wrong there... especially when less than half of that is images. (that two-thirds those images involve a invalid file format for a favicon and a 30k png for the apple icon...)

    The real problem though is you are trying to use HTML5 on a browser that has no clue what that is -- and throwing javascript at legacy browsers to fix that is NOT the answer, the answer is to use a MODERN RECOMMENDATION doctype, and that means HTML 4.01 STRICT or XHTML 1.0 STRICT.

    I swear we need to run a blanket party on whoever is telling people it's ok to use HTML5/CSS3.

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    *** WARNING ***, I'm going to be brutally frank and not color coat this. I'm going to tell you EXACTLY what I see instead of slapping the rose colored glasses on your head to lead you down the garden path... which to be frank, it looks like you already have had done to you.
    Thanks for aiming to be brutally honest. I do have a few things to comment on. as written below.

    1) I see absolutely nothing on that page which should warrant the use of alpha transparency -- and if it DOES, take an axe to that element visually or put the fix in the CSS manually.
    The logo at the top left of the site uses alpha transparency. I would prefer to keep that image so if you could let me know how to use a css fix to fix it in IE 6 then i would be extremely grateful.

    2) There is absolutely NOTHING on that page warranting the use of that STUPID BLOATED STEAMING PILE OF MANURE KNOWN AS JQUERY, much less that "IE9" javascript NONSENSE... Now, I'm not saying jquery is pointless bloat on a page like this... no, wait, that's EXACTLY what I'm saying -- but then IMHO jquery is pointless bloat on EVERY website!!!
    I have only started reading the jquery:novice to ninja book over the last month so am very new to it myself. Surely the aim of jquery was to fix cross browser bugs with it and makeit easier to write more in less lines of code. Surely this is for the best? Currently the only use of jquery on the site is to make it add another stylesheet when the width of the site exceeds 1100 pixels. I was planning on adding little other bits of jquery to other parts of the site in the future

    3) HTML 5 is in DRAFT, not only is deploying it now jumping the gun by YEARS, it adds no actual improvements to the specification to make it worth using in the first place -- well, unless you never embraced STRICT and are just slapping the doctype on there to call your HTML 3.2 "modern". There's a reason it's called "draft" and not "recommendation". It is NOT 'recommended' for use!
    I can understand what you are saying, but why are there many books, online sites and tutorials (even on sitepoint too) all about HTML5? Surely if nobody starts to put HTML5 into use now then it will take it even longer for it to be mainstream in the future. Also ALL major browsers currently support HTML5 features and IE9 when released.


    I also say the same thing about CSS3, which is funny since I'd probably cut the total image sizes by two-thirds while adding images to handle the drop-shadow.
    Pretty much the same as above here. Why all the books/tutorials about it? CSS3 is very useful.

    4) you might want to consider using MEDIA types on your CSS embeds.
    This I do agree with and will sort this out when I get back later.

    So, first order of business is to strip out all the pointless garbage and get it on the most recent RECOMMENDED doctype... so either X1 strict or H4 Strict...
    I would prefer to stick with HTML5 unless I get persuaded by other peoples opinions if they wish to post in here too as i would like to hear what a variety of people think

    I'd also scrap all the useless/pointless meta tags like author, copyright and that X-UA-compat idiocy...
    Why do i need to remove those meta tags?
    and the X-UA tag forces chrome frame to be used if installed, whats bad about that?


    much less the HTML 5 tags that are nothing but bloat like "header"... made even sillier by the "logo" div, paragraphs around non-paragraph elements, and get that presentational image out the markup
    I can't see whats wrong with using those new html5 tags as long as i set them to display:block? So you mean get the 3 bird image out from the top left of the site and into the css? If so then yes i agree and will do that.

    You're ice-skating up-hill code-wise and you've not even added real content or columns yet... that you are up to 152k for THAT should be an indicator something is really wrong there... especially when less than half of that is images. (that two-thirds those images involve a invalid file format for a favicon and a 30k png for the apple icon...)
    I will attempt to cut the size of the images down a bit. Please remember that most of the site content has not even been added. It's an ongoing project. and what's invalid about my favicon?


    The real problem though is you are trying to use HTML5 on a browser that has no clue what that is -- and throwing javascript at legacy browsers to fix that is NOT the answer, the answer is to use a MODERN RECOMMENDATION doctype, and that means HTML 4.01 STRICT or XHTML 1.0 STRICT.

    I swear we need to run a blanket party on whoever is telling people it's ok to use HTML5/CSS3.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    The logo at the top left of the site uses alpha transparency. I would prefer to keep that image so if you could let me know how to use a css fix to fix it in IE 6 then i would be extremely grateful.
    Thing is it doesn't need to -- you've rendered it over the background, cap that and cut. If you really worry about the transparency because of the background, you can typically 'close enough anti-alias' it., which is to say erase all but a few minor anti-aliasing pixels at the corners and then use palettized transparency.

    Quote Originally Posted by rctneil View Post
    I have only started reading the jquery:novice to ninja book over the last month so am very new to it myself. Surely the aim of jquery was to fix cross browser bugs with it and makeit easier to write more in less lines of code.
    I've never been able to figure out the aim of jquery actually -- since most every script I've seen that relies on it typically is MORE code than it would take to do something without it, on top of needing a fat bloated library?!? Even when it does result in less code the stuff done in it generally doesn't run as smoothly or get applied in the proper manner, resulting in MORE cross browser headaches than it could possibly ever solve. (which is why MOST of the stuff people do in it invariably ends up broken in Opera) Even worse, so many people using it forget that javascript should enhance a page's functionality, not supplant it -- resulting in pages that don't even work when scripting is disabled.

    Forget that!

    Libraries make a lot of sense in languages that have folding compilers, where unused code is not included in a binary -- they make NO SENSE to waste your time on in interpreted or "interpreted being called a virtual machine" languages like BASIC, PHP, JAVASCRIPT, PERL or JAVA where they do NOTHING but add overhead... it makes even LESS sense when you figure bandwidth restrictions into the mix.

    It's like that "prototype" nonsense which just adds bloat, overhead and makes the code needlessly cryptic -- yeah that's such and improvement. After three decades of writing software it's really depressing for me to see people making the same mistakes over and over and over and over again.

    Basically as a friend who passed away some 14 months ago used to say, the only thing you can learn from jQuery is how NOT to write javascript. Libraries and frameworks for web development, be it Javascript or CSS are nothing more than sleazy shortcuts that result in fat bloated pages that don't work right! JQuery, Mootools, prototype, blueprint, grid960 -- forget those even exist, and your sites will be all the better for it.

    Quote Originally Posted by rctneil View Post
    Currently the only use of jquery on the site is to make it add another stylesheet when the width of the site exceeds 1100 pixels.
    Ah, mcSwitchy.

    But why add/switch and entire stylesheet?!? Swap one class on body or your outermost wrapper, that way you don't have the load delay of the extra file. It would also work better if you manually run the script right before </body> instead of waiting for onload, as then large screen users won't see one layout, then have it "jump" a few seconds later when the second sheet is loaded... Also it helps to trap whether or not the element has actually chaged, as forcing the change on every resize (which includes the other axis) can result in really bogging down people's machines.

    Though this is an excellent example of what's "wrong" with using jquery. How I'd approach it does end up a hair more code (oh noes, not 200 bytes) but it's WAY clearer what's going on, and it doesn't need some stupid 90+K library to function... and would load/run smoother.

    Code:
    var quickSwitchyLastX=0;
    
    function quickSwitchy() {
    	var x=document.body.clientWidth;
    	if (x!=switchyLastWidth) {
    		quickSwitchyLastX=x;
    		if (x>1001) {
    			document.body.className="wide";
    		} else {
    			document.body.className="narrow";
    		}
    	}
    }
    
    function quickSwitchyInit() {
    	quickSwitchy();
    	if (window.addEventListener){
    		window.addEventListener('resize',quickSwitchy,false);
    	} else if (window.attachEvent){
    		window.attachEvent('onresize',quickSwitchy);
    	} else {
    		window.onresize=quickSwitchy;
    	}
    }
    and manually initialize it before </body> thus
    Code:
    <script type="text/javascript><!-- 
    	quickSwitchyInit();
    </script>
    Which should run it before CSS is applied to the page. I would also put class="narrow" on body so when javascript is not present the user gets the narrow layout.

    Of course looking at what your stylesheet is doing, I'd probably axe that and just use min/max-width instead with an expression for legacy IE.

    Quote Originally Posted by rctneil View Post
    I was planning on adding little other bits of jquery to other parts of the site in the future
    I would avoid using it altogether, and avoid scripting on the page as much as possible... Too many perfectly good websites are being flushed down the toilet by "scripting for nothing" -- resulting in high bounce rates as more and more users go "to blazes with this, I'll visit some other site that actually WORKS".

    AJAX for nothing and your scripts for free... that ain't working, and that's not how you do it... I want my, I want my, I want my PHP...

    ... and even if scratching the things it can give you ends up a little more work, that's why it's called work and not "happy happy fun time"

    Quote Originally Posted by rctneil View Post
    I can understand what you are saying, but why are there many books, online sites and tutorials (even on sitepoint too) all about HTML5?
    Because the vast majority of people moving to it never embraced much less understood the point of STRICT in the first place, and are the people who still vomit up HTML 3.2 then slap a tranny doctype on it. I cannot understand the appeal of HTML5 as it offers little we cannot already do if one bothers to understand the point and use of the existing tags with the possible exception of one or two form elements -- and worse it undoes all the good coding habits we've FINALLY gotten people to start using. It's such a hodge-podge of redundancies slapped together any old way I can't believe any experienced developer is dumb enough to want to use it in the first place!

    Which is probably why the other target audience for it are nubes who don't know any better.

    Quote Originally Posted by rctneil View Post
    Surely if nobody starts to put HTML5 into use now then it will take it even longer for it to be mainstream in the future. Also ALL major browsers currently support HTML5 features and IE9 when released.
    Which is meaninless when IE9 won't even be available to the majority of users since it's Vista/7 only.... also meaningless when most people stuck in corporate environments are stuck on IE6 with NO PLANS to migrate any time in the future since they're stuck with in-house crapplets that don't work if any newer IE is so much as INSTALLED on their machine. Then you have windows mobile, where IE6 is the new kid on the block as of two years ago, with win mobile devices more than two years old still having IE 5.5 on them... Yes, you heard me right, IE 6 is the NEWEST IE available for Win mobile! What, miss the "six on six" party two years ago? That's ok, so did everyone else.

    Though a lot of it just comes down to this attitude of trying to force the user to change just for something flashy and new -- which is most of what's wrong with the current attitude of developers. I find no legitimate reason to even TRY using HTML5 on production pages at this time. It's in DRAFT which means it's for TESTING and REVISION... That's the difference between DRAFT and RECOMMENDATION - it is NOT "recommended for use".

    Quote Originally Posted by rctneil View Post
    Pretty much the same as above here. Why all the books/tutorials about it? CSS3 is very useful.
    But not ready for real world use. It's fun to play with to see what we might be able to use SOMEDAY, but when the majority of it is stupid nonsense like borders (oh noes, I might need an extra 2k of code and images!) or layout elements that make floats seem simple -- not exactly blowing my skirt up...

    Kinda funny in a way, I'm rabidly anti-bloat, but even I don't take it to that extreme... funny how CSS3 fights bloat and HTML 5 seems to exist for the sole purpose of putting it back in.

    Take idiocy like the HEADER element or NAV... serve NO legitimate purpose if people just learned to use heading tags properly or bothers *SHOCK* to implement accesskeys and jumpto menus. (which actually work in the here and now!)

    Quote Originally Posted by rctneil View Post
    Why do i need to remove those meta tags?
    because NOTHING actually uses them, making them 100% pointless bloat. The only legitimate META's there are the DESCRIPTION and charset, and it would help to have TYPES on the META's (though that's just more HTML 5 idiocy where they want us to guess by removing versioning, typing, and all the other things that make code clearer)

    Quote Originally Posted by rctneil View Post
    and the X-UA tag forces chrome frame to be used if installed, whats bad about that?
    It's being sent to everyone else for whom it means jack. Browser specific targeting in the markup is bad practice and one step removed from browser sniffing. Anyone tells you otherwise they're packing you so full of sand you could change your name to Sahara. If you were writing the page properly using the RECOMMENDED specifications, it shouldn't even make a difference chrome/non-chrome all the way back to IE 5.5 in most cases.

    Quote Originally Posted by rctneil View Post
    I can't see whats wrong with using those new html5 tags as long as i set them to display:block?
    They don't even exist in IE8/earlier, and even when IE9 comes out you are not going to see widespread adoption... until IE8 and lower passes below the number of people using Opera, it's really stupid to use HTML 5 or CSS3 unless it's the handful of CSS3 elements that have existed in IE since version 5.0 (like word-break)

    Quote Originally Posted by rctneil View Post
    So you mean get the 3 bird image out from the top left of the site and into the css? If so then yes i agree and will do that.
    Yup, it's presentation, makes no sense when CSS is disabled, so it doesn't belong in the HTML.

    Quote Originally Posted by rctneil View Post
    It's an ongoing project. and what's invalid about my favicon?
    PNG is not a valid "shortcut icon" type in IE, even IE9's not changing that... it's not a valid size being needlessly large (since most UA's only use 16x16) nor can it include multiple sizes. You should be using an ICO format file.

    You should also avoid using really large .png for the apple shortcut icon, given how little RAM handhelds have for dealing with images. Your 320x320 truecolor .png takes half a megabyte to decode -- that's bigger than the video ram in an iPod Touch/iPhone -- welcome to dragging those systems to a crawl. (and being they're the only legitimate targets for "apple-touch-icon"...)

    Basically all the stuff I'm saying would let one create the same page and have it work just fine all the way back to IE 5.5 for little or no extra effort while possibly making the code smaller... Which makes the entire HTML 5 nonsense seem really pointless.

    My markup (I write my complete markup typically before I even THINK about layout or images) for that content would probably look something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="description"
    	content="For all your Lymm birding needs"
    />
    
    <meta
    	name="keywords"
    	content="birds, birding, lymm, ornithology, migrations"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	rel="shortcut icon"
    	href="img/favicon.png"
    />
    
    <link
    	rel="apple-touch-icon"
    	href="img/apple-touch-icon.png"
    />
    
    <title>
    	Lymm Ornithology Group
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Lymm Ornithology Group<br />
    		<small>All you need for birding know-how in Lymm</small>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="index.php">Home</a></li>
    		<li><a href="meetings.php">Events</a></li>
    		<li><a href="newsletter.php">Newsletters &amp; Trip Reports</a></li>
    		<!--<li><a href="#">Trips</a></li>-->
    		<!--<li><a href="#">Reports</a></li>-->
    		<!--<li><a href="comittee.php">Comittee</a></li>-->
    		<li><a href="contact.php">Contact</a></li>
    	</ul>
    	
    	<div id="content">
    	
    		<div class="borderTop"><div></div></div>
    		<div class="borderFirstSide"><div class="borderSecondSide">
    			<h2>Welcome...</h2>
    			<img
    				src="img/frontpage_image.jpg"
    				alt="Waxwings seen on 8th December 2010 in Little Leigh"
    				class="leadingPlate"
    			/>
    			<p>
    				The <b>Lymm Ornithology Group</b> was founded in 1975 to promote the interests of bird-watching in the local area. It has grown into a thriving group not only concerned with birds but also many other aspects of nature. Birds take preference in winter and during the spring and autumn migrations, but flowers come to the fore in the warmer months of summer.
    			</p><p>
    				The group consists of members young and old from all walks of life who encompass the whole range of knowledge from beginner to 'expert' with enjoyment of the countryside taking priority over scientific knowledge. A varied programme of field trips are organised each year and normally consists of a number of day trips and two larger weekend excursions. The day trips usually fall on a Sunday, but occasionally a Saturday is chosen for a botanical field meeting in the summer. The weekend trips prove especially popular not only because of the prime bird-watching sites we visit but also because of the socialising in the evenings. Monthly indoor meetings are held the last friday in the month from August to the following May, commencing at 8pm at the Village Hall. We invite guest speakers to give talks and slide shows on varied subjects of interest.
    			</p><p>
    				Why not come and join us for the evening?
    			</p>	
    		<!-- .borderSecondSide,.borderFirstSide --></div></div>
    		<div class="borderBottom"><div></div></div>
    		
    	<!-- #content --></div>
    	
    	<div id="footer">
    		&copy; 2010 Lymm Ornithology Group |
    		Website design by <a href="mailto:rctneil@aol.com">Neil Tonge</a>
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    The '.border' DIVs being there to implement those rounded corners and dropshadows without CSS3. Even with those, comments to make the closing of tags clearer, and the addition of a keywords meta it's really no more or less markup than your original.

    If I have time later I'll toss together how I'd approach the rest of that page...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •