<html>
<head>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("button");
var tog = document.getElementById("toggle");
tog.onclick = function() {
if(btn.disabled) {
btn.disabled = false;
} else {
btn.disabled = true;
}
};
//btn.watch("disabled", function(prop, val, newval) { });
};
</script>
</head>
<body>
<input type="button" value="Button" id="button" />
<input type="button" value="Toggle" id="toggle" />
</body>
</html>
If you test this code, the Toggle button will successfully enable and disable the other button.
However, un-commenting the btn.watch() line will somehow always set the disabled tag to true.
Any ideas?
Because monitor function defined by watch must return new value:
btn.watch("disabled", function(prop, val, newval) { return newval; });
EDIT:
I assume you want define your monitor method without affecting the functionality of your script. That's why you have to take care of returning new value for disabled property.
Related
I was trying to make a text tool using p5.js that starts typing from where mouse is clickedkind of like photoshop or draw.io at the current time my code takes value from input field and then draws that value on canvas I am stuck as to how to do it in the way i want
function Texttool(){
this.icon = "assets/text.jpg";
this.name = "Text";
let input;
let textTyped = "";
let x, y;
this.draw = function()
{
//only 'draw' text when mouse is pressed
if(mouseIsPressed)
{
// //takes value from input box
// this.selectItem = select('#textbox')
// this.selectItem = this.selectItem.value()
// //changes size of text 'drawn depending on val value
// textSize(val)
// //value taken from input box implemented as text's string
// text(this.selectItem,mouseX,mouseY)
}
}
this.unselectTool = function()
{
loadPixels()
select(".options").html("");
//reset slider value to 20
slider.value(20)
//reset stroke weight
strokeWeight(1)
};
//makes input box for changing text
this.populateOptions = function()
{
select(".options").html
(
"<p>Write Text</p><input type = 'text' id = 'textbox'>"
);
};
}
addition file for sketch.js and index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/p5.min.js"></script>
<script src="sketch.js"></script>
<!-- add extra scripts below -->
<script src="toolbox.js"></script>
<script src="colourPalette.js"></script>
<script src="helperFunctions.js"></script>
<script src="freehandTool.js"></script>
<script src="lineToTool.js"></script>
<script src="sprayCanTool.js"></script>
<script src="mirrorDrawTool.js"></script>
<script src="stampTool.js"></script>
<script src="Shape.js"></script>
<script src="Eraser.js"></script>
<script src="Texttool.js"></script>
<script src="Drag_shape.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box header">My Drawing App
<button id="clearButton">Clear</button>
<button id="saveImageButton">Save Image</button>
</div>
<div class="box" id="sidebar"></div>
<div id="content"></div>
<div class="box colourPalette"></div>
<div class="box options"></div>
</div>
</body>
</html>
//global variables that will store the toolbox colour palette
//amnd the helper functions
var toolbox = null;
var colourP = null;
var helpers = null;
var c;
var colour = 255 ;
var slider;
var val;
var Stamps = [];
function setup() {
//create a canvas to fill the content div from index.html
canvasContainer = select('#content');
c = createCanvas(canvasContainer.size().width, canvasContainer.size().height);
c.parent("content");
//create helper functions and the colour palette
helpers = new HelperFunctions();
colourP = new ColourPalette();00
//create a toolbox for storing the tools
toolbox = new Toolbox();
//add the tools to the toolbox.
toolbox.addTool(new FreehandTool());
toolbox.addTool(new LineToTool());
toolbox.addTool(new SprayCanTool());
toolbox.addTool(new mirrorDrawTool());
toolbox.addTool(new StampTool());
toolbox.addTool(new shapetool());
toolbox.addTool(new EraserTool());
toolbox.addTool(new Texttool());
toolbox.addTool(new Texttool2());
toolbox.addTool(new Dragshape());
//slider to change size of tools
slider = createSlider (1,100,20)
slider.position(400,900);
slider.style('width', '80px');
//preloading image in sketch.js for stamp tool into an array
Stamps[0] = loadImage('assets/Star2.png')
Stamps[1] = loadImage('assets/Sword.png')
this.unselectTool = function() {
updatePixels();
//clear options
select(".options").html("");
//reset slider value to 20
slider.value(20)
//reset stroke weight
strokeWeight(1)
};
}
function draw() {
//call the draw function from the selected tool.
//hasOwnProperty is a javascript function that tests
//if an object contains a particular method or property
//if there isn't a draw method the app will alert the user
if (toolbox.selectedTool.hasOwnProperty("draw")) {
toolbox.selectedTool.draw();
}
//make variable val to hold sliders value
val = slider.value();
}
i tried to draw the input field on canvas on mouse pressed but the webapp breaks doing so
i want to add an save button with a counter
i wrote a script but its not work with greasemonkey
<button type="submit" id="save" value="Save">Save</button>
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("save");
var display = document.getElementById("displayCount");
function loadStats(){
if(window.localStorage.getItem('count')){
count = window.localStorage.getItem('count')
display.innerHTML = count;
} else {
window.localStorage.setItem('count', 0)
} //Checks if data has been saved before so Count value doesnt become null.
}
window.localStorage.setItem("on_load_counter", count);
button.onclick = function(){
count++;
window.localStorage.setItem("count", count)
display.innerHTML = count;
}
</script>
You have to add html elements with javascript since Greasemonkey is intended to run scripts over web pages.
See Basic method to Add html content to the page with Greasemonkey?
Hi i try to use the phoneGap Media object to play audio content but i'm getting this error
Uncaught ReferenceError:Media is not defined i'm getting this example of code from phonegap Documentation http://docs.phonegap.com/en/1.0.0/phonegap_media_media.md.html
I'm using the code below :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
</head>
<body>
<a href="#" class="btn large"
onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_
_rockGuitar.mp3');">Play Audio</a>
Pause Playing Audio
Stop Playing Audio
<p id="audio_position"></p>
</body>
</html>
Any idea please , thank u very much
The link u r providing for playing sound is not working properly when I am opening the link in a browser I m not able to play sound.
So kindly store ur rockGuitar.mp3 inside your assets/www folder and while playing that file provide the src of the file as
src= "/android_asset/www/rockGuitar.mp3";
newMedia= new Media(src,onSuccess1,onError);
Or provide working link in the src of sound.
This is what I am doing right now, but it does not clear the text when it gains focus, nor does it repopulate with the default text when it is empty and loses focus:
//html
<input type="search" style="color:#858585" id="numbersearch" value="Search..." />
//java script
$(document).ready(function() {
var value = $("#numbersearch").val();
$("#numbersearch").focus(function() {
if(value == "Search...") {
value="";
}
});
$("#numbersearch").blur(function() {
if(value == "") {
value="Search...";
}
});
});
HTML5 placeholder
<input type="text" placeholder="this is some text" id="test" />
jQuery if you still want (Link):
$('input[type=text]').focus(function() {
if($(this).val() == $(this).attr('defaultValue')) {
$(this).val('');
}
});
$('input[type=text]').blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('defaultValue'));
}
});
I have two panels in update panel. In panel1, there is button. If I click, Panel1 will be visible =false and Panel2 will be visible=true. In Panel2, I placed SharePoint:InPutFormTextBox. It not rendering HTML toolbar and showing like below image.
<SharePoint:InputFormTextBox runat="server" ID="txtSummary" ValidationGroup="CreateCase" Rows="8" Columns="80" RichText="true" RichTextMode="Compatible" AllowHyperlink="true" TextMode="MultiLine" />
http://i700.photobucket.com/albums/ww5/vsrikanth/careersummary-1.jpg
SharePoint rich text fields start out as text areas, and some javascript in the page load event replaces them with a different control if you are using a supported browser.
With an update panel, the page isn't being loaded, so that script never gets called.
Try hiding the section using css/javascript rather than the server side visible property. That generally lets you make whatever changes you need to the form without sharepoint seeing any changes.
<SharePoint:InputFormTextBox ID="tbComment" CssClass="sp-comment-textarea" runat="server" TextMode="MultiLine" RichText="True"></SharePoint:InputFormTextBox>
<%--textbox for temporay focus - trick the IE behavior on partial submit--%>
<input type="text" id="<%= tbComment.ClientID %>_hiddenFocusInput_" style="width: 0px; height: 0px; position: absolute; top: -3000px;" />
<%--tricking code that makes the 'SharePoint:InputFormTextBox' to work correctly in udate panel on partial podtback--%>
<script id="<%= tbComment.ClientID %>_InputFormTextBoxAfterScript" type="text/javascript">
(function () {
// where possible rich textbox only
if (browseris.ie5up && (browseris.win32 || browseris.win64bit) && !IsAccessibilityFeatureEnabled()) {
// find this script element
var me = document.getElementById("<%= tbComment.ClientID %>_InputFormTextBoxAfterScript");
if (me) {
// search for script block of the rich textbox initialization
var scriptElement = me.previousSibling;
while (scriptElement && (scriptElement.nodeType != 1 || scriptElement.tagName.toLowerCase() != "script")) {
scriptElement = scriptElement.previousSibling;
}
// get the content of the found script block
var innerContent = scriptElement.text;
if (typeof innerContent == 'undefined') {
innerContent = scriptElement.innerHTML
}
// get text with function call that initializes the rich textbox
var callInitString = "";
innerContent.toString().replace(/(RTE_ConvertTextAreaToRichEdit\([^\)]+\))/ig, function (p0, p1) { callInitString = p1; });
// register on page load (partial updates also)
Sys.Application.add_load(function (sender, args) {
setTimeout(function () {
// get the toolbar of the rich textbox
var toolbar = $get("<%= tbComment.ClientID %>_toolbar");
// if not found then we should run initialization
if (!toolbar) {
// move focus to the hidden input
$get("<%= tbComment.ClientID %>_hiddenFocusInput_").focus();
// reset some global variables of the SharePoint rich textbox
window.g_aToolBarButtons = null;
window.g_fRTEFirstTimeGenerateCalled = true;
window.g_oExtendedRichTextSupport = null;
parent.g_oExtendedRichTextSupport = null;
// call the initialization code
eval(callInitString);
setTimeout(function () {
// call 'onload' code of the rich textbox
eval("RTE_TextAreaWindow_OnLoad('<%= tbComment.ClientID %>');");
}, 0);
}
}, 0);
});
}
}
})();
</script>