a href Link not working...

[asif49]

I have absolutely no idea why this isn't working, so I'll just show you the code:

<div class="banner"><p>
<ul class="lavaLampWithImage" id="1">
<li class="current"> <a href="index.php">Home</a></li> <li><a href="page.php">Page</a></li> <li><a href="page.php">Page</a></li> </ul></p></div>

I had been following the tutorial on this website ( http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=50#comment-173209 ) in order to build a "lavalamp" menu. I'm simply running this on my server without having downloaded any "plugins" (I'm not even sure what they are) or installing any files.

Any suggestions on how to fix this?

[Dandello]

Well, first, a ul doesn't go inside a p. Other than that, assuming you have pages index.php and page.php in the same directory as whatever page this is part of, then the links should work - assuming it's not something else that's wrong. I know this snippet won't validate, but will the rest of it?

[Biiim]

Likely be z-index, some element is sitting ontop of the a tag - so no click!

no css with it so can't say for sure

[asif49]

Likely be z-index, some element is sitting ontop of the a tag - so no click!

no css with it so can't say for sure

Hmm, since there is a sort of a box which hovers ontop of the link which the mouse comes over, that's possibly the element sitting on top of the tag.

Here's the css:

.lavaLampWithImage {
            position: relative;
            height: 29px;
            width: 421px;
            background: url("bg.gif") no-repeat top;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

[Taywin]

Did you add JQuery libraries to it as in the tutorial? I'm not sure about the version, but it may not be relevant. I did mine in pure JavaScript though... But not with a little tween effect. :P

[asif49]

Did you add JQuery libraries to it as in the tutorial? I'm not sure about the version, but it may not be relevant. I did mine in pure JavaScript though... But not with a little tween effect. :P

Hmm well I didn't quite understand the part about JQuery libraries, I downloaded the whole package in a zip file but didn't download/add anything on top of that... Not exactly sure on how a library is added either...

[Taywin]

OK, what JQuery files you need are...
- jquery.js
- jquery.lavalamp.js
- jquery.easing.js (optional)

If you place all .js files in the same location of your HTML file, then you could simply add this in the "head" tag.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.easing.js"></script>

Then at the bottom of the page, you would also need to call the function.

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

That's all. I guess you may need to be careful when you read a tutorial. Go after it step-by-step. Hope this help.

[Biiim]

The reply above is good, make sure that's in.

Looking at the tutorial you have one small difference

<li class="current">
should be 
<li>

the class is set in the code and that is likely overwriting it, you could set it yourself manually by changing your css entry

.lavaLampWithImage li.back {

change to

.lavaLampWithImage li.current {

but will likely mess up the hover effects

[asif49]

I didn't know what you meant by JQuery libraries but I had already added those files in Tayyim. And I tried to change the css like you said Biiim and still no luck :/

The thing is that even if I download the tutorial which is on that website and try to add href links around the words, it still doesn't seem to work. and that's the original document!

I really do need this fixed though so any other suggestions are welcome

[Biiim]

ah i just downloaded the files to see and you need this as your jquery

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

the "$("#1, #2, #3")" refers to the id's of the 3 div's (id=1, id=2 and id=3) so put in the id's or classes of all the menus in that ("#1, .lavaLampWithImage, #myid").

If it's still continuing a live example of it would be good so me or someone could just debug it straight as i'm off for the day soon

[asif49]

Wow, that worked great :) ^^

I think I understand it too now. Thanks a lot to every single person that contributed, appreciate it!