I am building a website in html, php, javascript, etc. In that I want to add a specific button, after button clicked the words from input box should get copied into clipboard. I have tried by using Zeroclipboard but I could not.
I have used the following code and added jquery.zclip.js and jquery-1.8.0.min.js to the same directory. Welcome for any suggestions.
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style>
#dynamic { font-size: 15px; height: 28px; width: 357px; }
</style>
<script>
$(document).ready(function(){
$("a#copy-dynamic").zclip({
path:"ZeroClipboard.swf",
copy:function(){return $("input#dynamic").val();}
});
});
</script>
</head>
<body>
<input type="text" id="dynamic" value="Copy me !!" />
Copy Now
</body>
I recently had to deal with ZeroClipboard; the docs are not the greatest.
First you need to add the source script to the head of your html document:
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>
I used a CDN, but I'm sure it works fine if you have a local copy.
Then in your javascript, in global scope:
ZeroClipboard.config( { swfPath: "whateverpath/ZeroClipboard.swf" } );
Then you need to bind the swf to the element you want to use to trigger copying:
var copyButton = document.getElementById('thingThatCopies');
var copyclient = new ZeroClipboard(copyButton); //can be array
It should work from there, but in case you want to add a user notification, there are some events you can work with:
copyclient.on("ready", function(readyEvent) {
//is ready
copyclient.setText(window.location.href);
//in this instance, set the text to copy to the url of the current page. You can set it to anything with this function
copyclient.on("aftercopy", function(event) {
//copied
//this is the place to add a user notification
}
}
Hopefully that gives you enough of a start to adapt it to your project.
Related
<html>
<head>
<title>Website</title>
</head>
<style>
#square{
width: 50;
height: 50;
background-color: red;
}
</style>
<body id="body">
<script>
var picker = document.getElementById("square")
var color = document.getElementById("colorBox").value
function onClick(){
document.getElementById("body").style.backgroundColor = color
}
</script>
<input type="color" id="colorBox"/><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
</body>
It produces the error which is the title.
There is no issues with layout. Just the 15 lines.
Look, I don't know what to put here.
It's because your element with ID colorBox is defined after the script. This means that when the script runs, it cannot find the element. If you move the script tag below your element definition, your code will run properly.
Note, I think another issue with your code is that you compute the value of color before your onClick function, so it will always set the background color to black when you click the button. If you move the color definition to inside of the function, it will be recomputed every time you click the button, giving what I believe is the desired result:
<html>
<head>
<title>Website</title>
</head>
<style>
#square {
width: 50;
height: 50;
background-color: red;
}
</style>
<body id="body">
<input type="color" id="colorBox" /><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
<script>
var picker = document.getElementById("square")
function onClick() {
var color = document.getElementById("colorBox").value
document.getElementById("body").style.backgroundColor = color
}
</script>
</body>
Your script is scanning the document for your colorbox element before it has encountered that HTML. Move the script to just before the closing body to only run it after all the HTML has been parsed.
And while this will solve your most immediate problem, you'll find that there are still other problems, so see my second example for that solution.
<body id="body">
<input type="color" id="colorBox"/><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
<script>
var picker = document.getElementById("square")
var color = document.getElementById("colorBox").value
function onClick(){
document.getElementById("body").style.backgroundColor = color
}
</script>
</body>
Now, with that fixed, there are several other items that need attention:
Nothing is allowed to go after the closing head tag and before the
opening body tag. The style element should go inside of the
head.
In CSS, most of the time you must place a unit of measurement after
an amount, so your height and width of 50 won't work unless you add
something like px, %, em, etc.
Don't set your variables equal to properties of elements. Set
variables to the elements themselves. Your code gets the value of
the input before the user has selected a color, you need to set
the color after they've chosen. By only getting the element reference
up front, you can then easily get the current value of that element
at just the time you need it.
There is no need to give body an id so that you can reference it
later. A document will only ever have one body and it is accessible
via document.body.
Don't use HTML event attributes (like onclick) to set up your
events. Instead, do your event handling separately, in JavaScript.
Don't use self-terminating XHTML syntax. It buys you nothing and
opens the door to bugs.
Lastly, get your element references just once, not inside of your
event handler because every time that function runs, it will scan the
document again for the same element it already found earlier.
So here's your code again, with these tips applied:
<!doctype html>
<html>
<head>
<title>Website</title>
<style>
#square{
width: 50px; /* In CSS, you must also put a unit next to an amount */
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<input type="color" id="colorBox"><br>
<button>Change</button>
<div id="square"></div>
<script>
// Get your element references, don't get references to element properties
var body = document.body;
var picker = document.getElementById("square");
var color = document.getElementById("colorBox");
// Set up your event handlers in JavaScript, not HTML
document.querySelector("button").addEventListener("click", onClick);
function onClick(){
// Set the color of the body to the current value of the input
body.style.backgroundColor = color.value;
}
</script>
</body>
</html>
There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>
basically what I want is simple, when people onclick, the field become editable.
After they change the value, press Esc at keyboard/ or click outside , to save the record.
I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work?
The documentation page: http://www.appelsiini.net/projects/jeditable
Here I post my existing code here for guys to review.
testing.html
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".click").editable("jeditabletest.php", {
indicator : "<img src='indicator.gif'>",
tooltip : "Click to edit...",
style : "inherit"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
.editable input[type=submit] {
color: #F00;
font-weight: bold;
}
.editable input[type=button] {
color: #0F0;
font-weight: bold;
}
</style>
</head>
<body>
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should
</body>
</html>
jeditabletest.php
<?php
echo "hehehe"
?>
does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.
To enable submitting the form when user clicks outside do the following:
$(".editable").editable("http://www.example.com/save.php", {
onblur : "submit"
});
Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:
/* discard changes if pressing esc */
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
reset.apply(form, [settings, self]);
}
});
yeap: i recommend http://valums.com/edit-in-place/
It uses div's contentEditable property. You may want to look into that before you start using it.
jrh
I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html.
The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.
Hope this helps!