Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page Bug In jQuery?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-13-2008, 09:03 AM   PM User | #1
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Question Bug In jQuery?
Hello,

Please look into this code (or the attached file)

When clicking on the button toggles the table to hide and then to show, it leaves an extra width on the table. (See screenshot for details)

Is this a bug in jQuery? Can we overcome this?








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>Untitled Document</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script>
	$().ready(function(){
					   $("#mybtn").click(function(){
										  
										  $("#myid").slideToggle();
										  });
					   
					   });
</script>
</head>
<body>
<input type="button" id="mybtn" value="Clicky" />
<table width="50%" border="0" cellspacing="0" cellpadding="0" id="myid" bgcolor="#CCCCCC" align="center">
  <tr>
    <td align="center"><strong>Name</strong></td>
    <td align="center"><strong>City</strong></td>
    <td align="center"><strong>Coutry </strong></td>
    <td align="center"><strong>Telephone</strong></td>
    <td align="center"><strong>Designtion</strong></td>
  </tr>
  <tr>
    <td align="center">Paul</td>
    <td align="center">New York</td>
    <td align="center">US</td>
    <td align="center">111222333444</td>
    <td align="center">CEO</td>
  </tr>
  <tr>
    <td align="center">Adam</td>
    <td align="center">Chicago</td>
    <td align="center">US</td>
    <td align="center">11558899</td>
    <td align="center">Programmer</td>
  </tr>
</table>

</body>
</html>

Thanx
Attached Files
File Type: zip jquery-Bug.zip (30.5 KB, 111 views)
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-13-2008, 11:34 AM   PM User | #2
mic2100
Regular Coder

 
mic2100's Avatar
 
Join Date: Feb 2006
Location: Scunthorpe
Posts: 562
Thanks: 15
Thanked 28 Times in 27 Posts
mic2100 is on a distinguished road
hi there,

i think i have a solution to your problem the table width is set at 50% and wot the JQuery is doing is wrapping a DIV around it to match the current size, so the table is shrinking to 50% or is current size.

The fix is to wrap the table in another DIV

like this...
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>Untitled Document</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script>
	$().ready(function(){
					   $("#mybtn").click(function(){
										  
										  $("#table_wrapper").slideToggle();
										  });
					   
					   });
</script>
</head>
<body>
<input type="button" id="mybtn" value="Clicky" />
<div id="table_wrapper" style="width:100%;">
    <table width="50%" border="0" cellspacing="0" cellpadding="0" id="myid" bgcolor="#CCCCCC" align="center">
      <tr>
        <td align="center"><strong>Name</strong></td>
        <td align="center"><strong>City</strong></td>
        <td align="center"><strong>Coutry </strong></td>
        <td align="center"><strong>Telephone</strong></td>
        <td align="center"><strong>Designtion</strong></td>
      </tr>
      <tr>
        <td align="center">Paul</td>
        <td align="center">New York</td>
        <td align="center">US</td>
        <td align="center">111222333444</td>
        <td align="center">CEO</td>
      </tr>
      <tr>
        <td align="center">Adam</td>
        <td align="center">Chicago</td>
        <td align="center">US</td>
        <td align="center">11558899</td>
        <td align="center">Programmer</td>
      </tr>
    </table>
</div>
</body>
</html>
ave tested on FF3 and IE7 and it seems to work ok now
mic2100 is offline   Reply With Quote
The Following 2 Users Say Thank You to mic2100 For This Useful Post:
cancer10 (11-14-2008), rangana (11-13-2008)
Old 11-13-2008, 11:42 AM   PM User | #3
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Thanx

that fixd
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-20-2008, 12:21 PM   PM User | #4
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Question:

How do you hide/unhide an entire row in a table using jQuery?

Warpping it with a <DIV> didnt help

Thanx
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-20-2008, 12:22 PM   PM User | #5
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Question:

How do you hide/unhide an entire row in a table using jQuery?

