jquery help

colak · 2009-04-23 09:51:12

I found this little toggle jquery script but it only does 50% of what I am looking for.

This is what I wish to achieve.

on comments_preview I would like the comment form to be hidden (div id="commentsform")

On clicking a link in the comments_preview div I’d like to hide #previewyoucomment and show #commentsform

At the moment I am just using <a href="#" id="slick-hide">Hide the box</a> which hides the #previewyoucomment

<txp:if_comments_preview>
<script type="text/javascript">
<!--
$(document).ready(function() {
  $('#previewyoucomment').show();
  $('a#slick-show').click(function() {
 $('#previewyoucomment').show('slow');
 return false;
  });
  $('a#slick-hide').click(function() {
 $('#previewyoucomment').hide('fast');
 return false;
  });
  $('a#slick-toggle').click(function() {
 $('#previewyoucomment').toggle(400);
 return false;
  });
});
//-->
</script>
<txp:if_comments_preview>

els · 2009-04-23 14:23:46

colak wrote:

on comments_preview I would like the comment form to be hidden (div id="commentsform")

Would this work (using the preview button)? (You’ll probably need to remove the if_comments_preview tags…)

$('button#txpCommentPreview').click(function() {
 $('#commentsform').hide('fast');
 return false;
 });

On clicking a link in the comments_preview div I’d like to hide #previewyoucomment and show #commentsform

At the moment I am just using <a href="#" id="slick-hide">Hide the box</a> which hides the #previewyoucomment

I’m not sure if you can do this:

$('a#slick-hide').click(function() {
 $('#previewyoucomment').hide('fast');
 $('#commentsform').show('fast');
 return false;
  });

Last edited by els (2009-04-23 14:25:59)

colak · 2009-04-23 14:46:47

Els wrote:

I’m not sure if you can do this:

$('a#slick-hide').click(function() {
 $('#previewyoucomment').hide('fast');
 $('#commentsform').show('fast');
 return false;
  });

:( It was the first thing I thought of too. No… it did not work.

Els wrote:

$('button#txpCommentPreview').click(function() {
 $('#commentsform').hide('fast');
 return false;
 });

Wouldn’t this hide the preview on clicking the preview button?

maniqui · 2009-04-23 15:15:14

hi Yiannis,
do you have a link to share?

Also, previewyoucomment, is that right? isn’t previewyourcomment? (can’t remember if this is a fixed TXP string or something you wrote for your code)

els · 2009-04-23 15:28:57

colak wrote:

:( It was the first thing I thought of too. No… it did not work.

Oh, that’s a pity.

Wouldn’t this hide the preview on clicking the preview button?

No, it would hide only the #commentsform (unless your preview is inside a div#commentsform…).

els · 2009-04-23 15:31:09

I suppose you also tried this:

$('a#slick-hide').click(function() {
 $('#previewyoucomment').hide('fast');
 return false;
  });
 $('a#slick-hide').click(function() {
 $('#commentsform').show('fast');
 return false;
  });

Not that I’m good at jQuery, usually I just keep trying things until something works… ;)

rsilletti · 2009-04-23 15:37:59

I’m using a script on Quasai to accomplish something like what you describe with the nav header with a script that goes as follows.

$(document).ready(function() {
$("#contain-top").hide();
  $("#reveal-nav").toggle(function(){
     $("#contain-top").slideDown('slow');
     $("#masthead").slideUp('slow');
   },function(){
     $("#contain-top").slideUp('slow');
     $("#masthead").slideDown('slow');
   });
);

colak · 2009-04-23 17:21:43

Rick, that may work. I am helping a friend with a small site and I thought that since I am doing it I might as well learn from something new so I dived in JQuery for the first time and I feel ~~slightly~~ lost in a big way.

renobird · 2009-04-23 18:50:05

Colak,

I’m not 100% sure I understand – Are you trying to have a single “trigger” that will change the display of 2 items?

If so – this might work:

$(document).ready(function() {
$('#previewyoucomment').show();
$('#commentsform').hide();
$('a#slick-show').click(function() {
$('#previewyoucomment').toggle();
$('#commentsform').toggle();
return false;
});
});

That will show #commentsform – and hide #previewyoucomment
when you click an anchor with the “slick-show” class.

Although if you click the link again – it will toggle the displays back.

—
Tom

Last edited by renobird (2009-04-23 18:53:33)

colak · 2009-04-24 05:56:58

Tom, thanks sooo much… that does exactly what I need.!!!

renobird · 2009-04-24 13:33:59

Colak,

I would recommend do the original hiding via CSS

#commentsform {
display: none;
}

That way it won’t flash on the page if jQuery is slow to load.
The toggle should still work the same.

Now you can make it look fancy and change toggle to slideToggle

:)

—
Tom

colak · 2009-04-24 14:04:28

Hi tom,
That means having a css attribute wrapped with <txp:if_comments_preview> as the js hides the comments form when someone is previewing comments. is that a good idea?

Now you can make it look fancy and change toggle to slideToggle

Cool:)

Textpattern CMS

Textpattern CMS support forum

#1 2009-04-23 09:51:12

jquery help

#2 2009-04-23 14:23:46

Re: jquery help

#3 2009-04-23 14:46:47

Re: jquery help

#4 2009-04-23 15:15:14

Re: jquery help

#5 2009-04-23 15:28:57

Re: jquery help

#6 2009-04-23 15:31:09

Re: jquery help

#7 2009-04-23 15:37:59

Re: jquery help

#8 2009-04-23 17:21:43

Re: jquery help

#9 2009-04-23 18:50:05

Re: jquery help

#10 2009-04-24 05:56:58

Re: jquery help

#11 2009-04-24 13:33:59

Re: jquery help

#12 2009-04-24 14:04:28

Re: jquery help

Board footer