PDA

View Full Version : Safari and Chrome won't function opacity properly



jgroebuck
Jul 10th, 2010, 11:19 PM
Hi,

On my website, I have a navigation menu that remains 50% transparent when not hovered over and when hovered over it becomes opaque, and then when you rollout, it returns to 50% transparent.

It works perfectly in firefox, it doesn't work in IE8 - it's always opaque(not too bothered) but in Safari and Chrome it works like mozilla, but it kinda doesn't - when you rollout of the button you were on it returns to its 50% transparent state, but all the other buttons remain opaque.

It's quite messy looking like this. I'm not sure how to fix it or if it is fixable. If you have time, I would be majorly grateful if you could have a look and see if it's possible to display it as I intended in Safari and Chrome. Many thanks in advance for your time.

The website is http://jrcreativedesign.co.uk/index.html

The CSS is:


@charset "utf-8";
* {margin:0;padding:0}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
color: #666;
text-decoration: none;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#header {
width:100%;
position:fixed;
float: left;
background-color: #FF0;
top: 0px;
text-align: center;
height: 28px;
z-index: 1000;
left: 0px;
}
#top_nav_container {
width: 100%;
position: fixed;
top: 28px;
z-index: 1005;
}
#top_nav {
margin-right: auto;
margin-left: auto;
width: 600px;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}

#top_nav ul {
clear:left;
float:left;
list-style:none;
position:relative;
}
#top_nav ul li {
display:block;
float:left;
list-style:none;
position:relative;
}
#top_nav ul li a {
display:block;
text-decoration:none;
height: 30px;
width: 150px;
}
#top_nav ul li a:hover {
background-position: 0 -30px;
}
#top_nav:hover {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.news {
background-image: url(images/buttons01/news.png);
background-repeat: no-repeat;
}
.profile {
background-image: url(images/buttons01/profile.png);
background-repeat: no-repeat;
}
.work {
background-image: url(images/buttons01/work.png);
background-repeat: no-repeat;
}
.contact {
background-image: url(images/buttons01/contact.png);
background-repeat: no-repeat;
}
#container {
width: 520px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
top: 188px;
position: relative;
height: 600px;
}
.bigger_container {
height: 500px;
}
#footer {
background-color: #000;
height: 28px;
width: 100%;
position: fixed;
bottom: 0px;
left: 0px;
}
#services {
margin-right: auto;
margin-left: auto;
width: 350px;
height: 28px;
}
.rule {
margin-top: 50px;
margin-bottom: 50px;
}
p {
margin-top: 15px;
margin-bottom: 15px;
}
h1 {
font-size: medium;
margin-top: 40px;
}
a {
color: #09F;
text-decoration: none;
}
.bold_txt {
font-weight: bold;
}

thomasmclennan
Jul 11th, 2010, 02:33 AM
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
I've never seen any of these validate. May I suggest an image sprite? Go into photoshop and put all the buttons into one image. select all the mouse-over buttons, cut and paste them back to a new layer, then change the opacity. You could even come up with a cool effect.

scroll

http://i880.photobucket.com/albums/ac1/pipleader/buttonSprite.png

karlosio
Jul 11th, 2010, 04:17 AM
Or get JQuery to do it if you know a bit of javascript. Its excellent at doing this kind of thing http://jquery.com

example



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- gotta include the jquery file from jquery.com -->
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// set the menu links to 50% opacity on load
$('.menu a').fadeTo('slow', 0.5);
// when hovered over fade to 100% opacity and back to 50% on fade out
$('.menu a').hover(function()
{
// moused over
$(this).fadeTo('slow', 1.0);
}
, function()
{
// mouse out
$(this).fadeTo('slow', 0.5);
});
});
</script>
<style type="text/css">
/* Reset */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Century Gothic", "Myriad Pro", Arial, sans-serif;
font-size: 62.5%;
}
ul.menu {
width: 400px;
margin: 30px;
list-style: none;
}
ul.menu li {
margin-bottom: 5px;
}
ul.menu li a {
display: block;
padding: 5px 10px;
font-size: 2em;
font-weight: bold;
text-decoration: none;
background-color: #1a1a1a;
color: #eee;
}
</style>
</head>

<body>
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

</body>
</html>

jgroebuck
Jul 11th, 2010, 01:24 PM
Thanks for the prompt replies karlosio and thomasmclennan.

I liked the idea of the JQeury. I don't how to code Javascript but the code you provided me with works a treat and looks great on all browsers

I always want to consider cross-browser compatibility and found out JQuery supports:

Firefox 2.0+
Internet Explorer 6+
Safari 3+
Opera 9+
Chrome 1+

However I tested IE on IE7+8 and the JQuery script had no effect(not too bothered).

One other thing, is it possible to have the menu links instantly set to 50% opacity on load, instead of transitioning to 50% opacity on load? The way it transitions to 50% when the page is loaded is quite a good usability factor I think, cause it suggests to the user "I'm here if you need me. I'll just materialise into the background for now". But I was just curious if it is possible to be already set at 50% opacity on load - just to try it out.

jgroebuck
Jul 11th, 2010, 02:08 PM
I had a couple of other thoughts. Is it possible to set a fade time instead of a 'slow', 'normal' and 'fast' preset? I seen on the JQuery website that:


"the strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used."

However, I experimented with personalised speed settings and it only threw up the, I guess, default 'normal' speed. I would maybe like the fade out animation to be slower.

The other idea was, is it possible for the menu to instantly snap back to 50% opacity on roll out? This because I noticed you can have a build-up of transition animation if you continuously rollover and rollout of the menu really fast. Or even better, still retain the transitions, but if the cursor is anywhere on screen but the menu, the menu will be 50% opacity. Or some other coding idea like this. Because my coding knowledge is so little, I can't comprehend which way to code this - to not have animation build ups.

jgroebuck
Jul 11th, 2010, 02:16 PM
My animation build-up problem was not as unique as I first thought. I found the solution to it, and it's simple and makes sense. I called a stop() function before the fade animations. So the code is now:


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// set the menu links to 50% opacity on load
$('#top_nav').stop().fadeTo('slow', 0.5);
// when hovered over fade to 100% opacity and back to 50% on fade out
$('#top_nav').hover(function()
{
// moused over
$(this).stop().fadeTo('fast', 1.0);
}
, function()
{
// mouse out
$(this).stop().fadeTo('fast', 0.5);
});
});
</script>

I found the more detailed explanation here:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

karlosio
Jul 11th, 2010, 04:39 PM
I wasn't aware about that stop function. You learn something new every day lol. :thumbsup: I've only been learning it for the past couple of months myself but I'm happy you liked my approach. :) However your code change is highlighting the whole menu, maybe u should change the css selector in the javaScript code to just highlight the links when moused over (unless that is what you want, of course)



$('#top_nav a')


Also maybe you can try setting the speed to something like 50 milliseconds on the moused over function to get something really quick if thats the effect you looking for


$(this).stop().fadeTo(50, 1.0);

jgroebuck
Jul 11th, 2010, 05:35 PM
Yeh, the idea of the menu is that it highlights all of it when hovered over any link. You may not have noticed, but I also have seperate CSS hover states for the individual links. Perhaps I need to make these darker or a different colour. But I like the idea that good design is not noticable.

Thanks again, karlosio.