Wordpress How to COPY TEXT to CLIPBOARD - javascript

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.

Related

How do I use typed.js without jquery or needing a main.js file?

Not too experienced w/ HTML and was wondering how to use typed.js in just HTML/CSS, without any JS at all. I've downloaded a typed.min.js into my site root and was wondering how to actually set it up with strings, any help appreciated :)
I've already seen this: Typed.js installation without Node.js - and would like to know how to set it up if possible with a simple div/h2 tags
infact it seems i was being stupid, thanks for the help!!
You have to first include the library then include a script after that to actually use it. Normally you would do this at the verry bottom of your page.
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.9"></script>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
Then somewhere on your page where you want to use it...
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
The docs explain this pretty well near the bottom for static HTML
https://github.com/mattboldt/typed.js/
Simply just include the library by referencing the script from their website, then inside a <script> tag, define a new var with var or let and use it as described in the docs (see below);
var typed = new typed.js
var typed = new Typed('.element', {
strings: ["First sentence.", "Second sentence."],
typeSpeed: 30
});
------------
// then where you want to use it,
<div id='coolStrings'>
// stuff inide here
<div>
https://mattboldt.com/demos/typed-js/ - here's the docs

How to dynamically load generated html with javascript?

I am making a website using HTML, CSS and Javascript. What I'm currently trying to do is making a Javascript that simplifies the way to add more 'items' to a website. For example a store item. Please see http://nl.tinypic.com/r/t5khtf/9.
Those are 3 items that I am adding in this Javascript. However, it keeps telling me that the items are UNDEFINED...
Here is the code from the JavaScript http://pastebin.com/hjL9MByY.
Here is how I load it into a div:
<div id="store_beatles_eps"></div>
How do I fix this?
Any help would be very much appreciated.
If I made any mistakes in the question, please report that to me and I'll change it :).
You use wrong variable. Instead of this:
function generateStoreItem(item)
...
r = r.replace("{{page}}", store_beatles_eps.itemPage);
you should have
function generateStoreItem(item)
...
r = r.replace("{{page}}", item.itemPage);
And yet, while ago I did simple repeatable() jQuery plugin for that purpose:
https://github.com/c-smile/repeatable

jQuery + Modernizer - Do not display a div if javascript is disabled? (See Code)

I am trying to enhance the menu of my website a bit by making use of the jQuery accordion plugin:
http://jqueryui.com/accordion/
This works perfectly fine and i think that it is a great plugin to make use of... However, i have noticed that it requires a specific layout in order to achieve these results:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
ETC...
</p>
</div>
NB: repeated for every result
</div>
Now this is a bit of a problem in that when javascript is disabled, the entire output of this menu is displayed (all categories and containing information).
This is simply too much information to be output all at once and this is the reason that it has been broken up with PHP in the first place. In essence it would look like this:
// No category selected
* Fruits
* Vegetables
// Category selected
o Fruits
- Apples
- Oranges
* Vegetables
// Javascript Disabled
o Fruits
- Apples
- Oranges
* Vegetables
- Potatoes
- Onions
So what i would like to do, is provide an alternate means of navigation for users that have disabled javascript (the old menu that is fully functional and works regardless).
I currently make use of a few options in modernizer:
http://modernizr.com/
To increase browser support on some CSS properties i have used. I am aware that it can be used to detect if javascript is enabled by appending a class "js" to the body tag.
So with that, i decided to try and wrap the old menu within a containing div, and the new menu within a containing div. My idea is that i can then these divs with display: none;.
Before i carry on, i am really just guessing here so if i am going about this the wrong way... I would appreciate it if someone could point me in the right direction. With that out of the way, i found an article on stackoverflow that relates to this:
PHP & <noscript> combination to detect enabled JavaScript in browser
And with my very limited knowledge of jQuery have adapted it slightly to fit what i hope to achieve:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
</script>
Now the problem I am facing is that i cannot seem to get this script to register or make any visible difference. When i look at the body tag in the source there is no class on the body tag. The menu is not triggering as i thought it would and i am now after quite some time... Very confused.
If anyone could offer me some assistance, advice, information or indication that would help me to solve this current issue, i would really, REALLY appreciate that!
Thank you for taking the time to read through my line story! :)
EDIT:
#RomainPaulus suggested this and it works:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
})
</script>
Kenneth's response explains a lot, but I have noticed something else. Your code
var useJS = $("body").hasClass("js");
is executed before
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
You should put everything inside the $(document).ready(function(){ ... })
So I guess that explains why your code doesn't work.
The problem you face here is that, obviously when Javascript is not enabled, you're Javascript is not executing.
What you need to is hide the DIV by default with CSS. Then, when your page loads, show it through JS.
Javascript disabled => Div stays hidden, because no code is executed
Javascript enabled => div is hidden on load, but the script shows it
Also, if Javascript is disabled, Modernizr won't help, since it's a JavaScript library.

Adding part of the text from Textarea colored/highlighted somehow

Well, I would like to hightlight part of the text in a textarea tag, like facebook does it when you are linking someone in your status update. how do I do that?
Thanks in advance.
What facebook do is they have a div sitting under the textarea which updates on keyup on from the textarea, which can obviously use tags and css to change how the text looks, they wrap the highlighted words in b tags which have background: lightbluecolor; font-weight:normal
So your markup would look something like this
<div class="highlight">
hi <b>Dave<b> how are you?
</div>
<textarea></textarea>
.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }
$('textarea').keyup(function(){
// do stuff with detecting the mentions but essentially:
$('.highlight').html($(this).val());
})
You're going to need the help of Javascript to do this. Because the solution is, I believe, a bit too complex for this Q&A site, I would suggest Googling tutorials, for example: http://www.developphp.com/view.php?tid=1192. There are also some great examples for you to examine: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
Use this jquery plugin http://plugins.jquery.com/project/htmlArea
from the website
With this very basic plug-in, you can allow any HTML inside a textarea
- with full jQuery UI Theme support.
It's as simple as $("TEXTAREA").htmlArea();
There are many options you can set, the colour of the text, position,
show formatting options etc. etc.
$("TEXTAREA").htmlArea({color:'#FF00FF',align:'right'});
If jQuery is in your stack, this plugin should do the trick for you:
https://github.com/mistic100/jQuery-highlightTextarea

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!

Categories