PDA

View Full Version : Turn simple javascript code to a button



JRR
02-21-2015, 03:07 AM
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>



When I insert this in any area of my template it puts "Add Image to Post" and when clicked brings up the proper popup window to the image host and works just fine. You can see it here at the bottom of the page in the Quick Reply section:

http://scootproftest.freeforums.net/thread/1/welcome-new-forum




But I had rather have a clickable button that simply says "INSERT IMAGE" instead of that. I've tried several times with the <button on click> coding with now luck. I'm sure this is a easy one for some here.

Thanks

jscheuer1
02-21-2015, 05:20 AM
You could probably use javascript/jQuery (I see the page already has jQuery on it) to conceal the link(s) and create a button (for each, if more than one on a page) which will activate the (its) link when clicked. But - I don't see the link on the welcome-new-forum page you linked to in your post. Perhaps because I'm not registered? Or maybe because you don't have that script on that page.

Alternatively, the (http://mod.postimage.org/website-english-family.js) script can probably be edited/rewritten to create a button instead of a link. But, as it appears to be a third party script, you would then have to host the modified version, and at that point it may or might not perform the desired server side functions which allow for image uploading.

Another possibility is css might be employed to make the link appear to be and act like a button.

In any case, if you want more help, show me a page where I can see the:

'Add image to post'

link(s). If I need an account to see it, please provide a guest account for me to use in order to see the 'Add image to post' link.

And (this is not required) - please get rid of the smoking monkey, it's gross. ;)

JRR
02-21-2015, 12:54 PM
Ok John I set you up an account on another test forum that isn't so full of test things and will be easier to work with, I sent you a email with your username and password and you will be getting a activation key code from PB, once you complete your registration I will get a notice and then I can set you up as a admin where you can work your way around. This is a page where you can see the "Add Image to Post" at the bottom of the page right above Post Quick Reply once you finish your registration and login:

http://theridetest.freeforums.net/thread/2/test

Here is the code where I stuck this in the Quick Reply template:



<div class="container quick-reply">
<div class="title-bar">
<ul class="controls"><li>$[reply_button]</li></ul>
<h2>Quick Reply</h2>
</div>
<div class="content cap-bottom">
$[form.header]
{if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
$[form.footer]
</div>
</div>


I knew this wouldn't work as a button as it is and I did try a few things but when clicked on in the thread it does bring up the image host and the inserting a image to the thread works like a charm, just wanting to make it into a button looking just like the Post Quick Reply button. When I surround it with a simple button tag code the button does appear perfectly but of course when clicked it won't link to the image host.


Here is the link to this image site where one creates the website link:

http://postimage.org/mod.php

It works just fine as it is but I would like to make a button for the link just like the ones I have on my forum.

I want to put this in another area of the templates too and I figured if I got this to work here it wouldn't be a issue in other places. I do understand the outside hosting of the js you mentioned, I used to use your image slider on a forum and had to host they js.crawler on my godaddy FTP file host so if this is a option and we can just create a button that will link back to a file that this can be put in too, that's cool too or even a css file to link back to or header code?


Edit Just for the heck of it John I went back and added this code with button tags to show you it will make the button I want but of course it won't link to where I need to go, you'll see the button called Image Right by the Post Quick Reply button and I did it like this and just put it right under the other line of javascript code:


<button type="button"><script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>Image</button>

BTW I know you'll miss the smoking monkey there!

jscheuer1
02-21-2015, 06:03 PM
Having trouble logging on even though I went to the registration link and was told I had successfully completed registering. But, no matter, I can see the code I think I need to see to help you. Something I'm not clear on yet, that will probably make a difference is - How many of these buttons does there have to be on a page? If it's like most forums I've ever seen, you can only reply to one thread at a time and only one thread is seen on a page when you are replying to it. If this is the case (looks like it is), then you only want/need one of these image buttons on a page where it's used. So you can just do this:


<button onclick="postimage_upload(0);">Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>

The only problem is that the script will also make and insert the standard text link that you don't want to see. But you can make that disappear using css. Put his in the head of the page:


<style type="text/css">
a[href="javascript:postimage_upload(0);"]{
display: none;
}
</style>

Or add its rule to an existing stylesheet for the page.

JRR
02-21-2015, 08:06 PM
Ok John so far so good but got a couple of glitches, first of all I see you posted as a guest so that means you can see the images I made and posted:

http://theridetest.freeforums.net/thread/2/test?page=1&scrollTo=15

Notice the black dot over the buttons? Don't know where this is from? If we can't get it out ok but it is putting a space in there and here is the code with the button line in it and I put the other style sheet code in the global header, I could put it in the CSS style sheet but one cannot have style tags on it to do so?


Here is your code inserted:


<div class="container quick-reply">
<div class="title-bar">
<ul class="controls"><li>$[reply_button]</li></ul>
<h2>Quick Reply</h2>
</div>
<div class="content cap-bottom">
$[form.header]
{if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="message">
$[form.message.input]
</div>
$[captcha]
$[form.post.button]
<button onclick="postimage_upload(0);">Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
$[form.footer]
</div>
</div>



Now here is the problem, lets say I want to post some lines and then insert a image? When I type the lines if I hit the Image button to do just that insert a image the button works just like I hit the Post Quick Reply button and the text posts to the thread. But I can hit the image button first and grab my image and it'll insert the image code and I can then type my text and hit Post Quick Reply and all works well. Also if you hit the image button first a pop up comes up saying "You Must First Type a Message" You can just ignore this and once the image code is inserted that goes away?

One should be able to type their text and then insert a image at any time. BTW I don't know if this makes a difference but my browser is IE11

jscheuer1
02-21-2015, 09:48 PM
I'll think about the other issue later. But for the black dot and added space issue try adding these rules to the stylesheet (hopefully they will not cause any problems, they should get rid of the dot and line break):


div.message div span, div.message div br {
display: none;
}

jscheuer1
02-21-2015, 09:54 PM
As for the second problem - which if I understand it is that the order in which you insert text and image influences how things happen. I think this is like on Facebook where, in some cases, if you put a sticky it takes over and your message is skipped so you must post it separately.

There might not be anything we can do about it. We need a test. Get rid of the button code, go back to using the text link as generated by the script and only that. See if the behavior improves. If so, we can maybe work around it. If not - well then that's just how this script works, we would have to edit the script to fix it and we don't have access to that. You could submit a bug report.

So do the test and let me know.

JRR
02-21-2015, 11:21 PM
Sorry it took so long to get back John, did exactly what you asked and all is working like it should, had to remove the one style code that I put in the header but I, left the last code you gave me to remove the dot.

Ok after several tests it's for sure the button part of this code is what's causing the trouble or at least it's not working with the other part of the template?


<button onclick="postimage_upload(0);">Image</button>

As I said I can put just the javascript part of the code in and the uploader along with the text posting of the forum work great. I tried several other button type combinations but did no good.

jscheuer1
02-22-2015, 03:42 PM
Right, I was looking at it. What happens is, since it's a form, it thinks we are submitting the form. The default behavior of a button on a form is sometimes to submit it. We can return false after we call the upload function from the button, that will prevent the form from submitting as long as there isn't any other javascript governing this. It doesn't look like there is, which means it's worth a try.

We can go back to using these styles:


<style type="text/css">
a[href="javascript:postimage_upload(0);"]{
display: none;
}
div.message div span, div.message div br {
display: none;
}
</style>

and the button and the script. Just see/use the addition (red) to the button code:


<button onclick="postimage_upload(0); return false;">Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>

JRR
02-22-2015, 07:53 PM
Man they must be having some issues here? Maintenance mode a lot. Ok on the test forum it's working like a charm! I've installed it on 3 of my other forums and it's working but I have a issue on all 3 that is the same and I'm not sure it's a issue but it is annoying and I for whatever reason on one of the forums the "Add Image to Post" link is still showing along with the Image Button? I've triple checked the style sheet code we used and it's identical? Here is that forum and John to my knowledge I have all 3 of these forums pretty much the same as far as codes?

http://scooterdoc.proboards.com/

On these two forums plus the test forum you and I have been working on only the Image button is showing and it works:

http://itistheride.boards.net/

http://thescooterprofessor.proboards.com/

Now on all 3 forums EXCEPT the test forum when I hit Upload the image I get this to come up on the screen and it's a Ajax message:


http://www.jr-richscooterdoc.com/perspics/Untitled1.png

But this does not come up at all on the test forum? You can click on leave the page and it will still insert the image URL and work fine.

Edit: It's for sure this part of the style code is not removing the Add Image to Post for sure, doesn't make sense, works right on 3 other forums. Also I just discovered that you cannot insert the image with the button but you can with the Add Image to Post link. Aaaaargh!




<style type="text/css">
a[href="javascript:postimage_upload(0);"]{
display: none;
}


Getting closer

JRR
02-23-2015, 12:06 AM
OK latest update John, I solved the problem on the one forum where the "Add image to post" link was still coming up even though we hid it with the style sheet code, that was a plugin on the forum that I really don't need causing the issue. I did go to the author of the plugin to see if it could be fixed to work with this mod.

But I'm at a loss on the ajax pop up, I turned all plugins off and it still come up, tried this and that, still can't solve it? I've been reading a lot on the ajax pending thing, is it possible it's a thing with the timing with the image uploader not finishing the upload process before it posts the URL in the forum post?

Maybe along these lines?

http://www.ask-coder.com/255372/jquery-ajaxerror-handler-fires-if-user-leaves-page-before-page-finishes-loading

jscheuer1
02-23-2015, 05:54 PM
If that's the cause, it would (well should at least) happen without our changes to the mod.postimage.org image script.

jQuery does have built in error handling for AJAX, but it's off by default. And I don't think that would pop up something like that. What you have looks like part of the browser. Try other browsers and see if they give the same or similar popup.

For me to diagnose this issue, I would have to see a page where it's happening. Which if any of your forums that I have access to as a member does this happen on? If none, please give me a guest account on one of them.

JRR
02-23-2015, 06:25 PM
I have the settings here where you can register as a guest or member and it happens here, go to any thread and give it a try.

http://thescooterprofessor.proboards.com/

I considered the browser thing, I use Windows 8.1 and IE11, I'll download FF and see about it, I refuse to put chrome on my computer because of the silly ad ons and crap.

JRR
02-23-2015, 06:40 PM
Update John, tried it on Firefox with no issues at all, very clear, quick and no issues, this is a IE problem.

jscheuer1
02-24-2015, 01:45 AM
Yeah, well I see it in IE. Not a disaster, but not pretty at all. The obvious question or test if you haven't tried it already is - does this happen in IE without our modifications to the mod.postimage.org image script?

JRR
02-24-2015, 01:48 AM
Modifications as in the
return false: part we added? Or hiding the link with the sytle sheet code?

JRR
02-24-2015, 02:16 AM
Ok John I'll break it down so you can know exactly what is going on.

The last button code we used was this :


<button onclick="postimage_upload(0); return false;">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>


We have a style sheet code that hides the image host link and the black dot.


<style type="text/css">
a[href="javascript:postimage_upload(0);"]{
display: none;
}
div.message div span, div.message div br {
display: none;
}
</style>


With this set up we can add text to the post, then a image or vise versa and when we hit the Post Reply button we are getting the ajax message with IE11 but not on Firefox at all. I waiting on a friend to try it with Chrome because I will not put Chrome on my computer. But even with the ajax message with using IE I can hit the "leave this page" on the message and the post works just fine.


Now here is the other tests I ran, I removed the style sheet code which made the link show back up and when I used the Insert Image button I had the exact same ajax message as before with the link hidden.

Next I put the style sheet code back in and removed the small part you added to the button code and used you very first button code:


<button onclick="postimage_upload(0);">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>


With this code I got no ajax message but we are back to the problem we had before if you add text then hit the Insert Image button the text will post just like if you hit the post button?

jscheuer1
02-24-2015, 02:28 AM
Try changing:


<button onclick="postimage_upload(0); return false;">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>

to:


<button id="messageimagebutton">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
$('#messageimagebutton').click(function(e){
postimage_upload(0);
e.stopPropagation();
e.preventDefault();
});
</script>

If that's still no good, try:


<button id="messageimagebutton">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
$('#messageimagebutton').click(function(e){
postimage_upload(0);
e.preventDefault();
e.stopPropagation();
});
</script>

If that's no help, try:


<button id="messageimagebutton">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
$('#messageimagebutton').click(function(e){
postimage_upload(0);
e.stopPropagation();
});
</script>

Then finally (if that's no good):


<button id="messageimagebutton">Insert Image</button>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
$('#messageimagebutton').click(function(e){
postimage_upload(0);
e.preventDefault();
});
</script>

Make sure to clear the cache and refresh the page before each test.

JRR
02-24-2015, 03:48 AM
Ok John followed your instructions to the letter, Code number 1 and 4 are no better at all, instant ajax message, code number 3 does the same as the code that makes the text post as soon as you click on the Insert Image button, it's totally useless.


At first I thought code number 2 was a winner because I posted about 4 images with no problems at all? But after four image uploads it started bringing up the ajax message. But it was better than the other 3 codes for sure. Also no issues with this code in Firefox.

I just confirmed this is causing a error message with a user that is using Vista and IE9 Would it be possible to make a working button using <a class="button"> tags?

I know Proboards uses the
<a class="button"> to create buttons like the quote and edit so it doesn't accidentally submit the quick reply form.

JRR
02-24-2015, 02:36 PM
Ok John another update, been playing around with everything I can find, read about and get help with, trying so much to learn and understand this stuff, I'm beginning to think IE is a monster but having it work correctly isn't just for me, I have a lot of members who use older and newer versions of IE and it's got to be fixed for all of them, again no issues in Firefox and I'll get a answer about Chrome today but I'm betting no issues at all.

But I did discover this and it's how to make the original simple button code to work without any issues other than the ajax issue, the code:


<a href="javascript:void(0);" onclick="postimage_upload(0);" class="button">Insert Image</a>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>


As I mentioned earlier a friend mentioned to me from PB that they use this kind of button to keep things in other areas from say mixing with the Quick Reply area and vise versa so by using the <a> onclick version I was able to remove the return false; out of the code and when you click this button now you do not have the problem we encountered before which is why you added it in the first place.

I went back and tried everyone of the four codes you posting with the different button and no change.


I don't know at all if this makes any difference in your thinking just trying to find a way to get this to work and throwing ideas out, no one can tell me why the ajax thing is happening.

JRR
02-24-2015, 04:55 PM
Update John:

This code works on 3 different forums flawlessly on Firefox, Chrome and Safari, I still have the style sheet codes in place for it also:


<a href="javascript:void(0);" onclick="postimage_upload(0);" class="button">Insert Image</a>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>


The "only" flaw in IE is the ajax message and I know it's applicable to IE 9 to IE11.

jscheuer1
02-24-2015, 06:25 PM
If using a link causes the AJAX message problem in IE, I would think the same thing would happen if you used the postimage script without any modification. Have you tested that? If not, please do.

In any case, this AJAX message problem doesn't happen in IE on the test forum (according to you if I understood what you said before, please verify), nor on the test form I have. If so, it's a conflict with something on the forums where it does occur.

JRR
02-24-2015, 06:47 PM
Ok John I just put the last code in the test forum that you have posted on and no ajax message at all to this point. Question? I think you mentioned something about another javascript code on the same page could cause issues? I do have one on the same page with this code on the forums, but not the test forum?

EDIT: Went and removed the other javascript code and had no change. Also in response to your question, yes if you use the link only on my 3 main forums you still get the AJAX message.

Any thoughts of possible things that could cause this?

jscheuer1
02-25-2015, 03:15 PM
FYI, on a page like:

http://thescooterprofessor.proboards.com/thread/3813/todays-ride

There are at least 25 scripts and that's (I think) not counting those on pages in iframes on the page. Some of these scripts are obviously put there by other scripts and/or by the board software. Chrome (and I would assume FF) see no errors though, so that's probably why there's no problem there. IE however sees 4 errors:


SCRIPT5: Access is denied.
File: storageframe.html, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: tb2, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: engine, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: 20838, Line: 1, Column: 1


Now none of that by itself is the problem, but it does appear to be setting up the problem, and may be the only part of the problem you have direct control over.

The real problem that I can see is that for some reason, once you upload the image in the popup window, instead of simply gracefully closing, it first loads a response url from the forum into that window. That response url (for example, the one I mention in this post) is the page that you are responding to a message on plus a query string (?postimage_id=0). If there are no errors on that page, the window closes and there is no problem. If there are errors, it can confuse the browser and make it think something hasn't finished. Or maybe the errors are irrelevant and IE is just pickier about other error free scripts that haven't finished loading at the point the window is told to close.

The one real clue we have as to what is the problem is the fact that it appears to involve an AJAX request.

Are there any scripts or anything that could involve any of those files mentioned that are part of something on the scooter forum that you don't have/use on the test forum?


Just for clarity's sake, like if you're in IE and you click to stay on the page. you see in the popup a page. If you were posting to:

http://thescooterprofessor.proboards.com/thread/3813/todays-ride

There will be this page in the popup:

http://thescooterprofessor.proboards.com/thread/3813/todays-ride?postimage_id=0

You can then close it manually with no problem, so presumably the AJAX process has by that point finished.

I'm not sure why that page had to get loaded in there, but it does in other browsers as well, so it's part of the postimage service.

Unless they stop doing that (putting a page like that in the popup before closing it - which might be very hard without completely rewriting their code). Then all we can do to fix it is make that page fast loading and error free. Or at least have that page not involve any AJAX requests that start without user initiation.

jscheuer1
02-25-2015, 03:44 PM
Please read my previous post it still has merit. I wanted to add that I was able to get the error in IE on the test forum:

http://scootproftest.freeforums.net/thread/1/welcome-new-forum

It didn't happen all the time - probably because the page loads faster in general, but it did happen.

So instead of being something you've added to the other forums, it's more likely some problem with the forum package itself.

I noticed there was an error because I didn't have any personal smileys, when it went to count them, they were null or not an object. This may or may not have anything to do with it. But make sure you have them (personal smileys) and then try again.

JRR
02-25-2015, 04:02 PM
I understand everything you said here and point blank this is a IE issue across the board, have tested with W7 and IE 8, 9 and 10, have people that have tested in in Vista.

I have looked at those script errors and they are on the test forum too but again we do not have the issue on that forum. Things I have done so far to test:

I've made sure the test forum has the exact same plugins as the other forums, turned them all off in the forums with the problem and we have no plugin causing this issue.

I've went through every javascript code I have in the headers and the footers of the problem forums and added them to the test forum, again the issue is still not there.

I'm in the process of going through every single section of the templates and adding any things from the problem forums to the test forum and so far I'm still not seeing it there but I haven't finished either. My thought is sooner or later I'll put something in that creates this issue and then bingo!

I will ask my server people about the script errors to see if they can shed some light on this.

At one time John a guy on PB had made this image post thing using the same host into a plugin, it worked for a while but PB does do updates and when it quit working the author has never came back and you have no way of knowing what was wrong in his plugin? But like a lot of plugins PB has they can be duplicated in lots of cases with header or template coding, this AJAX thing wasn't the problem with his plugin, it just quit working.

I just keep thinking there has got to be some way to by code to tame IE? This image posting thing is a very sought after thing among me members which with 3 forums totals over 12K members.

jscheuer1
02-25-2015, 04:31 PM
One thing we could try is to leave or blank out the page that postimage loads into the popup as soon as possible. This could more effectively be done using PHP, that is if the the forum runs on PHP and we can insert an effective test for this early enough in the parsing of the page by the server. It could use the query string to prompt a die. But his script might also be effective. Place it as near to beginning of the head as possible:


<script type="text/javascript">
if('postimage_id'.test(location.href)){location.href = 'about:blank';}
</script>


If it doesn't help, then leave it so I can test it.

If using PHP we would do something like (not tested, but is valid PHP code):


<?php if(isset($_REQUEST['postimage_id'])){die();} ?>

That should be the first thing the server sees when parsing the page.

JRR
02-25-2015, 05:56 PM
Gave the top code a try, put it exactly where you wanted it John and another no go, arrrrgh! Could the code at the bottom with the {die();} be converted to a non php format? I really appreciate your patience and help.


Also I didn't see what you said about it happening to you sometimes on the test forum and the personal smileys. First of all the Personal Smileys is a added plugin and one adds the smileys by going to their profile and pasting them in. I turned the plugin off so it's not a possibility now. I also have never at one time have had the Ajax pop up come up for me on that forum after doing a lot of photos, not once. Could you see if it does for you now since I've disabled the personal smileys?

jscheuer1
02-25-2015, 08:41 PM
Still happening on the test forum, so that wasn't the error or not the only error causing the trouble. Tends to - or seems to happen with the larger (byte size) images. Certainly doesn't happen all the time. It might have more to do with bandwidth (load time of the page in the popup).

With the script I gave (javascript one) I asked you to leave that in place, even of it didn't work. Best place for that would be the scooter forum:

http://thescooterprofessor.proboards.com/

where I have an account.

There's no way to die() in anything other than PHP, and no way to do anything like that in anything that's not server side (javascript won't work) but asp and other server side languages might - depends upon whether or not the server side language you use has an equivalent for die(). What die() does when it works is stop the rest of the page from being sent to the browser.

It's possible that even if we can get a die() type server side thing happening or even with the javascript I wrote for this, if either of those are successful in preventing the rest of the page from loading in the browser, that might also prevent the postimage script from working properly. But if it still allowed the postimage script to work, it should prevent IE from getting upset about anything on the page.

What server side language does proboards use? I thought most did use PHP - most forums at least.

JRR
02-25-2015, 10:32 PM
Sorry John I didn't see the leave the code request and I'll go back and put it in. I just got this from one of the admins at PB with what he says is the problem?



I can duplicate the stuff happening in that thread. That's happening because the window the uploader pops up redirects to your forum before closing, then closes immediately upon loading the forum causing it to interrupt the forum's standard AJAX requests. That would ultimately be the responsibility of the designer of the Simple Image Uploader to fix.

They don't use PHP. Proboards is coded in Perl. Previously, due to the remotely hosted nature of the service, users cannot modify the software directly as with some forum systems, but some customisation is possible through the use of CSS or JavaScript codes. With the release of v.5, however, ProBoards gives Administrators and certain other members access to the HTML and CSS of the webpage, for easier coding purposes.

I'll get that code back in scooter professor forum. Also I don't know why but no matter what size image I use I cannot make this happen on my test forum?

jscheuer1
02-26-2015, 02:43 AM
OK, thanks. I agree with what the PB person is saying. Why IE makes an issue of it and other browsers do not is a mystery, though very much in keeping with IE's legend of being weird. Fortunately, IE is finally being completely discontinued. But that won't help us in the near term. So, that's why I'm trying to abort the full loading of the page. I've done a lot of work with cross domain scripting and I realize that sometimes you just need to make a reference back to the domain you are servicing (in this case one of your forums) and that it doesn't mean anything other than that the loop is completed. Other times vital information is communicated in that way. If it's the former, interrupting the load of the page should fix the problem. If the latter, it should also fix it, but may also mess up the postimage script in one or more ways.

In any case, you putting the script I wrote up on the live forum has led me to realize I made an error in writing it. It should be:


<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>


Let's give that a try and see what happens. If there is a new problem or problems from that, I already have an idea how to fix it.



Oh, and as I said, I'm not sure if it was really image size or bandwidth on the test forum. It could even be something else. I will say that it usually worked there in IE. Only on occasion was there the AJAX message issue, whereas the other forum (scooter professor) always seemed to have the problem.

JRR
02-26-2015, 06:15 AM
Well John I believe we are getting closer.....I think. LOL I put the code in right under the head in the forum wrapper and for sure the Ajax pop up is gone but when one clicks on the image uploader you get the old Blank Page and you're done, not browsing for your image nothing a blank page.

I then took a shot at moving the code to right above the button code in the Quick Reply template, the results were the opposite, you could browse and find your image but when you click on Upload the Blank Page comes back.

So again just for kicks I moved it right under the button code and no Blank Page and you could get the URL link to paste on the posting page but when you hit the Post Quick Reply button it goes whack-o it may put 3 photos in or take forever to download, acted crazy.

But no Ajax message. So I put it back under the Head tag in the forum wrapper.

Thanks I'll await your next code.

jscheuer1
02-26-2015, 04:22 PM
Well I only have a test form to try things here. And there are a lot of differences, perhaps even how the script communicates with itself. So I was hoping that just putting the code at the beginning of the head would work for the forums. But it didn't work for my form. I've added an AJAX call and other things to my form to try duplicating the error we get in IE on the forums, but so far, no luck. Anyways, after putting my script in the head, my test form no longer worked at all in any browser. So I figured that the postimage code needed to see something (more likely interact with something) on the page it was loading into the popup in order to work. The most logical things are either the postimage script itself or one that it inserts into the page. So I moved the postimage script to the head of the page, right before my code that kills the rest of the page and things worked again. We now have, at least potentially, the best of both worlds. The script can communicate with itself, but the rest of the page doesn't load or create problems. I also checked the DOM, and somehow (almost certainly because it does these onload) the postimage script is still finding (on the main page - the one in the full browser window) the .message div and inserting its link as well as its span and br, and is of course available to our custom link/button. So everything should work. To do this, get rid of:


<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>

from the form. Place it instead in the head of the page just before my code (just before this script):


<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>


That should do it. If not, leave it that way so I can have a look. You need do this only on the Scooter Professor forum for now (the one I have an account on).

As usual, the browser cache may need to be cleared and the page refreshed to see changes.

JRR
02-26-2015, 06:09 PM
You are a genius! It's working flawlessly in IE and Firefox and I'm waiting on a friend to give me feedback on Chrome! Question? If I put the button code in another template location for this to be used in two locations of the forum will the button call to the same script on the Forum wrapper head?

Oh I almost forgot PB is lit up today with code request modifications for problems with the new Firefox 36 download. Have you used this updated version yet? If not then I'm going to try to find someone who uses it to check this too.

John I appreciate your help so much!


Edit: John I just check this in the new Firefox 36 and all is ok.

jscheuer1
02-26-2015, 07:09 PM
If I put the button code in another template location for this to be used in two locations of the forum will the button call to the same script on the Forum wrapper head?

It should, just try it out and see. In fact, if the styles that kill (hide really) the default link and its span and br are either in the template or in a stylesheet used by the template, and the script I wrote is in the template along with the postimage script tag right before that, then any page that allows you to reply to a message should be able to have the custom link/button added and have it work. The only proviso might be that the form that allows for the reply may have to have a parent with the class of message. All ordinary forum post reply forms do I would think. Private messages might not, but they may, and even if they don't, they might still work. I think the only thing that might need tweaking if the class is different are the selector for the style that hides the span and br.

But if there are any problems, be more specific and let me see the page.

JRR
02-26-2015, 07:28 PM
Alright John go to the test forum where you have a account, click on the thread we have been testing on and scroll down to the quick reply and look over to the right and click on "Normal Reply" This brings up what has always been PB main posting window with all of the buttons, etc. The Quick Reply was very plain Jane but with the recent change to V5 people have dressed it up with virtually all the options that the Normal Reply spot has via plugins. The Normal Reply allows members in their profile settings to choose the Preview Mode or BBCode which is what the Quick Reply area is and has always been, no Preview Mode for the QR. When you use the image button on the NR spot and hit enter the photo instantly appears instead of the URL link code like the QR does. This alone may be a problem because PB treats both spots differently and I don't know if the image uploader will put the image in?

I have added the button code in the templates there and here is the Normal Reply template code:


<div class="container new-area wysiwyg-area">
<div class="title-bar">
<h2>$[title_bar]</h2>
</div>
<div class="content cap-bottom">
$[form.header]
{if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="subject_line">
<table>
<tr>
<td class="subject">
<label>Subject:</label>
</td>
<td>
<div class="controls">
$[poll_button]
$[event_button]
$[attachment_button]
$[options]
</div>
<div class="subject_input">
$[form.subject.input]
</div>
</td>
</tr>
</table>
</div>
{if $[form.recipients.input]}
<div class="recipients">
<label>Recipients:</label>
$[form.recipients.input]
</div>
{/if}
{if $[participant]}
<div class="participants">
Participants:
<span class="$[participant_list_class]">
{foreach $[participant]}$[participant]$[participant.comma] {/foreach}
</span>
{if $[change_participants_button]}($[change_participants_button]){/if}
</div>
{/if}
<div class="editor ui-helper-clearfix">
$[form.message.input]
</div>
{if $[form.updated_reason.input]}
<div class="edit_reason content-box pad-all-double">
<label>Edit Reason (optional):</label>
<div>$[form.updated_reason.input]</div>
</div>
{/if}
{if $[posting_errors]}
<div class="posting-errors">$[posting_errors]</div>
{/if}
$[captcha]
<div class="submit content-box pad-all-double">
<span class="float-right">$[form.post.button]<a href="javascript:void(0);" onclick="postimage_upload(0);" class="button">Insert Image</a></span>
<span class="note small left-item" id="$[transcription.id]"></span>
</div>

<div id="show-attachment" class="attachment">
$[attachment_widget]
</div>
$[form.footer]
</div>
</div>

{if $[summary]}
<div class="container $[summary.class]">
<div class="title-bar">
<h2>$[summary.title]</h2>
</div>
<div class="content cap-bottom">
<table class="list">
<tbody class="$[list_class]">
$[summary]
</tbody>
</table>
</div>
</div>
{/if}


You can see where I inserted the button code. The Insert Image button is in the bottom right hand corner with two other buttons in the Normal Reply window.

When you click on it all works correctly but here is where it fails. When you hit Upload the outside server host does it's job but the URL link will not appear in the post, I'm thinking because of the Preview Mode?

jscheuer1
02-26-2015, 10:08 PM
Mmm, before we get too involved with this. Didn't you say that the normal reply already has its own insert image thing? If so, why not just use that?

JRR
02-27-2015, 01:49 AM
It has a menu icon just like here where one can take a URL link from their own outside image host or elsewhere and then insert it into the text and then hit Post Reply.

PB on their last software V4 had what they called a "attachment" button and when pressed just like with this image host thing we finally got working it would copy and paste a URL or any image within a certain size from your own computer files to the forum, no worries or no need for a outside host like Photobucket. Only time you needed a outside host was if the image was bigger than they allowed. The one difference in the Normal Reply versus the QR is when you paste the URL link in it grabs is and puts the image in instantly before your eyes for you to Preview where as the QR puts the URL link in and the photo appears after you post your reply.

But on V5 they decided due to their server load (or as they say it was) to limit the attachment button option to 100mb of storage, after that you can buy more storage (shoots down the server load theory) and a lot of forums mine included when converted from V4 to V5 already were over the limit thus this option is useless unless you want to pay. I donate all my time to keeping the forum up just like I'm donating my time to try to make this option work and I'm not going to pay a fee for image space on their server when I can and did remove the attachment button/feature from the forum and tell members to use their own host.

But I do like a lot of forum owners have those who are very basic in computer knowledge and moan and groan about not knowing how to use a outside image host. This idea came to me when I was browsing PB for feature options for my forums and as I said before came across this image host thing from a person who made a plugin that now no longer works and has been abandoned. PB will not intervene on a persons work even if they have totally quit giving member support for it and that's why I started this project too.


So if it is possible to make it work in the other posting area I would love to do so. My members will go nuts over this feature and I'm about to make a announcement about what we have done so far.

jscheuer1
02-27-2015, 02:37 AM
What we have so far is enough for most folks. I also understand what you are saying about the NR and will have a look. However, it seems pretty clear to me that the postimage script is intended primarily for QR and so will be difficult to adapt to NR. It might be impossible even, or at least beyond me. I will have look though as I say.

Can you make a div with the class of message for the NR form? I'm not sure if it has to be a parent or a child of the NR form. It would probably have to be like the message class div for the QR form. I forget which it is at the moment (parent or child). Good thing it's a class (id's have to be unique) but that's no guarantee it will work, just a possibility.

JRR
02-27-2015, 05:34 AM
Not sure but I'll inquire and get back.

JRR
02-27-2015, 01:03 PM
OK after giving this some thought I would say that the QR is a child to a degree so by explaining how it works with the NR I think you can determine a course of action if any.

First of all the QR in PB is very plain Jane with only a Post Quick Reply button if you don't dress it up. By saying this I mentioned plugin. On the test forum I went and turned the Plugin off that gives it the same menu buttons as the NR. I just for kicks left the Smiley button there as it is a plugin too. The plugin that creates the menu button works only in the BBCode way unlike the NR that has a Preview mode as I mentioned. I even changed the Reply button to Normal Reply via a javascript header code. The buttons and features in the NR are all integrated into PB coding and they have it where one cannot see/modify those functions I do believe.

There is one what I would call crossover connection between the QR and NR as in this. for instance if you start typing in the QR and even use the new Insert Image function we just added you can let the URL link post and then you can click on the NR button and the content in the QR will transfer to the NR window and when the image URL link transfers it will be posted in the preview mode when you do so, meaning you will see the photo instead of the link.

ON the test forum I left the Add Attachment button, it works identically to our image host button except it goes to PB server storage where they have put maximum storage limits on. With all of this said I'm certain that the QR and NR are separate identities and one can look at the last code I posted for you which is the entire NR template and see they use <div> class control buttons to connect to their internal programming for the NR.

But here is something that I also now know, remember I mentioned that the image source host that we used for this button has been made into a plugin? So you'll say why are we doing all this crap when you could have just installed the plugin and I can answer that easily. One the author of the plugin has long ago disappeared and only the plugin authors can offer support if some have problems and problems have risen such as it simply doesn't work with many forums, a few but the plugin working can also be determined by what a forum owner has or doesn't have on their forum? Lots of people begged the author to help with no success.

Secondly one is allowed only so many plugins and then it's time to buy more......and plugins slow down your forum speed while template modifications and header/footer codes have very little impact. Knowing this people work hard to stay away from plugins when they can use other means. Back to what I said I know and it's this, the plugin does create a Insert Image button in the QR and NR posting window that works exactly the same way as the button we just installed so it can be done, how? I don't know.

I have a fellow scooter friend that has a forum where he is using this plugin, he says at times it seems to quit working but for the most part it's ok, as I said there are forums where it will not work at all.

http://49ccscoot.proboards.com/

I don't know if you can sign up as a guest here, I'm betting you have to have a full account if you were to want to see it.

I'm guessing the plugin author somehow knew how to link his plugin coding to the Preview mode of the NR coding and I did discover that when you open the image host window grab you image and then hit Upload it posts a link in the NR just like it does in the QR, it's identical in that aspect, so it can indeed be done.

JRR
03-04-2015, 04:54 PM
When you return John I have some new/helpful info on this.

JRR
03-21-2015, 10:23 PM
Has John totally disappeared?

JRR
04-09-2015, 02:58 PM
John this image button is still working great and I would still love to get it to work in the Normal Reply spot. By using the F12 function when using this image uploader I can come up with this code that we are now using that works:




if (typeof postimage_lang === 'undefined') {
var postimage_lang = "english";
var postimage_add_text = "Add image to post";

function postimage_query_string(postimage_search_name) {
if (window.location.hash) {
postimage_query = window.location.hash.substring(1).split("&");
for (postimage_i = 0; postimage_i < postimage_query.length; postimage_i++) {
postimage_string_data = postimage_query[postimage_i].split("=");
if (postimage_string_data[0] == postimage_search_name) {
postimage_string_data.shift();
return unescape(postimage_string_data.join("="));
}
}
}
return void(0);
}
if (opener) {
var postimage_text = postimage_query_string("postimage_text");
if (postimage_text) {
var postimage_id = postimage_query_string("postimage_id");
var postimage_area = opener.document.getElementsByTagName('textarea');
for (var postimage_i = 0; postimage_i < postimage_area.length; postimage_i++) {
if (postimage_i == postimage_id) {
break;
}
}
if (opener.editorHandlemessage && opener.editorHandlemessage.bRichTextEnabled) {
opener.editorHandlemessage.insertText(postimage_text + "<br /><br />", false);
} else {
postimage_area[postimage_i].value = postimage_area[postimage_i].value + postimage_text;
}
opener.focus();
window.close();
}
}
function postimage_insert() {
var postimage_area = document.getElementsByTagName('textarea');
for (var postimage_i = 0; postimage_i < postimage_area.length; postimage_i++) {
if (!postimage_area[postimage_i].name.match(/username_list|search|recipients/i)) {
postimage_div = document.createElement('div');
postimage_open = document.createElement('a');
postimage_open.innerHTML = postimage_add_text;
postimage_open.href = "javascript:postimage_upload(" + postimage_i + ");";
postimage_span = document.createElement('span');
postimage_span.innerHTML = " • ";
postimage_div.appendChild(document.createElement('br'));
postimage_div.appendChild(postimage_span);
postimage_div.appendChild(postimage_open);
postimage_div.appendChild(document.createElement('br'));
if (postimage_area[postimage_i].nextSibling) {
postimage_area[postimage_i].parentNode.insertBefore(postimage_div, postimage_area[postimage_i].nextSibling);
} else {
postimage_area[postimage_i].parentNode.appendChild(postimage_div);
}
}
}
}
function postimage_upload(areaid) {
window.open("http://postimage.org/index.php?mode=website&areaid=" + areaid + "&hash=1&lang=" + postimage_lang + "&code=&content=family&forumurl=" + escape(document.location.href), "postimage", "resizable=yes,width=500,height=400");
return void(0);
}
if (typeof postimage_text === 'undefined') {
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', postimage_insert, false);
} else if (window.attachEvent) {
window.attachEvent('onload', postimage_insert);
}
}
}


Now at one time a person made what PB calls a plugin to make this work and by doing so it worked in both spots the QR and the NR but for whatever reason the plugin stopped working and the author has totally disappeared giving no support for this plugin. When I use the F12 function with the plugin installed I get this code which one can see is somewhat different for the top code and I'm assuming it's coded to allow for use in the Normal Reply spot?



// MOD Title: Simple Image Upload
// MOD Author: Sium < admin@postimage.org > (N/A) http://postimage.org/
// MOD Version: 1.4.0

var postimage_lang = proboards.plugin.get('simple_image_upload').settings.language;
var postimage_add_text = proboards.plugin.get('simple_image_upload').settings.text;

function postimage_query_string(postimage_search_name) {
if (window.location.hash) {
postimage_query = window.location.hash.substring(1).split("&");
for (postimage_i = 0; postimage_i < postimage_query.length; postimage_i++) {
postimage_string_data = postimage_query[postimage_i].split("=");
if (postimage_string_data[0] == postimage_search_name) {
postimage_string_data.shift();
return unescape(postimage_string_data.join("="));
}
}
}
return false;
}
function postimage_isVisible(e) {
return e.offsetWidth > 0 || e.offsetHeight > 0;
}
function postimage_isWysiwyg(e) {
return (e.className).indexOf('wysiwyg') > -1;
}
if (opener) {
var postimage_text = postimage_query_string("postimage_text");
if (postimage_text) {
var postimage_id = postimage_query_string("postimage_id");
var postimage_area = opener.document.getElementsByTagName('textarea');
for (var postimage_i = 0; postimage_i < postimage_area.length; postimage_i++) {
if (postimage_i == postimage_id) {
break;
}
}
if (postimage_isWysiwyg(postimage_area[postimage_i])) {
var wysiwygId = '#' + postimage_area[postimage_i].id;
opener.$(wysiwygId).wysiwyg('setContent', opener.$(wysiwygId).wysiwyg('getContent') + postimage_text);
} else {
postimage_area[postimage_i].value = postimage_area[postimage_i].value + postimage_text;
}
opener.focus();
window.close();
}
}
function postimage_insert() {
var postimage_area = document.getElementsByTagName('textarea');
for (var postimage_i = 0; postimage_i < postimage_area.length; postimage_i++) {
if (!postimage_area[postimage_i].name.match(/username_list|search|recipients/i)) {
if (postimage_isVisible(postimage_area[postimage_i]) || postimage_isWysiwyg(postimage_area[postimage_i])) {
postimage_open = document.createElement('a');
postimage_open.id = 'postimage';
postimage_open.innerHTML = postimage_add_text;
postimage_open.href = "javascript:void(0)";
postimage_open.setAttribute('onclick', "window.open('http://postimage.org/index.php?mode=proboards&areaid=" + postimage_i + "&hash=1&lang=" + postimage_lang + "&code=" + proboards.plugin.get('simple_image_upload').settings.bbcode + "&content=" + proboards.plugin.get('simple_image_upload').settings.content + "&forumurl='+escape(document.location.href),'postimage','resizable=yes,width=500,height=400');return false;");
postimage_open.setAttribute('class', "button");
postimage_open.style.margin = "0px 0px 8px 0px";
postimage_open.style.display = "table";
postimage_area[postimage_i].parentNode.insertBefore(postimage_open, postimage_area[postimage_i]);
if (postimage_isWysiwyg(postimage_area[postimage_i])) {
break;
}
}
}
}
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', postimage_insert, false);
} else if (window.attachEvent) {
window.attachEvent('onload', postimage_insert);
}




Is there a possibility to make this work in both spots? Thanks

JRR
04-21-2015, 05:41 PM
Just checking to see if you can look at this again John?

JRR
04-24-2015, 06:25 PM
Maybe now you have time to look at this again?

jscheuer1
04-24-2015, 06:50 PM
I will probably have time, but I'm not as confident on this one because we have no control over the actual script. I am encouraged because the postimage link showed up in the shoutbox area without us even asking it to. But I think the way the postimage script works is it fires its setup routines onload of the page or the dom. When that happens, the quick reply editor and the shout editor are visible on the page. To get it to insert itself, make itself available to the full editor we would probably have to get it to setup once the full editor is there. Add to that the fact that the full editor has two modes and that the way postimage works is only appropriate to its bbcode mode I think. In full reply mode you can always use the native image tool. I know, it doesn't seem as robust.

One thing I notice, when I launch full reply, I still see the postimage button from the quick editor. At the very least we should hide that while the full editor is visible.

JRR
04-25-2015, 12:15 AM
Yes John this dot shows up there and go to your profile on the test forum and you'll see it shows up there too. Hit Profile, Edit Profile, then click on Personal and scroll down to the bottom of the page and you'll actually see it twice. I tried some style sheet codes like the one you made to get rid of them but no luck. Is there a way we can make a code to get rid of them all in one code? I have these dots on my forums where I am using this now.

Also I had a thought, scary I know LOL. I was thinking that it might be possible to go back to image.org and make another button code and put it in the Normal Reply template separate from the QR one? In other words have two codes doing the same thing in different spots? Or if they interfere have a code that blocks one from the other? We know at one time the plugin put this in both spots on the forum, for various reasons it's pretty much quit. PB has had lot's of updates since that time and new browser versions have also came about. The author has disappeared and no one can touch the plugin so the only way this will ever come to be is by someone else making it happen.

Thanks

jscheuer1
04-25-2015, 04:12 AM
I dunno if you read my last post or not, but I think I was wrong (so I deleted that post) and I think I've figured this out. It's a little tricky - First I want to do some more testing.

jscheuer1
04-25-2015, 05:17 AM
OK, I think Ive got it. Postimages only works in full reply if it is in bbcode view. And it needs to use 1 instead of 0 for the onclick event. So put this script as close to the end of the body as possible:


<script type="text/javascript">
jQuery(function($){
if(/\/post\/new\/\d+/.test(window.location.href)){
$('a[onclick="postimage_upload(0);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
postimage_upload(1);
}).get(0).onclick = function(){};
}
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

It should make sure that the full reply is in bbcode mode if the postimage button is clicked and will change the 0 to 1 for the full reply editor, and it should also get rid of the dot on all pages

JRR
04-25-2015, 11:06 AM
Works like a charm John! Only one thing, still have the dot on the Normal Reply window and profiles. Now I just accidently discovered that people when the plugin was working had the same problem with the dots and button appearing where they didn't want it to. Seems a mod there made some CSS fixes like you did for the shoutbox and some work some don't with our code, again we now have a updated code that works;

Here's what they did:


div.shoutbox.container.full a.button{display:none!important;
}
div.settings.content-box a.button{display:none!important;
}
div.personal.content-box a.button{display:none!important;
}
div.staff.content-box a.button{display:none!important;




Now I changed them all to this and of course put them in the style sheet:




.shoutbox_form.content-box div {display: none;}
.settings.content-box a.button{display:none;}
.personal.content-box a.button{display:none;}
.staff.content-box a.button{display:none;}



The top two do work as we know the shoutbox one you created is just like the other code but two of the codes which are for the profile area do not work at all:





.personal.content-box a.button{display:none;}
.staff.content-box a.button{display:none;}



The second code which removed the dot from the Normal Reply posting page works but with what I call a delayed effect. In other words when you open the NR page the dot is there and in a few seconds it disappears in front of your eyes. I'm thinking it may have to do with the fact you made your code to remove the dots too even though it doesn't?

Oh that code again is the second one:




.settings.content-box a.button{display:none;}

jscheuer1
04-25-2015, 03:41 PM
If it's delayed, it's probably not the css, rather the javascript code we added. Let me double check. OK, it looks like it is the javascript that's doing it:


<script type="text/javascript">
jQuery(function($){
if(/\/post\/new\/\d+/.test(window.location.href)){
$('a[onclick="postimage_upload(0);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
postimage_upload(1);
}).get(0).onclick = function(){};
}
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

It takes the dot away after the window loads. I did it that way because the css to hide it for this page would be cumbersome at best, and as I remembered, postimages initialized on window load, and you cannot take something away until it's there. But many browsers initialize postimages sooner. We can accelerate removal in browsers that create the dot sooner by checking for it more and at earlier times:


<script type="text/javascript">
$('a[href^="javascript:postimage_upload("]').parent('div').remove();
jQuery(function($){
$('a[href^="javascript:postimage_upload("]').parent('div').remove();
if(/\/post\/new\/\d+/.test(window.location.href)){
$('a[onclick="postimage_upload(0);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
postimage_upload(1);
}).get(0).onclick = function(){};
}
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

Now, I have a question for you. Is this a separate template? I ask because the script we just added looks like it's only on the normal replay page. If so, is the Insert Image link button on the normal reply page also unique to that page? If both of these are only on the normal reply page, the code can be simplified.

JRR
04-25-2015, 03:49 PM
Yes they are both on totally separate templates. I put one button in the QR template and the other one in the NR template plus the new javascript code at the bottom of the NR template only.

Is the last code what I should put in with the last changes or just the high lighted part?

jscheuer1
04-25-2015, 04:00 PM
If the question is should the last script replace the other script, yes it should/would. But if this is a unique template, change the button to:


<a href="javascript:void(0);" onclick="postimage_upload(1);" class="button">Insert Image</a>

and replace the script with:


<script type="text/javascript">
$('a[href^="javascript:postimage_upload("]').parent('div').remove();
jQuery(function($){
$('a[href^="javascript:postimage_upload("]').parent('div').remove();
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

JRR
04-25-2015, 04:01 PM
John inserted your last code and dot still disappears on a time delayed basis, may even be slower?

JRR
04-25-2015, 04:01 PM
OK we were posting at the same time, will do now

JRR
04-25-2015, 04:10 PM
All done John and dot still disappears on a time delayed basis, it's actually taking more time to disappear now than before.

jscheuer1
04-25-2015, 04:24 PM
Yep. does seem that way, let's use this script instead then:


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

And I have another idea - to stop postimages from creating the dot in the first place. I'll let you know when I write it out.

JRR
04-25-2015, 04:28 PM
Ok John got it changed and awaiting your instructions.

jscheuer1
04-25-2015, 05:33 PM
Alright, I just deleted a post because I found a way to test it, and it didn't work. This works in testing. Add this script right after the postimage script (highlighted as shown):


<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.detachEvent('onload',postimage_insert);}
</script>
<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>

That should work for all pages. If it does we can get rid of all the styles that were added for hiding the dot and postimage link (keep the styles we added for the time script and edit/delete buttons). Also, the script for the normal reply can be simplified further. Before we do any of that though, let's make sure the above works for the normal reply.

JRR
04-25-2015, 06:35 PM
Ok John I presumed you meant add this after the last code and I presumed right, no dot and the images load perfectly, tested it in FF too, works great and if you look at it on the forum can you use Chrome if you have it? Only thing is now if I can figure out how to get ride of the two dots in the personal profile? Doesn't bother me but rest assured someone will find it and want it gone? I've tried several CSS removal codes like we did with the shoutbox button but to no avail.

jscheuer1
04-25-2015, 08:39 PM
No, and it's not working here in Chrome, it might work in IE (shouldn't though really). I meant add only the highlighted section to the head of the page where the non-highlighted portions already exist. So, get rid of what you just added, go back to the beginning of the page and find:



<!DOCTYPE HTML>
<!--[if IE 7]><html class="ie7"><![endif]--><!--[if IE 8]><html class="ie8"><![endif]--><!--[if IE 9]><html class="ie9"><![endif]--><!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>


Make that look like so (addition highlighted):



<!DOCTYPE HTML>
<!--[if IE 7]><html class="ie7"><![endif]--><!--[if IE 8]><html class="ie8"><![endif]--><!--[if IE 9]><html class="ie9"><![endif]--><!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.detachEvent('onload',postimage_insert);}
</script>
<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>

JRR
04-25-2015, 09:33 PM
OK John got a little lost! That code went in the Forum Wrapper that controls all template pages and I ran it in IE11 and FF with success! No Dots anywhere! Only chrome to test now!~

OK John I've discovered a little hitch and on this one I think we'll have to live with it as it is? One can go to their profile and you have a setting that you can choose that is just for the NR page and it's the Posting Default and you can choose Preview or BBCode . I have put this on two of my forums and have my posting default in my profile in the Preview mode and I can use the image insert on the NR with no problem at all.

But on one of my forums with it in the Preview mode the image link will not insert at all, isn't that weird? I can go change it to BBCode and it works like a charm. Also I can leave it in the Preview mode and before I hit the Insert Image I can hit BBCode on the bottom left corner of the NR posting page and it works fine too.

The forum in question is this one:

http://thescooterprofessor.proboards.com/

Not worried about it just don't understand why 3 forums work fine in Preview and this one doesn't?

Edit: This is a PB issue, the support board is lit up with problems of this nature, and they are working on it, all is well, Thanks John!

jscheuer1
04-26-2015, 12:54 AM
OK, that's right now. It will prevent the dot and the default "Add image to post" link from ever getting written to any page. So you can remove (not use) all the css styles that you were using to hide those items. Also, in the script we had for the normal reply only page, that can now be simplified further to be just:


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
});
</script>

Now, about it working with the bbcode editor versus the preview editor, I don't know why. In chrome here on the test forum it only works in the bbcode editor. So I wrote it so that if it's in the preview editor and you click the 'Insert Image' button, it will switch it to the bbcode editor. It should do that in all browsers - does it? If not I think I can fix that. Then later, if they ever fix the discrepancy between the two modes of the normal reply editor, then we can remove the above code completely.



Ah - it's not working properly on the scooter professor because where you have:


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

There is an errant opening script tag (red) ahead of that which makes the script not parse:


<script>









</tbody>
</table>
</div>
</div>


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
$(window).on('load', function(){$('a[href^="javascript:postimage_upload("]').parent('div').remove();});
});
</script>

JRR
04-26-2015, 12:19 PM
First things first. It works fine in both the QR and NR areas without having to switch to the BBCode mode except for scooter professor. That forum is the only one where one has to manually switch to the BBCode mode.

Now John either I'm blind or am in the wrong place but I can't for the life of me see that errant <script> tag? Here is the entire code for that page:




<div class="container new-area wysiwyg-area">
<div class="title-bar">
<h2>$[title_bar]</h2>
</div>
<div class="content cap-bottom">
$[form.header]
{if $[form.created_by_guest_name.input]}
<div class="guest_name">
<label>Guest Name:</label>
$[form.created_by_guest_name.input]
</div>
{/if}
<div class="subject_line">
<table>
<tr>
<td class="subject">
<label>Subject:</label>
</td>
<td>
<div class="controls">
$[poll_button]
$[event_button]
$[options]
</div>
<div class="subject_input">
$[form.subject.input]
</div>
</td>
</tr>
</table>
</div>
{if $[form.recipients.input]}
<div class="recipients">
<label>Recipients:</label>
$[form.recipients.input]
</div>
{/if}
{if $[participant]}
<div class="participants">
Participants:
<span class="$[participant_list_class]">
{foreach $[participant]}$[participant]$[participant.comma] {/foreach}
</span>
{if $[change_participants_button]}($[change_participants_button]){/if}
</div>
{/if}
<div class="editor ui-helper-clearfix">
$[form.message.input]
</div>
{if $[form.updated_reason.input]}
<div class="edit_reason content-box pad-all-double">
<label>Edit Reason (optional):</label>
<div>$[form.updated_reason.input]</div>
</div>
{/if}
{if $[posting_errors]}
<div class="posting-errors">$[posting_errors]</div>
{/if}
$[captcha]
<div class="submit content-box pad-all-double">
<span class="float-right">$[form.post.button]<a href="javascript:void(0);" onclick="postimage_upload(1);" class="button">Insert Image</a></span>
<span class="note small left-item" id="$[transcription.id]"></span>
</div>
$[form.footer]
<style type="text/css">
.Radio-site label { font-weight: normal; }
</style>
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
<form action="#" onsubmit="window.open(whichsite(this), '_blank'); return false;">
<div style="color: black" class="Radio-site"><center><b><font color ="3f9249">Where do you need to go?</b></font></center>
<p align="center"><label><input type="radio" name="site" value="http://yahoo.com/">Yahoo</label>
<label><input type="radio" name="site" value="http://google.com/">Google</label>
<label><input type="radio" name="site" value="http://amazon.com/">Amazon</label>
<label><input type="radio" name="site" value="http://cnn.com/">CNN</label>
<label><input type="radio" name="site" value="http://espn.go.com/espnradio/play?s=espn">ESPN Live</label>
<label><input type="radio" name="site" value="http://www.youtube.com/">You Tube</label>
<label><input type="radio" name="site" value="https://www.facebook.com/">Facebook</label>
<label><input type="radio" name="site" value="https://twitter.com/">Twitter</label>
<label><input type="radio" name="site" value="http://www.myspace.com/">MySpace</label>
<label><input type="radio" name="site" value="http://s499.photobucket.com/">Photobucket</label><br/>
<label><input type="radio" name="site" value="https://signin.ebay.com/">Ebay</label>
<label><input type="radio" name="site" value="http://on.aol.com/">AOL</label>
<label><input type="radio" name="site" value="http://windows.microsoft.com/en-US/hotmail/home">Hotmail</label>
<label><input type="radio" name="site" value="https://accounts.google.com/ServiceLogin">Gmail</label>
<label><input type="radio" name="site" value="http://tunein.com/radio/977-70s-Rock-s48937/">Classic Rock</label>
<label><input type="radio" name="site" value="http://www.iheart.com/live/2513/?autoplay=true">Country</label>
<label><input type="radio" name="site" value="http://www.kdfc.com/pages/15744854.php">Classical</label>
<label><input type="radio" name="site" value="http://www.weather.com/maps/maptype/currentweatherusnational/uscurrentweather_large.html">Weather Channel</label>
<label><input type="radio" name="site" value="http://affiliates.foxnewsradio.com/radio/player.html">Fox News</label><br/>
<label><input type="radio" name="site" value="http://www.timeanddate.com/worldclock/custom.html?sort=1">World Clock&nbsp;<img src="http://www.jr-richscooterdoc.com/Vbanlogo/world.gif"border="0" alt="world.gif"/></label>
<label><input type="radio" name="site" value="http://www.tacomaworld.com/forum/tirecalc.php?tires=130-60r13-130-70r13">Tire Size Calc.</label>
<label><input type="radio" name="site" value="http://www.harborfreight.com/#">Harbor Freight</label>
<label><input type="radio" name="site" value="http://www.bikebandit.com/">Bike Bandit</label>
<label><input type="radio" name="site" value="http://www.motorcycle-superstore.com/">Motorcycle Superstore</label>
<center><input type="submit" value="Select"></center></p></div><br/>
</form>
</div>
</div>
{if $[summary]}
<div class="container $[summary.class]">
<div class="title-bar">
<h2>$[summary.title]</h2>
</div>
<div class="content cap-bottom">
<table class="list">
<tbody class="$[list_class]">
$[summary]
</tbody>
</table>
</div>
</div>
{/if}

<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
});
</script>



For your question of does it switch to the BBCode editor the answer is yes except scooter professor and I wouldn't know about Chrome? I refuse to put chrome on my computer.

I also have had a user that uses Safari say this doesn't work for him but I haven't had a answer yet as to if it works if he switches it to the BBCode editor himself? I also have a Opera user that I'm wondering about, oh those oddballs! LOL

The Safari user is on this forum which works just fine for me using IE and FF?

http://scooterdoc.proboards.com/

jscheuer1
04-26-2015, 03:15 PM
I'm a little confused now. Let's try to clear this up. On http://thescooterprofessor.proboards.com/ (SCOOTER PROFESSOR) if I go to a post and use normal reply in preview mode and then use the postimage Insert Image link that looks like a button, in both IE 11 and current Chrome and Firefox, it lets me upload to the popup, but nothing appears in the editor. If I'm in bbcode mode, it works fine. Are you experiencing different?

Also, again in all those browsers on SCOOTER PROFESSOR on its normal reply page, if I do a view source (CTRL - U) for the page and look for postimage_upload(1) (using CTRL - F) and go to the second occurrence, I see this (red added to the errant opening script tag, bold added to the search text):


<script>









</tbody>
</table>
</div>
</div>


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
});
</script>

Not sure if you have seen that or even looked for it.

Now, this is not the template of course, that might look differently. However, it is how the page is being served to the browser, or at least how the browser is parsing the page as served to it. And of course, with the red opening script tag there where it is, the script below that is not used because it isn't parsed correctly - the browser sees all this stuff before it that looks like garbage once inside the red script tag.

If that script were to work, if the normal reply editor is in preview mode when the Insert Image button is clicked, it will switch to bbcode mode in time to work just as well as if it were in bbcode mode when the Insert Image button was clicked. That script does work and does this on the test forum. (checked in IE 11 and current Chrome only, but I assume Firefox would do that there too)

Now we might be seeing the same things and misunderstanding each other's explanations, or of course it's possible that we could be doing the exact same thing in the exact same browser(s) and be seeing different results, but it's not real likely. If it is happening, it's probably due to settings in those browsers and/or different network conditions.

JRR
04-26-2015, 08:39 PM
I'm a little confused now. Let's try to clear this up. On http://thescooterprofessor.proboards.com/ (SCOOTER PROFESSOR) if I go to a post and use normal reply in preview mode and then use the postimage Insert Image link that looks like a button, in both IE 11 and current Chrome and Firefox, it lets me upload to the popup, but nothing appears in the editor. If I'm in bbcode mode, it works fine. Are you experiencing different?


Yes to this and it is only at scooter professor. But it works like a champ in the QR. If I switch to BBCode which one can do at the bottom of the left in the NR posting area it also works like a champ. It's exactly like your quote above.

But I have the exact same code in my test forum and at these two forums:

http://scooterdoc.proboards.com/

http://itistheride.boards.net/

At the test forum and on these two forums it works like a dream in the Preview editor even in the NR posting page, ONLY on Scooter Professor it does not? Weird?

On the <script> tag I'm lost so I'll ask this, is it something I can remove and if so where? I don't have a clue as to how or where it happens? But the question is why does this not happen at the other forums with the exact same coding? Why do they work in the Preview mode and Scooter Professor doesn't? Is it possible that I've got some little something elsewhere that makes only this forum do this?


Edit: I just for kicks tried one of the other forums using FF. Now when you click on the Insert Image button on the NR you can watch a little black dotted circle appear just for seconds, it's the same thing one sees on any PB forum when switching from Preview to BBCode mode. I knew the image link would post which it did.

I went to Scooter Professor again using FF and no dotted circle which we both know is a indication of the editor switching from Preview to BBCode. It didn't happen at Scooter Professor, weird?

jscheuer1
04-27-2015, 12:17 AM
OK, sounds like we are closer together than I thought. I can't know where that errant opening script tag is coming from specifically. Most likely it is in the SCOOTER PROFESSOR normal reply template. If you can copy that template and paste it into a text only editor and search for:

<script>

It looks like there are only 6 (possibly less, one or more might be in the full template) of them. Look for one which has no corresponding:

</script>

tag before a new opening script tag occurs. Get rid of it. Like if you have:


<script>
anything and any amount of stuff can be here but if there is not a closing </script> tag and then you have another opening one like -
<script type="text/javascript">

Well then, the red one has to go.


All closing script tags on the page exactly match:

</script>

There are 60 of those in the served source code.

Opening tags can look different, but the ones on the page all start out with:

<script

There are 61 of those on the page - one too many. You or somebody has to find the extra one in the template, the one without a closing </script> tag and remove it or else setup some way I can see the template to find it for you.

If it's any help, a tag like that is usually left over from a script you removed, you took everything else away, but just missed the opening tag. Basically a sort of typo. But it's possible it's there because of some other reason. Regardless, it is preventing the other script from working, it has to be removed or at least worked around.

You can just put a closing tag before the opening tag. So, where you have:


<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
});
</script>