Warpping it with a <DIV> didnt help

Thanx
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-20-2008, 12:42 PM   PM User | #6
rangana
Senior Coder

 
rangana's Avatar
 
Join Date: Feb 2008
Location: Cebu City, Philippines
Posts: 1,752
Thanks: 65
Thanked 372 Times in 365 Posts
rangana will become famous soon enoughrangana will become famous soon enough
I'm not certain what you mean, works fine at my end. Have you used the hide() method?

Anyway, could you please up the codes involved.
__________________
Learn how to javascript at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph
rangana is offline   Reply With Quote
Users who have thanked rangana for this post:
cancer10 (11-20-2008)
Old 11-20-2008, 12:44 PM   PM User | #7
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
can u have a button and click of that button use the slideToggle() function in jquery?

Click on the button once or twice and see when it shows the row, the rows gets distorted.


Thanx
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-20-2008, 12:47 PM   PM User | #8
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Plz take a look into this code


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>Untitled Document</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script>
	$().ready(function(){
					   $("#mybtn").click(function(){
										  
										  $("#myid").slideToggle();
										  });
					   
					   });
</script>
</head>
<body>
<input type="button" id="mybtn" value="Clicky" />
<table width="50%" border="1" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" align="center">
  <tr>
    <td align="center"><strong>Name</strong></td>
    <td align="center"><strong>City</strong></td>
    <td align="center"><strong>Coutry </strong></td>
    <td align="center"><strong>Telephone</strong></td>
    <td align="center"><strong>Designtion</strong></td>
  </tr>
  <tr>
    <td align="center">Paul</td>
    <td align="center">New York</td>
    <td align="center">US</td>
    <td align="center">111222333444</td>
    <td align="center">CEO</td>
  </tr>
  <tr id="myid">
    <td align="center">Adam</td>
    <td align="center">Chicago</td>
    <td align="center">US</td>
    <td align="center">11558899</td>
    <td align="center">Programmer</td>
  </tr>
</table>

</body>
</html>
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-20-2008, 01:10 PM   PM User | #9
rangana
Senior Coder

 
rangana's Avatar
 
Join Date: Feb 2008
Location: Cebu City, Philippines
Posts: 1,752
Thanks: 65
Thanked 372 Times in 365 Posts
rangana will become famous soon enoughrangana will become famous soon enough
I would do it this way instead:
Code:
$("#myid").animate({opacity:'toggle'},'slow');
The slideToggle() method toggles the display from hidden to block and vice versa instead of (hidden / inline-row).

Tested:
Code:
 $("#myid").css({display:'block'});
...the effect of having that code is the same as the problem you are experiencing.

Not sure for a real fix, but I would change to animate() method instead and play with opacity as it's stable.

Hope that makes sense.
__________________
Learn how to javascript at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph
rangana is offline   Reply With Quote
Old 11-20-2008, 04:18 PM   PM User | #10
cancer10
Regular Coder

 
Join Date: Jun 2006
Location: India
Posts: 789
Thanks: 208
Thanked 2 Times in 2 Posts
cancer10 can only hope to improve
Hey


Can u tell me what jQuery function are they using for that left slideshow? (click on the buttons saying "Gifts starting from"

Code:
http://www.isango.com/Gift.aspx
__________________
http://outlineme.com/cancer10
cancer10 is offline   Reply With Quote
Old 11-21-2008, 12:23 AM   PM User | #11
rangana
Senior Coder

 
rangana's Avatar
 
Join Date: Feb 2008
Location: Cebu City, Philippines
Posts: 1,752
Thanks: 65
Thanked 372 Times in 365 Posts
rangana will become famous soon enoughrangana will become famous soon enough
http://www.dynamicdrive.com/dynamici...epcarousel.htm
__________________
Learn how to javascript at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph
rangana is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 02:28 PM.
Advertisement
Log in to turn off these ads.