ansaurus

Question

jQuery lavaLamp, misbehaving with child <ul>'s

Answer 1

+3 A:

huh, finally I got it work :) here's the Demo : http://jsbin.com/uyali3

It is difficult to achieve this task using <ul> as child node, so I changed it to <div>

go check out the code yourself =)

NOTE : Next time when you post a question please be sure, to provide the proper code/HTML. I took me around 45 min to understand your entire code. At last I found a fix to your problem =)

Code :

    <!DOCTYPE html>
    <html>
    <head>
    <title> cssFix </title>
    <meta charset=utf-8 />
    <style type="text/css">

        body { background : #2f2f2f; }

         ul  li {
        display:inline;
        float:left;
        list-style-type:none;
        margin-right:10px;
        position:relative;
        z-index:5;
        }
         ul  li.backLava {
        -moz-border-radius :6px;
        background:none repeat scroll 0 0 #009912;
        }
         ul  li a {
        color:#B9B9B9;
        display:block;
        font: bold 14px Arial;
        padding:17px 10px 6px;
        position:relative;
        text-decoration:none;
        text-shadow:0 1px 0 #38302F;
        }
         ul  li  a:hover {
        color:#ff0;
        font-size:14px;

        }
        ul  li a:active {
        color:#FFFFFF;
        }
        .children {
        background-color:#333333;
        left:-999em;
        list-style:none outside none;
        min-width:100px;
        position:absolute;
        }

        li:hover .children {
        -moz-border-radius:6px 6px 6px 6px;
        background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
        left:auto;
        margin:0;
        padding:10px;
        }
    </style>
    </head>
    <body>
        <ul style="position: relative;" class="ulclass">
            <li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
            <li><a alt="#" href="#About">Who?</a></li>
            <li><a alt="#" href="#Projects">Projects</a></li>
            <li>
                <a alt="#" href="#Resume">Blog</a>
                <div class="children"> 
                    <span><a href="#">History</a></span> 
                    <span><a href="#">Our Company</a></span> 
                    <span><a href="#">Our Staff</a></span> 
                </div> 
            </li>
            <li><a alt="#" href="#Resume">Contact</a></li>
        </ul>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
   <script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
   <script type="text/javascript" >
        $(function() {
            $('ul').lavaLamp();
        });
    </script>
    </body>
    </html>

Ninja Dude 2010-07-30 12:13:46

Sorry for the confusion - I had hoped seeing the full source code would have made it simpler to understand. I guess not. I'll update the question with specific now. Whilst your solution is great and it works I'm really looking for it to operate in the structure provided - namely because this design is destined for Wordpress which uses nested ul's in its page navigation creation.

foxed 2010-07-30 12:37:18

Changed my mind ... answer accepted. I'll just hack /includes/post-template.php on my WordPress install. Not best practice but I don't plan on distributing the theme so :)

foxed 2010-07-30 13:16:58

It's not a good Idea to change the entire template :) I believe this can be done using `ul` but this requires some effort =) Re-Ask your querstion, I'm sure someone will answer you in a right way!! Please don't change the template.

Ninja Dude 2010-07-30 14:51:21

Answer 2

A:

i had the same question too, but i didn't want to modify wordpress templates:

firstly i tought to add the class "noLava" to every <li> with depth > 1, so i tried to expand the Walker class with a custom one - with no success.

then i started to modify the lavalamp jquery plugin, and after having tried all the day long i found the solution here: http://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector/965962#965962, so i modified as below, and it works like a charm :)

{find var $li = jQuery('li[class!=noLava]', this); and replace with:}

    //var $li = jQuery('li[class!=noLava]', this); //default one

    //by Paolo Bergantino, via http://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector/965962#965962
    jQuery.expr[':'].parents = function(a,i,m){
        return jQuery(a).parents(m[3]).length < 1;
    }; 

    var $li = jQuery('li', this).filter(':parents(.children, .sub-menu)'); //for worpress :) by lelebart

maybe the best solution is to preserve the original behavior and add this one

edit: online demo: http://jsfiddle.net/QnNsh/

lelebart 2010-09-17 17:10:04

ansaurus

tags:

views:

answers:

jQuery lavaLamp, misbehaving with child <ul>'s

related questions