inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 13, 2014 7:11:55 GMT -8
Okay as I figure it might be good for me to try and learn more code I'm asking for help here.
I know already its a code that's going to need a thread key. I know how I need it to work and I'm going to break it into front end back end because that's the closest I can work it out.
Front end
User inputs a url into a field under subject on new thread screen - How would I be able to do this and I'm assuming it would be a route check thing to make sure that the person is on the new thread page not replying (I believe a new thread has a slightly different url)
Insert post as normal hit post - the url would be sent to a key linked to that thread id
When user browses thread list on that board each thread would have a different background on it making an 'image grid' type layout.
Currently managing to do this by CSS but that is very clunky to do for each new thread posted
Back End
When a new thread is posted and the user is viewing the post list utilisation of an if/else statement to allow for a default image to show if none set.
Storage of urls is in a key - how do I do this and get the info back for when needed?
Currently got:
Currently managed to get a background image to write to .threadlist by jquery this will be the else part of the if/else statement.
From understanding (which is limited) would need to write a way of it referencing the key to check for a url to add in before able to write the if/else statement to accurately reflect this.
I would prefer examples to be given - I'm better at looking at code and working out from the code how it works row by row then been given a wall of text about the theory (And I would need it to be slow because I'm not a strong coder natively in anything other then html and css)
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 18, 2014 3:26:22 GMT -8
All right posting an update here as I think I've got the hang of quite a bit of it I'm just stuck on a few last things
$(document).ready(function(){
if(window.location.href.indexOf("thread/new") >= 0) {
$( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " );
$(".subject_line").append("<input type='text' name='threadbgurl' id='threadbgurl' height='30px' width='400px'> <br />");
$(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>");
}
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
});
(Edit - code update found a shorter way to do the input)
There's my code so far I've managed to do the following:
Add a new text field for the thread url to the subject line. Get a default background image to work by referencing the threadlist css. So now I could really do with someone able to sit and help me (or at least explain with examples) how to get the input in the new text area ((I'm guessing I'll need to give it a name)) to a key (That I've already got set up) and how to then get the information from the key so that if a thread has a threadlist background image it provides that or else reverts to the default option.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 18, 2014 3:55:07 GMT -8
First up, you can append complete cells instead of adding in the HTML with separate functions, like this..
$(document).ready(function(){ if(window.location.href.indexOf("thread/new") >= 0) {
$( ".subject_line" ).append( "<b>Thread Image URL:</b> <i> Please input a url to an image that should be 230px wide and 270px tall<br />" ); $(".subject_line").append($('<textarea></textarea>').attr({rows:'1', cols:'75', id:'threadlist_image'})); }
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")'); });
Note I gave the textarea an ID of threadlist_image
To retrieve the content of that textarea you can simply use $('#threadlist_image').val();
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 18, 2014 4:07:17 GMT -8
ty Todge - actually updated it to use an input field set as text - would it still be the same
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 18, 2014 8:04:59 GMT -8
Yup, just give the input an ID and grab it's value in exactly the same way.
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 18, 2014 9:29:28 GMT -8
Thank you - okay can you check I've got this right while I try and work out how to set the key, store information in it for each thread and stuff so that if the text area is longer then '0 characters' it will deal with key stuff - which is what I'm really stuck on right now @_@ how to use the keys. (Currently got it commented out until I've worked that part out)
$(document).ready(function(){ if(window.location.href.indexOf("thread/new") >= 0) { $( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " ); $(".subject_line").append("<input type='text' name='threadbgurl' id='threadlist_image' height='30px' width='400px'> <br />"); $(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>"); /*if ($('#threadlist_image').val(); > 0) { //do something } */ } $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")'); });
Okay I've sorta worked out I'll be using a foreach (or .each() ) to check each thread id against key data (that I'm still trying to work out how to set. So I hope no one minds me using this as a bit of a notepad even if I'm not sure on how to write it in code. I know that I'll likely be using an each key, and I -think- it'd be something like
(#thread.id).each() { if (data stored on key for that thread id) { $(".threadlist").css('background-image', 'url("url from key here")'); } else{ $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")'); } }
Not sure how accurate that code is mind but that's the closest I can muddle out and make sense (and I'm open to people explaining it better).
Could anyone who's used keys help me grasp how to do the key related stuff please?
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 19, 2014 21:52:44 GMT -8
Okay I'm back again, I've hunted all over because I did find a useful thread which I now can't find (Sadface because it made some sense to me!) that gave me an example of how to do some things with plugin keys including the syntax but okay I'm going to write out exactly what I need help with, what I know I need to do but can't work out 'how' if that makes sense. Nm I found it now.
<script> pb.plugin.key('example_thread_key').set_on('thread_new', 'Hello world'); </script>
So that I know I'd need to change the 'example_thread_key' to the name of the key, and I believe it would need to be setting data at that point, however the data I'd want to be set would come from storing whatever was input into #threadlist_image input area.
I'd also want each new thread to append the data to it.
Then during the each statement (that I'm not sure if it would work right as I don't know how I can tell it to look through each thread-id without knowing if I can use a wildcard to check each class in the format of thread-* for example) I'd want it to be checking through the data stored on the key and putting it in place of where in the above mocked up code in my last post it just says url from key here
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 20, 2014 12:46:57 GMT -8
OK, let's go through what you have so far.. Everything will work up until this part..
$('#threadlist_image').val(); > 0
to get/check the length of the input value you need to tell it which one and specify that you want to check it's length..
$('#threadlist_image').val().get(0).length > 0
The each() function will expect to execute a function of it's own, so..
(#thread.id).each() { if (data stored on key for that thread id) { $(".threadlist").css('background-image', 'url("url from key here")'); } else{ $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")'); } }
will also fail, instead, simply wrap the code in the each() function within a function..
$('#thread.id').each(){function(){ if (data stored on key for that thread id) { $(".threadlist").css('background-image', 'url("url from key here")'); } else{ $(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")'); } }); }
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 20, 2014 21:14:13 GMT -8
Thanks for that todge - Would you be able to tell me if that's the correct way of telling it to check each thread id btw? As I was just stealing things from the proboards templating system to try and illustrate in a way that I was more familiar with
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 21, 2014 3:47:06 GMT -8
There are a couple of ways of getting the thread ID number, the old fashioned way, by looking at the current page's address, for example, the URL of this page is:- support.proboards.com/thread/508056/developing-custom-thread-cell-codewith the ID number highlighted in red.. Or you can grab it with.. var threadID = proboards.data('route').params.thread_id; As for searching through the key for the correct information, that is not necessary, each thread has it's own thread-key, so all you have to do is grab the info from the correct key.. var keyData = pb.plugin.key('example_thread_key').get(threadID);
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 21, 2014 6:29:15 GMT -8
Ooh thanks for that todge - pretty much I'm using the thread id so it can find it on the thread list and link it in (I think I'd be able to use a thread key for that wouldn't I?)
Would you be able to explain how to store the data into the thread key that's been input front end by the user?
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 21, 2014 7:15:49 GMT -8
Yup, a thread key is ideal for what you are wanting to do.
To store the data use exactly what you posted above..
pb.plugin.key('example_thread_key').set_on('thread_new', 'Hello world'); Except you'd obviously not want to write 'Hello World' to the key, so simply replace that with with the value of your input.
You can do that directly with..
pb.plugin.key('example_thread_key').set_on('thread_new', $('#threadlist_image').val());
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 21, 2014 8:02:24 GMT -8
Thank you ^_^
Then to recall the appropriate image would I need to use the each loop or just an if statement?
Edit to add the code so far:
$(document).ready(function(){
if(window.location.href.indexOf("thread/new") >= 0) {
$( ".subject_line" ).append( "<br /><b>Thread Image URL:</b> " );
$(".subject_line").append("<input type='text' name='threadbgurl' id='threadlist_image' height='30px' width='400px'> <br />");
$(".subject_line").append("<i> Please input a url to an image that should be 230px wide and 270px tall</i>");
if ($('#threadlist_image').val().get(0).length > 0) {
//do something
pb.plugin.key('threadbg_FS').set_on('thread_new', $('#threadlist_image').val());
}
}
var threadID = proboards.data('route').params.thread_id;
$('+ threadID + ').each(){function(){
var keyData = pb.plugin.key('threadbg_FS').get(threadID);
if ( ' + keyData + ') {
// $(".threadlist").css('background-image', 'url("url from key here")');
// }
// else{
$(".threadlist").css('background-image', 'url("http://storage.proboards.com/5781167/i/JCOdM8BfXCwxDeNqTYtV.png")');
}
});
}
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,312
January 2004
todge
|
Post by Todge on Apr 22, 2014 15:07:23 GMT -8
You should wrap the last part in an if statement to ensure it only runs on the thread listing page..
if(proboards.data('route).name == 'board') {
}
Then grab each <tr> cell with an id of 'thread-##', and run your code using the each() function.
$('tr[id*="thread-"]').each(function(){
code here..
});
As this part will be running on the thread listing page, you cannot grab the thread ID in the way mentioned earlier, as you're not in any specific thread, but the thread numbers are part of the cell IDs you are targeting... You can then get the thread ID from the <tr> cell's ID with this..
var threadID = $(this).attr('id').split('thread-')[1];
|
|
inherit
Peabrained Codebreaker
107114
0
Mar 11, 2020 7:47:27 GMT -8
Boy_Wonder
6,249
July 2007
natzy24
|
Post by Boy_Wonder on Apr 22, 2014 21:10:03 GMT -8
Thank you
Editing: As I keep the thread ids in a div would the tr be changed to div?
|
|