Forum Moderators: open
function anchor() {null;}
However in IE4 it always complains that something is undefined, or creates an error, etc. I'm trying to bypass the script (without it triggering any errors if possible) so that it's allowed to get to the onclick/onkeypress attributes to execute those scripts.
So essentially how do I have IE4 say, 'I don't need to do anything, what is the next script you want me to execute?'
Yes I realize X+Y+Z, alpha, omega, zeta, and xeta about IE4. I just want to figure this out. Thanks!
- John
What's the point in a wanting to achieve something that does nothing?
Remove script in question, problem solved.
Right now IE4 (as well as say Opera 8.01 and prior) lack the ability to support AJAX.
My JavaScript is modular, therefor I am cloaking what JavaScript I am serving to various browsers. In my main JavaScript handler file my PHP essentially argues, if!MSIE4 execute the first 99.9% of the file, else include this single JavaScript file at the end just for IE4..
Since IE4 has very good CSS support (considering it was released in September 1997) and it supports liquid layouts (including my site's not so simple layout with only minor CSS adjustments via cloaking) I decided to include it in the browsers I support for Preview IV that I'm currently working on locally.
Almost at what I'm trying to do... for settings I use prompts (z-index/positioning layers that are like pop ups without the extra tab/window). If you've visited my site and poked around enough you'll know what they are.
To reduce bandwidth (a major goal in Preview III which I am aiming to complete in Preview IV) I implemented an AJAX includes script. When you open a prompt AJAX would load the contents of the requested prompt in to the prompt. This is because I obviously don't expect most visitors to access this content.
Additionally to avoid making a mess of the address and potentially creating some issues that I was encountering the anchors that open prompts (and are not linked to other pages) look like this...
<a href="javascript:anchor();"
That JavaScript function for most browsers except IE4 is this...
function anchor() {null;}
Now browsers such as IE4 and Opera 8.01 in example don't support AJAX. The same JavaScript functions exist to trigger the same actions which now leads us directly to my goal.
I use Advanced Find and Replace which I find fundamental to being as efficient as I am when I work on code. To automate things I order attributes in elements alphabetically. This means I have down pat exactly how to anticipate what I need and how to approach it before I even open AFR.
Now I am unsure if the order of attributes has much to do with the fact that my anchor() function isn't being handled as desired in IE4. All I know is that I'd like to achieve my goal of IE4 essentially not doing anything but still moving on to event handlers...
<a href="javascript:anchor();" onclick="function();" onkeypress="function();">text</a>
If I can have the anchor function ignored and have IE4 move on to the JavaScript event attributes and execute those functions I can then have non-AJAX browsers reload the page with a GET query such as this...
page.php?prompt=connection
So I plan on figuring this out either way. It will work, I just have to figure out how. ;)
- John
function anchor() {null;}is causing problems mabie void(0) could be of some use.
I'm working on the fourth preview of the twenty eighth version of my website.
Maybe if you stopped trying to support every version of every browser with pixel perfect accuracy, and stopped trying to control your entire site with JavaScript, you would actually have a working version by now, instead of 28 experiments.
My JavaScript is modular
What does that actually mean? I've only ever seen you use the term.
main JavaScript handler file my PHP essentially argues, if!MSIE4 execute the first 99.9% of the file
You've written PHP to work out what JS to include, have you ever considered server overheads, and HTTP request response times?
You really need to work out how to use conditional comments, go here:
[msdn2.microsoft.com...]
only minor CSS adjustments via cloaking
Again, what does that mean?
I decided to include it in the browsers I support for Preview IV
Why? You've supposed to be moving forwards, not backwards? Have you any idea how few people use IE4, if even any?
Read this Wiki page on Browser History, IE4 was only released with Windows 98 BETA, over 10 years ago. Apparently in Feb 2005, 2 and a half years ago MS's own stats said that 0.07% of people used IE4.
When you open a prompt AJAX would load the contents of the requested prompt in to the prompt
You mean like everyone else has been doing for a year or more? Congrats.
I use Advanced Find and Replace which I find fundamental to being as efficient as I am when I work on code
As efficient as you are? Not very then. If you were efficient you wouldn't have so many files you needed AFR.
Now I am unsure if the order of attributes
How long have you been coding for the web? I can't believe you even considered that!
You need to move on, leave ancient browsers and standards behind that nobody uses or supports anymore. Stick to HTML4/STRICT, IE6 is the minimum you should be going down to.
It's a fact that you will never, ever, get every browser to work satisfactorily.
Spend some time looking at conditional comments, and UNOBTRUSIVE JavaScript. Your script intrudes into every area of the page, since the DOM was created it shouldn't - that was the point.
You need to turn lines like this:
<a href="javascript:anchor();" onclick=... onkeypress=...>text</a>
Into lines like this:
<a class='ajaxpopup' href="#">text</a>
Your script should occupy no more space in the HTML than the single <script> tag that calls it in.
I'm sorry if this reply seems harsh, but you really need a wake up call. You can spend forever tweaking pixels for dead browsers, or you can spend a reasonable amount of time making this work, using modern methods, for >95% of users.
[edited by: Dabrowski at 10:31 pm (utc) on Oct. 14, 2007]
My JavaScript is modular. / What does that actually mean? I've only ever seen you use the term.
Concerning JavaScript in the XHTML code itself only functions are present. While I do not at the moment have multiple DHTML libraries simultaneously available I can easily support that. I have a separate DHTML functions file per DHTML library. With the same JavaScript functions in place the only different thing to get the same effect is to use code specific to a library...this allows me to use DHTML library A for browsers that support A and DHTML library B for browsers that support B...as well as show off and potentially benchmark multiple libraries on the exact same code. Overkill? For most yes but the experience learning it all gives me a very valuable perspective.
have you ever considered server overheads,
I have a friend who I talk with about such issues. Also the handler file for JavaScript can easily be bypassed with a minor adjustment of code plus if I build an admin section I'd most likely include the ability to make it a toggle on/off option should it become that much of an issue.
only minor CSS adjustments via cloaking // Again, what does that mean?
Cloaking: Delivering one version of a page to one visitor and another version to others. - WebmasterWorld Forums Index ;)
Why? You've supposed to be moving forwards, not backwards? Have you any idea how few people use IE4, if even any?
In a nutshell learning pure liquid layouts helped me achieve a layout method that is consistent in IE4+, Opera 4+, as well as all modern browsers. I learned something by supporting it that was an improvement over what I already have thus the (lack of) market share for IE4 doesn't matter in this case. It's also helped me see bugs in Gecko browsers that I haven't been aware of before. In example while a prompt is displayed (such as site themes on my .net domain extension website) in Preview IV Gecko 1.8 has trouble and there are plenty of graphic related glitches. The new Cairo graphics engine in Gecko 1.9 (which is present in 1.8 though not used for page rendering) is much more solid and displays absolutely no glitches in any behaviors whatsoever. Additionally the patches for browsers overall to achieve pixel perfect layout across all browsers has dramatically reduced. It's very interesting what mastering the basics can lead to. ;-)
Your points are valid though you're not encountering what I am. Additionally when something is finished that's it. I think your idea of unobtrusive JavaScript is roughly along the lines of what I've been doing.
Anyway my own answer to the issue I've run in to and still need to confirm basically on OS X browsers (not that they support accessibilities at all thus negating the majority of my concerns) that I can simply do the following...
<a href="javascript:dosomethinghere();">Do Something</a>
In IE4+, supported versions of Opera, and all Gecko versions where keyboard navigation is supported (tab and enter keys) this seems to work fine both for usage with only a keyboard or only a mouse. I'm beginning to wonder if I'll end up having any JavaScript event attributes on my site once I'm done with the preview I'm working on.
Anyway I've come away learning lots of interesting and actually very relevant stuff from this. I've answered my own question to my own thread (again). Your input is appreciated and I think I've slowly made my way over to what you call unobtrusive JavaScript. :)
On a side note most of the (CSS) themes are all the same measurements and thus the patch files merely need to be copied (and not modified) therefor testing (again) for a new theme unnecessary. In the event that I do modify measurements I have implemented a method to prevent older browsers to include non-classic measurement based CSS themes...so essentially I'm only spending minimal time with IE4 compared to everything else.
Additionally since IE4, Opera 8.01 (and prior) and perhaps some mobile browsers (clueless on that share) don't support AJAX in addition to sending friends links to check things out I've implemented queries. For example if I wanted to directly link you to a specific page (say compose email) with a prompt to change the page's media type I could send you a link such as compose.php?prompt=mediatype. I'm almost done with working with IE4 so you'll see me posting in the PHP and MySQL forums soon enough. :)
- John
I have a separate DHTML functions file per DHTML library. With the same JavaScript functions in place the only different thing to get the same effect is to use code specific to a library
Again, what?
DHTML library A for browsers that support A and DHTML library B for browsers that support B
Also the handler file for JavaScript can easily be bypassed with a minor adjustment of code
A very minor adjustment of code, did you look at conditional comments? This will remove your need entirely of what you call 'JavaScript handler'.
Cloaking: WebmasterWorld Forums Index
Under what section? SEO/Marketing. It doesn't relate to CSS in the slightest.
consistent in IE4+, Opera 4+, as well as all modern browsers
I like the bit about modern browsers. Again, lose IE4.
It's also helped me see bugs in Gecko browsers that I haven't been aware of before
From experience, the bug is almost definately in IE. But if it makes you feel better, try calling the Firefox developers, and pointing out their bugs that obviously nobody else has noticed.
I have also found from experience that if you stop trying to be pixel perfect when there is really no need, 99% of little 2px here and there bugs don't matter anymore.
It's very interesting what mastering the basics can lead to
Yes, you should try it.
I think your idea of unobtrusive JavaScript is roughly along the lines of what I've been doing.
1. It's not my idea. It's what all competent, experienced JavaScript coders are doing with their advanced code.
2. It's not what you're doing.
where keyboard navigation is supported ... any JavaScript event attributes on my site
It sounds like you're developing your keyboard shortcuts to make up for your lack of understanding. I don't have any event attributes in my pages, but that doesn't mean my elements don't do anything.
I've slowly made my way over to what you call unobtrusive JavaScript
Overnight? Wow! That's impressive! It took me months, I must be a dumbass.
most of the (CSS) themes are all the same measurements
But they shouldn't be, that's the point of themes. What you really mean is you've changed the colours.
See [csszengarden.com...]
In the event that I do modify measurements I have implemented a method to prevent older browsers to include non-classic measurement based CSS themes
Again, use conditional comments, takes 2 seconds, and requires minimal code, and processing time.
Your constant need to write patches and tweaks shows you lack of understanding of basic CSS. Don't worry, I really struggled with it too, basically the theory rarely matches the end result, so CSS is an almost constant stream of work-arounds. All the more reason to keep it simple.
mobile browsers (clueless on that share)
Also I have no idea. I imagine Windows Mobile would run IE more or less the same, just with a smaller screen obviously.
For example if I wanted to directly link you to a specific page (say compose email) with a prompt to change the page's media type I could send you a link such as compose.php?prompt=mediatype
So? You act like nobody's ever done that before.
see me posting in the PHP and MySQL forums soon enough
No I won't, I don't do PHP although I do do MySQL I don't really know enough to advise.
I realise it's a good learning experience supporting older browsers and making things pixel perfect, but it just takes far too much time and isn't worth the bother. You've been working on this version of your site now for almost a year, I've written a hugh database system spanning 4 front-end sites in the same time.
I would be happy to help you out with unobtrusive javascript libraries, I am working on one myself which will be a helper library for pretty much everything. It's a learning experience for me as I'm using OLN in practise for the first time.
As suggested above you are trying to code a square peg to fit into a round holed browser and really there is no reason to.
We are past the time where one can justify using an outdated browser.
[edited by: Demaestro at 8:48 pm (utc) on Oct. 15, 2007]
Right now I'm effectively removing most if not all the JavaScript event attributes from elements. This means I'll only call the function from href="javascript:function();" in example. It moves all my JavaScript out of the page, removes the issue with ampersands I was dealing with, has less code, etc.
As far as being unobtrusive how does this sound? What do you mean by unobtrusive libraries specifically?
- John
To see an example of code like this, check out the second and fourth posts in this old thread [webmasterworld.com] (it's pretty simplistic code, but since there are 'before' and 'after' samples, you can see the difference between the approaches).
Incidentally, aside from the IE conditional comments that have already been mentioned, a common way of hiding javascript functions from particular browsers is to simply test for a feature of the language not supported by the browser in question; for example:
if (document.getElementById) {
/* Code for more javascript-aware user agents goes here */
}
If the user agent doesn't understand getElementById, the code won't be executed.
-b
No need to continue on about IE4 now in any shape form or fashion
Hooray! Now we're getting somewhere, ok, onto some more useful code.
What do you mean by unobtrusive libraries specifically?
Here's a quick before/after one of your links.....
Before: (may not be exact, but it's the after that counts)
<html>
<head>
<script>
your function......
</script>
</head>
<body>
<a href='javascript:ajaxpopup();' onclick...>
</body>
</html>
ok, here's more or less what you had originally. The problems here are mainly:
Script mixed with HTML, technically ok but untidy and the object of unobtrusive js and css is to keep the markup clean.
href property points to javascript, what if javascript is disabled (no arguement please we all know that is minimal but still good practise), and also, as you have experienced what if browser doesn't support it, screen readers and mobile devices for example.
event properties polluting your clean markup.
After:
<html>
<head>
<script type='text/javascript' src='myscript.js'></script>
</head>
<body>
<a class='ajaxpopup' href='mypopup.html' target='_blank'>
</body>
</html>
In myscript.js (might be syntax errors, I haven't tested this)function initPopups() {
// Quit if downlevel browser
return if(!document.getElementsByTagName);
// Look up all links on page
var aTags = document.getElementsByTagName( "a");
// Check all tags
for( var i = 0; i < aTags.length; i++) {
// Single this one out
var tag = aTags[i];
// If it's one of our popup links then reconfigure it
if( tag.className == "ajaxpopup") {
// Remove target and change href to use ajax to pop up the specified page
tag.target = "";
tag.href = "javascript:ajaxpopup( "+ tag.href +");";
// Add event handlers
addEvent( tag, "click", ONCLICK FUNCTION HERE);
addEvent( tag, "keypress", ONKEYPRESS FUNCTION HERE);
}}
}
// Trigger your init function on page load
// Look this function up on the net, it's gold
addEvent( window, "load", initPopups);
Now, we've added a class to the <a> tag, I'm assuming you probably had this already. We've cleaned up the markup with no visible script. Any browser with Javascript disabled will still get the popup. Any browser that doesn't properly support the DOM will still get popup.
Simple eh? And much tidier. And should be 100% compatible as all browsers should get some version of your popup.
