Welcome to WebmasterWorld Guest from 54.196.233.239

Forum Moderators: incrediBILL

Message Too Old, No Replies

Jquery Collapse not working in FF

     

bissquitt2

8:38 am on Jun 19, 2009 (gmt 0)

5+ Year Member



Well since I cant post a link to my website this might be pretty difficult to reproduce. My site has tables enclosed in an <ul> and uses jquery to collapse those <ul>'s for viability. However in firefox for some reason I am getting multiple +/- symbols. I cleaned up the code and lined up all the tags and I see no reason that this would happen. Furthermore, the <ul> items this effects seems to be random.

I have consulted google, webpages, and many friends to solve this issue prior to turning here.

Page source next post

[edited by: tedster at 8:00 pm (utc) on June 19, 2009]

bissquitt2

8:44 am on Jun 19, 2009 (gmt 0)

5+ Year Member




<!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">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site Name</title>
<link rel="stylesheet" href="images2/2col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: x-small}
-->
#bookoutput ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#bookoutput a
{
display: block;
padding: 3px 12px 3px 20px;
text-decoration: none;
border-bottom: 0px solid #fff;
font-weight: bold;
}
#headoutput ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#headoutput a
{
display: block;
color: #FFF;
background-color: #3B5998;
width: 70em;
padding: 3px 12px 3px 20px;
text-decoration: none;
border-bottom: 0px solid #fff;
font-weight: bold;
}

#bookoutput li li a
{
display: block;
color: #FFF;
background-color: #3B5998;
width: 70em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 0px solid #fff;
font-weight: normal;
}

#headlist a {
background: #fff;
border: 2px solid #3B5998;
}

#booklist a {
}
#booklist a.expanded {
background: #3B5998 url(images/collapse.gif) no-repeat 3px 50%;
}
#booklist a.collapsed {
background: #3B5998 url(images/expand.gif) no-repeat 3px 50%;
}

#mainheader table {
border: none;
border-collapse: collapse;
font-size: 1.1em;
width: 63em;
}
#mainheader th {
background: #fff;
color: #3B5998;
font-weight: bold;
padding: 2px 2px;
text-align: left;
line-height: 1.2;
}
.subheader table {
border: none;
border-collapse: collapse;
font-size: 1.1em;
width: 63em;
}
.subheader th {
background: #3B5998;
color: #fff;
font-weight: bold;
padding: 2px 2px;
text-align: left;
line-height: 1.2;

}
table {
border: none;
border-collapse: collapse;
font-size: 1.1em;
width: 66em;
}

th {
background: #3e83c9;
color: #fff;
font-weight: bold;
padding: 2px 2px;
text-align: center;
line-height: 1.2;
}

td {
padding: 6px 11px;
vertical-align: top;
text-align: center;
}

td * {
padding: 6px 11px;
}

tr.alt td {
background: #ecf6fc;
}

