ZeroClipboard - How to use - javascript

I'm using this one http://jonrohan.github.io/ZeroClipboard/
I spent this whole day figuring out how to use ZeroClipboard(ZC). I even read the instructions: https://github.com/jonrohan/ZeroClipboard/blob/master/docs/instructions.md
and followed it step by step and couldn't do it.
I tried again and again and again but I just can't get it to work. I even spent hours reading other guides at stackoverflow and other pages both just couldn't get this to work. Moreover, most of the answers are outdated.
Can anyone please write a simple working ZC code that copies a paragraph tag:
<p>Hello, I'm Armesh</p>
Then just tell me simply each part of the ZC code and why you wrote it that way.
I plan to use ZC to copy references generated by my generator: http://anonoz.com/armesh/
This is the code I wrote, all link references are correct:
<!DOCTYPE HTML>
<html>
<head>
<title>Zero Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="javascripts/ZeroClipboard.js"></script>
</head>
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "javascripts/ZeroClipboard.swf"
});
});
</script>
<body>
<button id='#copy_button' data-clipboard-target='to_copy'><b>Copy To Clipboard</b></button>
<p id='to_copy'>123456</p>
</body>
</html>
I also ran the code/web page above in Google Chrome, there are no errors log in the console. It's blank.

Ok I got it working, I also think the code posted above by me is correct.
The problem was that I was testing on local, and browsers usually prevent flash from running locally. This is what caused it to fail despite the code being correct.
As a last resort, I uploaded to my web server and tried online, it worked fine.
So, always test ZeroClipboard online after uploading it to your Web Server.

There is a Bug in your Code!
Look at the button id-attribute and delete the '#' !
And:
If u want more than 1 Clipboard Button on the current Page use the class attribute instead of id.
It works fine now! ;)

You can test ZeroClipboard locally by adding the port 3000.
e.g. http://localhost:3000

Related

js code working in console but not in vs code

I'm a beginner, learning js. I was doing a course and the task provided was that to pop an alert when the button is clicked. Pretty Ez but everytime somehow the code just doesn't works even when I typed the code seeing the solution. Checked pretty much everything within my knowledge but couldn't figure it out. while trying the same thing in another computer, it worked without any problem :/Here's the code
Window.alert is not native JS. It is a Web API method, meaning your browser source code implements it.
If you're running, say, a Node.js environment in VSCode's console, then it shouldn't really work. Node doesn't implement it either.
I have made an example here on a code pen: https://codesandbox.io/s/buttontoalert-fs1kz3
What you need to do is create an index.html that is importing the script you want to run.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button>Click Me</button>
<script src="src/index.js"></script>
</body>
</html>
Then in your index.js file which is the script you are importing in the html file the code is:
const button = document.querySelector("button");
button.addEventListener("click", () => alert("I was clicked"));
These two file need to be in the same directory or you need to update the file path to where the js file is located relative to your html file.
The commands you are using a relative to a browser so need to be run with a browser or will not work.

nicedit tool works fine on my localhost, but when uploading the site to the cloud it doen't work

I have installed Nicedit tool to convert <textarea> into richtext box on my pages by adding the following code as per their instructions on their website:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
However textareas got convereted (Nicedit worked fine) ONLY on my localhost Xampp, but when i uploaded the pages online, everything works fine except for the Nicedit, it doesn't work at all.
Please note that no error messages appeared, nor with textareas the issue is that textareas appear plain just like the standard, like if I didn't install the Nicedit.
Note: I have tried the following code as well since I've seen it as an example on their page, but it doesn't work also.
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>.
PHP version used online is 5.6, if this would be useful info.
Since I couldn't find the reason to fix the issue that I have, I've found another tool created by the same programmer of Nicedit, it's name is CKeditor.
it's really nice, however browsing the website would take you into the direction of downloading and using JS code from your site, but I have found the following way to let it work as CDN.
First in the <head></head> tags copy the following:
<script src="https://cdn.ckeditor.com/4.7.1/basic/ckeditor.js"></script>
then inside <body></body> copy this code (presuming text1 is the name arttibute for the <textarea> that you want to convert.
<script>
CKEDITOR.replace( 'text1');
</script>
Hope this would be helpful for everyone.

Using JQuery 1st Time

I'm referencing it as it says on w3schools and this website
<head>
<script>
src = 'C:\path...\jquery-1.11.3.js';
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
I compile and open on chrome but when I click any of those 3 messages they don't disappear =P
External scripts are loaded with the src attribute, like this
<script src='jquery-1.11.3.js'></script>
The path to the file should be referenced using paths relative to the root of your application, not the map structure of your system.
Put the src tag in the script tag:
<script scr="C:\path...\jquery-1.11.3.js">
P.S. Always use double qoutes!
P.P.S. If you still can't figure it out, go to the console and look for any errors.
Also: prepare to get very familiar with the "Developer" tab in your browser ... particularly the "JavaScript console." When a JS program encounters any sort of error, the browser's usual response is to "simply stop ... silently." And, if there's any sort of syntax-error, to "silently" issue a warning or error message to the JavaScript console (which ordinary users never see).
Any of these things can produce the result that you now see, namely: "nothing happens."
It can be quite frustrating, really . . .
The problem was in the path, not sure if any of the answers above because what I did was copy paste what they had and tried it without my messy code, and it worked. Then I linked the online Jquery library as oppose to linking what I had in the folder and it worked, then I fixed the path I had. Maybe it was the quotes, not sure now. Thanks anyways. (I wasn't getting errors below in the debugger box =P)

Getting Started With AngularJS and IntelliJ IDEA

Hello I'm trying to learn Angular.js and IntelliJ IDEA. I was wondering can someone tell me what I'm doing wrong. I'm trying to do a simple hello world example from a book, but it's not working for me in the IDE. I'm not sure whats really sure why it's not working, but to start the project I downloaded the AngularJS plugin. I went to the project location using the command line and did bower install angular, and copy and pasted the example from the ng-book for hello world, but it's not working for me. I tried to add the path to the html and it still didn't work. Can someone help me out?
you can see the working version of your work:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
</head>
<body ng-app="exampleModule">
<input ng-model="dynamicName" type="text" placeholder="write your name here">
<p>Hello {{dynamicName}} !</p>
<script>
angular.module('exampleModule', []);
</script>
</body>
</html>
I dont know is you address angular correctly or not, but you need a module for your code, even an empty one like what I've just put in the script tag.
Option 1 - Move the ng-app directive to body tag of the page.
Option 2 - It could be possible that browser is rendering a cached page which had errors. Can you force refresh to GET the latest files? In most modern browsers user CTRL+F5.
Option 3 - Use the developer panel of the browser and force reload the page and notice any error.
The problem is with the file read/write permissions on your localhost file.Go to the bower_components file in your finder, right-click ->get info. Scroll down in the info window to the permissions section and change sharing and permissions to Everyone - Read/Write.
Then click the Cog drop down and select the option Apply to enclosed items
Hope this helps.
You are trying to invoke the angular file from wrong path
replace with following
<script src="../bower_components/angular/angular.js"></script>

Having trouble getting list.js to work

So I am new to using JS and I have looked over the list.js site and can't seem to figure this out. I can't even get the demo to run on my server. I can get my code to work on web based places like Encode and what not, but not my server.
http://brewingbard.biz/smm/test/main-list2.html
Can someone please tell me why this is failing? I copy stuff that works in one place and put it up here and then it stops.
Your code is running before the <div id="users"> exists.
Therefore, it has nothing to operate on.
Move the invoking script block below the element.
<script src="list.js" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Each <script> tag can only have one src.
You need to load each script in its own element.

Categories