Turn simple javascript code to a button

[JRR]

<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/...come-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]

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]

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]

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]

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/th...=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]

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]

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]

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]

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]

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:




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