Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery help problem

    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>


    Code:
    $(document).ready(function(){
        $(function(){
            $('.work li').hover(function(){
                $('.features').show();
            }, function(){
                $('.features').hide();
            });
        });
    });
    can someone help me?

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    please show the relevant html code as well. and i'm not clear on your problem, can you explain it a bit further?
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    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.


    Code:
        <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.
    Last edited by fantomel; 06-23-2009 at 07:01 PM.

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I typed this up for you, should get you on the right track:
    Code:
    <!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>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •