...

View Full Version : jquery help problem



fantomel
06-23-2009, 04:16 PM
hello i`m having some trouble with a jquery code it works but when i`m having more <li> in that div it shows the second div on all <li>



$(document).ready(function(){
$(function(){
$('.work li').hover(function(){
$('.features').show();
}, function(){
$('.features').hide();
});
});
});

can someone help me?

itsallkizza
06-23-2009, 04:40 PM
please show the relevant html code as well. and i'm not clear on your problem, can you explain it a bit further?

fantomel
06-23-2009, 05:49 PM
please show the relevant html code as well. and i'm not clear on your problem, can you explain it a bit further?

ok . i have to 2 different divs
<ul id="work">
<li>
PHP code to pull some data from db(pictures)
</li>
<div class="features">
PHP code to pull some data from db(details about the pictures)
</div>
on mouse over the div features should appear over the picture where i`m having my mouse and on mouse out to disappear. but when i`m going with the mouse over on any picture the div feature appears over all pictures it doesn't matter on which picture i am.




<body>
<ul id="work">
<li>
<a title="" href="#" style="position: relative;"><img height="180" width="71" alt="" src=""/></a>
</li>
<li>
<a title="" href="" style="position: relative;"><img height="180" width="120" alt="" src="" /></a>
</li>
</ul>
<div class="features">
<h3></h3>
<p class="orangeprice">
</p>
<p class="pricewas">
<span class="pricewas"></span>
</p>
<p class="code word-wrap">
item code:
</p>
<p class="itemcode">
3
</p>
<p class="sizelist">
10mb/s
</p>
<p class="sizes">
1mb/s
</p>
</div>
</div>
</body>


this is the html code without php.

itsallkizza
06-23-2009, 06:47 PM
I typed this up for you, should get you on the right track:


<!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=iso-8859-1" />
<title>Test</title>
<style type="text/css">
#work
{
list-style: none;
margin: 0;
padding: 0;
}

#work li
{
display: block;
clear: both;
margin: 10px;
}

#work li .content
{
float: left;
}

#work li .content img
{
width: 180px;
height: 260px;
}

#work li .features
{
display: none;
float: left;
width: 200px;
margin-left: 10px;
padding: 5px;
border: 1px solid black
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function()
{
$("#work li").hover(
function()
{
$(this).children(".features").show();
},
function()
{
$(this).children(".features").hide();
}
);
}
);
// ]]>
</script>
</head>
<body>

<ul id="work">
<li>
<div class="content">
<img src="http://www.topnews.in/files/Barack-Obama.jpg" alt="Obama" />
</div>
<div class="features">
<p>Name: Obama</p>
<p>Price: $749</p>
<p>Speed: 42mph</p>
<p>Personality: tall</p>
</div>
</li>
<li>
<div class="content">
<img src="http://blogs.cope.es/palomitas/files/2009/03/richard-dean-anderson.jpg" alt="Richard Dean Anderson" />
</div>
<div class="features">
<p>Name: Richard Dean Anderson</p>
<p>Price: $500</p>
<p>Speed: 36mph</p>
<p>Personality: awesome</p>
</div>
</li>
</ul>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum