IE issue with rounded corners

HTML & CSS
1

I just finished the Javascript Live course, and I’m dipping my toe in the water with some jQuery.

I was pretty d*mn pleased with myself for coming up with this “also works with javascript disabled” solution. (replace the class if javascript is enabled)

The lava thingie is sliding, the links light up on mouse over, everything was perfect!
And then I just discovered that when you click on a link (a href=“link.html”) nothing happens!! Tested in FF and IE.
And to make matters worse, I can’t figure out why that is. I really hope someone can help me fix this.

Not sure what standard procedure is here - should I upload this somewhere as well, or is providing the code enough?

HTML ( more divs than needed because it’s part of a bigger page…but this is ‘menu only’)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>title</title>

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

<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.min.js"></script>
<script type="text/javascript" src="scripts/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="scripts/menuscript.js"></script>


</head>

<body>
<div id="wholepage">
 
  <div id="menulinks">
    <div id="menu">
      <ul class="menu" id="navmenu">
        <li><a href="link.html" title="Link" class="disabled">Link </a></li>
        <li><a href="link.html" title="Link" class="disabled">Link</a></li>
        <li><a href="link.html" title="Link" class="disabled">Link</a></li>      
      </ul>
    </div>
  </div>

  
</div>

</body>
</html>

CSS


.menu {
	position: relative;
	height: 30px;
	width: 720px;
	background-color: #008cad;
	padding: 5px;
	margin: 0;
	overflow: hidden;
	
}
.menu li {
	float: left;
	list-style: none;
}
/*jquery adds this class */
.menu li.back{
	border: 0;
	background-color: #55b1ca;
	width: 9px;
	height: 30px;
	z-index: 8;
	position: absolute;
}
.menu li a.enabled, .menu li a.disabled {
	font: normal 12px Geneva, Arial, Helvetica, sans-serif;
	color: #c2d4d9;
	text-align: center;
	text-decoration: none;
	padding: 12px 6px;
	text-transform: uppercase;
	z-index: 10;
	display: block;
	height: 30px;
	width: auto;
	position: relative;
	overflow: hidden;
	margin: -5px 10px;
}
 .menu li a:active, .menu li a:visited {
	border: 0;
	
}
.menu li a.disabled:hover {
	background-color: #55b1ca;
	color: #ffffff;
	}
	
.menu li a.enabled:hover {
	color: #ffffff;
	}

JQUERY menuscript.js


// JavaScript Document
$(document).ready(function ()
{
	$('.menu li a.disabled').removeClass('disabled');
	$('.menu li a').addClass('enabled');

    $("#navmenu").lavaLamp({
               fx: "backout", 
               speed: 700,
               click: function(event, menuItem) {
                   return false;
                }
            });
});

jquery.lavalamp.min.js

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

jquery.easing.min.js

/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};
2

in your <li> do on the following

<li class=“current”>

So for instance. If you’re on the index.html page:

your <li> will look like this

<li class=“current”><a href=“index.html”></a></li>

3

Gavin, thank you very much. Just figured it all out last night.

@corienb: you do not necessarily have to modify any of your scripts. The return: false is there to call a part of the actual lavalamp.js plugin. if you need to use return: false elsewhere in your code, you can open jquery.lavalamp.min.js and remove this line:

$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])})

That makes LI’s not send you to the page. With the above referenced line removed from the lavalamp plugin, you can still use return:false elsewhere without affecting the lavalamp or your other scripts. Also, if you remove this line from the js file, you can completely remove this:

 click: function(event, menuItem) {
                    return false;
                }

from the script in the head of your page.

I would like to sum up this Lavalamp fix for those that will not read the entire thread.

There are two elements regarding lavalamp that need attention.
Out of the box, the lavalamp script has in place a click function that deactivates your navigation bar’s links. Example:

<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

’
This is the script that goes in the <head> for your page. Simply change the “false” to “true” no quotes (If you need to use return false in any other JS in your page, remove the click limit fucntion from the actual plugin, referenced above).
Now when you click a link, you will notice that your hrefs are working and you can navigate the site. This is great, but when you click a link and go to another page, the menu animation defaults to the first link in the list. If you like that, great. If not, it is a simple inclusion of the class=“current” element.

Example:

<div class="header">
<ul class="lavaLampWithImage" id="1">
			<li><a href="index.htm">Home</a></li>
			<li class="current"><a href="about.htm">About Us</a></li>
			<li><a href="contact.htm">Contact Us</a></li>
			<li><a href="services.htm">Services</a></li>
			<li><a href="maintenance.htm">Maintenance Request</a></li>
			<li><a href="payment.html">Payment Center</a></li>
		</ul>
	</div>

Notice the <li class=“current”> is in the href for the About page? The above code is the about page for that site. The class=“current” element will only need to be placed in the <li> for that page, in the code of that page.
You will need to do this on the code FOR THE PAGE THAT YOU WANT THE IMAGE TO STAY.

So, if you have a contact us page, just put the class=“current” in the <li> of the contact us link, only within the code of that page.

I hope this make sense and clears up a liitle confusion with this fantastic Nav effect. If anyone needs clarification, or assistance implimenting, please feel free to ask.

4

Big thank you to SysOpX - I’m using class=“current” now, much better :slight_smile:
(added a ‘li.current a’ rule to my CSS to make the font color different for the active menu item too)

5

Had the same issue and came accross this forum…

The solution regarding the

click: function(event, menuItem) {
return false;
}

I changed this to true, and now the links are clickable, however, now the lava image does not stay on the item you click, it returns to the far left of the menu. Any Ideas?

6

Ugh!

Thanks !! All working now… pride semi-intact :wink:

I had to add return: false to some accordion script so it wouldn’t make the page jump to the top, I guess I added it to every script I could find? (or it was there already - code was a copy/paste from some plugin)

7

You have the click function returning false…this will stop the link from navigating to the corresponding page.

i.e:
click: function(event, menuItem) {
return false;
}

8

Edit: rightclicking and selecting Open link in new tab/windows IS working.
Now I’m REALLY confused.

9

Hi SysOp-X Biiiiiiiiiiiiig thanks to you