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?
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 am using the code by Rick Sibley from the first answer on this post: Search within an accordion
Rick mentions that a search button can be added to run the script onclick, in addition to pressing enter to submit and run the search script. Can any body help me add the search 'button' functionality to this, please?
Thanks so much!
I figured it out! I feel like a genius - though I am obviously very bad at this.
Here's what I added in addition to the keyup event listener:
//Search Accordings; Highlight & Open Matching Areas ON SEARCH BUTTON CLICK
function searchBtn() {
var input, filter, i, acc, panels, txtValue, searchText, searchTitle;
input = document.getElementById("keywordSearch");
filter = input.value.toUpperCase();
acc = document.getElementsByClassName("accordion");
panels = document.getElementsByClassName("panel");
for (i = 0; i < panels.length; i++) {
for (i = 0; i < acc.length; i++) {
searchText = panels[i].textContent || panels[i].innerText;
searchTitle = acc[i].textContent || acc[i].innerText;
if (input.value !== "") {
if (searchText.toUpperCase().indexOf(filter) > -1 || searchTitle.toUpperCase().indexOf(filter) > -1) {
if (!acc[i].classList.contains("active")) {
acc[i].classList.add("active");
}
highlightIndex.apply(filter);
panels[i].style.maxHeight = panels[i].scrollHeight + "px";
panels[i].scrollIntoView({
behavior: 'smooth'
});
} else {
if (acc[i].classList.contains("active")) {
acc[i].classList.remove("active");
}
panels[i].style.maxHeight = null;
}
} else {
highlightIndex.remove();
if (acc[i].classList.contains("active")) {
acc[i].classList.remove("active");
}
panels[i].style.maxHeight = null;
}
}
}
}
With the following button added in html
<button type="submit" id="searchBtn" onclick="searchBtn();">Search</button>
I could not pass parameter from html page to adf jsf page. for that i used jquery .but when my jsf page get Load i got following error
"ADF_FACES-30179:For more information, please see the server's error log for an entry beginning with: The UIViewRoot is null. Fatal exception during PhaseId: RESTORE_VIEW 1." and for html page i used plsql htp package in smtp package so html link displayed in email So how i passed parameter from htp.package to adf jsfenter code here page?
My jsf Page File Code is
<af:form id="f1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["ECODE"] != null ) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>EMPCODE:</b> " + queryString["ECODE"];
$("#lblData").HTML(data);
}
});
<af:inputText id="it1" autoSubmit="true" clientComponent="true" label="To Set Path" autoComplete="on"
autoTab="true">
</af:inputText>
</af:form>
</af:document>
I am using Liferay 6.2 community, i want to create link using renderrequest. I have code like this :
<script>
for(var i = 0; i < 10; i++){
var myUrl = "<portlet:renderURL var='renderOneUrl'> "+
"<portlet:param name='action' value='renderOne' />"+
"<portlet:param name='id' value='"+i+"' /></portlet:renderURL>"+
"<a href='${renderOneUrl}'> Click to call render method</a>";
$("div.link").append(myUrl);
}
</script>
and this is for java code :
#RenderMapping(params = "action=renderOne")
public String handleRenderOneRequest(RenderRequest request,RenderResponse response,Model model){
System.out.println("akh akh");
String id = request.getParameter("id");
System.out.println("id = "+id);
//var id always received i not '0/1/2/3/etc'
return "detail";
}
My question is why value form <portlet:param name='id' value='"+i+"' /> always received i (the name of that variable), not value form that js.
The scriptlet combines server-side and client-side processing in a way that doesn't make sense. You try to use JSP tag portlet:renderURL with JavaScript variable i as parameter.
Fortunately, the portlet urls can be created in JavaScript.
<script>
for(var i = 0; i < 10; i++){
var myUrl = Liferay.PortletURL.createRenderURL();
myUrl.setParameter('action', 'renderOne');
myUrl.setParameter('id', i);
var link = "<a href='" + myUrl.toString() + "'>Click to call render method</a>";
$("div.link").append(link);
}
See Creating Portlet URLs in JavaScript for details.
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>