Page 1 of 8 123 ... LastLast
Results 1 to 10 of 80

Thread: Turn simple javascript code to a button

  1. #1
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Turn simple javascript code to a button

    Code:
    <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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 02-21-2015 at 07:11 AM. Reason: add bit about possibly editing the script and/or using css
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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:


    Code:
    <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:

    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!
    Last edited by JRR; 02-21-2015 at 01:27 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <style type="text/css">
    a[href="javascript:postimage_upload(0);"]{
    	display: none;
    }
    </style>
    Or add its rule to an existing stylesheet for the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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:
    Code:
    <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
    Last edited by JRR; 02-21-2015 at 08:12 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    div.message div span, div.message div br {
    	display: none;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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?

    Code:
    <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.
    Last edited by JRR; 02-22-2015 at 04:37 AM.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    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>
    Last edited by jscheuer1; 02-22-2015 at 07:46 PM. Reason: detsil
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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!


    Code:
    <style type="text/css">
    a[href="javascript:postimage_upload(0);"]{
    	display: none;
    }
    Getting closer
    Last edited by JRR; 02-22-2015 at 09:51 PM.

Similar Threads

  1. Please write a simple javascript code for me
    By laperashvili in forum JavaScript
    Replies: 2
    Last Post: 06-18-2012, 03:10 PM
  2. adding rollover button to javascript code
    By Repatilian in forum JavaScript
    Replies: 6
    Last Post: 12-04-2011, 10:28 AM
  3. Help with javascript code to make next and previous button dissapear
    By ajmancilla in forum Looking for such a script or service
    Replies: 1
    Last Post: 02-07-2011, 03:00 PM
  4. Looking for a simple Javascript code for a web board
    By donelian in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-15-2007, 10:24 PM
  5. How to turn a menu into a javascript file?
    By Eternal_Howl in forum JavaScript
    Replies: 4
    Last Post: 07-23-2007, 07:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •