Move this topic
[jQuery] Enable / disable submit button not working
in Using jQuery
•
13 years ago
I can't figure out why this simple isn't working. I've tried a number of
variations. I've tried examining the vars with debugging output.
I have a bunch of forms on the page, each one having just one text input and
a submit button. When the user types in any of the forms I want to make sure
the text field is not empty (i.e., they haven't just cleared the field) and
enable the submit button accordingly.
However, the state of the submit button does not change. I've verified that
the script is getting called. I also tried $("input") instead of $("form").
Is there some error here that I'm missing.
I've tried using either line 3 (now commented) and line 4, below.
$(document).ready(function(){
$("form").keyup(function(event){
//var activeForm = $(event.target).parents('form');
var activeForm = this.form;
if ($(event.target).fieldValue()[0].length > 0)
{
$('input[@type=submit]', activeForm).attr("disabled",
false).removeClass('formfielddisabled');
} else {
$('input[@type=submit]', activeForm).attr("disabled",
true).addClass('formfielddisabled');
}
});
});
--
View this message in context: http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742
Sent from the JQuery mailing list archive at Nabble.com.
Replies(40)
jarrod,
I personally have never formated my code like $(event.target).fieldValue()[0], but what happens when you do $(event.target).val().length?
Also, I believe you can get away $('input[@type=submit]', activeForm).disabled = true; because I believe $('input[@type=submit]', activeForm).attr("disabled",false) does not work properly in IE6, I could be wrong on that tho.
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">jarrod</b> <<a href="mailto:elektrophyte@yahoo.com">elektrophyte@yahoo.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I can't figure out why this simple isn't working. I've tried a number of
variations. I've tried examining the vars with debugging output.
I have a bunch of forms on the page, each one having just one text input and
a submit button. When the user types in any of the forms I want to make sure
the text field is not empty (i.e., they haven't just cleared the field) and
enable the submit button accordingly.
However, the state of the submit button does not change. I've verified that
the script is getting called. I also tried $("input") instead of $("form").
Is there some error here that I'm missing.
I've tried using either line 3 (now commented) and line 4, below.
$(document).ready(function(){
$("form").keyup(function(event){
//var activeForm = $(event.target).parents('form');
var activeForm = this.form;
if ($(event.target
).fieldValue()[0].length > 0)
{
$('input[@type=submit]', activeForm).attr("disabled",
false).removeClass('formfielddisabled');
} else {
$('input[@type=submit]', activeForm).attr("disabled",
true).addClass('formfielddisabled');
}
});
});
--
View this message in context: <a href="http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742">
http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742</a>
Sent from the JQuery mailing list archive at <a href="http://Nabble.com">Nabble.com</a>.
</blockquote></div>
<br clear="all">
--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>
I personally have never formated my code like $(event.target).fieldValue()[0], but what happens when you do $(event.target).val().length?
Also, I believe you can get away $('input[@type=submit]', activeForm).disabled = true; because I believe $('input[@type=submit]', activeForm).attr("disabled",false) does not work properly in IE6, I could be wrong on that tho.
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">jarrod</b> <<a href="mailto:elektrophyte@yahoo.com">elektrophyte@yahoo.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I can't figure out why this simple isn't working. I've tried a number of
variations. I've tried examining the vars with debugging output.
I have a bunch of forms on the page, each one having just one text input and
a submit button. When the user types in any of the forms I want to make sure
the text field is not empty (i.e., they haven't just cleared the field) and
enable the submit button accordingly.
However, the state of the submit button does not change. I've verified that
the script is getting called. I also tried $("input") instead of $("form").
Is there some error here that I'm missing.
I've tried using either line 3 (now commented) and line 4, below.
$(document).ready(function(){
$("form").keyup(function(event){
//var activeForm = $(event.target).parents('form');
var activeForm = this.form;
if ($(event.target
).fieldValue()[0].length > 0)
{
$('input[@type=submit]', activeForm).attr("disabled",
false).removeClass('formfielddisabled');
} else {
$('input[@type=submit]', activeForm).attr("disabled",
true).addClass('formfielddisabled');
}
});
});
--
View this message in context: <a href="http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742">
http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742</a>
Sent from the JQuery mailing list archive at <a href="http://Nabble.com">Nabble.com</a>.
</blockquote></div>
<br clear="all">
--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>
Leave a comment on benjamin.sterling's reply
Leave a comment on elektrophyte's reply
jarrod,
Now that I know what you're trying to do I would suggest something like this:
$('form').submit(function() {
var val = $('input[@type=text]', this).val();
if (val == null)
alert('Please enter a value');
return val != null;
});
Mike
Leave a comment on malsup's reply
Leave a comment on elektrophyte's reply
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
Leave a comment on goofy166's reply
> Regarding the solution above, that's a different style of validation that
> works great in some situations, but for this app I really want to pursue the
> concept of not enabling the submit button until the form is valid.
Yes, I didn't mean to imply you should change "how" you're validating
the form. I should have written it like this:
$('form').submit(function() {
var val = $('input[@type=text]', this).val();
// insert validation handling here!
return val != null;
});
Cheers!
Mike
Leave a comment on malsup's reply
jQuery.fn.toggleVis = function() {
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in the jQuery object
// 2. To make sure that this method doesn't "break the chain"
return this.each(function() {
// Iterate over all selected HTML elements and toggle their "visibility" CSS property
// Here, "this" a HTML element
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in the jQuery object
// 2. To make sure that this method doesn't "break the chain"
return this.each(function() {
// Iterate over all selected HTML elements and toggle their "visibility" CSS property
// Here, "this" a HTML element
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
Leave a comment on aaron.heimlich's reply
For information, the reason that works is that setting {visibility:hidden} hides the element but the element's box still affects layout.
Setting {display:none} suppresses box generation altogether.
(From <a href="http://www.w3.org/TR/REC-CSS2/visufx.html#visibility">
http://www.w3.org/TR/REC-CSS2/visufx.html#visibility</a>)
--rob
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Aaron Heimlich</b> <<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com
</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">jQuery.fn.toggleVis = function() {
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in the jQuery object
// 2. To make sure that this method doesn't "break the chain"
return this.each(function() {
// Iterate over all selected HTML elements and toggle their "visibility" CSS property
// Here, "this" a HTML element
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();<div><span class="e" id="q_113f5be5e028f85d_1">
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">
Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
</span></div><span class="sg">--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">aaron.heimlich@gmail.com
</a>
<a href="http://aheimlich.freepgs.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://aheimlich.freepgs.com</a>
</span></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Setting {display:none} suppresses box generation altogether.
(From <a href="http://www.w3.org/TR/REC-CSS2/visufx.html#visibility">
http://www.w3.org/TR/REC-CSS2/visufx.html#visibility</a>)
--rob
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Aaron Heimlich</b> <<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com
</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">jQuery.fn.toggleVis = function() {
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in the jQuery object
// 2. To make sure that this method doesn't "break the chain"
return this.each(function() {
// Iterate over all selected HTML elements and toggle their "visibility" CSS property
// Here, "this" a HTML element
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();<div><span class="e" id="q_113f5be5e028f85d_1">
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">
Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
</span></div><span class="sg">--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">aaron.heimlich@gmail.com
</a>
<a href="http://aheimlich.freepgs.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://aheimlich.freepgs.com</a>
</span></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Leave a comment on rob.desbois's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I get everything but this</span><span style='font-size:10.0pt;
font-family:"Courier New"'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>//
This return statement is used for two reasons
// 1. To make sure we hit every HTML element in
the jQuery object
// 2. To make sure that this method doesn't
"break the chain"
</span><span style='font-size:9.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>What does “hit” mean and what is the “chain”? I don’t want “everything
to become invisible, just the one container I specify. Wont th is work just
fine?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>jQuery.fn.toggleVis
= function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>
if(this.style.visibility ==
'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
<span style='color:#1F497D'><o:p></o:p></span></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Monday, July 23, 2007 6:01 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>jQuery.fn.toggleVis =
function() {
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in
the jQuery object
// 2. To make sure that this method doesn't
"break the chain"
return this.each(function() {
// Iterate over all selected HTML
elements and toggle their "visibility" CSS property
// Here, "this" a HTML
element
if(this.style.visibility ==
'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/23/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com"> mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>
I like jQuery effects show and hide but they actually remove the object from
the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects
"visibility" property between "hidden" and
"visible" so any HTML under it will not move.
Mitch
<o:p></o:p>
</div>
<p class=MsoNormal>
<br clear=all>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a> <o:p></o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I get everything but this</span><span style='font-size:10.0pt;
font-family:"Courier New"'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>//
This return statement is used for two reasons
// 1. To make sure we hit every HTML element in
the jQuery object
// 2. To make sure that this method doesn't
"break the chain"
</span><span style='font-size:9.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>What does “hit” mean and what is the “chain”? I don’t want “everything
to become invisible, just the one container I specify. Wont th is work just
fine?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>jQuery.fn.toggleVis
= function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>
if(this.style.visibility ==
'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
<span style='color:#1F497D'><o:p></o:p></span></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Monday, July 23, 2007 6:01 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>jQuery.fn.toggleVis =
function() {
// Here, "this" is the jQuery object
// This return statement is used for two reasons
// 1. To make sure we hit every HTML element in
the jQuery object
// 2. To make sure that this method doesn't
"break the chain"
return this.each(function() {
// Iterate over all selected HTML
elements and toggle their "visibility" CSS property
// Here, "this" a HTML
element
if(this.style.visibility ==
'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
Usage: $('mySelector').toggleVis();<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/23/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com"> mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>
I like jQuery effects show and hide but they actually remove the object from
the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects
"visibility" property between "hidden" and
"visible" so any HTML under it will not move.
Mitch
<o:p></o:p>
</div>
<p class=MsoNormal>
<br clear=all>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a> <o:p></o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">mitch@mitchwaite.com
</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div><span></span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);">
What does "hit" mean</span>
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have the class "foo". By "hit", I mean that toggleVis() will toggle each and every one of the elements selected whatever selector you use (that's usually what you want).
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US">
<div>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> and what is the "chain"?</span>
</div></div></blockquote><div>See <a href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">
http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a>
</div>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> I don't want "everything
to become invisible, just the one container I specify.</span>
That's exactly what my plugin does. Only the element's selected by the selector that you use will be affected.
</div>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
<span style="font-size: 11pt; color: rgb(31, 73, 125);">
Wont th is work just
fine?</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> </span>
<span style="font-size: 8pt;">jQuery.fn.toggleVis
= function() {</span>
<span style="font-size: 8pt;"><span>
if(this.style.visibility ==
'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
</span>
};</span>
The concept of "this" is certainly one of the more confusion aspects of jQuery (and of JavaScript in general). For now, I direct you to <a href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">
http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>, although there was a post by Michael Geary some time ago[3] that explained this concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough like one that it can be used mostly in the same fashion. You can iterate over it like an Array object, and you can access indexes (foo[0], foo[1], foo[2], etc.) like you can with an Array object, but that's about it.
</div></div>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">
http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://aheimlich.freepgs.com
</a>
Leave a comment on aaron.heimlich's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the visibility
of that particular image inside a div.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>
<div>
<div>
</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an
pseudo-array[1] that contains all of the HTML elements selected by a give
selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>
<div>
<div>
</div>
</div>
<div>
<p class=MsoNormal>
See <a
href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a><o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>No it won't. In that context, "this" refers to a
jQuery object, which does not have a "style" property. To iterate
over the contents of a jQuery object, use the "each" method[2], as
plugin does. The "each" method accepts a function, and within that
function "this" is set to whatever element is currently being
iterated over. The "each" method returns the jQuery object it was
iterating over, which allows users to continue chaining method calls onto each
other.
The concept of "this" is certainly one of the more confusion aspects
of jQuery (and of JavaScript in general). For now, I direct you to <a
href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>,
although there was a post by Michael Geary some time ago[3] that explained this
concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough
like one that it can be used mostly in the same fashion. You can iterate over
it like an Array object, and you can access indexes (foo[0], foo[1], foo[2],
etc.) like you can with an Array object, but that's about it. <o:p></o:p>
</div>
</div>
<p class=MsoNormal>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a
href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank">http://aheimlich.freepgs.com
</a><o:p></o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the visibility
of that particular image inside a div.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>What does "hit" mean</span> <o:p></o:p>
</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an
pseudo-array[1] that contains all of the HTML elements selected by a give
selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>and what is the
"chain"?</span><o:p></o:p>
</div>
</div>
<div>
<p class=MsoNormal>
See <a
href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a><o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>I don't want "everything
to become invisible, just the one container I specify.</span><o:p></o:p>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>Wont th is work just fine?</span><o:p></o:p>
<span style='font-size:11.0pt;color:#1F497D'> </span><o:p></o:p>
<span style='font-size:8.0pt'>jQuery.fn.toggleVis = function() {</span><o:p></o:p>
<span style='font-size:8.0pt'>
if(this.style.visibility ==
'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};</span><o:p></o:p>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>No it won't. In that context, "this" refers to a
jQuery object, which does not have a "style" property. To iterate
over the contents of a jQuery object, use the "each" method[2], as
plugin does. The "each" method accepts a function, and within that
function "this" is set to whatever element is currently being
iterated over. The "each" method returns the jQuery object it was
iterating over, which allows users to continue chaining method calls onto each
other.
The concept of "this" is certainly one of the more confusion aspects
of jQuery (and of JavaScript in general). For now, I direct you to <a
href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>,
although there was a post by Michael Geary some time ago[3] that explained this
concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough
like one that it can be used mostly in the same fashion. You can iterate over
it like an Array object, and you can access indexes (foo[0], foo[1], foo[2],
etc.) like you can with an Array object, but that's about it. <o:p></o:p>
</div>
</div>
<p class=MsoNormal>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a
href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank">http://aheimlich.freepgs.com
</a><o:p></o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
Well you should have mentioned that in the beginning. But, that doesn't mean that my plugin isn't usable.
On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:
<div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
</div></div></blockquote></div>
Using my original plugin:
Note: You will have to edit the selectors to actually find the proper elements, as I have no knowledge of your page's structure
// Find the "Change the cats visibility" link and assign a "click" event handler to it
$("a.changeVis").click(function() {
// Find the div that has the cat image in it and toggle the image's visibility
$("#catDiv img").toggleVis();
});
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:
<div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
<span style="font-size: 11pt; color: rgb(31, 73, 125);">I have a link called 'Change the cats visibility'. I have a div
with a cat image inside it. I would like that particular link to change the visibility
of that particular image inside a div.</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> </span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);">I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. </span>
</div></div></blockquote></div>
Using my original plugin:
Note: You will have to edit the selectors to actually find the proper elements, as I have no knowledge of your page's structure
// Find the "Change the cats visibility" link and assign a "click" event handler to it
$("a.changeVis").click(function() {
// Find the div that has the cat image in it and toggle the image's visibility
$("#catDiv img").toggleVis();
});
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
Leave a comment on aaron.heimlich's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need all the
for ‘each’ stuff however.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><html xmlns="http://www.w3.org/1999/xhtml"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><head><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" /><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><title>CSS, DHTML & Ajax | Making Objects Appear
and Disappear | Changing Visibility Style</title><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><script src="js/jquery.js"
type="text/javascript"></script><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><script type="text/javascript"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" is the jQuery object <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // This return statement is used for two reasons<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 1. To make sure we hit every HTML element in the jQuery
object<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 2. To make sure that this method doesn't "break
the chain"<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> return this.each(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Iterate over all selected HTML elements and toggle
their "visibility" CSS property <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" a HTML element<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(this.style.visibility == 'hidden') {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'visible';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> } else {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'hidden';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> });<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}; <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>/* testing mouse events in jQuery */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* hide cat */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#hidecat').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").hide(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* show cat */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#showcat').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* toggle visibility */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#toggle').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#cheshireCat').toggleVis();<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> });<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>});<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></script><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><style type="text/css" media="screen"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>body { <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> font-size: 1.2em;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> font-family: Georgia, "Times New
Roman", times, serif;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> color: #000000;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> background-color: #ccc;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>#cheshireCat {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></style><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></head><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><body><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="hidecat"
href="#Javascript;">Hide The Cat</a> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="showcat"
href="#Javascript;">Show the Cat</a> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="toggle"
href="#Javascript;">Change the Cat's Visibility</a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><div id="cheshireCat"><img
src="images/alice24.gif" /></div><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><h1>The Cheshire Cat</h1><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></body><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></html><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 11:08 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the
visibility of that particular image inside a div.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>
<div>
<div>
</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an pseudo-array[1]
that contains all of the HTML elements selected by a give selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>
<div>
<div>
</div>
</div>
<div>
<p class=MsoNormal>
See <a
href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a><o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>No it won't. In that context, "this" refers to a
jQuery object, which does not have a "style" property. To iterate
over the contents of a jQuery object, use the "each" method[2], as
plugin does. The "each" method accepts a function, and within that
function "this" is set to whatever element is currently being
iterated over. The "each" method returns the jQuery object it was
iterating over, which allows users to continue chaining method calls onto each
other.
The concept of "this" is certainly one of the more confusion aspects
of jQuery (and of JavaScript in general). For now, I direct you to <a
href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>,
although there was a post by Michael Geary some time ago[3] that explained this
concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough
like one that it can be used mostly in the same fashion. You can iterate over
it like an Array object, and you can access indexes (foo[0], foo[1], foo[2],
etc.) like you can with an Array object, but that's about it. <o:p></o:p>
</div>
</div>
<p class=MsoNormal>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a
href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank">http://aheimlich.freepgs.com
</a><o:p></o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need all the
for ‘each’ stuff however.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><html xmlns="http://www.w3.org/1999/xhtml"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><head><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" /><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><title>CSS, DHTML & Ajax | Making Objects Appear
and Disappear | Changing Visibility Style</title><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><script src="js/jquery.js"
type="text/javascript"></script><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><script type="text/javascript"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" is the jQuery object <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // This return statement is used for two reasons<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 1. To make sure we hit every HTML element in the jQuery
object<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 2. To make sure that this method doesn't "break
the chain"<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> return this.each(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Iterate over all selected HTML elements and toggle
their "visibility" CSS property <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" a HTML element<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(this.style.visibility == 'hidden') {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'visible';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> } else {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'hidden';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> });<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}; <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>/* testing mouse events in jQuery */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* hide cat */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#hidecat').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").hide(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* show cat */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#showcat').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* toggle visibility */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#toggle').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#cheshireCat').toggleVis();<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> });<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>});<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></script><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><style type="text/css" media="screen"><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>body { <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> font-size: 1.2em;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> font-family: Georgia, "Times New
Roman", times, serif;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> color: #000000;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> background-color: #ccc;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>#cheshireCat {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></style><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></head><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><body><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="hidecat"
href="#Javascript;">Hide The Cat</a> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="showcat"
href="#Javascript;">Show the Cat</a> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="toggle"
href="#Javascript;">Change the Cat's Visibility</a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><div id="cheshireCat"><img
src="images/alice24.gif" /></div><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><h1>The Cheshire Cat</h1><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></body><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'></html><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 11:08 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the
visibility of that particular image inside a div.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>What does "hit" mean</span> <o:p></o:p>
</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an pseudo-array[1]
that contains all of the HTML elements selected by a give selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>and what is the
"chain"?</span><o:p></o:p>
</div>
</div>
<div>
<p class=MsoNormal>
See <a
href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a><o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>I don't want "everything
to become invisible, just the one container I specify.</span><o:p></o:p>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>
</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<span style='font-size:11.0pt;color:#1F497D'>Wont th is work just fine?</span><o:p></o:p>
<span style='font-size:11.0pt;color:#1F497D'> </span><o:p></o:p>
<span style='font-size:8.0pt'>jQuery.fn.toggleVis = function() {</span><o:p></o:p>
<span style='font-size:8.0pt'>
if(this.style.visibility ==
'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};</span><o:p></o:p>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>No it won't. In that context, "this" refers to a
jQuery object, which does not have a "style" property. To iterate
over the contents of a jQuery object, use the "each" method[2], as
plugin does. The "each" method accepts a function, and within that
function "this" is set to whatever element is currently being
iterated over. The "each" method returns the jQuery object it was
iterating over, which allows users to continue chaining method calls onto each
other.
The concept of "this" is certainly one of the more confusion aspects
of jQuery (and of JavaScript in general). For now, I direct you to <a
href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>,
although there was a post by Michael Geary some time ago[3] that explained this
concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough
like one that it can be used mostly in the same fashion. You can iterate over
it like an Array object, and you can access indexes (foo[0], foo[1], foo[2],
etc.) like you can with an Array object, but that's about it. <o:p></o:p>
</div>
</div>
<p class=MsoNormal>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a
href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank">http://aheimlich.freepgs.com
</a><o:p></o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I know this is trivial but what it turned out I needed was
something this simple<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(chesireCat.style.visibility
== 'hidden') {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'visible';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> } else {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'hidden';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>};
<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Enabled with this<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
/* toggle visibility */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#toggle').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#cheshireCat').toggleVis();<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 12:45 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need
all the for ‘each’ stuff however.<o:p></o:p></span>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I know this is trivial but what it turned out I needed was
something this simple<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(chesireCat.style.visibility
== 'hidden') {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'visible';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> } else {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'hidden';<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>};
<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Enabled with this<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
/* toggle visibility */ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#toggle').click(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#cheshireCat').toggleVis();<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 12:45 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need
all the for ‘each’ stuff however.<o:p></o:p></span>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:<div><span class="gmail_quote"></span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US">
<div><span style="font-size: 11pt; color: rgb(31, 73, 125);">jQuery.fn.toggleVis = function() {</span>
That works for you??? (works as in functions properly, not as in "I'm
ok with this"), because I couldn't get it to in either Firefox or IE 7.
In fact, I was expecting this not to work. As I explained in our off-list communication, that cannot possibly work because there is no variable named "chesireCat" defined within the toggleVis(). If I correct the spelling mistake and change "chesireCat" to "cheshireCat", then it works, but only in Internet Explorer (which is generally a Bad Thing, you *want* things to work cross-browser[1]).
If my original solution was too complex for you, here's a simpler solution (although it lacks the reusability of mine):
/* toggle visibility */
$('#toggle').click(function() {
// Remember, a jQuery object acts like an array of all elements selected by a
// particular selector (in this case, "#cheshireCat"), so we access individual
// elements through numbered array indexes (starting with 0)
var cheshireCat = $("#cheshireCat")[0];
if(cheshireCat.style.visibility == 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
});
[1] jQuery helps *a lot* in this regard, but it doesn't handle everything.
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
<div link="blue" vlink="purple" lang="EN-US">
<div><span style="font-size: 11pt; color: rgb(31, 73, 125);">jQuery.fn.toggleVis = function() {</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> if(chesireCat.style.visibility
== 'hidden') {</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> chesireCat.style.visibility
= 'visible';</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> } else {</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> chesireCat.style.visibility
= 'hidden';</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);"> }</span>
<span style="font-size: 11pt; color: rgb(31, 73, 125);">};
</span>
That works for you??? (works as in functions properly, not as in "I'm
ok with this"), because I couldn't get it to in either Firefox or IE 7.
In fact, I was expecting this not to work. As I explained in our off-list communication, that cannot possibly work because there is no variable named "chesireCat" defined within the toggleVis(). If I correct the spelling mistake and change "chesireCat" to "cheshireCat", then it works, but only in Internet Explorer (which is generally a Bad Thing, you *want* things to work cross-browser[1]).
If my original solution was too complex for you, here's a simpler solution (although it lacks the reusability of mine):
/* toggle visibility */
$('#toggle').click(function() {
// Remember, a jQuery object acts like an array of all elements selected by a
// particular selector (in this case, "#cheshireCat"), so we access individual
// elements through numbered array indexes (starting with 0)
var cheshireCat = $("#cheshireCat")[0];
if(cheshireCat.style.visibility == 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
});
[1] jQuery helps *a lot* in this regard, but it doesn't handle everything.
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>
Leave a comment on aaron.heimlich's reply
On Jul 25, 12:41 am, "Mitchell Waite" <mi...@mitchwaite.com>
Leave a comment on sgbeal's reply
<div>> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden') {
> this.style.visibility = 'visible';
> } else {
> this.style.visibility
= 'hidden';
> }
> };
</div>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div>
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com">sgbeal@googlemail.com</a>> wrote:</span>
<blockquote class="gmail_quote" style="PADDING-LEFT: 1ex; MARGIN: 0px 0px 0px 0.8ex; BORDER-LEFT: #ccc 1px solid">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility = 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</blockquote></div>
> if(this.style.visibility == 'hidden') {
> this.style.visibility = 'visible';
> } else {
> this.style.visibility
= 'hidden';
> }
> };
</div>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div>
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com">sgbeal@googlemail.com</a>> wrote:</span>
<blockquote class="gmail_quote" style="PADDING-LEFT: 1ex; MARGIN: 0px 0px 0px 0.8ex; BORDER-LEFT: #ccc 1px solid">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility = 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</blockquote></div>
Leave a comment on ganeshread's reply
Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the outside at quite a fundamental level. Did you run through the tutorials at
<a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ? At the very least, John and Joern's tutorials - the top two - are an excellent introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript itself. I don't know of other people's opinions and am not speaking for the jQuery community, but I would really recommend learning JavaScript on its own to a competent level before attempting to use jQuery, otherwise it's hard for you to know which conventions,
<span class="gmail_quote"></span>problems and bits of code are JavaScript, and which are jQuery. It would be like trying to learn MFC (Microsoft Foundation Classes - the old MS C++ class hierarchy wrapping the Windows API) before being able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much more complicated language than some appreciate (I'm currently struggling with some aspects). Walk before you can run.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Ganeshji Marwaha</b> <<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<span class="q"><div>> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden') {
> this.style.visibility = 'visible';
> } else {
>
this.style.visibility
= 'hidden';
> }
> };
</div></span>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div><div><span class="e" id="q_113fc4c0278b7ca4_2">
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">sgbeal@googlemail.com
</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility = 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</blockquote></div>
</span></div></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the outside at quite a fundamental level. Did you run through the tutorials at
<a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ? At the very least, John and Joern's tutorials - the top two - are an excellent introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript itself. I don't know of other people's opinions and am not speaking for the jQuery community, but I would really recommend learning JavaScript on its own to a competent level before attempting to use jQuery, otherwise it's hard for you to know which conventions,
<span class="gmail_quote"></span>problems and bits of code are JavaScript, and which are jQuery. It would be like trying to learn MFC (Microsoft Foundation Classes - the old MS C++ class hierarchy wrapping the Windows API) before being able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much more complicated language than some appreciate (I'm currently struggling with some aspects). Walk before you can run.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Ganeshji Marwaha</b> <<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<span class="q"><div>> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden') {
> this.style.visibility = 'visible';
> } else {
>
this.style.visibility
= 'hidden';
> }
> };
</div></span>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div><div><span class="e" id="q_113fc4c0278b7ca4_2">
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">sgbeal@googlemail.com
</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility = 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</blockquote></div>
</span></div></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Leave a comment on rob.desbois's reply
I'm sorry for my apparent ignorance. I tried your approach and it did not
work
DOESN'T WORK
http://www.whatbird.com/wwwroot/Alice_1.html
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
WORKS
http://www.whatbird.com/wwwroot/Alice_1.html
jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility == 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
};
I was under the impression that the object #chesireCat would be the only
object affected by this function, and that its using jQuery's ability to
figure out the object by name.
<div id="cheshireCat"><img src="images/alice24.gif" /></div>
Take a look at the code examples and tell me if I am missing something here.
Mitch
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Stephan Beal
Sent: Tuesday, July 24, 2007 11:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide
Leave a comment on goofy166's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.e
{mso-style-name:e;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>Rob:<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>Unfortunately
my code does work </span><span style='font-family:Wingdings;color:#1F497D'>J</span><span
style='font-family:"Calibri","sans-serif";color:#1F497D'>. Must be a miracle?<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
(works)<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>here
is the idea of using (this).<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_2.html">http://www.whatbird.com/wwwroot/Alice_2.html</a>
(does not work)<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
just got my copy of Learning jQuery and it’s a very good book (took 10 days to
get here). Some really basic concepts that got away from me are finally becoming
clear.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
know enough Javascript, my main issue is not understanding the domain of jQuery
and the domain of JS, and how the two differ, but the book is making that clear.
Also the book helps me understand that jQuery is really about manipulating elements
in the DOM using selectors and traversing the DOM. I think that is where I went
astray. I don’t think you need to dive deep into JS to grok jQ, but the syntax closeness
of the two can be tricky, and not explained well in the tutorials. Like the book
spends a lot of time explaining $() which it calls the Factory function.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
see now that an object in jQuery does not have a visibility directly, it needs
a class assigned to it, so that is why example 2 doesn’t work.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PS I have
read all the tutorials at </span><span style='font-family:"Calibri","sans-serif"'><a
href="http://docs.jquery.com/Tutorials"><span style='color:windowtext'>http://docs.jquery.com/Tutorials</span></a>
and honestly they assume a lot of prior knowledge and leave out some really
major lessons for the newbie. <o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PSS I am
not sure your metaphor is right, but I agree that the bigger picture needs
amplifying on the docs site, and maybe I will end up contributing to that
issue, which is not to be critical of the community in any way, you guys are
all fabulous and very generous.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Rob
Desbois
<b>Sent:</b> Wednesday, July 25, 2007 2:14 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a
href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Ganeshji Marwaha</b>
<<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><o:p></o:p>
<div>
<p class=MsoNormal>> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden')
{
>
this.style.visibility =
'visible';
> } else {
>
this.style.visibility = 'hidden';
> }
> };
<o:p></o:p>
</div>
<div>
<p class=MsoNormal>doesn't "this" here refer to the jquery object...
I don't think jquery object has a style attribute, or does it?<o:p></o:p>
</div>
<div>
<p class=MsoNormal> <o:p></o:p>
</div>
<div>
<p class=MsoNormal>-GTG<o:p></o:p>
</div>
<div>
<div>
<p class=MsoNormal>
<o:p></o:p>
</div>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Stephan Beal</b> <<a
href="mailto:sgbeal@googlemail.com" target="_blank">sgbeal@googlemail.com </a>>
wrote:</span> <o:p></o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>
On Jul 25, 12:41 am, "Mitchell Waite" <<a
href="mailto:mi...@mitchwaite.com" target="_blank"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility
= 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
<o:p></o:p>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</div>
<p class=MsoNormal>
<br clear=all>
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and
the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome. <o:p></o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.e
{mso-style-name:e;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>Rob:<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>Unfortunately
my code does work </span><span style='font-family:Wingdings;color:#1F497D'>J</span><span
style='font-family:"Calibri","sans-serif";color:#1F497D'>. Must be a miracle?<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
(works)<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>here
is the idea of using (this).<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_2.html">http://www.whatbird.com/wwwroot/Alice_2.html</a>
(does not work)<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
just got my copy of Learning jQuery and it’s a very good book (took 10 days to
get here). Some really basic concepts that got away from me are finally becoming
clear.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
know enough Javascript, my main issue is not understanding the domain of jQuery
and the domain of JS, and how the two differ, but the book is making that clear.
Also the book helps me understand that jQuery is really about manipulating elements
in the DOM using selectors and traversing the DOM. I think that is where I went
astray. I don’t think you need to dive deep into JS to grok jQ, but the syntax closeness
of the two can be tricky, and not explained well in the tutorials. Like the book
spends a lot of time explaining $() which it calls the Factory function.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
see now that an object in jQuery does not have a visibility directly, it needs
a class assigned to it, so that is why example 2 doesn’t work.<o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PS I have
read all the tutorials at </span><span style='font-family:"Calibri","sans-serif"'><a
href="http://docs.jquery.com/Tutorials"><span style='color:windowtext'>http://docs.jquery.com/Tutorials</span></a>
and honestly they assume a lot of prior knowledge and leave out some really
major lessons for the newbie. <o:p></o:p></span>
<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PSS I am
not sure your metaphor is right, but I agree that the bigger picture needs
amplifying on the docs site, and maybe I will end up contributing to that
issue, which is not to be critical of the community in any way, you guys are
all fabulous and very generous.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Rob
Desbois
<b>Sent:</b> Wednesday, July 25, 2007 2:14 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a
href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Ganeshji Marwaha</b>
<<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><o:p></o:p>
<div>
<p class=MsoNormal>> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden')
{
>
this.style.visibility =
'visible';
> } else {
>
this.style.visibility = 'hidden';
> }
> };
<o:p></o:p>
</div>
<div>
<p class=MsoNormal>doesn't "this" here refer to the jquery object...
I don't think jquery object has a style attribute, or does it?<o:p></o:p>
</div>
<div>
<p class=MsoNormal> <o:p></o:p>
</div>
<div>
<p class=MsoNormal>-GTG<o:p></o:p>
</div>
<div>
<div>
<p class=MsoNormal>
<o:p></o:p>
</div>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Stephan Beal</b> <<a
href="mailto:sgbeal@googlemail.com" target="_blank">sgbeal@googlemail.com </a>>
wrote:</span> <o:p></o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>
On Jul 25, 12:41 am, "Mitchell Waite" <<a
href="mailto:mi...@mitchwaite.com" target="_blank"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility
= 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
<o:p></o:p>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</div>
<p class=MsoNormal>
<br clear=all>
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and
the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome. <o:p></o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
Mitch,
In your working code:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility
== 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
};</blockquote><div>
That can only work if there is a variable called 'cheshireCat' which is accessible from within jQuery. My best guess is that at some point in your code you've written
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">cheshireCat = $("#cheshireCat")[0];
</blockquote>or something similar. The best way to avoid this 'namespace pollution' is to always use the keyword 'var' when declaring a variable,
e.g.
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">var cheshireCat = $("#cheshireCat")[0];
</blockquote></div>That prevents the variable from becoming globally available, and I guess will break the previously working code you have.
Now, the question is, how can you fix the code that I've just broken?
If you add a function to jQuery as you've done, that function will be available to any jQuery object, and should work upon that object as expected. So, if you write
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">$("#cheshireCat").toggleVis();</blockquote><div>you should expect that the element with ID 'cheshireCat' will be toggled, and nothing else. You should also be able to expect that the toggleVis() function will return the same jQuery object it operated on, which is the same one you got with $(...), so that you can do other things as well, like (for example):
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote"> $("#cheshireCat").toggleVis().append('toggled');</blockquote></div>
Now, this code block:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
</blockquote>doesn't work because in a jQuery function, 'this' is not a DOM object (
i.e. the <div> element), it's a jQuery object containing the matching element(s). How can you get them out? Two ways:
this[0] - will give you the first DOM element in the object, and assumes that there IS one. If there aren't, you're accessing an array out-of-bounds.
this.each() - will iterate through any and all contained DOM elements. This is by far the best way to achieve this.
So first off your if..else needs to be wrapped to act on all contained elements:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
</blockquote>
Within the function passed to .each(), 'this' refers to the actual DOM element we are currently dealing with, so that part of the code is now alright.
It still won't allow you to chain function calls though, so one final touch is to return the result of .each(), and we're done:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
this.each(function() {
if (this.style.visibility
== 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};</blockquote><div>
I hope that's explained it all a bit better - it took a lot of 'hammering' before I understood the way jQuery fits together, especially in terms of what 'this' means when.
</div>Put that function in your code, then try $("#cheshireCat").toggleVis() and see what happens :-)
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite
</b> <<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I'm sorry for my apparent ignorance. I tried your approach and it did not
work
DOESN'T WORK
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
WORKS
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility
== 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
};
I was under the impression that the object #chesireCat would be the only
object affected by this function, and that its using jQuery's ability to
figure out the object by name.
<div id="cheshireCat"><img src="images/alice24.gif" /></div>
Take a look at the code examples and tell me if I am missing something here.
Mitch
-----Original Message-----
From: <a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com">
jquery-en@googlegroups.com</a>] On
Behalf Of Stephan Beal
Sent: Tuesday, July 24, 2007 11:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide
On Jul 25, 12:41 am, "Mitchell Waite" <
<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
In your working code:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility
== 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
};</blockquote><div>
That can only work if there is a variable called 'cheshireCat' which is accessible from within jQuery. My best guess is that at some point in your code you've written
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">cheshireCat = $("#cheshireCat")[0];
</blockquote>or something similar. The best way to avoid this 'namespace pollution' is to always use the keyword 'var' when declaring a variable,
e.g.
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">var cheshireCat = $("#cheshireCat")[0];
</blockquote></div>That prevents the variable from becoming globally available, and I guess will break the previously working code you have.
Now, the question is, how can you fix the code that I've just broken?
If you add a function to jQuery as you've done, that function will be available to any jQuery object, and should work upon that object as expected. So, if you write
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">$("#cheshireCat").toggleVis();</blockquote><div>you should expect that the element with ID 'cheshireCat' will be toggled, and nothing else. You should also be able to expect that the toggleVis() function will return the same jQuery object it operated on, which is the same one you got with $(...), so that you can do other things as well, like (for example):
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote"> $("#cheshireCat").toggleVis().append('toggled');</blockquote></div>
Now, this code block:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
</blockquote>doesn't work because in a jQuery function, 'this' is not a DOM object (
i.e. the <div> element), it's a jQuery object containing the matching element(s). How can you get them out? Two ways:
this[0] - will give you the first DOM element in the object, and assumes that there IS one. If there aren't, you're accessing an array out-of-bounds.
this.each() - will iterate through any and all contained DOM elements. This is by far the best way to achieve this.
So first off your if..else needs to be wrapped to act on all contained elements:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
</blockquote>
Within the function passed to .each(), 'this' refers to the actual DOM element we are currently dealing with, so that part of the code is now alright.
It still won't allow you to chain function calls though, so one final touch is to return the result of .each(), and we're done:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
this.each(function() {
if (this.style.visibility
== 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};</blockquote><div>
I hope that's explained it all a bit better - it took a lot of 'hammering' before I understood the way jQuery fits together, especially in terms of what 'this' means when.
</div>Put that function in your code, then try $("#cheshireCat").toggleVis() and see what happens :-)
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite
</b> <<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I'm sorry for my apparent ignorance. I tried your approach and it did not
work
DOESN'T WORK
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
WORKS
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility
== 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
}
};
I was under the impression that the object #chesireCat would be the only
object affected by this function, and that its using jQuery's ability to
figure out the object by name.
<div id="cheshireCat"><img src="images/alice24.gif" /></div>
Take a look at the code examples and tell me if I am missing something here.
Mitch
-----Original Message-----
From: <a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com">
jquery-en@googlegroups.com</a>] On
Behalf Of Stephan Beal
Sent: Tuesday, July 24, 2007 11:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide
On Jul 25, 12:41 am, "Mitchell Waite" <
<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
> if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility = 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
};
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Leave a comment on rob.desbois's reply
<div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>
<div>
I'm not so sure about the metaphor - jQuery is a tool, the use of which requires knowledge and understanding of how you use that tool, as with anything. I would strongly advise anyone wanting to use jQuery to learn JavaScript first, but that is my opinion - you think otherwise, perhaps the rest of the community would disagree with me too ;-)
In terms of adding to the docs I'm sure nobody will be offended. We all approach learning a new language / tool / platform in different ways, if you found that the existing reference and tutorials were not sufficient or appropriate for you then there are probably others in a similar situation. By going through the hard part and contributing yourself, you add your own viewpoint which might be just what someone else needs, which can only be a good thing.
<span></span>
</div>--rob
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div><div style="border-style: solid none none; border-color: rgb(181, 196, 223) -moz-use-text-color -moz-use-text-color; border-width: 1pt medium medium; padding: 3pt 0in 0in;">
</div>
<p style="margin-bottom: 12pt;">Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a href="http://docs.jquery.com/Tutorials" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://docs.jquery.com/Tutorials
</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<div>
</div>
<div>
<p style="margin-bottom: 12pt;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility
= 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</div>
</div>
</div>
</span></div></div>
</div>
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
<span style="color: rgb(31, 73, 125);">Unfortunately
my code does work </span><span style="font-family: Wingdings; color: rgb(31, 73, 125);">J</span><span style="color: rgb(31, 73, 125);">. Must be a miracle?</span>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
<span style="color: rgb(31, 73, 125);">
I
just got my copy of Learning jQuery and it's a very good book (took 10 days to
get here). Some really basic concepts that got away from me are finally becoming
clear.</span>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>
<span style="color: rgb(31, 73, 125);">I
know enough Javascript, my main issue is not understanding the domain of jQuery
and the domain of JS, and how the two differ, but the book is making that clear.
Also the book helps me understand that jQuery is really about manipulating elements
in the DOM using selectors and traversing the DOM. I think that is where I went
astray. I don't think you need to dive deep into JS to grok jQ, but the syntax closeness
of the two can be tricky, and not explained well in the tutorials. Like the book
spends a lot of time explaining $() which it calls the Factory function.</span>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>
<span style="color: rgb(31, 73, 125);">
I
see now that an object in jQuery does not have a visibility directly, it needs
a class assigned to it, so that is why example 2 doesn't work.</span>
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>
<span>PS I have
read all the tutorials at </span><span><a href="http://docs.jquery.com/Tutorials" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"><span style="color: windowtext;">http://docs.jquery.com/Tutorials</span>
</a>
and honestly they assume a lot of prior knowledge and leave out some really
major lessons for the newbie.</span>
<div>
<span>PSS I am
not sure your metaphor is right, but I agree that the bigger picture needs
amplifying on the docs site, and maybe I will end up contributing to that
issue, which is not to be critical of the community in any way, you guys are
all fabulous and very generous.</span>
I'm not so sure about the metaphor - jQuery is a tool, the use of which requires knowledge and understanding of how you use that tool, as with anything. I would strongly advise anyone wanting to use jQuery to learn JavaScript first, but that is my opinion - you think otherwise, perhaps the rest of the community would disagree with me too ;-)
In terms of adding to the docs I'm sure nobody will be offended. We all approach learning a new language / tool / platform in different ways, if you found that the existing reference and tutorials were not sufficient or appropriate for you then there are probably others in a similar situation. By going through the hard part and contributing yourself, you add your own viewpoint which might be just what someone else needs, which can only be a good thing.
<span></span>
</div>--rob
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div><div style="border-style: solid none none; border-color: rgb(181, 196, 223) -moz-use-text-color -moz-use-text-color; border-width: 1pt medium medium; padding: 3pt 0in 0in;">
<b><span style="font-size: 10pt;">From:</span></b><span style="font-size: 10pt;">
<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
jquery-en@googlegroups.com</a>] <b>On Behalf Of </b>Rob
Desbois
<b>Sent:</b> Wednesday, July 25, 2007 2:14 AM<span class="q">
<b>To:</b> <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a>
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide</span></span>
</div>
<div><span class="e" id="q_113fe239470a0568_3">
<p style="margin-bottom: 12pt;">Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a href="http://docs.jquery.com/Tutorials" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://docs.jquery.com/Tutorials
</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob
<div>
<span>On 7/25/07, <b>Ganeshji Marwaha</b>
<<a href="mailto:ganeshread@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">ganeshread@gmail.com</a>> wrote:</span>
<div>
> jQuery.fn.toggleVis = function() {
> if(this.style.visibility == 'hidden')
{
>
this.style.visibility =
'visible';
> } else {
>
this.style.visibility = 'hidden';
> }
> };
</div>
<div>
doesn't "this" here refer to the jquery object...
I don't think jquery object has a style attribute, or does it?
</div>
<div>
</div>
<div>
-GTG
</div>
<div>
<div>
</div>
<div>
<span>On 7/24/07, <b>Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">sgbeal@googlemail.com </a>>
wrote:</span>
<p style="margin-bottom: 12pt;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
> chesireCat.style.visibility
= 'visible';
>
> } else {
>
> chesireCat.style.visibility
= 'hidden';
>
> }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility
= 'visible';
} else {
this.style.visibility
= 'hidden';
}
};
</div>
</div>
</div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and
the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
</span></div></div>
</div>
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Leave a comment on rob.desbois's reply
Rob, I think you left out the return statement that you meant to put in. :-)
(Outstanding explanation, BTW!)
For clarity, it could be:
jQuery.fn.toggleVis = function() {
this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
return this;
};
Or, taking advantage of the fact that "each" returns "this" for convenience:
jQuery.fn.toggleVis = function() {
return this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
Mitch, take careful note that "this" means two different things in that
code:
jQuery.fn.toggleVis = function() {
/* Here, "this" is the jQuery object */
return this.each(function() {
/* Here, "this" is a DOM element */
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
The use of "this" inside an "each" loop is one of the two major design
errors in jQuery (the other being the event system, which I'll get to
another day). It is the source of a great deal of confusion. It would have
been far better if "each" passed the DOM element as an argument to the inner
function, instead of using "this":
/* Non-working code as an example of what could have been */
jQuery.fn.toggleVis = function() {
return this.each( function( element ) {
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
To me at least, that code is *much* easier to follow.
Now it does turn out that the DOM element is passed as an argument to the
"each" inner function, but it's the second argument, not the first. The
first argument is the array index (0 through n). That's unfortunate, since
you rarely need the index but always need the element. But at least you can
code:
jQuery.fn.toggleVis = function() {
return this.each( function( index, element ) {
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
That capability didn't exist in the first versions of jQuery - it was added
somewhat later - so you'll often see another approach in existing jQuery
code:
jQuery.fn.toggleVis = function() {
return this.each( function() {
var element = this;
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
-Mike
Leave a comment on mike9's reply
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV><DIV>On Jul 25, 2007, at 12:26 PM, Rob Desbois wrote:</DIV><BLOCKQUOTE type="cite"><BLOCKQUOTE class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><DIV link="blue" vlink="purple" lang="EN-US"><DIV><P><SPAN style=""><FONT class="Apple-style-span" color="#1F497D">I see now that an object in jQuery does not have a visibility directly, it needs a class assigned to it, so that is why example 2 doesn't work.</FONT></SPAN><BR></P></DIV></DIV></BLOCKQUOTE><DIV>Not entirely sure what you mean by this..? </DIV></BLOCKQUOTE></DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV>Well, the main point is that the jQuery object is not the same as a DOM element. It doesn't necessarily need a class assigned to it to change the visibility, but that's the approach we took in the early chapters of the book to demonstrate basic jQuery components: $('someSelector').addClass('class') and $('someSelector').removeClass('class')</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>jQuery has its own method to access and modify CSS properties: .css(). </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>So, $('#myDiv').css('visibility') would return the same value as document.getElementById('myDiv').style.visibility</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Except, I think, .css('visibility') will return "visible" if the element is visible, even if its style attribute isn't explicitly set to "visiblity: visible" whereas the .style.visibility will return "visible" only if that's what the element's style attribute says.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I hope I'm not clouding the issue here. Ideally, modifying presentation based on class as its defined in a stylesheet is the way to go. But, Mitchell, I think you'll see later in the book (chapter 5?) that there are times when it's necessary to calculate a css value in your script, so .css() works great for those occasions.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV></DIV><BR></BODY></HTML>
Leave a comment on kswedberg's reply
> It would have been far better if "each" passed the DOM element as
> an argument to the inner function, instead of using "this":
It does pass the element, so if you prefer you could write code like:
$('.stuff').each(function(index, element) {
element.style.visibility = 'hidden';
});
Personally, I prefer using 'this'. I understand that it's more
confusing to learn initially, but once you get it I think it makes a
lot of sense.
Mike
Leave a comment on malsup's reply
Leave a comment on klaus.hartl1's reply
:-) Mike, I just reread your email and see that you pointed this out
already! Sorry!
Mike
Leave a comment on malsup's reply
Michael,
> Rob, I think you left out the return statement that you meant to put in. :-)
Whoops, thanks!
> (Outstanding explanation, BTW!)
And thanks again :-) took a while to put it into rambling words.
Is there a decent article somewhere on <a href="http://docs.jquery.com">docs.jquery.com</a> or someone's blog which explains what 'this' is and when?
It's such a common confusion that it really needs an obvious, short description somewhere.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mike Alsup</b> <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
:-) Mike, I just reread your email and see that you pointed this out
already! Sorry!
Mike
On 7/25/07, Mike Alsup <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:
> > It would have been far better if "each" passed the DOM element as
> > an argument to the inner function, instead of using "this":
>
> It does pass the element, so if you prefer you could write code like:
>
> $('.stuff').each(function(index, element) {
> element.style.visibility = 'hidden';
> });
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
> Rob, I think you left out the return statement that you meant to put in. :-)
Whoops, thanks!
> (Outstanding explanation, BTW!)
And thanks again :-) took a while to put it into rambling words.
Is there a decent article somewhere on <a href="http://docs.jquery.com">docs.jquery.com</a> or someone's blog which explains what 'this' is and when?
It's such a common confusion that it really needs an obvious, short description somewhere.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mike Alsup</b> <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
:-) Mike, I just reread your email and see that you pointed this out
already! Sorry!
Mike
On 7/25/07, Mike Alsup <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:
> > It would have been far better if "each" passed the DOM element as
> > an argument to the inner function, instead of using "this":
>
> It does pass the element, so if you prefer you could write code like:
>
> $('.stuff').each(function(index, element) {
> element.style.visibility = 'hidden';
> });
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
Leave a comment on rob.desbois's reply
> From: Michael Geary
>
> The use of "this" inside an "each" loop is one of the two
> major design errors in jQuery (the other being the event
> system, which I'll get to another day).
Just to avoid any possible misunderstanding, I think everyone knows I
consider jQuery to be a brilliant piece of work. Even so, it would be
surprising if there were *no* design flaws. :-) (And "major design errors"
is probably overstating it quite a bit!)
The event system is actually a more subtle and interesting problem. jQuery's
event system is derived from Dean Edwards' entry in the famous addEvent()
recoding contest [1] that took place in September 2005. The contest
specified an addEvent interface that looked good on paper but added
complexity to the implementation.
A small change to the specification allows for a simpler event system, like
the one I coded recently for my Zvents event calendar widgets.
Unfortunately, the original contest specification is gone from quirksmode,
org, and the Wayback Machine at archive.org is broken right now too. Once I
get a hold of the original specs I'll write up an article about this. It's a
fairly interesting design exercise (of course I would say that!), even if it
is too late for it to do much good for existing libraries that based their
event systems on the contest entries.
-Mike
[1] http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html
Leave a comment on mike9's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:Consolas;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:Consolas;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoPlainText>Leave it to Michael to leave the most indelible mark. I
now a see the subtle issues with "this" In fact I have a whole a new
take on jQuery since listening to Michael about "this" and trying to
get my tediously simple little toggle to work. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>It actually started in Javascript and was a lot more
code, so I appreciate that it's so more streamlined. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>However the abstraction leaves me a bit uneasy. Given
there is no simple way to tell a DOM "this" from a jQ "this",
I ended up doing this:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>/* from Rob */<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>function toggleVis(element)
{ <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible'; <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } else { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>} <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>Contrasting this with
Michael G's code<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> jQuery.fn.toggleVis =
function() {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> return this.each(
function( index, element ) {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible';<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } else {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden';<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> }<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> });<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> };</span><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I think Rob's makes more sense to a beginner. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>---- called by this----<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>
$("#toggle").click(function() { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> var $cat =
$('#cheshireCat'); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
($cat.length) { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> toggleVis($cat[0]);
<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> });<o:p></o:p></span>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>This was advice from Rob, using a JS function and calling
it with from jQuery and sending it a DOM. I leave this here for the newbie's on
this list, as I know this is self evident to most people here. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><b><span style='color:#0070C0'>Now to muddle things
either further.<o:p></o:p></span></b>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I decided that I might be able to use jQuery’s ‘hover’ to
deal with the whole issue of flipping visibility and so I made this:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>.hidden {display: none;}<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>.showPic {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> position:absolute;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> width:94px;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> height:31px;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> z-index:1;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>}<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></style><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><script
type="text/javascript"><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>$(document).ready(function(){<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> $("#showPic").hover(function()
{<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> $("#hover,
#normal").toggleClass("hidden");<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> }); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>}); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> </script><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></head><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><body><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><div
id="showPic"><img id="hover"
src="images/B_hover.gif" class="hidden" /><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><img
id="normal" src="images/b_normal.gif" /><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></div><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></body><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></html><o:p></o:p></span>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Ya think that could be more simple. It works right?<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Check it out, it does something much different then what
I expected.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><a
href="http://www.whatbird.com/wwwroot/3statebutton_2.html">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>So is hover not a good solution?<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Mitch<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On Behalf
Of Michael Geary
Sent: Wednesday, July 25, 2007 10:10 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Rob, I think you left out the return statement that you
meant to put in. :-)<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>(Outstanding explanation, BTW!)<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>For clarity, it could be:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText> jQuery.fn.toggleVis = function() {<o:p></o:p>
<p class=MsoPlainText> this.each(function() {<o:p></o:p>
<p class=MsoPlainText> if (this.style.visibility == 'hidden') {<o:p></o:p>
<p class=MsoPlainText> this.style.visibility = 'visible';<o:p></o:p>
<p class=MsoPlainText> } else {<o:p></o:p>
<p class=MsoPlainText> this.style.visibility = 'hidden';<o:p></o:p>
<p class=MsoPlainText> }<o:p></o:p>
<p class=MsoPlainText> });<o:p></o:p>
<p class=MsoPlainText> return this;<o:p></o:p>
<p class=MsoPlainText> };<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:Consolas;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:Consolas;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoPlainText>Leave it to Michael to leave the most indelible mark. I
now a see the subtle issues with "this" In fact I have a whole a new
take on jQuery since listening to Michael about "this" and trying to
get my tediously simple little toggle to work. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>It actually started in Javascript and was a lot more
code, so I appreciate that it's so more streamlined. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>However the abstraction leaves me a bit uneasy. Given
there is no simple way to tell a DOM "this" from a jQ "this",
I ended up doing this:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>/* from Rob */<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>function toggleVis(element)
{ <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible'; <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } else { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>} <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>Contrasting this with
Michael G's code<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> jQuery.fn.toggleVis =
function() {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> return this.each(
function( index, element ) {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible';<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } else {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden';<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> }<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> });<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> };</span><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I think Rob's makes more sense to a beginner. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>---- called by this----<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>
$("#toggle").click(function() { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> var $cat =
$('#cheshireCat'); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> if
($cat.length) { <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> toggleVis($cat[0]);
<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> } <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> });<o:p></o:p></span>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>This was advice from Rob, using a JS function and calling
it with from jQuery and sending it a DOM. I leave this here for the newbie's on
this list, as I know this is self evident to most people here. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><b><span style='color:#0070C0'>Now to muddle things
either further.<o:p></o:p></span></b>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I decided that I might be able to use jQuery’s ‘hover’ to
deal with the whole issue of flipping visibility and so I made this:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><span style='font-size:9.0pt'>.hidden {display: none;}<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>.showPic {<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> position:absolute;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> width:94px;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> height:31px;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> z-index:1;<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>}<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></style><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><script
type="text/javascript"><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>$(document).ready(function(){<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> $("#showPic").hover(function()
{<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> $("#hover,
#normal").toggleClass("hidden");<o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> }); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'>}); <o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'> </script><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></head><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><body><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><div
id="showPic"><img id="hover"
src="images/B_hover.gif" class="hidden" /><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><img
id="normal" src="images/b_normal.gif" /><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></div><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'><o:p> </o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></body><o:p></o:p></span>
<p class=MsoPlainText><span style='font-size:9.0pt'></html><o:p></o:p></span>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Ya think that could be more simple. It works right?<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Check it out, it does something much different then what
I expected.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><a
href="http://www.whatbird.com/wwwroot/3statebutton_2.html">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>So is hover not a good solution?<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Mitch<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On Behalf
Of Michael Geary
Sent: Wednesday, July 25, 2007 10:10 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Rob, I think you left out the return statement that you
meant to put in. :-)<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>(Outstanding explanation, BTW!)<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>For clarity, it could be:<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText> jQuery.fn.toggleVis = function() {<o:p></o:p>
<p class=MsoPlainText> this.each(function() {<o:p></o:p>
<p class=MsoPlainText> if (this.style.visibility == 'hidden') {<o:p></o:p>
<p class=MsoPlainText> this.style.visibility = 'visible';<o:p></o:p>
<p class=MsoPlainText> } else {<o:p></o:p>
<p class=MsoPlainText> this.style.visibility = 'hidden';<o:p></o:p>
<p class=MsoPlainText> }<o:p></o:p>
<p class=MsoPlainText> });<o:p></o:p>
<p class=MsoPlainText> return this;<o:p></o:p>
<p class=MsoPlainText> };<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
The hover method takes two functions. One for the mouseover and one for the mouseout. Here are the docs for the hover method: <a href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style="font-size: 9pt;">$("#showPic").hover(function()
{
</span><span style="font-size: 9pt;">$("#hover,
#normal").addClass("hidden");</span><span style="font-size: 9pt;">
}, function() {
</span><span style="font-size: 9pt;"></span><span style="font-size: 9pt;">$("#hover,
#normal").removeClass("hidden");</span>
<span style="font-size: 9pt;">}); </span>
--
Brandon Aaron
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US">
<div>
</span></div>
</div>
</blockquote></div>
</a>
Here is the proper way to code the example.
<span style="font-size: 9pt;">$("#showPic").hover(function()
{
</span><span style="font-size: 9pt;">$("#hover,
#normal").addClass("hidden");</span><span style="font-size: 9pt;">
}, function() {
</span><span style="font-size: 9pt;"></span><span style="font-size: 9pt;">$("#hover,
#normal").removeClass("hidden");</span>
<span style="font-size: 9pt;">}); </span>
--
Brandon Aaron
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US">
<div>
Leave it to Michael to leave the most indelible mark. I
now a see the subtle issues with "this" In fact I have a whole a new
take on jQuery since listening to Michael about "this" and trying to
get my tediously simple little toggle to work.
It actually started in Javascript and was a lot more
code, so I appreciate that it's so more streamlined.
However the abstraction leaves me a bit uneasy. Given
there is no simple way to tell a DOM "this" from a jQ "this",
I ended up doing this:
<span style="font-size: 9pt;">/* from Rob */</span>
<span style="font-size: 9pt;">function toggleVis(element)
{ </span>
<span style="font-size: 9pt;"> if
(element.style.visibility == 'hidden') { </span>
<span style="font-size: 9pt;">
element.style.visibility = 'visible'; </span>
<span style="font-size: 9pt;"> } else { </span>
<span style="font-size: 9pt;">
element.style.visibility = 'hidden'; </span>
<span style="font-size: 9pt;"> } </span>
<span style="font-size: 9pt;">} </span>
<span style="font-size: 9pt;"> </span>
</span><span style="font-size: 9pt;">Contrasting this with
Michael G's code</span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"> jQuery.fn.toggleVis =
function() {</span>
<span style="font-size: 9pt;"> return this.each(
function( index, element ) {</span>
<span style="font-size: 9pt;"> if
(element.style.visibility == 'hidden') {</span>
<span style="font-size: 9pt;">
element.style.visibility = 'visible';</span>
<span style="font-size: 9pt;"> } else {</span>
<span style="font-size: 9pt;">
element.style.visibility = 'hidden';</span>
<span style="font-size: 9pt;"> }</span>
<span style="font-size: 9pt;"> });</span>
<span style="font-size: 9pt;"> };</span>
</span>
I think Rob's makes more sense to a beginner.
---- called by this----
<span style="font-size: 9pt;">
$("#toggle").click(function() { </span>
<span style="font-size: 9pt;"> var $cat =
$('#cheshireCat'); </span>
<span style="font-size: 9pt;"> if
($cat.length) { </span>
<span style="font-size: 9pt;"> toggleVis($cat[0]);
</span>
<span style="font-size: 9pt;"> } </span>
<span style="font-size: 9pt;"> });</span>
This was advice from Rob, using a JS function and calling
it with from jQuery and sending it a DOM. I leave this here for the newbie's on
this list, as I know this is self evident to most people here.
<b><span style="color: rgb(0, 112, 192);">Now to muddle things
either further.</span></b>
I decided that I might be able to use jQuery's 'hover' to
deal with the whole issue of flipping visibility and so I made this:
<span style="font-size: 9pt;">.hidden {display: none;}</span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;">.showPic {</span>
<span style="font-size: 9pt;"> position:absolute;</span>
<span style="font-size: 9pt;"> width:94px;</span>
<span style="font-size: 9pt;"> height:31px;</span>
<span style="font-size: 9pt;"> z-index:1;</span>
<span style="font-size: 9pt;">}</span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"></style></span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"><script
type="text/javascript"></span>
<span style="font-size: 9pt;">$(document).ready(function(){</span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"> $("#showPic").hover(function()
{</span>
<span style="font-size: 9pt;"> $("#hover,
#normal").toggleClass("hidden");</span>
<span style="font-size: 9pt;"> }); </span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;">}); </span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"> </script></span>
<span style="font-size: 9pt;"></head></span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"><body></span>
<span style="font-size: 9pt;"><div
id="showPic"><img id="hover"
src="images/B_hover.gif" class="hidden" /></span>
<span style="font-size: 9pt;"><img
id="normal" src="images/b_normal.gif" /></span>
<span style="font-size: 9pt;"></div></span>
<span style="font-size: 9pt;"> </span>
<span style="font-size: 9pt;"></body></span>
<span style="font-size: 9pt;"></html></span>
Ya think that could be more simple. It works right?
Check it out, it does something much different then what
I expected.
<a href="http://www.whatbird.com/wwwroot/3statebutton_2.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.whatbird.com/wwwroot/3statebutton_2.html</a>
So is hover not a good solution?
Mitch
<span class="q">-----Original Message-----
From: <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
jquery-en@googlegroups.com</a>] On Behalf
Of Michael Geary
Sent: Wednesday, July 25, 2007 10:10 AM
To: <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a>
</span><span class="q">
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide</span>
Rob, I think you left out the return statement that you
meant to put in. :-)
(Outstanding explanation, BTW!)
For clarity, it could be:
jQuery.fn.toggleVis = function() {
this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
return this;
};
</span></div>
</div>
</blockquote></div>
Leave a comment on brandon_aaron's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Helvetica;
panose-1:2 11 6 4 2 2 2 3 2 4;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.apple-style-span
{mso-style-name:apple-style-span;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='word-wrap: break-word;
-khtml-nbsp-mode: space;-khtml-line-break: after-white-space'>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Gosh the author speaks! <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Karl <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Having authored about 25 computer books on programming and
published about 200 (www.mitchwaite.com), I find Learning jQuery a real
treasure. The way you guys tell the store is very well thought out, and shows
an immense understanding of the person coming to jQuery. You go out of your way
to help understand what makes it so different.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I just hit chapter 4 page 67 were you introduce css positioning
so I can being to see the use of styles better. The link on page 67 is broken. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Is there source code for the examples anywhere. It would be so
helpful to be able to run each example and modify it.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My only quibble and this is more the publisher in me, is that
the book suffers on the illustration end. I think there are a lot of places
where a drawing or two would have hammered the idea home. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I am really enjoying myself.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Karl
Swedberg
<b>Sent:</b> Wednesday, July 25, 2007 10:15 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<p class=MsoNormal>On Jul 25, 2007, at 12:26 PM, Rob Desbois wrote:<o:p></o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<div>
<div>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>Not entirely sure what you mean by this..? <o:p></o:p>
</div>
</blockquote>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><span class=apple-style-span><span style='font-size:9.0pt;font-family:
"Helvetica","sans-serif";color:black'><o:p></o:p></span></span>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Well, the main point is that the jQuery object is not the same as
a DOM element. It doesn't necessarily need a class assigned to it to change the
visibility, but that's the approach we took in the early chapters of the book
to demonstrate basic jQuery components: $('someSelector').addClass('class')
and $('someSelector').removeClass('class')</span><o:p></o:p>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>jQuery has its own method to access and modify CSS properties:
.css(). <o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>So, $('#myDiv').css('visibility') would return the same value as
document.getElementById('myDiv').style.visibility<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Except, I think, .css('visibility') will return
"visible" if the element is visible, even if its style attribute
isn't explicitly set to "visiblity: visible" whereas the
.style.visibility will return "visible" only if that's what the
element's style attribute says.<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>I hope I'm not clouding the issue here. Ideally, modifying
presentation based on class as its defined in a stylesheet is the way to go.
But, Mitchell, I think you'll see later in the book (chapter 5?) that there are
times when it's necessary to calculate a css value in your script, so .css()
works great for those occasions.<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>--Karl<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>_________________<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Karl Swedberg<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.englishrules.com<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.learningjquery.com<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><o:p></o:p>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Helvetica;
panose-1:2 11 6 4 2 2 2 3 2 4;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.apple-style-span
{mso-style-name:apple-style-span;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='word-wrap: break-word;
-khtml-nbsp-mode: space;-khtml-line-break: after-white-space'>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Gosh the author speaks! <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Karl <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Having authored about 25 computer books on programming and
published about 200 (www.mitchwaite.com), I find Learning jQuery a real
treasure. The way you guys tell the store is very well thought out, and shows
an immense understanding of the person coming to jQuery. You go out of your way
to help understand what makes it so different.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I just hit chapter 4 page 67 were you introduce css positioning
so I can being to see the use of styles better. The link on page 67 is broken. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Is there source code for the examples anywhere. It would be so
helpful to be able to run each example and modify it.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My only quibble and this is more the publisher in me, is that
the book suffers on the illustration end. I think there are a lot of places
where a drawing or two would have hammered the idea home. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I am really enjoying myself.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Karl
Swedberg
<b>Sent:</b> Wednesday, July 25, 2007 10:15 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<div>
<div>
<p class=MsoNormal>On Jul 25, 2007, at 12:26 PM, Rob Desbois wrote:<o:p></o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<div>
<div>
<span style='color:#1F497D'>I see now that an object in jQuery does not have
a visibility directly, it needs a class assigned to it, so that is why example
2 doesn't work.</span><o:p></o:p>
</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>Not entirely sure what you mean by this..? <o:p></o:p>
</div>
</blockquote>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><span class=apple-style-span><span style='font-size:9.0pt;font-family:
"Helvetica","sans-serif";color:black'><o:p></o:p></span></span>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Well, the main point is that the jQuery object is not the same as
a DOM element. It doesn't necessarily need a class assigned to it to change the
visibility, but that's the approach we took in the early chapters of the book
to demonstrate basic jQuery components: $('someSelector').addClass('class')
and $('someSelector').removeClass('class')</span><o:p></o:p>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>jQuery has its own method to access and modify CSS properties:
.css(). <o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>So, $('#myDiv').css('visibility') would return the same value as
document.getElementById('myDiv').style.visibility<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Except, I think, .css('visibility') will return
"visible" if the element is visible, even if its style attribute
isn't explicitly set to "visiblity: visible" whereas the
.style.visibility will return "visible" only if that's what the
element's style attribute says.<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>I hope I'm not clouding the issue here. Ideally, modifying
presentation based on class as its defined in a stylesheet is the way to go.
But, Mitchell, I think you'll see later in the book (chapter 5?) that there are
times when it's necessary to calculate a css value in your script, so .css()
works great for those occasions.<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>--Karl<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>_________________<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Karl Swedberg<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.englishrules.com<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.learningjquery.com<o:p></o:p></span>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>
</div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><o:p></o:p>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>That won’t work, it makes both buttons disappear and reappear
instead of the effect I want which is to make the hover button appear when the
mouse is in and disappear when the mouse is out.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon
Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>The hover method takes two
functions. One for the mouseover and one for the mouseout. Here are the docs
for the hover method: <a
href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style='font-size:9.0pt'>$("#showPic").hover(function() {
$("#hover, #normal").addClass("hidden");
}, function() {
$("#hover,
#normal").removeClass("hidden");</span>
<span style='font-size:9.0pt'>}); </span>
--
Brandon Aaron<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<div>
<div>
</div>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>That won’t work, it makes both buttons disappear and reappear
instead of the effect I want which is to make the hover button appear when the
mouse is in and disappear when the mouse is out.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon
Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>The hover method takes two
functions. One for the mouseover and one for the mouseout. Here are the docs
for the hover method: <a
href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style='font-size:9.0pt'>$("#showPic").hover(function() {
$("#hover, #normal").addClass("hidden");
}, function() {
$("#hover,
#normal").removeClass("hidden");</span>
<span style='font-size:9.0pt'>}); </span>
--
Brandon Aaron<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<div>
<div>
Leave it to Michael to leave the most indelible mark. I now a see the subtle
issues with "this" In fact I have a whole a new take on jQuery since
listening to Michael about "this" and trying to get my tediously
simple little toggle to work. <o:p></o:p>
<o:p></o:p>
It actually started in Javascript and was a lot more code, so I appreciate
that it's so more streamlined. <o:p></o:p>
<o:p></o:p>
However the abstraction leaves me a bit uneasy. Given there is no simple way
to tell a DOM "this" from a jQ "this", I ended up doing
this:<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>/* from Rob */</span><o:p></o:p>
<span style='font-size:9.0pt'>function toggleVis(element) { </span><o:p></o:p>
<span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { </span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'visible'; </span><o:p></o:p>
<span style='font-size:9.0pt'> } else { </span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; </span><o:p></o:p>
<span style='font-size:9.0pt'> } </span><o:p></o:p>
<span style='font-size:9.0pt'>} </span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>Contrasting this with Michael G's code</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'> jQuery.fn.toggleVis = function()
{</span><o:p></o:p>
<span style='font-size:9.0pt'> return
this.each( function( index, element ) {</span><o:p></o:p>
<span style='font-size:9.0pt'>
if (element.style.visibility == 'hidden') {</span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'visible';</span><o:p></o:p>
<span style='font-size:9.0pt'>
} else {</span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'hidden';</span><o:p></o:p>
<span style='font-size:9.0pt'>
}</span><o:p></o:p>
<span style='font-size:9.0pt'> });</span><o:p></o:p>
<span style='font-size:9.0pt'> };</span><o:p></o:p>
<o:p></o:p>
I think Rob's makes more sense to a beginner. <o:p></o:p>
<o:p></o:p>
---- called by this----<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>
$("#toggle").click(function() { </span><o:p></o:p>
<span style='font-size:9.0pt'>
var $cat = $('#cheshireCat'); </span><o:p></o:p>
<span style='font-size:9.0pt'>
if ($cat.length) { </span><o:p></o:p>
<span style='font-size:9.0pt'>
toggleVis($cat[0]); </span><o:p></o:p>
<span style='font-size:9.0pt'> } </span><o:p></o:p>
<span style='font-size:9.0pt'>
});</span><o:p></o:p>
<o:p></o:p>
This was advice from Rob, using a JS function and calling it with from
jQuery and sending it a DOM. I leave this here for the newbie's on this list,
as I know this is self evident to most people here. <o:p></o:p>
<o:p></o:p>
<b><span style='color:#0070C0'>Now to muddle things either further.</span></b><o:p></o:p>
<o:p></o:p>
I decided that I might be able to use jQuery's 'hover' to deal with the
whole issue of flipping visibility and so I made this:<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>.hidden {display: none;}</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>.showPic {</span><o:p></o:p>
<span style='font-size:9.0pt'>
position:absolute;</span><o:p></o:p>
<span style='font-size:9.0pt'>
width:94px;</span><o:p></o:p>
<span style='font-size:9.0pt'>
height:31px;</span><o:p></o:p>
<span style='font-size:9.0pt'>
z-index:1;</span><o:p></o:p>
<span style='font-size:9.0pt'>}</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'></style></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'><script
type="text/javascript"></span><o:p></o:p>
<span style='font-size:9.0pt'>$(document).ready(function(){</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>
$("#showPic").hover(function() {</span><o:p></o:p>
<span style='font-size:9.0pt'>
$("#hover, #normal").toggleClass("hidden");</span><o:p></o:p>
<span style='font-size:9.0pt'> });
</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>}); </span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'> </script></span><o:p></o:p>
<span style='font-size:9.0pt'></head></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'><body></span><o:p></o:p>
<span style='font-size:9.0pt'><div id="showPic"><img
id="hover" src="images/B_hover.gif"
class="hidden" /></span><o:p></o:p>
<span style='font-size:9.0pt'><img id="normal"
src="images/b_normal.gif" /></span><o:p></o:p>
<span style='font-size:9.0pt'></div></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'></body></span><o:p></o:p>
<span style='font-size:9.0pt'></html></span><o:p></o:p>
<o:p></o:p>
Ya think that could be more simple. It works right?<o:p></o:p>
<o:p></o:p>
Check it out, it does something much different then what I expected.<o:p></o:p>
<o:p></o:p>
<a href="http://www.whatbird.com/wwwroot/3statebutton_2.html" target="_blank">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>
<o:p></o:p>
So is hover not a good solution?<o:p></o:p>
<o:p></o:p>
Mitch<o:p></o:p>
<o:p></o:p>
<span class=q>-----Original Message-----</span>
<span class=q>From: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a>
[mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank">
jquery-en@googlegroups.com</a>] On Behalf Of Michael Geary</span>
<span class=q>Sent: Wednesday, July 25, 2007 10:10 AM</span>
<span class=q>To: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a></span>
<span class=q>Subject: [jQuery] Re: Toggling an objects visiblty without show
and hide</span><o:p></o:p>
<o:p></o:p>
<o:p></o:p>
Rob, I think you left out the return statement that you meant to put in. :-)<o:p></o:p>
<o:p></o:p>
(Outstanding explanation, BTW!)<o:p></o:p>
<o:p></o:p>
For clarity, it could be:<o:p></o:p>
<o:p></o:p>
jQuery.fn.toggleVis = function() {<o:p></o:p>
this.each(function() {<o:p></o:p>
if (this.style.visibility
== 'hidden') {<o:p></o:p>
this.style.visibility = 'visible';<o:p></o:p>
} else {<o:p></o:p>
this.style.visibility = 'hidden';<o:p></o:p>
}<o:p></o:p>
});<o:p></o:p>
return this;<o:p></o:p>
};<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
</div>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Ok here is the skinny (I think I am getting this down)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_3.html">http://www.whatbird.com/wwwroot/3statebutton_3.html</a>
(uses layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>The hover button is under the normal button layer so all we have
to do is hide and unhide the normal button.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_4.html">http://www.whatbird.com/wwwroot/3statebutton_4.html</a>
(no layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Since both bottons are in the same div they can’t both be on at
the same , or you would see them side by side. So you hide and unhide both
buttons. More processing but less divs.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> jquery-en@googlegroups.com
[mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>The hover method takes two
functions. One for the mouseover and one for the mouseout. Here are the docs
for the hover method: <a
href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style='font-size:9.0pt'>$("#showPic").hover(function() {
$("#hover, #normal").addClass("hidden");
}, function() {
$("#hover,
#normal").removeClass("hidden");</span>
<span style='font-size:9.0pt'>}); </span>
--
Brandon Aaron<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<div>
<div>
</div>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Ok here is the skinny (I think I am getting this down)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_3.html">http://www.whatbird.com/wwwroot/3statebutton_3.html</a>
(uses layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>The hover button is under the normal button layer so all we have
to do is hide and unhide the normal button.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_4.html">http://www.whatbird.com/wwwroot/3statebutton_4.html</a>
(no layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Since both bottons are in the same div they can’t both be on at
the same , or you would see them side by side. So you hide and unhide both
buttons. More processing but less divs.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> jquery-en@googlegroups.com
[mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='margin-bottom:12.0pt'>The hover method takes two
functions. One for the mouseover and one for the mouseout. Here are the docs
for the hover method: <a
href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style='font-size:9.0pt'>$("#showPic").hover(function() {
$("#hover, #normal").addClass("hidden");
}, function() {
$("#hover,
#normal").removeClass("hidden");</span>
<span style='font-size:9.0pt'>}); </span>
--
Brandon Aaron<o:p></o:p>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>
<div>
<div>
Leave it to Michael to leave the most indelible mark. I now a see the subtle
issues with "this" In fact I have a whole a new take on jQuery since
listening to Michael about "this" and trying to get my tediously
simple little toggle to work. <o:p></o:p>
<o:p></o:p>
It actually started in Javascript and was a lot more code, so I appreciate
that it's so more streamlined. <o:p></o:p>
<o:p></o:p>
However the abstraction leaves me a bit uneasy. Given there is no simple way
to tell a DOM "this" from a jQ "this", I ended up doing
this:<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>/* from Rob */</span><o:p></o:p>
<span style='font-size:9.0pt'>function toggleVis(element) { </span><o:p></o:p>
<span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { </span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'visible'; </span><o:p></o:p>
<span style='font-size:9.0pt'> } else { </span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; </span><o:p></o:p>
<span style='font-size:9.0pt'> } </span><o:p></o:p>
<span style='font-size:9.0pt'>} </span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>Contrasting this with Michael G's code</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'> jQuery.fn.toggleVis = function()
{</span><o:p></o:p>
<span style='font-size:9.0pt'> return
this.each( function( index, element ) {</span><o:p></o:p>
<span style='font-size:9.0pt'>
if (element.style.visibility == 'hidden') {</span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'visible';</span><o:p></o:p>
<span style='font-size:9.0pt'>
} else {</span><o:p></o:p>
<span style='font-size:9.0pt'>
element.style.visibility = 'hidden';</span><o:p></o:p>
<span style='font-size:9.0pt'>
}</span><o:p></o:p>
<span style='font-size:9.0pt'> });</span><o:p></o:p>
<span style='font-size:9.0pt'> };</span><o:p></o:p>
<o:p></o:p>
I think Rob's makes more sense to a beginner. <o:p></o:p>
<o:p></o:p>
---- called by this----<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>
$("#toggle").click(function() { </span><o:p></o:p>
<span style='font-size:9.0pt'>
var $cat = $('#cheshireCat'); </span><o:p></o:p>
<span style='font-size:9.0pt'>
if ($cat.length) { </span><o:p></o:p>
<span style='font-size:9.0pt'>
toggleVis($cat[0]); </span><o:p></o:p>
<span style='font-size:9.0pt'> } </span><o:p></o:p>
<span style='font-size:9.0pt'>
});</span><o:p></o:p>
<o:p></o:p>
This was advice from Rob, using a JS function and calling it with from
jQuery and sending it a DOM. I leave this here for the newbie's on this list,
as I know this is self evident to most people here. <o:p></o:p>
<o:p></o:p>
<b><span style='color:#0070C0'>Now to muddle things either further.</span></b><o:p></o:p>
<o:p></o:p>
I decided that I might be able to use jQuery's 'hover' to deal with the
whole issue of flipping visibility and so I made this:<o:p></o:p>
<o:p></o:p>
<span style='font-size:9.0pt'>.hidden {display: none;}</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>.showPic {</span><o:p></o:p>
<span style='font-size:9.0pt'>
position:absolute;</span><o:p></o:p>
<span style='font-size:9.0pt'>
width:94px;</span><o:p></o:p>
<span style='font-size:9.0pt'>
height:31px;</span><o:p></o:p>
<span style='font-size:9.0pt'>
z-index:1;</span><o:p></o:p>
<span style='font-size:9.0pt'>}</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'></style></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'><script
type="text/javascript"></span><o:p></o:p>
<span style='font-size:9.0pt'>$(document).ready(function(){</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>
$("#showPic").hover(function() {</span><o:p></o:p>
<span style='font-size:9.0pt'>
$("#hover, #normal").toggleClass("hidden");</span><o:p></o:p>
<span style='font-size:9.0pt'> });
</span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'>}); </span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'> </script></span><o:p></o:p>
<span style='font-size:9.0pt'></head></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'><body></span><o:p></o:p>
<span style='font-size:9.0pt'><div id="showPic"><img
id="hover" src="images/B_hover.gif"
class="hidden" /></span><o:p></o:p>
<span style='font-size:9.0pt'><img id="normal"
src="images/b_normal.gif" /></span><o:p></o:p>
<span style='font-size:9.0pt'></div></span><o:p></o:p>
<span style='font-size:9.0pt'> </span><o:p></o:p>
<span style='font-size:9.0pt'></body></span><o:p></o:p>
<span style='font-size:9.0pt'></html></span><o:p></o:p>
<o:p></o:p>
Ya think that could be more simple. It works right?<o:p></o:p>
<o:p></o:p>
Check it out, it does something much different then what I expected.<o:p></o:p>
<o:p></o:p>
<a href="http://www.whatbird.com/wwwroot/3statebutton_2.html" target="_blank">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>
<o:p></o:p>
So is hover not a good solution?<o:p></o:p>
<o:p></o:p>
Mitch<o:p></o:p>
<o:p></o:p>
<span class=q>-----Original Message-----</span>
<span class=q>From: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a>
[mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank">
jquery-en@googlegroups.com</a>] On Behalf Of Michael Geary</span>
<span class=q>Sent: Wednesday, July 25, 2007 10:10 AM</span>
<span class=q>To: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a></span>
<span class=q>Subject: [jQuery] Re: Toggling an objects visiblty without show
and hide</span><o:p></o:p>
<o:p></o:p>
<o:p></o:p>
Rob, I think you left out the return statement that you meant to put in. :-)<o:p></o:p>
<o:p></o:p>
(Outstanding explanation, BTW!)<o:p></o:p>
<o:p></o:p>
For clarity, it could be:<o:p></o:p>
<o:p></o:p>
jQuery.fn.toggleVis = function() {<o:p></o:p>
this.each(function() {<o:p></o:p>
if (this.style.visibility
== 'hidden') {<o:p></o:p>
this.style.visibility = 'visible';<o:p></o:p>
} else {<o:p></o:p>
this.style.visibility = 'hidden';<o:p></o:p>
}<o:p></o:p>
});<o:p></o:p>
return this;<o:p></o:p>
};<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
</div>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV>On Jul 25, 2007, at 8:18 PM, Mitchell Waite wrote:</DIV><BLOCKQUOTE type="cite"><DIV class="Section1"><P class="MsoNormal"><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><FONT class="Apple-style-span" size="4"><SPAN class="Apple-style-span" style="font-size: 14.6667px;"><FONT class="Apple-style-span" color="#1F497D" face="Calibri">Gosh the author speaks!</FONT></SPAN></FONT></SPAN></P></DIV></BLOCKQUOTE><DIV>Yes, I do. Usually, I speak too much. ;-)</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BLOCKQUOTE type="cite"><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style=""><FONT class="Apple-style-span" color="#1F497D" face="Calibri" size="4"><SPAN class="Apple-style-span" style="font-size: 14.6667px;"> </SPAN></FONT><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><FONT class="Apple-style-span" color="#1F497D" face="Calibri" size="4"><SPAN class="Apple-style-span" style="font-size: 14.6667px;">Having authored about 25 computer books on programming and published about 200 (<A href="http://www.mitchwaite.com">www.mitchwaite.com</A>), I find Learning jQuery a real treasure. The way you guys tell the store is very well thought out, and shows an immense understanding of the person coming to jQuery. You go out of your way to help understand what makes it so different.</SPAN></FONT></SPAN></O:P></SPAN></SPAN></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV>Mitch, thanks a lot for the feedback on the book. I'm thrilled to know that you're enjoying it. I checked out your site when you first made an appearance on this list and ... Wow! You are prolific! And a real pioneer. Very impressive.<DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "></SPAN></SPAN></DIV><DIV><BLOCKQUOTE type="cite"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV class="Section1"><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;="">I just hit chapter 4 page 67 were you introduce css positioning so I can being to see the use of styles better. The link on page 67 is broken.</SPAN></SPAN></O:P></SPAN></P></DIV></SPAN></BLOCKQUOTE><DIV>Sorry about that! They must have shifted their site around since we last checked. Anyway, here is a working link:</DIV><DIV><A href="http://www.wpdfd.com/issues/78/absolutely_relative/">http://www.wpdfd.com/issues/78/absolutely_relative/</A></DIV><BR><BLOCKQUOTE type="cite"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV class="Section1"><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;="">Is there source code for the examples anywhere. It would be so helpful to be able to run each example and modify it.</SPAN></SPAN></O:P></SPAN></P></DIV></SPAN></BLOCKQUOTE>Yes, you can grab the source download or post errata at the publisher's website:</DIV><DIV><A href="http://www.packtpub.com/support/book/jQuery">http://www.packtpub.com/support/book/jQuery</A></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Also, we threw everything onto <A href="http://book.learningjquery.com">http://book.learningjquery.com</A>/ in case you want to just see everything in action. I just created a forum there, too, in case someone stumbles upon the site and wants to provide some feedback, etc.: <A href="http://book.learningjquery.com/forums/">http://book.learningjquery.com/forums/</A><BR><BLOCKQUOTE type="cite"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV class="Section1"><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> <SPAN style="" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;="">My only quibble and this is more the publisher in me, is that the book suffers on the illustration end. I think there are a lot of places where a drawing or two would have hammered the idea home.</SPAN></SPAN></O:P></SPAN></P></DIV></SPAN></BLOCKQUOTE>Excellent point. Also, as has been discussed in another thread, some of the pictures in the first few chapters didn't translate to grayscale very well at all. <BR></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Thanks again for the comments!</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Karl</DIV></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.apple-style-span
{mso-style-name:apple-style-span;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='word-wrap: break-word;
-khtml-nbsp-mode: space;-khtml-line-break: after-white-space'>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>BTW feel free to use my quote in any marketing your publisher or
you do. Viral is the way to go with this new computer book market.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I will get right over to your web site now. Wow nice! This is so
helpful. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>May I ask about the reference guide. Is that a work in process?
Is it okay to look at it?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I am making good progress in the lessons. I was able to solve a
big puzzle today on DOM vs jQuery and discovered that there are cool ways to do
things in jQuery and there are ways to just get things down. I’m more in the 2<sup>nd</sup>
group. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I was able to finally figure out how to make 3 state button
using addclass. I got a lot of help here from the experts, especially Rob Desbois
and Michael Geary. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>http://www.whatbird.com/wwwroot/3statebutton_6.html<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Are you on the CBT list?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Karl
Swedberg
<b>Sent:</b> Wednesday, July 25, 2007 7:53 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal>On Jul 25, 2007, at 8:18 PM, Mitchell Waite wrote:<o:p></o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Gosh the author speaks!</span></span><o:p></o:p>
</div>
</blockquote>
<div>
<p class=MsoNormal>Yes, I do. Usually, I speak too much. ;-)<o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<p class=MsoNormal><span class=apple-style-span><span style='font-size:11.0pt;
font-family:"Calibri","sans-serif";color:#1F497D'> Having authored about
25 computer books on programming and published about 200 (<a
href="http://www.mitchwaite.com">www.mitchwaite.com</a>), I find Learning
jQuery a real treasure. The way you guys tell the store is very well thought
out, and shows an immense understanding of the person coming to jQuery. You go
out of your way to help understand what makes it so different.</span></span><o:p></o:p>
</blockquote>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<p class=MsoNormal>Mitch, thanks a lot for the feedback on the book. I'm
thrilled to know that you're enjoying it. I checked out your site when you
first made an appearance on this list and ... Wow! You are prolific! And a real
pioneer. Very impressive.<o:p></o:p>
<div>
<div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I just hit chapter 4 page 67 were you introduce css positioning
so I can being to see the use of styles better. The link on page 67 is broken.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
</blockquote>
<div>
<p class=MsoNormal>Sorry about that! They must have shifted their site around
since we last checked. Anyway, here is a working link:<o:p></o:p>
</div>
<div>
<p class=MsoNormal><a href="http://www.wpdfd.com/issues/78/absolutely_relative/">http://www.wpdfd.com/issues/78/absolutely_relative/</a><o:p></o:p>
</div>
<p class=MsoNormal>
<o:p></o:p>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Is there source code for the examples anywhere. It would be so
helpful to be able to run each example and modify it.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
<p class=MsoNormal>Yes, you can grab the source download or post errata at the
publisher's website:<o:p></o:p>
</div>
<div>
<p class=MsoNormal><a href="http://www.packtpub.com/support/book/jQuery">http://www.packtpub.com/support/book/jQuery</a><o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Also, we threw everything onto <a
href="http://book.learningjquery.com">http://book.learningjquery.com</a>/ in
case you want to just see everything in action. I just created a forum there,
too, in case someone stumbles upon the site and wants to provide some feedback,
etc.: <a href="http://book.learningjquery.com/forums/">http://book.learningjquery.com/forums/</a>
<o:p></o:p>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> My only quibble and this is more the publisher in me, is
that the book suffers on the illustration end. I think there are a lot of
places where a drawing or two would have hammered the idea home.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
<p class=MsoNormal>Excellent point. Also, as has been discussed in another
thread, some of the pictures in the first few chapters didn't translate to
grayscale very well at all. <o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Thanks again for the comments!<o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Karl<o:p></o:p>
</div>
</div>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.apple-style-span
{mso-style-name:apple-style-span;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='word-wrap: break-word;
-khtml-nbsp-mode: space;-khtml-line-break: after-white-space'>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>BTW feel free to use my quote in any marketing your publisher or
you do. Viral is the way to go with this new computer book market.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I will get right over to your web site now. Wow nice! This is so
helpful. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>May I ask about the reference guide. Is that a work in process?
Is it okay to look at it?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I am making good progress in the lessons. I was able to solve a
big puzzle today on DOM vs jQuery and discovered that there are cool ways to do
things in jQuery and there are ways to just get things down. I’m more in the 2<sup>nd</sup>
group. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I was able to finally figure out how to make 3 state button
using addclass. I got a lot of help here from the experts, especially Rob Desbois
and Michael Geary. <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>http://www.whatbird.com/wwwroot/3statebutton_6.html<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Are you on the CBT list?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Karl
Swedberg
<b>Sent:</b> Wednesday, July 25, 2007 7:53 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<div>
<p class=MsoNormal>On Jul 25, 2007, at 8:18 PM, Mitchell Waite wrote:<o:p></o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Gosh the author speaks!</span></span><o:p></o:p>
</div>
</blockquote>
<div>
<p class=MsoNormal>Yes, I do. Usually, I speak too much. ;-)<o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<p class=MsoNormal><span class=apple-style-span><span style='font-size:11.0pt;
font-family:"Calibri","sans-serif";color:#1F497D'> Having authored about
25 computer books on programming and published about 200 (<a
href="http://www.mitchwaite.com">www.mitchwaite.com</a>), I find Learning
jQuery a real treasure. The way you guys tell the store is very well thought
out, and shows an immense understanding of the person coming to jQuery. You go
out of your way to help understand what makes it so different.</span></span><o:p></o:p>
</blockquote>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<p class=MsoNormal>Mitch, thanks a lot for the feedback on the book. I'm
thrilled to know that you're enjoying it. I checked out your site when you
first made an appearance on this list and ... Wow! You are prolific! And a real
pioneer. Very impressive.<o:p></o:p>
<div>
<div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I just hit chapter 4 page 67 were you introduce css positioning
so I can being to see the use of styles better. The link on page 67 is broken.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
</blockquote>
<div>
<p class=MsoNormal>Sorry about that! They must have shifted their site around
since we last checked. Anyway, here is a working link:<o:p></o:p>
</div>
<div>
<p class=MsoNormal><a href="http://www.wpdfd.com/issues/78/absolutely_relative/">http://www.wpdfd.com/issues/78/absolutely_relative/</a><o:p></o:p>
</div>
<p class=MsoNormal>
<o:p></o:p>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Is there source code for the examples anywhere. It would be so
helpful to be able to run each example and modify it.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
<p class=MsoNormal>Yes, you can grab the source download or post errata at the
publisher's website:<o:p></o:p>
</div>
<div>
<p class=MsoNormal><a href="http://www.packtpub.com/support/book/jQuery">http://www.packtpub.com/support/book/jQuery</a><o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Also, we threw everything onto <a
href="http://book.learningjquery.com">http://book.learningjquery.com</a>/ in
case you want to just see everything in action. I just created a forum there,
too, in case someone stumbles upon the site and wants to provide some feedback,
etc.: <a href="http://book.learningjquery.com/forums/">http://book.learningjquery.com/forums/</a>
<o:p></o:p>
<div>
<p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><span
class=apple-style-span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> My only quibble and this is more the publisher in me, is
that the book suffers on the illustration end. I think there are a lot of
places where a drawing or two would have hammered the idea home.</span></span><span
style='color:black'><o:p></o:p></span>
</div>
<p class=MsoNormal>Excellent point. Also, as has been discussed in another
thread, some of the pictures in the first few chapters didn't translate to
grayscale very well at all. <o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Thanks again for the comments!<o:p></o:p>
</div>
<div>
<p class=MsoNormal><o:p> </o:p>
</div>
<div>
<p class=MsoNormal>Karl<o:p></o:p>
</div>
</div>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><b><span style='font-size:16.0pt;font-family:"Calibri","sans-serif";
color:red'>I defy anyone to make this simpler (and work as well)!!!!!<o:p></o:p></span></b>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>A true 3 state button<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_6.html">http://www.whatbird.com/wwwroot/3statebutton_6.html</a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>(document).ready(function(){<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").mousedown(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").mouseup(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Wednesday, July 25, 2007 7:34 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Ok here is the skinny (I think I am getting this down)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_3.html">http://www.whatbird.com/wwwroot/3statebutton_3.html</a>
(uses layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>The hover button is under the normal button layer so all we have
to do is hide and unhide the normal button.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_4.html">http://www.whatbird.com/wwwroot/3statebutton_4.html</a>
(no layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Since both bottons are in the same div they can’t both be on at
the same , or you would see them side by side. So you hide and unhide both
buttons. More processing but less divs.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p
{mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.gmailquote
{mso-style-name:gmail_quote;}
span.q
{mso-style-name:q;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.EmailStyle21
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><b><span style='font-size:16.0pt;font-family:"Calibri","sans-serif";
color:red'>I defy anyone to make this simpler (and work as well)!!!!!<o:p></o:p></span></b>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>A true 3 state button<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_6.html">http://www.whatbird.com/wwwroot/3statebutton_6.html</a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>(document).ready(function(){<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").mousedown(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").mouseup(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Wednesday, July 25, 2007 7:34 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Ok here is the skinny (I think I am getting this down)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_3.html">http://www.whatbird.com/wwwroot/3statebutton_3.html</a>
(uses layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>The hover button is under the normal button layer so all we have
to do is hide and unhide the normal button.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_4.html">http://www.whatbird.com/wwwroot/3statebutton_4.html</a>
(no layers)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#showPic").hover(function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#hover").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}, function() {<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#hover").addClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$("#normal").removeClass("hidden");<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>}); <o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Since both bottons are in the same div they can’t both be on at
the same , or you would see them side by side. So you hide and unhide both
buttons. More processing but less divs.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p> </o:p></span>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
Leave a comment on goofy166's reply
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV>I didn't make it simpler, really, but I did optimize it a bit. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Here only three jQuery objects are created, as opposed to eight in your example.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>$(document).ready(function(){</DIV><DIV>        var $hover = $('#hover');</DIV><DIV>        var $normal = $('#normal');</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>        $("#showPic").hover(function() {</DIV><DIV>                $hover.removeClass("hidden");</DIV><DIV>        }, function() {</DIV><DIV>                $hover.addClass("hidden");</DIV><DIV>        })</DIV><DIV>        .mousedown(function() {</DIV><DIV>                $hover.addClass("hidden");</DIV><DIV>                $normal.addClass("hidden");</DIV><DIV>        })</DIV><DIV>        .mouseup(function() {</DIV><DIV>                $normal.removeClass("hidden");</DIV><DIV>        });     </DIV><DIV>});</DIV><BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Jul 25, 2007, at 11:42 PM, Mitchell Waite wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV class="Section1"><P class="MsoNormal"><B style="font-family: Times New Roman; font-size: 16px; font-weight: bold; "><SPAN style="font-size:16.0pt;font-family:" calibri","sans-serif";="" color:red;="" color:="" rgb(255,="" 0,="" 0);="" font-family:="" calibri;="" font-size:="" 21.3333px;="" font-weight:="" bold;=""><SPAN class="Apple-style-span" style="color: rgb(255, 0, 0); font-family: Calibri; font-size: 21.3333px; font-weight: bold; ">I defy anyone to make this simpler (and work as well)!!!!!</SPAN><O:P style="color: rgb(255, 0, 0); font-family: Calibri; font-size: 21.3333px; font-weight: bold; "></O:P></SPAN></B></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">A true 3 state button</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><A href="http://www.whatbird.com/wwwroot/3statebutton_6.html"><SPAN class="Apple-style-span" style="color: rgb(0, 0, 255); font-family: Calibri; font-size: 14.6667px; -khtml-text-decorations-in-effect: underline; ">http://www.whatbird.com/wwwroot/3statebutton_6.html</SPAN></A><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">(document).ready(function(){</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               $("#showPic").hover(function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#hover").removeClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               }, function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#hover").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               });</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               $("#showPic").mousedown(function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#hover").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               });          </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                              </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               $("#showPic").mouseup(function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").removeClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               });          </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">}); </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><DIV><DIV style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in"><P class="MsoNormal"><B style="font-family: Times New Roman; font-size: 16px; font-weight: bold; "><SPAN style="font-size:10.0pt;font-family:" tahoma","sans-serif";="" font-family:="" tahoma;="" font-size:="" 13.3333px;="" font-weight:="" bold;=""><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; ">From:</SPAN></SPAN></B><SPAN style="font-size:10.0pt;font-family:" tahoma","sans-serif";="" font-family:="" tahoma;="" font-size:="" 13.3333px;=""><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; "> jquery-en@googlegroups.com [<A href="mailto:jquery-en@googlegroups.com">mailto:jquery-en@googlegroups.com</A>] </SPAN><B style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; "><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; ">On Behalf Of</SPAN></B><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; ">Mitchell Waite</SPAN><BR style="font-family: Tahoma; font-size: 13.3333px; "><B style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; "><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; ">Sent:</SPAN></B><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; "> Wednesday, July 25, 2007 7:34 PM</SPAN><BR style="font-family: Tahoma; font-size: 13.3333px; "><B style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; "><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; ">To:</SPAN></B><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; "> <A href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</A></SPAN><BR style="font-family: Tahoma; font-size: 13.3333px; "><B style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; "><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; font-weight: bold; ">Subject:</SPAN></B><SPAN class="Apple-style-span" style="font-family: Tahoma; font-size: 13.3333px; "> [jQuery] Re: Toggling an objects visiblty without show and hide</SPAN><O:P style="font-family: Tahoma; font-size: 13.3333px; "></O:P></SPAN></P></DIV></DIV><P class="MsoNormal"><O:P style="font-family: Times New Roman; font-size: 16px; "><SPAN class="Apple-style-span" style="font-family: Times New Roman; font-size: 16px; "> </SPAN></O:P></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">Ok here is the skinny (I think I am getting this down)</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><A href="http://www.whatbird.com/wwwroot/3statebutton_3.html"><SPAN class="Apple-style-span" style="color: rgb(0, 0, 255); font-family: Calibri; font-size: 14.6667px; -khtml-text-decorations-in-effect: underline; ">http://www.whatbird.com/wwwroot/3statebutton_3.html</SPAN></A><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> (uses layers)</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">$(document).ready(function(){</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               $("#showPic").hover(function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               }, function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").removeClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               });</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">}); </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">The hover button is under the normal button layer so all we have to do is hide and unhide the normal button.</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><A href="http://www.whatbird.com/wwwroot/3statebutton_4.html"><SPAN class="Apple-style-span" style="color: rgb(0, 0, 255); font-family: Calibri; font-size: 14.6667px; -khtml-text-decorations-in-effect: underline; ">http://www.whatbird.com/wwwroot/3statebutton_4.html</SPAN></A><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> (no layers)</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">$(document).ready(function(){</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               $("#showPic").hover(function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#hover").removeClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               }, function() {</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#hover").addClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">                               $("#normal").removeClass("hidden");</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">               });</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">}); </SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">Since both bottons are in the same div they can’t both be on at the same , or you would see them side by side. So you hide and unhide both buttons. More processing but less divs.</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; ">Mitch</SPAN><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "></O:P></SPAN></P><P class="MsoNormal"><SPAN style="font-size:11.0pt;font-family:" calibri","sans-serif";="" color:#1f497d;="" font-family:="" calibri;="" font-size:="" 14.6667px;=""><O:P style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "><SPAN class="Apple-style-span" style="color: rgb(31, 73, 125); font-family: Calibri; font-size: 14.6667px; "> </SPAN></O:P></SPAN></P><P class="MsoNormal"><O:P style="font-family: Times New Roman; font-size: 16px; "><SPAN class="Apple-style-span" style="font-family: Times New Roman; font-size: 16px; "> </SPAN></O:P></P></DIV><BR class="Apple-interchange-newline"></SPAN></BLOCKQUOTE></DIV><BR></BODY></HTML>
Leave a comment on kswedberg's reply
On 26/07/2007, at 1:42 PM, Mitchell Waite
Leave a comment on j_birch's reply
Ha, you beat me by "this much", Karl. Plus yours works, whereas mine
is missing a dollar sign right before document ready :(
Joel.
Leave a comment on j_birch's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to elektrophyte's discussion
{"z2655295":[14737000000236769,14737000000236775,14737000000236813,14737000000236817],"z394073":[14737000000236825],"z214536":[14737000000236809,14737000000236821],"z2966800":[14737000000236779,14737000000236799,14737000000236805,14737000000236807,14737000000236819],"z2941064":[14737000000236841,14737000000236843],"z2941062":[14737000000236765],"z120188":[14737000000236773,14737000000236781,14737000000236785,14737000000236789,14737000000236791,14737000000236801,14737000000236803,14737000000236823,14737000000236827,14737000000236829,14737000000236831,14737000000236835,14737000000236837],"z2971857":[14737000000236795],"z2951783":[14737000000236797],"z2973163":[14737000000236815],"z464496":[14737000000236811,14737000000236833,14737000000236839],"z2956377":[14737000000236763,14737000000236767,14737000000236771],"z2950064":[14737000000236777,14737000000236783,14737000000236787,14737000000236793]}