tr.over td {
background: #bcd4ec;
}
.style3 {
font-size: large;
color: #FF0000;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// Toggle the selected menu's class and expand or collapse the menu
$("#booklist > li > a").click(function() {
$(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//JQuery ready is quicker than onload
$(".stripeMe tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
$(".stripeMe tr:even").addClass("alt");
});

</script>
</head>
<!-- The structure of this file is exactly the same as 2col_rightNav.html;
the only difference between the two is the stylesheet they use -->
<body>

<div id="masthead">
<h1 id="siteName"><img src="images2/sitename.jpg" width="580" height="159" longdesc="http://www.sitename.com" alt="ERROR"/>Beta~</h1>
</div>
<!-- end masthead -->
<div id="navBar">
<div id="search"></div>
<div id="sectionLinks">
<ul>

<li><a href="/index.html">Home</a></li>
<li><a href="/scheduler.php">Scheduler</a></li>
<li><a href="/faq.html">Faq</a></li>
</ul>
</div>
<div id="headlines"></div>
</div>

<!--end navbar -->

<div id="content">
<div class="story">
<span class="style3">Click blue prices to follow the link to the respective store.</span><br />
<div id="headoutput">
<ul id="headlist">
<li>
<div id="mainheader">
<a href="#">

<table>
<tr>
<th width="5%">CRN</th>
<th width="10%">Designation</th>
<th width="40%">Class Title</th>
<th width="20%">Professor</th>
</tr>

</table>
</a>
</div>
</li>
</ul>
</div>
<div id="bookoutput">
<ul id="booklist">
<li>

<a class="expanded" href="#">
<div class="subheader">
<table>
<tr>
<th width="5%">0002</th>
<th width="10%">AFST 100</th>
<th width="40%"> Introduction to The Black Experience</th>

<th width="20%">MACK-SHELTON,</th>
</tr>
</table>
</div>
</a>
<ul>
<table class=stripeMe>
<tr>

<th>Title</th>
<th>Edition</th>
<th>Author</th>
<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>

<th>Amazon<br>New / Used</th>
</tr>
<tr>
<td>DEBT:WHAT AMERICA OWES TO BLACKS</td>
<td>00</td>
<td>ROBINSON</td>

<td>REQUIRED</td>
<td>9780452282100</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0002">$15.00 / $11.25</a></td>
<td><a href="http://www.amazon.com/gp/product/0452282101?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0452282101">$4.50 / $0.58</a></td>
</tr>
<tr>
<td>TURBULENT VOYAGE</td>

<td>3RD 00</td>
<td>HAYES</td>
<td>REQUIRED</td>
<td>9780939693528</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0002">$59.75 / $45.00</a></td>
<td><a href="http://www.amazon.com/gp/product/0939693526?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0939693526">$40.00 / $7.49</a></td>

</tr>
</table>
</ul>
</li>
<li>
<a class="expanded" href="#">
<div class="subheader">
<table>
<tr>

<th width="5%">0003</th>
<th width="10%">AFST 100</th>
<th width="40%"> Introduction to The Black Experience</th>
<th width="20%">SUTTON, K</th>
</tr>
</table>

</div>
</a>
<ul>
<table class=stripeMe>
<tr>
<th>Title</th>
<th>Edition</th>
<th>Author</th>

<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>
<th>Amazon<br>New / Used</th>
</tr>
<tr>

<td>AFRICAN-AMER. ODYSSEY,COMB-W/MYHISTLAB</td>
<td>4TH 08</td>
<td>HINE</td>
<td>REQUIRED</td>
<td>9780205657780</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0003">$94.00 / Only available new</a></td>

<td>Not carried by Amazon</td>
</tr>
</table>
</ul>
</li>
<li>
<a class="expanded" href="#">
<div class="subheader">

<table>
<tr>
<th width="5%">0004</th>
<th width="10%">AFST 201</th>
<th width="40%"> Introduction to Methodology and Research in Africana Studies</th>
<th width="20%">ROBINSON, T</th>

</tr>
</table>
</div>
</a>
<ul>
<table class=stripeMe>
<tr>
<th>Title</th>

<th>Edition</th>
<th>Author</th>
<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>
<th>Amazon<br>New / Used</th>

</tr>
<tr>
<td>BASIC STATISTICAL ANALYSIS</td>
<td>8TH 07</td>
<td>SPRINTHALL</td>
<td>REQUIRED</td>
<td>9780205495979</td>

<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0004">$110.75 / $83.25</a></td>
<td><a href="http://www.amazon.com/gp/product/0205495974?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0205495974">$70.00 / $47.50</a></td>
</tr>
</table>
</ul>
</li>
<li>
<a class="expanded" href="#">

<div class="subheader">
<table>
<tr>
<th width="5%">0005</th>
<th width="10%">AFST 206</th>
<th width="40%"> Introduction to African-American History: A Survey</th>
<th width="20%">SUTTON, K</th>

</tr>
</table>
</div>
</a>
<ul>
<table class=stripeMe>
<tr>
<th>Title</th>

<th>Edition</th>
<th>Author</th>
<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>
<th>Amazon<br>New / Used</th>

</tr>
<tr>
<td>AFRICAN-AMER. ODYSSEY,COMB-W/MYHISTLAB</td>
<td>4TH 08</td>
<td>HINE</td>
<td>REQUIRED</td>
<td>9780205657780</td>

<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0005">$94.00 / Only available new</a></td>
<td>Not carried by Amazon</td>
</tr>
</table>
</ul>
</li>
<li>
<a class="expanded" href="#">

<div class="subheader">
<table>
<tr>
<th width="5%">0006</th>
<th width="10%">AFST 211</th>
<th width="40%"> Introduction to Contemporary Africa</th>
<th width="20%">BADRU, L</th>

</tr>
</table>
</div>
</a>
<ul>
<table class=stripeMe>
<tr>
<th>Title</th>

<th>Edition</th>
<th>Author</th>
<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>
<th>Amazon<br>New / Used</th>

</tr>
<tr>
<td>AFRICA IN WORLD POLITICS</td>
<td>02</td>
<td>MARTIN</td>
<td>REQUIRED</td>
<td>9780865438583</td>

<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0006">$32.00 / $24.00</a></td>
<td><a href="http://www.amazon.com/gp/product/0865438587?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0865438587">$25.95 / $14.86</a></td>
</tr>
<tr>
<td>AFRICA IN WORLD POLITICS</td>
<td>4TH 08</td>
<td>HARBESON</td>

<td>REQUIRED</td>
<td>9780813343648</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0006">$45.00 / $33.75</a></td>
<td><a href="http://www.amazon.com/gp/product/081334364X?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=081334364X">$21.34 / $21.34</a></td>
</tr>
<tr>
<td>UNDERSTANDING CONTEMPORARY AFRICA</td>

<td>4TH 07</td>
<td>GORDON</td>
<td>REQUIRED</td>
<td>9781588264664</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0006">$28.50 / $21.50</a></td>
<td><a href="http://www.amazon.com/gp/product/1588264661?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1588264661">$17.50 / $9.59</a></td>

</tr>
</table>
</ul>
</li>
<li>
<a class="expanded" href="#">
<div class="subheader">
<table>
<tr>

<th width="5%">0007</th>
<th width="10%">AFST 213</th>
<th width="40%"> Africa: Culture and Development</th>
<th width="20%">CHUKU, G</th>
</tr>
</table>

</div>
</a>
<ul>
<table class=stripeMe>
<tr>
<th>Title</th>
<th>Edition</th>
<th>Author</th>

<th>Required?</th>
<th>ISBN</th>
<th>schoolname<br>New / Used</th>
<th>Amazon<br>New / Used</th>
</tr>
<tr>

<td>MAKING EMPIRE</td>
<td>08</td>
<td>PRICE</td>
<td>RECOMMENDED</td>
<td>9780521718196</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$37.00 / $27.75</a></td>

<td><a href="http://www.amazon.com/gp/product/0521718198?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0521718198">$24.98 / $24.98</a></td>
</tr>
<tr>
<td>FOOD,CULTURE,+SURVIVAL IN AFRICAN CITY</td>
<td>05</td>
<td>FLYNN</td>
<td>RECOMMENDED</td>

<td>9781403966391</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$26.95 / $20.25</a></td>
<td><a href="http://www.amazon.com/gp/product/1403966397?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1403966397">$24.95 / $19.25</a></td>
</tr>
<tr>
<td>MOVING THE CENTRE</td>
<td>93</td>

<td>NGUGI</td>
<td>RECOMMENDED</td>
<td>9780435080792</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$19.25 / $14.50</a></td>
<td><a href="http://www.amazon.com/gp/product/0435080792?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0435080792">$20.90 / $8.67</a></td>
</tr>

<tr>
<td>CONCUBINE</td>
<td>66</td>
<td>AMADI</td>
<td>REQUIRED</td>
<td>9780435905569</td>

<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$12.75 / $9.75</a></td>
<td><a href="http://www.amazon.com/gp/product/0435905562?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0435905562">$7.16 / $5.40</a></td>
</tr>
<tr>
<td>POWER OF AFRICAN CULTURES</td>
<td>08</td>

<td>FALOLA</td>
<td>REQUIRED</td>
<td>9781580462976</td>
<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$39.95 / $30.00</a></td>
<td><a href="http://www.amazon.com/gp/product/1580462979?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1580462979">$29.07 / $29.09</a></td>
</tr>

<tr>
<td>AFRICA</td>
<td>3RD 95</td>
<td>MARTIN</td>
<td>REQUIRED</td>
<td>9780253209849</td>

<td><a href="http://bookstore.schoolname.edu/SelectCourses.aspx?src=2&type=2&stoid=9&trm=Spring%2009&cid=0007">$21.50 / $16.25</a></td>
<td><a href="http://www.amazon.com/gp/product/0253209846?ie=UTF8&tag=schoolnamebooks-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0253209846">$14.97 / $3.84</a></td>
</tr>
</table>
</ul>
</li>
</ul>
</div>

</div>
</div>
<!--end content -->
<div id="siteInfo"><a href="mailto:sitename@gmail.com">Contact Us</a> <span class="style1">Site name does not take any responsibility if you purchase the wrong book and should only be used as a guideline for finding your books.</span> </div>
<br />

**Google analytics removed**

</body>

</html>

tedster

8:11 pm on Jun 19, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Sorry, that's way too much code for me to wade through for you. Can you reduce it to a minimum amount that still demonstrates the problem?

bissquitt2

9:00 pm on Jun 19, 2009 (gmt 0)

5+ Year Member



Unfortunately if I knew where the problem was I wouldn't be asking here. I have no clue what is causing it. I suspect it is the way firefox is rendering the code. The main block of repeating code which is the same for each block, seems to randomly have the error.

bissquitt2

9:12 pm on Jun 19, 2009 (gmt 0)

5+ Year Member



I know when inspected in firebug it gives me the following:


<a class="expanded" href="#"> </a>
<div class="subheader">
...
</div>
<a class="collapsed" href="#"> </a>
<ul style="display: none;">
....
</ul>

Where it should only be:


<a class="collapsed" href="#"> </a>
<ul style="display: none;">
....
</ul>

When I view the pagesource though it shows the code correctly, so it seems that extra markup is just magically appearing.

tedster

7:17 pm on Jun 21, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The first place to start with any kind of display issues is making sure that your mark-up is valid. Otherwise you can spin in circles for ever. The W3C maintains a free online validator at [validator.w3.org...] that I'd recommend you use.

There are many validation errors in the source code you posted, but if you work through them from top to bottom you'll find that many are not "real" errors but simply a kind cascade error, resulting from something earlier. That's why you should start at the top.

The first error gets tripped here:

<a href="#">

<table>
<tr>
<th width="5%">CRN</th>
<th width="10%">Designation</th>
<th width="40%">Class Title</th>
<th width="20%">Professor</th>
</tr>

</table>
</a>

It is not valid to nest a <table> element within an <a> element - an anchor element is an inline element and can only contain other inline elements. Notice that your code uses that construction a lot, so fixing that is your first job.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month