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