Omnimaga
General Discussion => Technology and Development => Computer Programming => Topic started by: Snake X on August 04, 2011, 09:05:09 pm
-
So, I built a nice piece of HTML on a page somewhere. However, it only shows up *properly* in chrome (dont ask what it is, just go along with the story). So I wanted to do something like this:
<script language="javascript" type="text/javascript">
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome === true)
{
<p>this is HTML</p>
<p> all fancy shmancy html code goes here.</p>
}
else
{
document.write("get chrome!");
}
</script>
-
You shouldn't be putting HTML directly in JS code. That shouldn't even work. If you want to modify the page using Javascript, you have to go through the DOM, or use document.write like you did in the else clause. What you write should also be proper HTML.
So, the two interesting lines should be like this:
document.write("<p>This is HTML</p>")
document.write("<p>Get Chrome!</p>")
The only reason that might work is because the JS code is being parsed like HTML. There are a couple ways to prevent that. Use CDATA, or make the whole thing a comment. Either should work. Note that you should do this for any JS code, just in case.
-
Well, calcdude beat me over the fence (congrats if you get the reference). Like he said, writing HTML directly in JS is a no-no. You need to put it inside of quotes in a document.write().
EDIT: Doing a quick test in DW, this works:
<script language="javascript" type="text/javascript">
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome === true)
{
document.write("<p>this is HTML</p><p> all fancy shmancy html code goes here.</p>");
}
else
{
document.write("get chrome!");
}
</script>
-
err, what is CDATA? I'm (VERY) new to javascript to be honest. I wanted to learn enough just to make this work. Also what is DOM?
edit: I put my html in double quotes and it showed up blank. My html includes tables, swf embedding, font color, size changes, and ascii extended characters.
-
err, what is CDATA? I'm (VERY) new to javascript to be honest. I wanted to learn enough just to make this work. Also what is DOM?
CDATA stands for character data, but it allows non-XHTML pages to have actual JavaScript between the script tags, like you have. See here (http://javascript.about.com/library/blxhtml.htm) for more detail. (What I said might not make sense, so you might just want to look at the link.)
DOM stands for Document Object Model, for info look here (http://www.quirksmode.org/dom/intro.html). (Unless someone wants to explain >.>)
-
DOM stands for the Document Object Model. It describes an object-oriented interface to an HTML (or any XML) file.
As for CDATA, it is just a special section which is not parsed. The best way to do it is like this:
<script type="text/javascript">
//<![CDATA[
alert("Code goes here")
//]]>
</script>It also makes it XHTML-compatible.
Edit: ninja'd
-
EDIT: it works.. kinda. However it will display in firefox when it should not have because of the if-then condition.
edit: here is my code:
<script language="javascript" type="text/javascript">
document.title=("Cell's Awesome Profile! :)")
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome === true)
{
<script type="text/javascript">
//<![CDATA[
alert("
<p>i has chrome yay</p>
")
//]]>
}
else
{
document.write("get chrome!");
}
</script>
edit 2: the above code now does not work like at all. It is blank nomatter what browser u look at
-
You slightly misinterpreted what I said :P
You don't use another <script> tag. The whole script should be in a CDATA section.
And the "alert(..." line in the example I gave stood for any JS code, given that it was a stand-in for the entire JS script.
Edit: thus, the fixed version of your code is
<script language="javascript" type="text/javascript"> //<![CDATA[
document.title=("Cell's Awesome Profile! :)")
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome === true)
{
document.print("<p>i has chrome yay</p>")
}
else
{
document.write("<p>get chrome!</p>");
}
//]]>
</script>Edit 2: also, you didn't put <p></p> around the other text. Fixed.
-
I copied and pasted exactly what you had and it didnt show anything in chrome. However it displayed 'get chrome!' in firefox.
edit: is there any other way to do this exact same thing in other browser languages besides js? I mean like if my browser is chrome, execute all html, if not display 'yu needs chrome!'
-
What are you trying to do? If it's generating pages, that's probably best done in PHP or similar.
-
You could use php...
<html>
<body>
<?php if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "chrome") > -1) { ?>
<!-- Chrome html here -->
<?php } else { ?>
<!-- Display error! -->
<?php } ?>
</body>
</html
-
Guys, don't you only need to use the CDATA tag when the page is in XHTML?
-
You could use php...
<html>
<body>
<?php if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "chrome") > -1) { ?>
<!-- Chrome html here -->
<?php } else { ?>
<!-- Display error! -->
<?php } ?>
</body>
</html
I have used your suggestion and made this:
<?php if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "chrome") > -1) { ?>
<!-- <p><font face="arial" size="24"><b>IM USING CHROME!!! </b></font></p> -->
<?php } else { ?>
<!-- <p>get chrome!</p> -->
<?php } ?>
however this is displayed on both chrome and firefox: -1) { ?>
edit: if i take out the <!-- and --> on both, it displays all 3:
-1) { ?>
IM GETTING CHROME
get chrome!
-
PHP is server-side. It needs to be run on the server. I don't know where you're testing this from, but, if you're testing it on your computer, just viewing the page in a web browser won't work. You'll have to set up a (small, temporary) webserver of your own on your computer to test. Now, if you're uploading this every time and testing it on your website, then make sure your host has PHP enabled. (Most all do.)
-
im testing it on a webs page. Also where im putting this php up isnt gonna be on a server, its going to be on a chatango profile.
edit: http://greyshadowencodes.webs.com/detection.htm
-
Try changing that to detection.php ;)
-
well I can't change it to .php where the final version of this code will be used at. Is there a way I can do google chrome detection the same way I did in css? that's probably my only hope now
-
Sorry, didn't exactly read the last post :P Try this...
<div id="chrome">You have chrome!</div>
<div id="nochrome">You don't have chrome =\</div>
<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
document.removeChild(document.getElementById("nochrome"));
} else {
document.removeChild(document.getElementById("chrome"));
}
</script>
-
it outputs this in chrome and firefox:
You have chrome!
You don't have chrome =\
:(
-
Guys, don't you only need to use the CDATA tag when the page is in XHTML?
Yeah, that. The only point of it is to protect the well-structured XML.
-
You should be using XHTML anyway ;D
-
well not all of us know xhtml.. lol. I only know html and how to construct html 5
-
XHTML is just HTML that actually obeys XML standards. That's all.
So, instead of <br>, use <br/> (or <br /> to make some HTML parsers happy).
-
it outputs this in chrome and firefox:
You have chrome!
You don't have chrome =\
:(
Here's some browser information to help you refine your check :)
-
so then in that case, the code has to be specific enough to identify chrome from firefox.. Hmm. This im not sure how to do. Man i might be trying to do the impossible really :S
-
The only thing you need to pay attention to is the user agent header. Chrome is the only one that has the word "Chrome" in it.
-
See, that's what i get for just writing code without actually trying it =P Try this:
<div id="chrome">You have chrome!</div>
<div id="nochrome">You don't have chrome =\</div>
<script type="text/javascript">
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
document.body.removeChild(document.getElementById("nochrome"));
} else {
document.body.removeChild(document.getElementById("chrome"));
}
</script>
-
OOOOO
MMMMMM
GGGGGGGGG
THANK YOU SOO MUCH!!! IT WORKS :D
-
np :) Glad it worked for what you needed :)