Web/Wap design:: How do you make Javascript run on different browsers ??
Hi fellow skunkers; I was looking at the "view-code" of the apple website "http://www.apple.com/" and i noted a JScript called "browser_detect.js" ;; Which I guess helps the site detect what sort of browser the client is using and serves the right content e.g " http://developer.garmin.com/web/communicator-api-0.5/jsdocs/overview-Browser... " However, the script shown seems to just detect the browser; so I guess there is more to be done for cross-browser support. My question is; how do you make code like this work across the common browsers (used as an example) : chrome, mozilla, internet explorer, opera mini etc The code below only seems to work fine with Internet explorer; the alert box pops up fine only on IE; but not chrome or mozilla (I just hope its not a Vista problem) =============== save as php or any relevant extension and serve from your Apache or any other program ============== <HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <SCRIPT> M=false; N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(Pred.style.color); if (N) alert(document.ids['Pred'].color); } </SCRIPT> </HEAD> <BODY onload="go();"> <P ID="Pred" STYLE="color:red">This is Red</P> </BODY> </HTML> ==== *Question again:* Are there standard scripts like the "browser_detect.js" shown above that one can adapt to their web/wap site for cross-browser support (cos it seems each browser demands different methods to execute the JScripts successfully) ?? (yes, and I have googled, I dint come up with anythin substantial :) Any help or direction would be much appreciated. Thanks.
i think the script part should be something like <script language='javascript'> and you also need to call the function for it to work... On Mon, Nov 15, 2010 at 11:13 AM, ndungu stephen <ndungustephen@gmail.com> wrote:
Hi fellow skunkers; I was looking at the "view-code" of the apple website "http://www.apple.com/" and i noted a JScript called "browser_detect.js" ;; Which I guess helps the site detect what sort of browser the client is using and serves the right content e.g "http://developer.garmin.com/web/communicator-api-0.5/jsdocs/overview-Browser..." However, the script shown seems to just detect the browser; so I guess there is more to be done for cross-browser support.
My question is; how do you make code like this work across the common browsers (used as an example) : chrome, mozilla, internet explorer, opera mini etc The code below only seems to work fine with Internet explorer; the alert box pops up fine only on IE; but not chrome or mozilla (I just hope its not a Vista problem) =============== save as php or any relevant extension and serve from your Apache or any other program ============== <HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <SCRIPT> M=false; N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(Pred.style.color); if (N) alert(document.ids['Pred'].color); } </SCRIPT> </HEAD> <BODY onload="go();"> <P ID="Pred" STYLE="color:red">This is Red</P> </BODY> </HTML> ==== Question again: Are there standard scripts like the "browser_detect.js" shown above that one can adapt to their web/wap site for cross-browser support (cos it seems each browser demands different methods to execute the JScripts successfully) ?? (yes, and I have googled, I dint come up with anythin substantial :) Any help or direction would be much appreciated.
Thanks.
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
@Jamo It still doesnt work on Chrome and Mozilla; have you tried it ? ==== <HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <script language='javascript'> M=false; N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(Pred.style.color); if (N) alert(document.ids['Pred'].color); } </SCRIPT> </HEAD> <BODY onload="go();"> //function is called <P ID="Pred" STYLE="color:red">This is Red</P> </BODY> </HTML>
@ndungu, okay, if i were you and i didn't av a lot time laying on my hands, i would adopt JQuery or Mootools and move onto solving other problems. but then again, if you just want to play with jscript, its fun On Mon, Nov 15, 2010 at 11:33 AM, ndungu stephen <ndungustephen@gmail.com> wrote:
@Jamo It still doesnt work on Chrome and Mozilla; have you tried it ? ==== <HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <script language='javascript'> M=false; N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(Pred.style.color); if (N) alert(document.ids['Pred'].color); } </SCRIPT> </HEAD> <BODY onload="go();"> //function is called <P ID="Pred" STYLE="color:red">This is Red</P> </BODY> </HTML> _______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
change the substring to 0,8 On Mon, Nov 15, 2010 at 11:33 AM, ndungu stephen <ndungustephen@gmail.com>wrote:
@Jamo It still doesnt work on Chrome and Mozilla; have you tried it ?
====
<HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <script language='javascript'> M=false; N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(Pred.style.color); if (N) alert(document.ids['Pred'].color); } </SCRIPT> </HEAD> <BODY onload="go();"> //function is called <P ID="Pred" STYLE="color:red">This is Red</P> </BODY> </HTML>
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- * If the human brain were so simple that we could understand it, we would be so simple that we couldn't. - Emerson M. Pugh *
@ Kris Changing the substring to 0,8 works; Thanks. (Though I dont get why change from 1-->8)?? I will look the rest of the code we are working on and see if we can fix it. @ Gisho Let me study this JQuery and look at its advantages.
@ndungu get into jquery would save you a lot of time plus you end up with clean code that is cross browser ready. On Mon, Nov 15, 2010 at 12:12 PM, ndungu stephen <ndungustephen@gmail.com>wrote:
@ Kris
Changing the substring to 0,8 works;
Thanks.
(Though I dont get why change from 1-->8)??
I will look the rest of the code we are working on and see if we can fix it.
@ Gisho
Let me study this JQuery and look at its advantages.
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
-- * If the human brain were so simple that we could understand it, we would be so simple that we couldn't. - Emerson M. Pugh *
I believe as a rule you should use JavaScript frameworks to sidestep cross-browser compatibility issues. Other examples are: - Mootools - ExtJS (my favourite) - Scriptaculous - Prototype How you choose which framework depends on what you are looking for e.g. cool widget effects, ease of coding given the different APIs, cute user interfaces, page optimization i.e. small framework size and so forth. In some cases you can also combine frameworks on the same website/webapp to get the best of both worlds. This should help: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Ahsante; Guess we have a lot go through; lemme start with all the leads you guys have provided !
Try this <HTML> <HEAD> <TITLE>Cross Browser alert</TITLE> <script language='javascript'> var M='false'; var N='false'; function go(M,N) { if(M!='') { alert("Internet Explorer"); } if (N!='') { alert("Netscape"); } } </script> </HEAD> <BODY> <script language='javascript'> var app=navigator.appName.substring(0,1); if (app=='N') { N='true'; M=''; //document.writeln(''+N); go(M,N); } else { M='true'; N=''; go(M,N); } </script> <br /> <span id="pred" style="color:red">This is Red</span> <script language='javascript'> </script> </BODY> </HTML>
@Jamo It works; I am trying to change the way am calling several functions on the body/html and see if thats where the cross-browser may be failing for us;
the code is very redundant, id rather you re-examine it, let me point out that appName property will always give you either netscape or internet explorer as all other browsers will be classified as netscape except IE. Use the developer tools on google chrome. On Mon, Nov 15, 2010 at 1:21 PM, ndungu stephen <ndungustephen@gmail.com>wrote:
@Jamo
It works;
I am trying to change the way am calling several functions on the body/html and see if thats where the cross-browser may be failing for us;
_______________________________________________ Skunkworks mailing list Skunkworks@lists.my.co.ke http://lists.my.co.ke/cgi-bin/mailman/listinfo/skunkworks ------------ Skunkworks Rules http://my.co.ke/phpbb/viewtopic.php?f=24&t=94 ------------ Other services @ http://my.co.ke
participants (5)
-
gisho -
Haggai Nyang -
jamo njoroge -
kris njoroge -
ndungu stephen