PDA

View Full Version : How do I make layer visible in Opera only?


HangmanQ
12-24-2009, 03:49 PM
Don't know if this is possible but if it is how do I make certain layer which I have set to be non visible when the page loads be visible in the opera browser only?

davidj
12-24-2009, 04:08 PM
<!--[if Opera]>

<link href="opera.css" rel="stylesheet" type="text/css" />

<![endif]-->

HangmanQ
12-24-2009, 04:28 PM
thanks very much! where exactly do I paste that code though?

Ricky55
12-25-2009, 12:15 AM
in the head of your doc

HangmanQ
12-25-2009, 02:19 AM
thanks! ok so I post that code in the head section, it references a css file called opera.css. I assume I create this but what do I put into it so that this one particular layer is visible when that style sheet is accessed by opera?

Ricky55
12-25-2009, 09:59 PM
well a layer is just a absolutely positioned div, so you have the Div or layer in your HTML, then in your main CSS make this invisible,

So your HTML
<div id="yourDiv"><p>Your Content</p></div>

Then CSS default
div#yourDiv {
visibility: hidden;
}

Then create a CSS file specifically for Opera, in this CSS file make it visible

Then Opera CSS
div#yourDiv {
visibility:visible;
}


In fact in DW CS4 they no longer refer to them as layers Adobe now refer to them correctly as AP Div (absolutely positioned div)

HangmanQ
12-26-2009, 12:58 PM
Thanks for getting back to me, I figured it was something like that but I must be doing something really stupid as it's not working, maybe you can tell me where I'm going wrong? Here's the code from my test page for this-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--[if Opera]>
<link href="opera.css" rel="stylesheet" type="text/css" />
<![endif]-->
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #00FF99;
visibility: hidden;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="Images/c.gif" width="80" height="80" /></div>
</body>
</html>

and all i have in my opera css file is-

@charset "utf-8";
/* CSS Document */
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #00FF99;
visibility: visible;
}

I'm sure this is a simple mistake but never tried to do something like this before!

Ricky55
12-26-2009, 02:15 PM
take

<!--[if Opera]>
<link href="opera.css" rel="stylesheet" type="text/css" />
<![endif]-->

out of the <style> tags.

HangmanQ
12-26-2009, 03:05 PM
I tried that too, originally I had the "if opera" part just at the top of the HEAD section likt this-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if Opera]>
<link href="opera.css" rel="stylesheet" type="text/css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #000099;
visibility: hidden;
}
-->
</style>
</head>

but maybe that's wrong too?

Ricky55
12-27-2009, 01:46 PM
I tried this myself and you are correct it isnt working.

That conditional for Opera doesn't work.

This is normally how you do specify a style sheet for a specific browser but in this case it just isn't working for Opera.

Another way is to detect the browser with javascript, this does work as I've just tested it for you.

You need to create two css files, one for Opera called opera.css and one for all other browsers called default.css, your html / javascript will then look like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function isopera(){
var op=(navigator.userAgent.toLowerCase().indexOf('ope ra')==-1 ? false :true);
document.write((op==true)?"<link href='opera.css' rel='stylesheet' type='text/css' />":"<link href='default.css' rel='stylesheet' type='text/css' />");
}
window.onload= isopera();
</script>


</head>

<body>
<div id="test"></div>
</body>
</html>


Only problem is this won't work if the user has javascript disabled but this should be a small amount of users.

Or you could use a server side scripting language such as PHP to do it.

HangmanQ
12-27-2009, 03:04 PM
Thanks so much Ricky! That worked perfectly and it's fine about it using javascript as like you said the amount of opera users who also don't have js would be quite small.

thanks again for your help

Ricky55
12-27-2009, 05:10 PM
No problem mate just pleased it worked for you!

HangmanQ
12-28-2009, 02:05 PM
hey sorry to bump this one up again, the script is working fine as you said it would but on IE im getting an error message regarding the script-

Message: Not implemented

which related to this code

window.onload= isopera();

It's no big deal as the page still loads and works properly but I'd rather people don't get error messages when they visit the page.

Anyone know how I could fix this?

Ricky55
12-28-2009, 03:05 PM
This will work and it also includes the no script so a style sheet still gets loaded when theres no javascript.

I'm no javascript expert though, I only put it together from my knowledge of Actionscript. If you wanna learn best practice ask on a javascript related forum.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.write('<link href="style.css" rel="stylesheet" type="text/css">');
}
else
{
function isopera(){
var op=(navigator.userAgent.toLowerCase().indexOf('ope ra')==-1 ? false :true);
document.write((op==true)?"<link href='opera.css' rel='stylesheet' type='text/css' />":"<link href='style.css' rel='stylesheet' type='text/css' />");
}
window.onload= isopera();
}
</script>
<noscript><link href="style.css" rel="stylesheet" type="text/css"></noscript>
</head>
<body>
<div id="test"></div>
</body>
</html>

HangmanQ
12-28-2009, 03:12 PM
worked like a charm! thanks again for being so helpful