cannot run this code ... php textarea is showed but only one click and everything is disappear
Note:the page is positioning by anchors and words in "{}" are tags.
On оne page I am trying to put more than one ACEtextarea
(jQuery function is just a thought)
<div id="{id_area}" style="width:100%;height:165px; position:relative; background:#fff;" class="">
{text}
</div>
<input type="hidden" name="{name}" id="{id_area}-textarea"/>
<script src="{dir}/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/theme-crimson_editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/mode-php.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor_{id_area} = ace.edit("{id_area}");
editor_{id_area}.setTheme("ace/theme/crimson_editor");
var {id_area}_Mode = require("ace/mode/php").Mode;
editor_{id_area}.getSession().setMode(new {id_area}_Mode());
jQuery("#{id_area}-textarea").val(editor_{id_area}.getSession().getValue());
};
</script>
Related
First of all: It's my first time using javascript.
I wanted to implement the Before/After Plugin into Powerpoint. So I created a html file that I loaded with a webbrowser object in Powerpoint. That worked basically but the plugin requires me to define the height and width statically for the pictures I use:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container">
<div><img alt="before" src="pics1/before.jpg" width="3696" height="1583" /></div>
<div><img alt="after" src="pics1/after.jpg" width="3696" height="1583" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
</script>
</body>
</html>
So I wanted to implement the function that the size is statically defined but determined once in the beginning by the size of the screen. After experimenting a bit I found a solution that works partly:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* <![CDATA[ */
var wi=screen.availWidth-20;
var img1=document.createElement("img");
img1.alt="before";
img1.src="pics1/before.jpg";
img1.height=wi*img1.height/img1.width;
img1.width=wi;
document.getElementById("container").appendChild(img1);
var img2=document.createElement("img");
img2.alt="after";
img2.src="pics1/after.jpg";
img2.height=wi*img2.height/img2.width;
img2.width=wi;
document.getElementById("container").appendChild(img2);
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
/* ]]> */
</script>
</body>
</html>
The problem now is/are following:
Firefox: Does not load the pictures at the first time but after refreshing it works perfectly.
IExplorer: It does not show anything.
Chrome: It does not show aynthing.
Powerpoint WebBrowser: It does not show aynthing.
I already tried to fix by the "$(document).ready(function() {..." part but it does not help at all.
What's wrong here?
It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
test.html:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<div id="box">
</div>
</body>
</html>
and app.js:
require(["domReady"], function (dom_ready) {
dom_ready( function () {
document.getElementById('box').innerHTML = 'test';
});
});
I dropped the require.js and domReady.js files in the same directory:
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js
http://requirejs.org/docs/release/2.1.11/minified/require.js
My browser does not display the "test" string in the webpage when I open it (tried with FF and chromium).
However, the "test" string is displayed if I add an empty tag:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<script type="text/javascript"></script>
<div id="box">
</div>
</body>
</html>
What did I miss ?
Close the script-tag properly.
<script type="text/javascript" data-main="app" src="require.js"></script>
As jspdf does not support utf8 characters, I'm trying to replace some of the characters with images and then export it in pdf. To help you understand, I made the sample of code, where I try to put an image in html div, and then paste this into the pdf with jspdf. The text appears in pdf, but no image, so whats the issue? I am a beginner, so please explain me how to do this.
TRY THIS LINK AND SEE THE PROBLEM: http://www.balkanex.info/test/start.html
And the code is below:
start.html
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="runner.js" charset="utf-8"></script>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
</head>
<body>
<input type="button" id="btn" value="PROCEED TO THE NEXT PAGE" onClick="run();pdf();">
</body>
</html>
runner.js
function run() {
document.write('<div id="myid">This is the image: <img src="button.png" alt="Submit"> </div><br/>');
document.write('<button id="pdf">Export in pdf</button></div>');
}
script.js
function pdf() {
$(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}};
$('#pdf').click(function () {
doc.fromHTML($('#myid').html(), 15, 35, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample.pdf');
});
});
}
The library you use jspdf does not support some of the utf-8 letters, so I suggest you to use some other lib (like Mozilla's pdf.js) and avoid these problems.
If you, on the other hand, decide to use this one - then I you will have to make an array for each variable that saves the string and then replace chars with images.
I downloaded jQuery UI 1.10.3.
And it comes with an older version of jQuery which is 1.9.1.
And I have a later version of jQuery: 1.10.2.
But jQuery UI seems does not like to work with 1.10.2...
Is there anyway to make it works?
Or I should just live with it..
<script src="js/jquery-1.9.1.js"></script>
<!--
<script src="jquery-1.10.2.min.js">
-->
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
<script src = song_Selector.js>
</script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
Codes are above, without the <html> tag.
When you are loading the script, you've forgotten the end tags, and you've also forgotten your <head> tags if this is the whole document:
<!-- <script src="js/jquery-1.9.1.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src = song_Selector.js></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
What happened was actually the following when you uncommented jQuery 1.10.2:
<script src="jquery-1.10.2.min.js">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
As any text inside a <script> tag is ignored with an src attribute set and will not be parsed, this will not be loaded.
Before, it would have worked fine as it would have simply been the following:
<script src="js/jquery-ui-1.10.3.custom.js">
</script>
</script>
... with the text inside the tag being ignored, as there is a src attribute (with this having no effect).
you can this by function load script
function loadscript(url){
var doc = document.getelementbytagname("head");
var script = document.createlement("script") ;
script.url = script
}