Make that:


</script>
<script type="text/javascript">
jQuery(function($){
$('a[onclick="postimage_upload(1);"]').on('click', function(){
if(!$('#menu-item-bbcode').hasClass('ui-active')){
$('#menu-item-bbcode a').get(0).onclick();
}
});
});
</script>


That will probably fix it. Do that only on SCOOTER PROFESSOR.

But it would be better to find the extra tag and remove it.

JRR
04-27-2015, 02:53 AM
I finally found it John! When you go to the NR template section it is actually divided into three sections, The Posting Page where the button and the bottom javascript code goes, the Thread Summary and the Conversation Summary.

I combed the Posting Page until I was nearly blind for that <script> tag and couldn't find it. I even went as far as removing the entire template and copying and pasting one from one of my other forums and still the same oh same oh.

So I thought maybe this is in one of the other parts of the Posting page template and sure enough the unwanted tag was at the very bottom of the Thread Summary! Removed it and all is fine! Works like a charm!

BTW do you know anything about Safari?

jscheuer1
04-27-2015, 03:25 AM
Not a lot. I have Safari Win. It often can be used to troubleshoot Safari in general, though almost no one who uses Safari uses it in Win and the Mac versions are a little different. Also, many Safari users are using outdated versions. But given all that, if you can describe the problem that the Safari user is having, I can try to duplicate it and/or figure out a likely cause/solution.

