Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-02-08 11:31:12
- azw
- Member
- Registered: 2007-01-29
- Posts: 279
How to hide previous/next or older/newer links when not needed?
I have a line (created by an image) and the next/previous or newer/older text links. That should appear only if there is a need for pagination. I’ve not figured out how to hide it if there is no content in the < p > tags. I don’t want the image to display, either.
I am using chh_if_data to keep the individual older, newer, etc. from displaying, because even if the first element has no content it comes with spaces that throw off the spacing.
One way to do it is to use the chh_if_data for the entire thing:
<txp:chh_if_data>
<div class="divider pagination"><img src="<txp:site_url />imagenes/1.gif" width="350" height="1" alt="---" title="" /></div>
<p class="pagination">
<txp:link_to_prev><< <txp:prev_title /></txp:link_to_prev>
<txp:link_to_next><txp:next_title /> >></txp:link_to_next>
</p>
</txp:chh_if_data>Using CSS to add padding to the right side of the first link moves the second one over to the right even if there’s nothing in the left one.
Any other ideas?
For reference, here’s what the HTML looks like when there’s no need for the links:
<div><img src="/images/1.gif" width="350" height="1" /></div>
<p>
</p>Here’s what my current page template code looks like:
<txp:if_individual_article>
<p class="pagination"><txp:chh_if_data>
<txp:link_to_prev><< <txp:prev_title /></txp:link_to_prev>
</txp:chh_if_data>
<txp:chh_if_data>
<txp:link_to_next><txp:next_title /> >></txp:link_to_next>
</txp:chh_if_data></p>
<txp:else />
<p class="pagination"><txp:chh_if_data>
<txp:older><txp:text item="older" /></txp:older>
</txp:chh_if_data>
<txp:chh_if_data>
<txp:newer><txp:text item="newer" /></txp:newer>
</txp:chh_if_data></p>
</txp:if_individual_article>Last edited by azw (2008-02-08 18:41:08)
Offline
Re: How to hide previous/next or older/newer links when not needed?
Both sets of pagination links can have the attribute showalways="0". Would that help? Save using a plug-in.
Last edited by thebombsite (2008-02-08 20:34:17)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#3 2008-02-08 21:13:09
- azw
- Member
- Registered: 2007-01-29
- Posts: 279
Re: How to hide previous/next or older/newer links when not needed?
Hey, Stuart! Thanks for giving this a whirl.
I knew there was a showalways=“1”, but hadn’t given any thought to the opposite value. Actually, I think showalways=“0” is the default, so if you don’t include the attribute, you’ve got it anyway.
The problem is that there are other things (spaces, >> arrows) in the block for spacing that show up even if the pagination tages are empty.
I think I’ve figured out a way to deal with it with CSS floats. I’ll post that if I get it working.
Offline
Re: How to hide previous/next or older/newer links when not needed?
Yeah I usually use floats for these things but as I understand it using showalways="0" should remove anything inside the wrapper if there is no data so maybe having your <p> tags inside the wrapper as well, then applying your CSS to those tags would do the trick? I can’t remember if it strips the tags as well or leaves them alone.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#5 2008-02-09 11:00:42
- azw
- Member
- Registered: 2007-01-29
- Posts: 279
Re: How to hide previous/next or older/newer links when not needed?
Okay, here’s what I’m using now. It’s working.
<txp:if_individual_article>
<txp:chh_if_data>
<div class="divider pagination"><img src="/images/1.gif" width="350" height="1" alt="---" title="" /></div>
<ul class="pagination">
<li class="pagination_link_left"><txp:link_to_prev><< <txp:prev_title /></txp:link_to_prev></li>
<li class="pagination_link_right"><txp:link_to_next><txp:next_title /> >></txp:link_to_next></li>
</ul>
</txp:chh_if_data>
<txp:else />
<txp:chh_if_data>
<div class="divider pagination"><img src="/images/1.gif" width="350" height="1" alt="---" title="" /></div>
<ul class="pagination">
<li class="pagination_link_left"><txp:older><txp:text item="older" /></txp:older></li>
<li class="pagination_link_right"><txp:newer><txp:text item="newer" /></txp:newer></li>
</ul>
</txp:chh_if_data>
</txp:if_individual_article>And here’s most of the CSS. (There are certainly less specific definitions higher up on the page that have an effect on this more specific code.)
/* pagination */
.divider.pagination { /* horizontal bar just above pagination navigation text */
margin-bottom: .8em;
}
ul.pagination { /*float the pagination text links left and right */
margin: 0 0 1.6em;
padding: 0 2em 0 10px;
list-style-type: none;
}
ul.pagination li.pagination_link_left {
float: left;
}
ul.pagination li.pagination_link_right {
float: right;
}
ul.pagination li.pagination_link_left a,
ul.pagination li.pagination_link_right a {
line-height: 1em;
border-bottom: 0;
text-decoration: none;
}
ul.pagination li.pagination_link_left a {
text-align: left;
}
ul.pagination li.pagination_link_right a {
text-align: right;
}Offline