We Keep Coding

Wordpress How to COPY TEXT to CLIPBOARD

I need a copy-to-text button using a font awesome icon in a div in wordpress.
I do not want any alerts. Just a simple click.
<div class="btcTXT">text</div>
<div id="cpy" class="cpy"><i class="far fa-copy"></i></div>
I am a novice so please tell me the steps I need to do.
Thank you in advance.

Give your div an id first, like so:
<div class="btcTXT" id="your-div-id">text</div>
Then write this javascript to do the trick for you!
document.getElementById("cpy").addEventListener("click", () => {
navigator.clipboard.writeText(document.getElementById("your-div-id").textContent).then(() => {
console.log('Copied to clipboard!!!');
});
});
Make sure you "enqueue/inject" your javascript to the page you're testing.
Let me know if you were able to get it to work!

What #Ruvee said is correct. You typically need to enqueue scripts on your site to make sure everything works as expected. If that isn't your cup of tea I would suggest using a plugin like Simple CSS and JS Plugin.
You can add that piece of code as a new JS file using that plugin and should work just fine.

adding sharing buttons (like "addtoany") to a single image in lightbox plugin

I have developed my own theme in wordpress using bootstrap.
I am using lightbox for image gallery and I am both trying to add sharing buttons on a single image opened in pop up,both trying to excercise a bit in using Jquery.
The single image in lightbox of course comes without the option of sharing buttons for social network.
the div that contains the image is an element to consider, and then there is the code of the snippet. i tried to do this...
$sharingButtons = $("</div>");
$sharingButtons.css({top: 100, left: 20, 'absolute'});
$sharingButtons.addClass("");
$sharingButtons.appendTo( '.lb-outerContainer' );
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id=''> )etc... (here all the snippet code of addtoany)...
</div></div>");
$('img.lb-outerContainer').css("opacity", "0.8");
the element $sharingbuttons is the div that contains the snippet...
it does not work., anyone has better ideas?
I use last version of Jquery.
thanks
Paolo
p.s. do i have to use
"Insert After" to add a div beside the lb-outer container_?
you can view my website here
http://www.paolobergomi.it/new-gallery/indoor-portraits/
if yo uclick on an image, i wish that on the right, in vertical layout..just attached to the image, appear the list of the sharing buttons
i guess insertAfter could be an option? thanks to EO
added:
I would start like this?
$("
and then add the snippet code of addtoany in the new div?
any tips? thanks
paolo

After you append your a2a div code, you need to execute the function a2a.init('page') because the addtoany script need to add your new code. First of all, insert a class a2a_target, an ID for the div and create a javascript code like above:
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id='myShareLinks'> )etc... (here all the snippet code of addtoany)...
a2a_config.target = '#myShareLinks';
a2a.init('page');
Note: a2a_config and a2a are global variables created by addtoany script.

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...

you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works

http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

jQuery product viewer

Im trying to build a simple, lightweight product viewer using jquery.
I have a default image that I want to dissapear when a thumb is clicked and replace the image in 'X' div.
Ive attached a fiddle if anybody can explain how this is done?
http://jsfiddle.net/BYuxR/3/

http://jsfiddle.net/sabri/gQyC4/
Try this
$('.thumbs a').click(function(e){
e.preventDefault();
$('.product-image').html( $('<img>').attr('src',$(this).attr('href')));
});

Answer.
http://jsfiddle.net/BYuxR/6/

how can I make a slide show repeat

I set up a slideshow for my webpage with the following script, but can't find it out how can I make it repeat. I mean I want when it go to the last photo, it will repeat to the first one again. Any one can help please:
open this link and view the code source please:
http://www.xuanyinwen.com/test2.html
Many thanks
Wayne

you can either set the number of cycles in displaymode: {type:'auto', pause:2500, cycles:[here], wraparound:false}, you should also try changing persist: true
as it will remember the last viewed slide and recall it.

HI Neo, could you have another look for my script again, its working now: http://www.xuanyinwen.com/test2.html
not sure what script should I overrided by your line: setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, 2500)
thanks

this isn't even working as you say it is. However if it was you could add following line manually to override anything:
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, 2500)