jscheuer1
04-27-2015, 03:38 AM
OK, I tried on that forum (http://scooterdoc.proboards.com) in both Opera and Safari Win, worked fine. If they are still having problems, find out the OS and the browser version number and try to get specifics about the problem.

JRR
04-27-2015, 04:09 AM
Question John? Now with all the changes of this code do we still need this code that is in my global header? I think we put this in way back for the Quick Reply, would have to go back to the beginning of this thread to see?




<style type="text/css">
a[href="javascript:postimage_upload(0);"]{
display: none;
}
</style>

jscheuer1
04-27-2015, 04:30 AM
Right, get rid of that. As I've been saying, as long as you have the removeEvent (etc.) code:


<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.detachEvent('onload',postimage_insert);}
</script>


You don't need any css to hide the default postimage link or that stupid dot because now they are never created in the first place. We also more recently added styles as i think you summarized here:

http://www.dynamicdrive.com/forums/showthread.php?77994-Turn-simple-javascript-code-to-a-button&p=312079#post312079

I don't think any of those are needed any longer either.

The only styles we added that we want to keep are from the other thread, these ones for helping in timing out the editor for non-staff:


#nav-tree li, .container.new-area.wysiwyg-area, .container.posts.summary {display: none;}
#nav-tree li:first-child {display: inline-block;}

