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
