I've just setup atom and installed p5.js packages.
it is running but canvas is not visible.
sketch.js
function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
// put drawing code here
background(0);
rect(100,100,50,50);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
on running it using atom editor the canvas is not visible on the browser screen
You have to capitalize the second c in createCanvas(width, height);
You can't use canvas.style("visibility", "visible"), so remove that line
3.For future reference, inspect the page and look at the console, I found both of these things from errors.
function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}
Your html is all correct
#Hgbanana is correct. I thinks it would be better if you put your library scripts in the head tag to make sure the libraries load before the page. But it should work anyways.
I'm not sure if its because I'm trying to use a directive inside a partial but I cannot get a simple directive element click event to fire.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<tabbed-Panel1 class="bottomTabPanel">
TEST CLICK HERE!
</tabbed-Panel1>
</body>
</html>
js: DIRECTIVE
angular.module('directives', ['basemodule'])
.directive('tabbedPanel1',function() {
debugger;
restrict:"E",
return {
link: function(scope, elem, attr) {
elem.bind('click', function() {
//never gets here!
debugger;
});
}
};
});
Ok, part of the issue was formatting of tabbedPanel1 for in-markup use. So in the HTML it had to be: tabbed-Panel1
The issue regarding the click event was solved by adding: restrict:"E"
I'm building a web page where i need to make different sections and i want the page to adjust height to the section that is beeing viewed in a certain moment.
Which is the best way to achieve this?
I was trying to do it with iframes and target opening
<a href="/example" target="myframe">
but i cant make the iframe adjust to the content beeing displayed.
Any help would be aprecciated!
Thanks in advance
What i want is a window to unfold from the bottom of the page whenever someone clicks on "more info".
I thought i could achieve it with an iframe
this works in all browsers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
An iframe capable browser is
required to view this web site.
I found this solution and it solved my problem perfectly! It even has the option to rezise width.
<script type='text/javascript'>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}
if( ifDoc )
{
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
// ifRef.width = 1;
// ifRef.width = ifDoc.scrollWidth;
}
}
</script>
<iframe id = "myIframe" onload = "setIframeHeight( this.id )">
I found it here: http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height
I have an HTML page that is right-to-left. When I don't use any doctype, my numbers are in Arabic/Persian, but when I use strict mode they turn to English.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
Before adding doctype:
After adding doctype:
also I added these meta tags to my page:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fa" />
So how can I view Arabic numbers in a page with strict doctype (in IE because Firefox doesn't show Arabic numbers anyway)?
here is a little javascript code that converts a 1234 string to ١٢٣٤ string
var map =
[
"&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;",
"&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"
];
function getArabicNumbers(str)
{
var newStr = "";
str = String(str);
for(i=0; i<str.length; i++)
{
newStr += map[parseInt(str.charAt(i))];
}
return newStr;
}
You can convert English digits to Persian digits using this JavaScript code in your template:
<script type="text/javascript">
var replaceDigits = function() {
var map = ["&\#1776;","&\#1777;","&\#1778;","&\#1779;","&\#1780;","&\#1781;","&\#1782;","&\#1783;","&\#1784;","&\#1785;"]
document.body.innerHTML = document.body.innerHTML.replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map[$0]});
}
window.onload = replaceDigits;
</script>
In case you need to replace some English to Arabic numerals and not the whole HTML, pass the number you need to this function.
function toArabicNumeral(en) {
return ("" + en).replace(/[0-9]/g, function(t) {
return "٠١٢٣٤٥٦٧٨٩".slice(+t, +t+1);
});
}
Assuming you want an XHTML 1.0 Strict document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa" lang="fa" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
Here's an equivalent HTML 4.01 Strict document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fa" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
Here's an equivalent HTML5 page, just for comparison purposes.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<title>Title here</title>
</head>
<body>
<p>Text here</p>
</body>
</html>
It is very simple to view Arabic/Persian numbers in a HTML page.
I solved the same problem by changing the font name,
In my case I want to display the same character to all users
you can choose a font that contains Arabic-Hndi digits and import it using the css ( #font-face ) then simply use it,
This works fine for all major browsers (IE .. Firefox .. Chrome)
look at this result
here is the full code of the page:
<html>
<head>
</head>
<body>
<style type="text/css">
#font-face {
font-family: ArabicTwo_Bold;
src: url( ArabicTwo_Bold.eot);
}
#font-face {
font-family: ArabicTwo_Bold;
src: url( ArabicTwo_Bold.ttf);
}
div , input {
font-family: ArabicTwo_Bold;
}
</style>
<input type='text' value='هذا نص هندي 123456 ' />
<div> هذا نص هندي 123456 </div>
</body>
</html>
firefox default render number to latin
for change this setting go to addressbar of Firefox and type about:config
this page is advanced setting of firefox
find this line "bidi.numeral" and double click on it
if set value to "1" firefox for render text look at context. if text is persian render number to persian.
if set value to "4" alwase render digit number to persian
try this , hope helps you ;)
between and
<script language="JavaScript" type="text/javascript">
var replaceDigits = function() {
var map =
[
"&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;",
"&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"
]
document.body.innerHTML =
document.body.innerHTML.replace(
/\d(?=[^<>]*(<|$))/g,
function($0) { return map[$0] }
);
}
</script>
then in end of body tag insert this :
<script type="text/javascript">
window.onload = replaceDigits
</script>
This works for me, regardless of the text direction (in Chrome, Safari, Firefox and Opera):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body { direction: rtl; }
</style>
</head>
<body>
۴۲
</body>
</html>
(Omitted the content-language since that isn’t necessary here.)
If you use persian fonts like 'BNazanin' and write :
http-equiv="Content-Type" content="text/html; charset=UTF-8"
and http-equiv="Content-Language" content="fa" in meta tags.
You can then see the numbers in persian.
and if you use lang='En' in some tags in your html page the numbers in that tag will be displayed in english.
var map_format_arabic = ["&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;", "&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"];
$.each( $('.format_arabic'), function () {
var n=$(this).text().replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map_format_arabic[$0]});
$(this).html(n);
});
This code supports one or multiple digits of an English number which can be converted to Arabic number:
function toArabicNumber(enNum) {
if(isNaN(enNum) || enNum == null){ // Check if not a number or null
return enNum;
}
if(typeof enNum == 'string'){ // if it is a string(number) convert it to number
enNum = Number(enNum);
}
if(enNum < 10){
return "٠١٢٣٤٥٦٧٨٩".substring(enNum, enNum+1);
}
else {
let result = "";
enNum = enNum + ""; // convert number to string
for(let i = 0; i < enNum.length; i++){
let num = Number(enNum[i]); // convert digit by digit to number
result = result + "٠١٢٣٤٥٦٧٨٩".substring(num, num+1);
}
return Number(result);
}
}
just specify a persian font like 'B yekan' to them.
all troubleshoots will be solved.
Please can someone tell me why this isn't working before I defenestrate everything on my desk.
I have the following html document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8 />
<title>Sample Gauge using JQuery</title>
</head>
<body>
<canvas id="gauge" width="200" height="200">
Your web browser does not support HTML 5 because you fail.
</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gauge.js"></script>
</body>
</html>
And gauge.js:
$(document).ready(function () {
//(canvas gets assigned)
startRendering();
function startRendering() {
setInterval("render();", 1000);
}
function render() {
renderBackground();
renderNeedle(-172);
}
//(Defined functions for rendering a gauge)
});
render() does not get called, but if I change the setInterval line to just 'render()' it does.
Also, if I change setInterval() to contain something like "alert('LOL')" then it does work, it just doesn't seem to work with functions I have defined.
With or without a semicolon at the end of the function(s) to call makes no difference, nor does prefixing this. to my functions.
I'm trying to get this working so I can start using it to animate the gauge. Can anyone see why it isn't working?
I hate web development.
Change
setInterval("render();", 1000);
To
setInterval(render, 1000);
When you pass a string to setInterval(), the code inside is executed outside of the current scope. It's much more appropriate to just pass the function anyway. Functions can be passed around just like any other variable if you leave the parenthesis off.
I'm not sure why using just "render()" doesn't work but using this code will fix the problem.
function startRendering() {
setInterval(function(){
render()
}, 1000);
}