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
Related
I have a basic weather application that gets data from forecast.io and displays icons using the related skycons which draw and animates icons using the html5 canvas
Everything seems to works fine, but i have to update the weather regularly without refresh the whole page and the jquery Ajax load method seemed like an answer to my problem. The text data refresh fine and gets the new information but the canvas seems to break.
I managed to isolate the problem. It seems I don't understand how the html canvas works.
Here is a simpler problem
This code draws a red rectangle and refreshes part of the page with the jquery load method
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<div id="weather">
<canvas id="icon"></canvas>
</div>
</div>
<script>
var i = document.getElementById('icon');
var c = i.getContext('2d');
c.fillStyle = "red";
c.fillRect(0, 0, 300, 300);
</script>
<script>
var container = $("#container");
setInterval(function () {
container.load("index.php #weather");
console.log("refresh")
}, 1000);
</script>
Unfortunately, the red rectangle disappear on the reload. gif
My question is, what should I do to make it stay/reappear?
I tried putting the canvas code inside the interval function after the load, but the rectangle appears for a fraction of a second to only vanish again?
Please try this on your own machines to confirm my problems
Can someone explain me how the canvas works and please guide me to a solution
The problem is the same for my icons they blink for a second after the reload to disappear
recordit.co/Ta6u5oVkie
Fixed my problem. It was a common beginner's mistake, I didn't redraw in the canvas in the callback of the ajax function.
thanks
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.
I would like the checkbox #video-checkbox, when hovered over, to animate the image #video as seen below. What am I doing wrong?
$(document).ready(function () {
$("#video-checkbox").hover(function () {
$("#video").stop().animate({
opacity: 0.75,
marginTop: -10
}, 400);
}, function () {
$("#video").stop().animate({
opacity: 1.0,
marginTop: 0
}, 400);
});
});
From the link you provide it seems jQuery is not included in your page, $ is not defined. Download jQuery and link to it in your page's head tag
You have to add jQuery source to your page.
You can download it here
Minified version
Full version Development
1: jQuery is not included on your page
2: There appears to be no tag with an ID of video on your page.
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
Is it possible to load a background-image asynchronously?
I've seen many jQuery plugins to load normal image in an asynchronous way, but I can't find if it's possible to preload / asynchronously load a background-image.
EDIT
I clarify my problem. I've been working on this test site http://mentalfaps.com/
The background image is loaded randomly from a set of images refreshed each hour by a chron job (which takes random images on a flickr catalog).
The host is free and slow at the moment, so the background image takes some time to load.
The positioning of the first overlay (the one with the PNG transparent mentalfaps logo) and width are regulated by a function created in the jQuery(document).ready construct.
If you try to refresh the page many times, the width of the right overlay div is 0 (and so you see a "hole" in the layout)
Here is the method to set my positions:
function setPositions(){
var oH = $('#overlay-header');
var overlayHeaderOffset = oH.offset();
var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
if (overlayRightWidth >= 0) {
$('#overlay-right').width(overlayRightWidth);
} else {
$('#overlay-right').width(0);
}
var lW = $('#loader-wrapper');
lW.offset({
left: (overlayHeaderOffset.left + oH.width() - lW.width())
});
}
The problem is that the $(window).width() is lower then the effective window width! so the check fails and the script goes for $('#overlay-right').width(0);
any ideas?
Not sure whether I really understand your question, but background images (and all other images) are already loaded asynchronously - the browser will start separate requests for them as soon as it encounters the URL while parsing the HTML.
See this excellent answer for background on loading order: Load and execution sequence of a web page?
If you meant something else, please clarify.
The trick to loading something in the background is to load it once, so the next time when it is loaded it already is in the cache.
Put the following at the end of your html:
<script>
var img = new Image();
img.onload = function () {
document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png';
};
img.src = 'background.png';
</script>
You could use a prefetch link in the head.
<link rel="prefetch" href="/images/background.jpg">
You should be able to add these links to the head via JavaScript.
I like to use CSS to fill the background with a color for page load.
After DOM ready event, I use jQuery to modify the CSS and add a background image. That way, the image isn't loaded until after page loads. Not sure about async, but this method gives the user a decent experience.
Example: http://it.highpoint.edu/
The right side navigation links have a background image. The page initializes with a background color. It is replaced with a background image after page load, via jQuery.
changes in this file jquery.ImageOverlay.js
set your height and width and enjoy this...
imageContainer.css({
width : "299px",
height : "138px",
borderColor : hrefOpts.border_color
});
As it is already mentioned, the background image is loaded asynchronously. If you need to load the background image from JQuery code you may also set the addClass() method to set a CSS class or attr("style=\"background-image:url('myimage.png')\"")
Ive found the answer myself, it was a problem due to the .offset() method that gived sometimes the wrong values.
I had the write values using the .position() :
var overlayHeaderOffset = oH.position();