I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
Related
I want to write on the picture in Arabic fonts
This is the code that I did, but I could not install the Arabic library correctly
<?php
include('ar-php/src/Arabic.php');
if(isset($_POST['sub']))
{
$font = 'Almarai/Almarai-Bold.ttf';
$font1= "Almarai/Almarai-Light.ttf";
$im =imagecreatefromjpeg("certificate-1.jpg");
$name= $_POST['name'];
$output =$name.".jpg";
$msg="This Certificate is Auto Generated:". date("d/m/Y");
$textColor = imagecolorallocate ($im,0,0,0);
$Arabic = new Arabic('ArGlyphs');
$text = '$name';
$text = $Arabic->utf8Glyphs($text);
// الصورة وحجمها وموقع الخط ونوع الخط ولونه والكتابة
imagettftext($im,80, 0, 2000, 2000,$textColor, $font, ucwords($name));
imagettftext($im, 30, 0, 10, 2400,$textColor, $font1, $msg);
imagejpeg($im,$output);
header('Content-Description: File Transfer');
header('Content-Type: application/image');
header('Content-Disposition: attachment; filename="'.basename($output).'"');
header('Content-Length: ' . filesize($output));
readfile($output);
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>
موقع شهادات
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="card" style="margin-top:20%">
<div class="card-header bg-success">
<h3 class="text-center text-white">
موقع شهادات تجريبي
</h3>
</div>
<div class="card-body">
<form id="form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>الاسم:</label>
<input type="text" name="name" autocomplete="off" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="اطبع" name="sub" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to install the Arabic library, but the following error appears:
Warning: Undefined variable $Arabic in C:\xampp\htdocs\Certificate-Print\index.php on line 16
Fatal error: Uncaught Error: Call to a member function utf8Glyphs() on null in C:\xampp\htdocs\Certificate-Print\index.php:16 Stack trace: #0 {main} thrown in C:\xampp\htdocs\Certificate-Print\index.php on line 16
I want to write on the picture in Arabic fonts
This is the code that I did, but I could not install the Arabic library correctly
I want to write on the picture in Arabic fonts
This is the code that I did, but I could not install the Arabic library correctly
You are getting the error because $Arabic is null. I suspect that class name is not called Arabic ?
When I read the docs the class is called I18N_Arabic. So your line should be
$Arabic = new I18N_Arabic ('ArGlyphs');
You have too many things called Arabic for my liking - its a recipe for disaster.
I had Automated Data entry in a web page using VBA but there is a field which is hidden its only pop up if you select date more than 1 month old. While i am entering the date using VBA to it its not showing hidden field but when i am manually entering the same date its showing the hidden field where i need to mentioned the some reason.
My VBA Code
IE.document.getelementbyid("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = Sheet5.Range("B13").Value
Web Page Code
<td>Invoice Date</td>
<td><input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="lostClr(this);if(this.value!=''){return
checkDt(this,'invdt');}" onchange="check_idate()" onkeypress="return
false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility:
hidden;">Delay Reason :</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<span id="ctl00_ContentPlaceHolder1_lblreason" style="color: red; visibility:
hidden;">*Min 15 chars</span>
<input name="ctl00$ContentPlaceHolder1$btndelay_attach" type="button"
id="ctl00_ContentPlaceHolder1_btndelay_attach" class="button_1" style="border-style: none;
width: 350px; visibility: hidden;" value="Attach/Upload CGM's Approval"
onclick="return openDelay_approval()">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach"
id="ctl00_ContentPlaceHolder1_hdndelay_attach">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach_id"
id="ctl00_ContentPlaceHolder1_hdndelay_attach_id">
Before Selection of Date:
After Selection of Date:
Is the showing hidden field function in the onblur event of the first input? If so, you can use fireEvent to fire the onblur event. You could refer to my sample below.
Sample VBA code:
Sub LOADIE()
Set ieA = CreateObject("InternetExplorer.Application")
ieA.Visible = True
ieA.navigate "https://www.example.html"
Do Until ieA.readyState = 4
DoEvents
Loop
Set doc = ieA.Document
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = 11
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").fireEvent ("onblur")
End Sub
Sample HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>Invoice Date</div>
<input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="check_date()" onkeypress="return false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility: hidden;">Delay Reason:</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<script>
function check_date() {
var a = document.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").value;
if (a >= 10) {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "visible";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "visible";
}
else {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "hidden";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "hidden";
}
}
</script>
</body>
</html>
I am novice in JQuery UI. I am trying code for opening jquery dialog with image and text from existing code in one of div tags. My code is
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".peter_pic").click(function(){
$( ".peter" ).dialog( "open" );
});
$( ".peter" ).dialog({ autoOpen: false });
});
$( window ).load(function() {
$(".peter").hide();
});
</script>
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
I figured out on my own about the solution.
I added multiple img tag. This solved the problem.
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
<img class = "peter_pic" src="someimage.jpg" />
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});
My popup.html:
<!doctype html>
<html>
<head>
<form name="orderform">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
<INPUT TYPE="button" NAME="button1" Value="Read" onClick="readText(this.form)">
</form>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
console.log("In");
function readText (form)
{
TestVar =form.firstname.value;
console.log(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){
});
}
Unfortunately the above code does not print the value of a first name. Could someone please tell me what i am doing wrong here.
Your form is in the <head> section; move it in the body
don't use form.field, use the DOM id property in conjunction with document.getElementById().
Use var to define local variables; like this:
First name: <input type="text" id="firstname" /><!-- note the use of id=... -->
<script type="text/javascript">
var TestVar = document.getElementById('firstname').value;
</script>
use alert() for strings and numbers
Here's the full code:
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<form name="orderform">
First name:
<input type="text" name="firstname" id="firstname" />
<br />
Last name:
<input type="text" name="lastname" id="lastname" />
<input type="button" name="button1" value="Read" onclick="readText()">
</form>
</body>
</html>
popup.js
function readText(){
var TestVar = document.getElementById('firstname').value;
console.log(TestVar); alert(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){ });
}