Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
jquery help
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>
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#2 2009-04-23 14:23:46
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: jquery help
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)
Offline
Re: jquery help
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?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: jquery help
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)
Offline
#5 2009-04-23 15:28:57
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: jquery help
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…).
Offline
#6 2009-04-23 15:31:09
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: jquery help
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… ;)
Offline
#7 2009-04-23 15:37:59
- rsilletti
- Moderator
- From: Spokane WA
- Registered: 2004-04-28
- Posts: 707
Re: jquery help
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');
});
);
Offline
Re: jquery help
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.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: jquery help
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)
Offline
Re: jquery help
Tom, thanks sooo much… that does exactly what I need.!!!
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: jquery help
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
Offline
Re: jquery help
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:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline