I'm trying to load in image in Javascript that's on my computer, so that I can make a sprite for a game. I don't have this html on the web yet, and the image is saved locally on my computer. Is this possible to do as the book I'm learning from loads the image from a folder, but I'm unable to load the image. Heres some of my code. Thanks,
$(document).ready(function(){
var params ={
images: 'C:\EclipseWorkspaces\WebTest\images\Luigi.png',
imagesWidth: 256,
width: 64,
height: 64,
$drawTarget: $('#draw-target')
};
var sprite1 = DHTMLSprite(params),
sprite2 = DHTMLSprite(params);
sprite2.changeImage(5);
sprite1.draw(64,64);
sprite2.draw(352, 192);
});
</script>
</head>
<body>
<div id="draw-target">
</div>
</body>
You cant access to HD with Javascript. It would be security violation if you could so.
You can load the image in three ways.
1 You can use an image from the web
2 Use a server side program to load the image, and then pass it to your client side javascript.
3 You can do that with relatives path (../images/myImg.png)
Take a look at this article in Wikipedia:
http://en.wikipedia.org/wiki/JavaScript#Security
Make the image path relative to where you store your html file. For instance put your index.html in c:\temp and create a folder c:\temp\img and put all your images in there. Then you can reference the images as img/imagename.jpg
Related
I am trying to change the loading logo of babylon js however all the tutorials and documentation I found on the official website are not working for me.
I am using a basic babylon viewer using
<babylon id="babylon-viewer" model="mymodel.gltf" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
and some other javascript to control the camera.
I believe there is a simple way how to just change the loading-image, but cannot figure it out!
Regards and thanks
To change the default values of the babylon viewer's loading screen, you will need to modify the loading screen's template.
The configuration object looks like this:
loadingScreen: {
html: loadingScreen,
params: {
backgroundColor: "#000000",
loadingImage: images.loading,
staticLoadingImage: images.staticLoading
}
},
Just as you changed the fillScreen's parameter of the main template, you can change on of those 3 parameters - background color, loading image, and (better - OR) static loading image. Something along the lines of this:
<babylon id="babylon-viewer" model="mymodel.gltf" templates.loading-screen.params.loadingImage="http://LINK-TO-IMAGE" templates.main.params.fill-screen="true" observers.on-scene-init="globalSceneInitCallback"></babylon>
or:
<babylon id="babylon-viewer" model="mymodel.gltf" observers.on-scene-init="globalSceneInitCallback">
<templates>
<loading-screen>
<params loadingImage="IMAGEURL">
</params>
</loading-screen>
</templates>
</babylon>
I have some problems with including an PDF on an JSF site. I'm using pdfobject (http://pdfobject.com/) but it does not work out the way I want. I can't adjust my settings for my desired outcome, where there is a unscrollable, scaled document (so that it fits the frame) shown in a frame with width = 595px & height = 842px. I tried until now:
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function() {
var myPDF = new PDFObject({
url : "ls_v7.pdf",
width: "595px",
height: "842px",
pdfOpenParams : {
page: 1,
view : 'FitB'
}
}).embed("pdf");
};
</script>
[...]
<div id="pdf">
It appears you don't have Adobe Reader or PDF support in this web
browser. Click here to download the PDF
</div>
or also
<object data="ls_v7.pdf#page=1&view=fitH"
type="application/pdf" width="595" height="842"> </object>
I think I tried most of the cases mentioned in this document, but where not able to come up with the right solution. (The oucome is always a frame with scroll-bars & the PDF gets always shown in full size)
Some background information:
I first included an PDF with iFrame on a JSF page, what went very well. But the Problem is, that on IE8 (some of the client machines) does not show them. So I went to this approach, if you would suggest to try another framework/etc. I would be also very greatful.
it's best to use CSS to specify exact size of the wrapper element.
PDFObject expands the PDF to 100% width/height of the parent container, so wrap your PDF in a div then size the div using CSS.
See this example: http://pdfobject.com/examples/simplest-styled.html
I am trying to add some JavaScript code to my WordPress page that makes a blue circle move across the screen whenever the page is loaded (via the Raphael JS documentation). I copied and pasted the JS code into the "Text" section of my WordPress page but when I saved and previewed the page, not only did the ball not appear but all of the tags were deleted. Here is the source code I inserted:
<script src="raphael-min.js"></script>
<script>
window.onload = function() {
var p = Raphael(10, 10, 400,400);
var c = p.circle(100, 100, 45);
c.attr({
fill: 'blue',
cursor: 'pointer'
}).animate({
cx : 300
}, 5000);
}
</script>
Is there some standard way to use JavaScript in WordPress? All help is greatly appreciated. Thanks!
You must check your .js file path correctly,
- use phoenix editor extension in firefox to check your .js loaded or not
- make sure your .js file position in top position before </head
I'm building a website that contains divs with background images. I'm very new to JavaScript. I want to preload the images so when you go to the site you don't have to wait and view a blank box when the image is loading. I'm using this preload code, but when I go to the site the images are still loading slowly. Is there a way to make this faster?
<script>
$(document).ready( function() {
var c = new Image();
c.onload = function(){
$("#contenthome").css("background-image", "url(../Images/Homepage.png)");
}
c.src = "url(../Images/Homepage.png)";
});
</script>
This is not directly approachable but has two solutions.
This question's solution needs some understanding about server side request headers specifying caching information. I am used to appengine so I set expiry to about a month or so. Caching is all about suggesting a browser to "keep the following images with you for a while, don't take from me each time you need them". according to your server side language, it is worth spending so that you will master this important thing in browser environment.
And, you must play some trick if your user should not see a set of blank boxes while the images load. in fact, you style them invisible, and once loaded, you make them visible. since you are using jquery, you can use something like
$(window).load(
function(){ $('#showAfterLoadingComplete').show("slow").fadeIn(); }
A page of example is here
Try this:
<script>
$(function() {
var c = new Image();
$(c).load(function(){
$("#contenthome").css("background-image", "url(../Images/Homepage.png)");
$(this).attr('src','../Images/Homepage.png').show();
}).hide();
});
</script>
I would suggest employing a different method. Javascript has to wait for the page to load in order to work right, which inherently will introduce a delay.
Why not base 64 encode all your images into css classes in a dedicated css document.
You can use a site like this to convert your images:
http://webcodertools.com/imagetobase64converter
Then paste the Data URI into the background-image property in your css class.
Your eventual markup could look something like this:
<div id="contenthome">[some content]</div>
And your CSS would look something like this:
#contenthome {
background: [DATA URI] /*I didn't paste the actual URI here, as it would be quite long and unruly */
no-repeat
50% 50%;
background-size: contain;
display: inline-block;
height: auto;
width: auto;
}
You may have to play around with the height, width, background-size, and display properties to get it to show just right.
You could even take a further step and use a cache manifest to explicitly cache your css files so the load times are even faster.
I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 compatible.
The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file is located (css files, js files and even the .gexf file that the example needs) but I only get a page with a black rectangle and nothing more. The graph isn't displayed. What am I doing wrong?
Do I need to first build the sigma.js file, as the author mentions in the code repository of the library in GitHub? I need this tool to visualize the graph (I'm going to feed the graph with data on the fly) but I can't even experiment with some simple code! I even followed that "guide" and did every step but I can't anything working.
Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).
The div you want to have your graph has to be absolute positioned. I think it's a canvas issue.
so the html
<!DOCTYPE html>
<html>
<head>
<script src="http://sigmajs.org/js/sigma.min.js"></script>
<script src="/js/sigmatest.js"></script>
<link rel="stylesheet" href="/css/sigma.css">
</head>
<body>
<div id="sigma-parent">
<div id="sigma-example">
</div>
</div>
</body>
</html>
the css
#sigma-parent {
width: 500px;
height: 500px;
position: relative;
}
#sigma-example {
position: absolute;
width: 100%;
height: 100%;
}
the js in sigmatest.js
function init() {
var sigRoot = document.getElementById('sigma-example');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
x: 10,
y: 10,
size: 5,
color: '#ff0000'
}).addNode('world',{
label: 'World !',
x: 20,
y: 20,
size: 3,
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
} else {
window.onload = init;
}
This probably won't help as many people, but in my case it was simply that I didn't specify x or y properties for each node. I was trying to use the forceAtlas2 algorithm to automatically "place" my nodes, not realizing they had to be drawn in some position first in order for the layout to then apply.
Make sure you have downloaded this file http://sigmajs.org/data/arctic.gexf
and refered the path properly in the code
Sigma js has browser compatibilty issue. Try updating the bowser or use some other browser.
I work with firefox and it works fine.