Timestamps + Prev/Next

[leo10]

Hey, guys! 

So, I'm here because of my previous topic: support.proboards.com/thread/544946/prev-next-pagination-minor?page=1&scrollTo=6260236

I would basically like to do 2 things:

1-Remove the hour from the timestamps (have only "3 Mar 2015");


2- Change the text on the "Prev/Next" action bar to some arrow icons or some other text.

I've searched and the only topic I found was this one but it didn't have an answer... support.proboards.com/thread/440794/change-timestamp

Any help if appreciated! Thank you!
leo

[Chris]

Since the code in this thread adds classes to identify parts of dates

Oct 11, 2013 22:19:31 GMT -8 Chris said:

By the way (for those interested) in addition to the "time" and "recent_time" classes added by Proboards this code also adds new classes for flexible targeted styling:

"modified_time"
"today"
"yesterday"

as well as classes to target sub-components of the date

"at-time"
"at"
"year"
"month"
"day"

with the code installed you could theoretically apply CSS to hide the parts you do not want:


/* Hide time component of dynamically updated dates */
.modified_time .at-time, .modified_time .at {
display: none;
}


As for changing the button captions for the pagination this is deceptively difficult since the pagination widget hardcodes that sort of thing then tests for the text when deciding what was clicked. This should work but the image click still propagates causing a double event with the second having a nonsensical text() value (thus evaluating to 1). I'll probably be offline for a few days so if someone else hasn't solved it then I'll take another look.

Update: setting the image as background neatly sidesteps the event propagation problem, so drop this version of the code in your global footer and see how it performs for you


<script type="text/javascript">
$(function () {
/* Change pagination prev/next button caption into images */
var img_previous = 'http://images.proboards.com/v5/icons/bookmark.png';  //set the image to use for "prev"
var img_next = 'http://images.proboards.com/v5/icon-options.png';  //set the image to use for "next"
$(':data(pagination)').each(function (i, e) {
var $E = $(e);
var oW = $E.data('pagination');
oW.prevPage.find('a').html('<span style="display:none">« Prev</span>').css({background:'url(' + img_previous + ') no-repeat center',display:'block', height:oW.prevPage.height(), width:oW.prevPage.width()});
oW.nextPage.find('a').html('<span style="display:none">Next »</span>').css({background:'url(' + img_next + ') no-repeat center',display:'block', height:oW.nextPage.height(), width:oW.nextPage.width()});
$E.pagination('refresh', {
page : oW.page
})
})
})
</script>


Update2: Just noticed that changing the text was also given as an option so here's a code for changing to text (not image)

<script type="text/javascript">
$(function () {
/* Change pagination prev/next button caption text */
var text_previous = 'Past';  //set the text to use for "prev"
var text_next = 'Future';  //set the text to use for "next"
$(':data(pagination)').each(function (i, e) {
var $E = $(e);
var oW = $E.data('pagination');
oW.prevPage.find('a').html('<span style="display:none">« Prev</span>'+text_previous);
oW.nextPage.find('a').html('<span style="display:none">Next »</span>'+text_next);
$E.pagination('refresh', {
page : oW.page
})
})
})
</script>


old code:

SPOILER: Click to show


<script type="text/x-javascript">
$(function () {
/* Change pagination prev/next button caption into images */
$(':data(pagination)').each(function (i, e) {
var $E = $(e);
var oW = $E.data('pagination');
oW.prevPage.find('a').html('<span style="display:none">« Prev</span><img src="http://images.proboards.com/v5/icons/bookmark.png" alt="go to previous page" onclick="return this.parentNode.click()=== NaN;">');
oW.nextPage.find('a').html('<span style="display:none">Next »</span><img src="http://images.proboards.com/v5/icon-options.png" alt="go to next page" onclick="return this.parentNode.click()=== NaN;">');
$E.pagination('refresh', {
page : oW.page
})
})
});
</script>


[leo10]

Apr 19, 2015 9:27:04 GMT -8 Chris said:

Since the code in this thread adds classes to identify parts of dates

Oct 11, 2013 22:19:31 GMT -8 Chris said:

By the way (for those interested) in addition to the "time" and "recent_time" classes added by Proboards this code also adds new classes for flexible targeted styling:

"modified_time"
"today"
"yesterday"

as well as classes to target sub-components of the date

"at-time"
"at"
"year"
"month"
"day"

with the code installed you could theoretically apply CSS to hide the parts you do not want:


/* Hide time component of dynamically updated dates */
.modified_time .at-time, .modified_time .at {
display: none;
}

Hey! So, I put that CSS code and it didn't work... did I do something wrong? Do I have to add more than just the code inside the quote? 

[Tumbleweed]

leo10

Did you add the javascript code like Eton mentioned in his first sentence?