But don't use those unless you are also using the scripts that go with them, otherwise no one will be able to edit anything.

jscheuer1
04-27-2015, 04:34 AM
One other thing for now with this code, we can combine two of the scripts - change:


<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.detachEvent('onload',postimage_insert);}
</script>
<script type="text/javascript">
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>


to (remove highlighted from above):


<script type="text/javascript" src="http://mod.postimage.org/website-english-family.js" charset="utf-8"></script>
<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.detachEvent('onload',postimage_insert);}
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>

JRR
04-27-2015, 03:43 PM
All is well John, removed the unnecessary code and I had already took out all the style sheet codes. Made the changes you said to in that last code and the image posting is perfect on QR and NR!

Can't thank you enough!

jscheuer1
04-27-2015, 04:21 PM
Here's one more style rule we added that you can get rid of if you haven't already:


div.message div span, div.message div br {
display: none;
}

JRR
04-27-2015, 04:28 PM
Got it! Thanks

JRR
03-01-2018, 05:32 AM
Hello John long time no talk to. I'm having a little glitch with this code. Please look at the image:

http://www.jr-richscooterdoc.com/Rich/Ridepic.png

Notice the " P Add Image To Post " in blue letters on the left side? Also take note of the button you created on the bottom right hand corner of "Insert Image". This button doesn't work but the other does and somehow this was added later on and discontinued our button from working? Please help

jscheuer1
03-12-2018, 03:43 PM
Can't tell you much from the image. Guess the image host changed their code. I'll need a link to the page to see if there's anything to be done.

jscheuer1
03-12-2018, 03:53 PM
I may have spoken too soon. you can likely get rid of their button by changing our code:


<script type="text/javascript">
if(window.addEventListener){window.removeEventListener('DOMContentLoaded',postimage.init,false);}else if(window.attachEvent){window.detachEvent('onload',postimage.init);}
if(/postimage_id/.test(location.href)){location.href = 'about:blank';}
</script>

To make our button work again you have to change:


postimage_upload

to:


postimage.upload

This must be done on the link for our button as well as in the code that changes the editor. Any questions, just let me know