<slapping self on forehead> Doh! Ya, I guess you're right, that works too: $("#area p,span").not("#nonClick").click(function(){ alert("it worked"); };)
Matthew, Thanks again. On Jun 26, 12:16 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote: > Wouldn't the comma be easier? > $("#area p,span") > > Glen > > On 6/26/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > I was trying to use the Logical Operator "OR" ("||") but could only > > get it to work with one pipe ("|"). Simple I wanted to say when > > either the "#area p" OR "span" tag is clicked run the code. > > > CDATA is the XML way of escaping. Essentially, everything inside a > > CDATA section is ignored by the parser. And it's been said that it's > > the MORE correct or proper way to comment out script. > > > A CDATA section starts with "<![CDATA[" and ends with "]]>". In > > addition, you have to add /* */ around the CDATA for the browser to > > ignore it. > > > :-) Matthew > > > On Jun 26, 11:09 am, "Glen Lipka" <[EMAIL PROTECTED]> wrote: > > > What does the pipe do in this part? > > > $("#area p"|"span") > > > > Also, what is the reason for > > > /* <![CDATA[ */ > > > > I see that alot, but never knew why its used. > > > > Glen > > > > On 6/26/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > Thanks, it worked like a charm. > > > > > Here is what I ended up doing: > > > > > <!-- ### In the <head> ### --> > > > > <style type="text/css"> > > > > #area{margin:0 auto 5px; padding:0 5px 5px; height:75px; > > > > overflow:hidden; border:1px solid #000; position:relative; width: > > > > 600px;} > > > > #area h2, #area p{margin:0; padding:0 0 10px;} > > > > #area span{position:absolute; top:0; right:0; color:#000; > > > > background:#ffc; padding:0 5px; border:1px solid #000; border-width:0 > > > > 0 1px 1px; font-style:italic; font-size:0.8em;} > > > > </style> > > > > > <!-- ### In the <head> ### --> > > > > <script language="JavaScript" type="text/javascript" > > src="js/libraries/ > > > > jquery-1.1.2/jquery.js"></script> > > > > <script type="text/javascript">/* <![CDATA[ */ > > > > $(document).ready(function(){// start jquery code > > > > $("#area p"|"span").toggle( > > > > function(){ > > > $("#area").animate({height:250},500,function(){ > > > $(this).css({overflow:"auto",background:"#ffc"}); > > > > $("span").fadeOut(); > > > > }); > > > > },function(){ > > > > $("#area").animate({height:75},500,function(){ > > > $(this).css({overflow:"hidden",background:"#fff"}); > > > > $("span").fadeIn(); > > > > }); > > > > } > > > > ); > > > > });// end jquery code > > > > /* ]]> */</script> > > > > > <!-- ### In the <body> ### --> > > > > <div id="area"><span>Click Anywhere To Read More...</span> > > > > <h2>Lorem ipsum dolor...</h2> > > > > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis > > > > ligula lorem, consequat eget, tristique nec, auctor quis, purus. > > > > Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra > > > > malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec > > > > quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla > > > > quam, in condimentum augue lorem non tellus. Pellentesque id arcu non > > > > sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, > > > > enim nibh elementum orci, ut volutpat eros sapien nec sapien. > > > > Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, > > > > ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris > > > > laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, > > > > lacinia ut, augue. Nullam nunc.</p> > > > > <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque > > > > tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam > > > > metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam > > > > posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam > > > > metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi > > > > vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. > > > > Class aptent taciti sociosqu ad litora torquent per conubia nostra, > > > > per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, > > > > rutrum ac, lectus.</p> > > > > <p>[...]</p> > > > > <p>[...]</p> > > > > <p>[...]</p> > > > > </div> > > > > > On Jun 26, 9:38 am, "Glen Lipka" <[EMAIL PROTECTED]> wrote: > > > > > Use the toggle function, but on the inside of it use the animate, > > not > > > > the > > > > > slideToggle stuff. > > > > > > $("p").toggle(function(){ > > > > > > $(this).animate({ > > > > > height: 50 > > > > > > }, 500); > > > > > },function(){ > > > > > > $(this).animate({ > > > > > height: 250 > > > > > > }, 500); > > > > > }); > > > > > > totally untested, but this should help get you started. > > > > > You can even get the css attribute of the minheight and maxheight > > and > > > > > animate to those as variables. > > > > > This puts the control into the CSS where it should be. > > > > > > Glen > > > > > > On 6/26/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > > > Hi, > > > > > > > I'm a bit new to using javascript so please pardon my > > "newbie-ness". > > > > > > > I'm looking to toggle a div from a minimum height to a maximum > > height > > > > > > and back with a click event (e.g., 250px to 500px and back). Has > > > > > > anybody else been able to achieve this? How would I write this > > code? > > > > > > > Caveat, the larger size (500px) div should have an overflow:auto > > > > > > applied to it to allow for lengthly content. > > > > > > > My goal is to show a small ad (250px height) initially and then on > > a > > > > > > click, fade out the ad, expand the area, then fade in the content. > > > > > > Then the reverse on click again. > > > > > > > Suggestions? > > > > > > > Thanks in advance. > > > > > > > Matthew