CODEWITHSUNDEEP
javascriptjquerycss
Jonathan Lyon
Jonathan Lyon

Reputation: 3952

what is the jquery selector syntax to select this LI item

I need to select each list item and change the background image of the parent div homepagecontainer but I can't even select the li element in my script. Here is the code:

<div class="transparent" id="programmesbox">
<ul id="frontpage">
<?php 
query_posts('showposts=20&post_parent=7&post_type=page'); 

if (have_posts()) : while (have_posts()) : the_post();
?>

<li id="<?php the_id() ?>" ><a class="sprite" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>

</ul>
</div>

I need to do something like this

    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $('#frontpage li a').hover(function() {
    alert('here');
//CHANGE BACKGROUND IMAGE OF 'homepage_container' to different image depending on which list item is hovered over
    }

    );


    </script>

This is the URL of the site:-

http://www.thebalancedbody.ca/

Thanks so much!!

Jonathan

Upvotes: 1

Views: 873

Answers (2)

jAndy
jAndy

Reputation: 235962

Your script doesn't look wrong, but it looks like it is missplaced. Put it into jQuerys ready handler to make sure all elements you want to access are loaded.

$(document).ready(function(){
    $('#frontpage').find('a').hover(function() {
       $(this).closest('.homepage_container').css('background-image', 'some_image_url_here');
    }, function() {
       // mouseleave code here
    }); 
});

Out of your example, I couldn't figure out where the homepage_container is located relative to the anchor's, so I used the .closest() function for that. May get optimized by beeing more specific. If it is an ID you can just use $('#homepagecontainer').css('background-image', 'url'); since ID's have to be unique in valid HTML markups.

Upvotes: 2

duckbox
duckbox

Reputation: 132

Looking at your source code, you have two seperate JS calls within the body, and also calling jQuery twice.

I would recommend putting your all your JS at the top or bottom of the page, with only ONE call to jQuery.

As for your li a selection, after you make these changes, try this,

<script type="text/javascript"> 
$(document).ready(function(){
  $("#contact").click(function(event){
     event.preventDefault(); //stops the browser from following the link

     $("#contactable").click(); //opens contact form
     alert("Showing mycontactform"); //remove this whenit's working
  });

  $("ul#frontpage li a").hover(
   function () {
     $('#homepage_container').css('background-image', 'url(image1.jpg)');
     },function () {
     $('#homepage_container').css('background-image', 'url(image2.jpg)');
     }
    );
});   
</script>

Upvotes: 1

Related Questions