www.webdeveloper.com
Results 1 to 12 of 12

Thread: Show/hide not working properly with jquery

  1. #1
    Join Date
    Mar 2009
    Posts
    31

    Show/hide not working properly with jquery

    Hello,

    I have a page with three rows of main information that all have a 'More Info' button attached, sort of like http://www.wefollow.com and their info button.

    When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.

    The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.

    I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.

    here is a picture of the problem:
    http://i645.photobucket.com/albums/u...1/Picture2.png

    Any help would be awesome. Thanks.

    Scripts:

    index:

    HTML Code:
    <table>
        <tbody>
    
            <tr id="info-1"> </tr>
            <tr class="mi">
                <td>
                    <div id="1" class="more-information" />
                </td>
            </tr>
    
            <tr class="">
                <td> </td>
                <td> </td>
                <td> <a id="1" class="more-info" href="#">More info</a> </td>
    
        </tbody>
    </table>
    listing.js:

    Code:
    $(function(){
    $(".more-information").hide();
    $(".more-info").click(function () {
    var divname= this.id; $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
    return false;
    });

  2. #2
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  3. #3
    Join Date
    Mar 2009
    Posts
    31
    Quote Originally Posted by Jeff Mott View Post
    I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.
    Alright, I changed all id's to something unique and none are starting with numbers but it is still not working properly.

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Can you link to or attach the full page you're working with now?
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Mar 2009
    Posts
    31
    The files are on the localhost so I will post the files here.

    main file(function is called in the html page in an 'output-listings' div)
    buy.function.php:


    PHP Code:
    <?php
    function outputListingsTable()
    {
        
    $mysql = new mysqli('localhost''root''root''ajax_demo') or die('you\'re dead');
        
    $result $mysql->query("SELECT * FROM explore") or die($mysql->error);

        if(
    $result
        {
            echo 
    "<div class=\"main-info\"> \n";
                echo 
    "<table class=\"listings\"> \n";
                    echo 
    "<tbody>";
            
                        while(
    $row $result->fetch_object()) 
                        {
                            
    $id $row->id;
                            
    $siteName $row->site_name;
                            
    $siteDescription $row->site_description;
                            
    $siteURL $row->site_url;
                            
    $sitePrice $row->site_price;
            
                
                            echo 
    "        <tr id=\"info-" .$id"\"> \n";
                                            echo 
    "<tr class=\"mi\"><td><div id=\"more-" .$id"\" class=\"more-information\"> \n";
                                            echo 
    "</div></td></tr> \n";
                            echo 
    "         <td>" $siteName "</td> \n";
                            echo 
    "        <td>" $siteURL "</td> \n";
                            echo 
    "        <td><a id=\"" $id "\" class=\"more-info\" href=\"#\">More info</a></td> \n";    
                            echo 
    "        </tr>";
                        }
            echo 
    "</tbody>";
        echo 
    "</table> \n";
    echo 
    "</div> \n";            

        }

    }

    ?>
    listing.js:

    Code:
    $(function(){
    	$("tr").hover(function(){
    		$(this).addClass("hover");
    	}, function() {
    		$(this).removeClass("hover");
    	});
    	$(function() {
    	$("a.more-info").click(function() {
    	$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
    	return false;
    	});
    });
    
    
    });
    style.css:

    Code:
    tr.hover td { background: #FDFFE7; }
    	table { border-collapse:collapse;
    			color:#3F3F3F;
    			font-family:arial,helvetica,sans-serif;
    			border-top:1px solid #DFDFDF;
    		  }
    td.more-information { padding: 0px; }
    
    div.more-information { display: none; }

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    The PHP code doesn't do us any good because this issue is at the front-end. Can you view your page, then view the source and paste that source here in a code block?
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Mar 2009
    Posts
    31
    Here is the page source from the page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Some Title</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<script type="text/javascript" src="listing.js"></script>
    
    </head>
    
    <body>
    	<div id="login-nav">
    		<a href="login.php">Please Login!</a>	</div>
        <div id="top-nav">
    	<a href=index.php>Home</a>
            <a href=sites.php>Sites</a>
            <a href=register.php>Sign-Up</a>
            <a href=login.php>Login</a>
            <a href=myac.php>My Account</a>
        </div>
    
    <div id="page-wrap">
    
    <div id="curve-container"></div>
    <div id="main-content">
    	<div id="article-area">
    
    		<h1>Sites</h1>
    	<div id="output-listings">
    		<div class="main-info"> 
    <table class="listings"> 
    <tbody>		<tr id="info-1"> 
    <tr class="mi"><td><div id="more-1" class="more-information"> 
    </div></td></tr> 
    	 	<td>Leftlane News</td> 
    		<td>www.leftlanenews.com/</td> 
    		<td><a id="1" class="more-info" href="#">More info</a></td> 
    		</tr>		<tr id="info-2"> 
    
    <tr class="mi"><td><div id="more-2" class="more-information"> 
    </div></td></tr> 
    	 	<td>Motor Authority</td> 
    		<td>www.motorauthority.com/ </td> 
    		<td><a id="2" class="more-info" href="#">More info</a></td> 
    		</tr>		<tr id="info-3"> 
    <tr class="mi"><td><div id="more-3" class="more-information"> 
    </div></td></tr> 
    	 	<td>Autoblog</td> 
    		<td>http://www.autoblog.com/</td> 
    		<td><a id="3" class="more-info" href="#">More info</a></td> 
    		</tr></tbody></table> 
    
    </div> 
    	</div><!--end output-listings-->
    
    	</div>
    	<div class="clear"></div>
     </div>
    <div id="footer"></div>
    
    <div id="curve-container"></div>
    <div id="features">
    	<div id="p-header">
    		<h1>Some header here</h1>
    
    		<p>Some text here</p>
    	</div>
     </div>
    <div id="ft-bottom"></div>
    <div id="text-footer"><p>Copyright &copy 2009 Business Name Inc. All rights reserved.</p></div>
    
    </div>
    </body>
    
    </hmtl>

  8. #8
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Notice in the markup that there are a couple instances of trying to open two table rows, one right after the other:

    Code:
    <tr id="info-1"> <tr class="mi">
    This is almost certainly a contributing factor to your problems. Fix that, and we'll go from there.

    You should also consider using the W3C validator. It helps you catch errors like this one.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  9. #9
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Oh... and that markup you posted still has numerical and duplicated IDs.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  10. #10
    Join Date
    Mar 2009
    Posts
    31
    Alright, I cleaned it up a bit and validated it and fixed some errors. The only error now is the duplicated 'curve-container' div which isn't really a problem right now, its just for styling purposes.

    Here is the new page source:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Title here</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<script type="text/javascript" src="listing.js"></script>
    
    </head>
    
    <body>
    	<div id="login-nav">
    		<a href="login.php">Please Login!</a>	</div>
        <div id="top-nav">
    	<a href="index.php">Home</a>
            <a href="buy.php">Sites</a>
            <a href="register.php">Sign-Up</a>
            <a href="login.php">Login</a>
            <a href="myac.php">My Account</a>
        </div>
    
    <div id="page-wrap">
    
    <div id="curve-container"></div>
    <div id="main-content">
    	<div id="article-area">
    
    		<h1>Sites</h1>
    	<div id="output-listings">
    		<div class="main-info"> 
    <table class="listings"> 
    <tbody> 
    	<tr id="more-info-1" class="mi-1"> 
    	<td> 
    		<div id="more-1" class="more-information"></div> 
    	</td> 
    	</tr> 
    	<tr id="main-info-1"> 
    	 	<td>Leftlane News</td> 
    		<td>www.leftlanenews.com/</td> 
    		<td><a id="link-1" class="more-info-link" href="#">More info</a></td> 
    	</tr> 
    	<tr id="more-info-2" class="mi-2"> 
    	<td> 
    		<div id="more-2" class="more-information"></div> 
    	</td> 
    	</tr> 
    	<tr id="main-info-2"> 
    	 	<td>Motor Authority</td> 
    		<td>www.motorauthority.com/ </td> 
    		<td><a id="link-2" class="more-info-link" href="#">More info</a></td> 
    	</tr> 
    	<tr id="more-info-3" class="mi-3"> 
    	<td> 
    		<div id="more-3" class="more-information"></div> 
    	</td> 
    	</tr> 
    	<tr id="main-info-3"> 
    	 	<td>Autoblog</td> 
    		<td>http://www.autoblog.com/</td> 
    		<td><a id="link-3" class="more-info-link" href="#">More info</a></td> 
    	</tr> 
    
    </tbody> 
    </table> 
    </div> 
    	</div><!--end output-listings-->
    
    	</div>
    	<div class="clear"></div>
     </div>
    <div id="footer"></div>
    
    <div id="curve-container"></div>
    <div id="features">
    	<div id="p-header">
    
    		<h1>Header here</h1>
    		<p>Some text here</p>
    	</div>
     </div>
    <div id="ft-bottom"></div>
    <div id="text-footer"><p>Copyright &copy; 2009 Business Name Inc. All rights reserved.</p></div>
    
    </div>
    
    </body>
    
    </html>

  11. #11
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Can you check that your getinfo.php is actually returning content?
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  12. #12
    Join Date
    Mar 2009
    Posts
    31
    Quote Originally Posted by Jeff Mott View Post
    Can you check that your getinfo.php is actually returning content?
    Yup it is, the three site descriptions in the database.

    Heres the page source:

    Code:
    <span class="description">Leftlane News is a leading source for automotive industry and vehicle news. Read by driving enthusiasts, car shoppers, autoworkers, executives, and investors, it is updated throughout the day with the very latest auto news as it happens. No other site brings together the same degree of timeliness, thoroughness and accuracy as Leftlane News.</span> 
    <span class="description">Motor Authority is a global news source specializing in automotive industry, product and motorsport news with a skew towards high-performance and luxury segments. Motor Authority is always at the forefront of cutting edge and breaking news and provides 24-hour coverage of all the events and happenings in the automotive world.</span> 
    <span class="description">Autoblog.com is a web site that offers daily weblogs and podcast news and commentary about automobiles and the automotive industry. It is part of the Weblogs, Inc. network of media sites which is owned by AOL.</span>

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles