Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 click event
#
ok so i know that this isn't a feature of jcink (and isn't likely to ever become one) but i'm trying to figure this out aaaaaand this is the best place i know of to ask where someone might be able to help me out?

on my private site, i have the miniprofile set up so that everyone can pick their own hexcode to set on their account and then the miniprofile matches their custom color. (can be seen here.) since we also use these colors for our post templates and stuff, i've made it so that there's an easy way to find the hex for these colors by hovering over the appropriate button in the miniprofile. (the paintbrush on the bottom.)

i would LOVE if there was a way to have a click event so that it automatically copies the hex when you click on that button. (i would also love to use this on the permalink button, rather than the pop up that it currently has.) i've done some preliminary googling and found some information saying that it didn't used to be possible using javascript, but now it is. but i'm NOT very fluent in javascript. i can make sense of what's going on in pretty basic lines of jquery but once it gets long or when it comes to writing it for myself my ADHD brain goes haywire.

i was hoping that someone here would be able to make sense of this and point me towards a pre-written resource that i can easily manipulate or else would be able to help me write it?
#
Yes, you can now copy content to the clipboard via javascript.

First, put this in your wrappers under <% JAVASCRIPT %>

CODE
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>


Please paste your mini profile code and I will try to integrate this for you. It will probably not work on the first few tries.

signature
email: admin@jcink.com :: blog: John C.
#
John you're an actual hero.

this is my miniprofile code:
CODE
<div class='miniprof' style='background-color: #<!-- |field_9| -->;'>
<div class='hov'>
 <!-- |avatar| -->
 <div class='overlay' style='background-color: #<!-- |field_9| -->;'></div>
 <div class='gif' style='background-image: url(<!-- |field_5| -->);'></div>
 <div class='info'>
  <h2>
   <div class='in'>
    <i class='fa fa-quote-left' style='color: #<!-- |field_9| -->;'></i>
    <!-- |field_7| -->
   </div>
  </h2>
  <h1> <!-- |field_3| --> years old. </h1>
  <h1> <!-- |field_4| -->. </h1>
  <h1> <!-- |field_6| -->. </h1>
  <h1> written by <!-- |field_1| -->. </h1>
 </div>
</div>
<a href='/index.php?showuser=<!-- |id| -->' style='background-color: #<!-- |field_9| -->; text-shadow: -1px -1px 0 #<!-- |field_9| -->, 1px -1px 0 #<!-- |field_9| -->, -1px 1px 0 #<!-- |field_9| -->, 1px 1px 0 #<!-- |field_9| -->;' class='name'>
 <!-- |field_2| -->.
 <hr />
 <b><!-- |field_11| -->.</b>
</a>
<div class='links'>
 <a href='<!-- |field_10| -->' class='hint--top hint--bounce' aria-label='development' target='_blank'>
  <i class='fa fa-user'></i>
 </a>
 <a class='hint--top hint--bounce' aria-label='#<!-- |field_9| -->'>
  <i class='fa fa-paint-brush'></i>
 </a>
 <a href='/index.php?act=Msg&CODE=04&MID=<!-- |id| -->' class='hint--top hint--bounce' aria-label='message'>
  <i class='fa fa-envelope'></i>
 </a>
</div>
</div>


additionally, this is the relevant bit of the post row with the permalink button in it:
CODE
<div class='buttons'>
  <a href="#" onclick="link_to_post(<!-- |pid| -->); return false;" class='hint--bottom hint--bounce' aria-label='permalink'>
   <i class="fa fa-link" aria-hidden="true"></i>
  </a>
  <a class='hint--bottom hint--bounce' aria-label='<!-- |post_date| -->'>
   <i class="fa fa-clock-o" aria-hidden="true"></i>
  </a>
  <!-- |delete_button| -->
  <!-- |edit_button| -->
  <!-- |quote_button| -->
 </div>


This post has been edited by max rockatansky: Oct 27 2016, 01:55 PM
#
Ok, thanks, I'll try to see if I can integrate that for you over the weekend

signature
email: admin@jcink.com :: blog: John C.
#
thanks so much!
#
ik that john is busy running the whole service lol but i would still quite like this if there's anybody else out there who can help me out?
#
Wow, that's a hand library John.

Max, it seems like all you need to do is attach the listener in your wrappers, and add the attribute to the paintbrush icon.

QUOTE
<script>new Clipboard('.fa-paint-brush');</script>

Highly recommend changing that out to target the anchor that wraps the paintbrush icon via class.

And change the paintbrush attributes to include data-clipboard-text with the field variable.
QUOTE
<a class='hint--top hint--bounce' data-clipboard-text='#<!-- |field_9| -->'>
  <i class='fa fa-paint-brush'></i>
</a>
PM
#
ok, awesome, that worked perfectly!!!! thanks so much, DustBucket.

if i wanted to have it on another thing in the miniprofile, would i just add another line inside the script tags?

CODE
<script>new Clipboard('.fa-paint-brush');
new Clipboard('.other-thing');</script>


or is there something else i'd need to do?


figured that out on my own lol but again thank you SO MUCH i'm so excited to have this working!

This post has been edited by max rockatansky: Nov 6 2016, 01:30 PM
#
You should be able to add the subsequent elements under one function, ie Clipboard('.1, .2, .3, .4')

Also, just checked your forum out: The Clipboard listener script (new Clipboard blah blah) should go in the footer of your wrappers instead of the miniprofile - otherwise you end up with like twenty iterations of the same script when you view a thread.
PM
#
lol that makes sense. thanks again!
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll