Why is this jquery image watermarking plugin not working? I am using the code from the official plugin website.. from here When i see the source code of the demo website they have used js/jquery-watermarker-0.3.js. but i cannot find this plugin online anywhere? how come this works for them in the demo. Please help.
<html>
<head>
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
<script type="text/javascript" src="js/jquery-watermarker-0.2.js">
<script type="text/javascript">
$().ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
<style type="text/css">
div.watermark
{
border:1px dashed #000;
}
img.watermark:hover{
cursor:move;
}
</style>
</head>
<body>
<img src="1.jpg" id="watermarked" />
<form method="post" action="phpScriptToMergeBothImage.php">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value="" />
<input type="text" id="w" name="w" value="" />
<input type="text" id="h" name="h" value="" />
<input type="submit" name="save" value="Ok >" />
</form>
</body>
</html>
Make sure you've downloaded the plugin from the site (here) and included the scripts in your file. In the code you supplied above, it looks like you should have a folder called 'js' that contains 'jquery.js', 'jquery-1.4.2.min.js', 'jquery-ui-1.8.6.custom.min.js' and 'jquery-watermarker-0.2.js'. If this is true, the plug-in is loaded.
Next, make sure that you also have the images '1.jpg' and 'a.png' in your root folder, where '1.jpg' is the background image and 'a.png' is the image you want the watermark to be. If they don't have those names, change the names in the plug-in code to match the name of the images that you're working with.
Your first line should either be $(function) or $(document).ready(function):
$(document).ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
$() Used to return a jQuery collection containing document in 1.3.x but this was changed in 1.4 to return an empty collection.
Also, your script tags need to be closed </script>
A nice watermark plugin can be found here.
Simply call it using the following:
<script type="text/javascript">
$(document).ready(function () {
$("#textbox1").WaterMark({
waterMarkText: "Watermark text"
});
});
</script>
<input type="text" id="textbox1" name="textbox1" />
There is also an example for use with textareas there too.
Related
JQuery Part
I just started using JQuery. First I wanted to create a a input box with an button that alerts the text that is in that box. This is the way I wanted to do that.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
That is the code in the html body part. Here im not sure if I have to declare the id with an # or not. I tried both but It didnt work for both.
My Code
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> $(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); }); </script>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button> </body>
</html>
I am really new to JavaScript and Jquery. When I run this code there are no errors or something like that in the console just blank. The Button and Input field are on the website but when I enter something and click the button after that nothing happens. That´s why im sure there are some mistakes in that code.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="term" type="text" value="enter your search" />
<button id="hit" type="button" name="Button">Search</button>
here has worked, do you have imported a jquery library?
Resolution with your code:
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); });
</script>
</body>
</html>
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
I'm using Firefox's addon-sdk to create addons for Firefox browser.
I need to copy text from textbox element to clipboard in popup.html file. I don't want to use flash to copy text to the clipboard.
popup.html
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script> <!-- Including jQuery -->
<script type="text/javascript" src="const.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
</script>
</head>
<body style="font-family:Tahoma, Geneva, sans-serif;line-height:30px;width:250px;">
<form >
element Id : <input type="button" onclick="copy($('#idElem').val())" class="btn" value="copy"/>
<input type="text" id="idElem" value=""/><br/>
element class name : <input type="button" class="btn" onclick="copy($('#classNameElem').val())" value="copy"/>
<input type="text" id="classNameElem" value=""/><br/>
element xpath : <input type="button" onclick="copy($('#xpathElem').val())" class="btn" value="copy"/>
<input type="text" id="xpathElem" value=""/><br/>
</form>
</body>
</html>
And popup.js file is :
$(document).ready(function () {
addon.port.on("vars", function(vars) {
if (vars){
$("#idElem").val(vars[0]);
$("#classNameElem").val(vars[1]);
$("#xpathElem").val(vars[2]);
}
});
});
How can I do it?
You'll first have to get the textarea value with a panel content script, then use message passing to pass that to the add-on process, then use the "clipboard" module to save that value to the clipboard.
I cannot figure out why this isn't working. It's a JQuery search box that uses the Freebase API to find games. When I POST, the gameID and gameName are blank.
<link type="text/css" rel="stylesheet" href="http://freebaselibs.com/static/suggest/1.3/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://freebaselibs.com/static/suggest/1.3/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fbSelect", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
</script>
<form name="input" action="/game-profile" method="post">
<input class="search-box" name="fbSelect" type="text" id="game-search"/>
<input type="hidden" name="gameID" id="game-id" />
<input type="hidden" name="gameName" id="game-name" />
<input class="button" value="Go" type="submit"/>
</form>
I grabbed your code and changed the hidden fields to type="text" just so I could see the data when a selection was made from the auto-complete. The fields weren't being populated on select, so I took a quick peek at the API.
It looks like the event you should be binding to is fb-select rather than fbSelect a la:
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fb-select", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
It doesn't look like the fbSelect event you're binding to, ever gets fired. Have you included all required code parts for this to work?
(Answered retrospectively via comment on original question. #borkweb is more correct.)