I'm exploring HTML5 and Processing.js.
When the user clicks on an image on my webpage, I'd like to call a function in the Processing.js code. Just calling the function in onclick, as illustrated in this simple example, isn't working:
<html>
<head>
<script language="javascript" src="processing.init.js"></script>
<script language="javascript" src="processing.js"></script>
</head>
<body>
<script type="application/processing">
void restart()
{ /* does something */ }
</script><canvas>
You'll need a browser that supports HTML5 to see this content.
</canvas><br/><br/>
<img src="restart-image.png" onclick="restart()">
</body>
</html>
Any thoughts on how I can call a method in the Processing.js script when an image is clicked? (Maybe I'm making a basic HTML mistake by using img onclick?)
This should work, enclose you image inside the anchor tag <a> image </a>
Use href tag to call the function.
image source
I would start by pulling the javascript for the onclick out of the img tag.
In a separate javascript file you can have:
document.getElementById('restartimage').onclick = function() { Processing.setup(); }
Obviously I put an id attribute on your img tag.
The setup function I noticed on this page:
http://processingjs.org/
The basic idea is that by pulling the onclick into a javascript file it will be easier to code what it should do.
you need to change the script-type to text/javascript or application/javascript first.
then place 'function' before 'restart()' function reducing 'void'.
i have used firefox 3.0.14 on ubuntu 9.04.
You can call processing functions using the Processing js object's getInstanceById function.
For example here is a function:
$(window).resize(function(){
var p=Processing.getInstanceById('processing_canvas_id');
p.resize($("#main").width(),$("#main").height());
});
Where resize is my processing function inside the processing file associated with processing_canvas_id.
Related
As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.
I want a random sound to play on a click on a button on a web page. I have researched it quite a bit and this discussion has helped me most: http://www.elated.com/forums/topic/5196/
One poster recommended making a Javascript function to run whenever the button is clicked, as follows:
<script>
function playSound() {
var sounds = [
"http://www.mysite.com/1.wav",
"http://www.mysite.com/2.wav",
"http://www.mysite.com/3.wav"
];
**// Choose a random sound here and play it**
}
</script>
I understand the part about making an array of sounds. I think I have the part about selecting a random array element figured out. I am just stuck on how to play a sound inside the JS function as the poster recommends. Can I use an HTML5 audio tag inside the JS function?
I don't care whether the code for actually playing the file is inside or outside the function. Actually, I was first going to use JS just to randomly select an element, then have a line of HTML play the element of the array returned by the JS function. I gave up on that because I couldn't figure out how to specify that I wanted to play the return value of a JS function in HTML.
Thank you.
Use JavaScript to Add Sound
Place the following script in the <head> of your HTML document:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
The Sound is Placed in an Empty Span
The JavaScript places an embed tag inside an empty span tag when the script is initiated. So, you need to add the following span file somewhere within the body of your HTML page, preferabl near the top of the document:
<span id="dummy"></span>
Call the Script with an onmouseover or onclick Attribute
The last thing you need to add is an element that you want to generate the sound on click or on mouseover. Call the script with one of those attributes:
Click here to hear a sound
<p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>
If you have the ID of your audio element, you can do this :
document.getElementById(theId).play();
The audio element could look like this :
<audio id="someId">
<source src=sound/zbluejay.wav>
</audio>
And if you need it, you may add the audio element dynamically like this :
document.write("<audio id=someId><source src=yourURL</audio>");
document.getElementById('someId').play();
Fiddle here.
Haven't tested this one but I guess it should work. I basically select a random String from the array and put an embed-element into the div with the id "element" which then starts the sound.
<script>
function playSound() {
var sounds = new Array(
"http://www.mysite.com/1.wav",
"http://www.mysite.com/2.wav",
"http://www.mysite.com/3.wav"
);
$.("#element").html("<embed src=\""+Math.floor(Math.random()*(sounds.length+1))+"\" autostart=\"true\" />");
}
</script>
edited: i tested this one:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSound() {
var sounds = new Array(
"file:///X:/test.mp3"
);
$("#element").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");
}
</script>
</head>
<body onload="javascript:playSound()">
<div id="element">
</div>
</body>
</html>
Is there any way to write script in css and call or execute it whenever required ?
I need a <script> tag to be executed .
i need something like this..
css code
#execute{
<script> ..some script.. </script>
}
so whenever i use
<html>
.
.
.
.<div id="execute" />
.
.
.
.
</html>
so if i change the script changes will be reflected everywhere.
Is it possible?
EDIT:
Is it possible to keep my <script></script> tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.
Can someone show me any example, tutorial how i can do it.
I don't have much information about the Js file and how the function should be called.
Thank you all
Does it have to be in CSS? jQuery is a great, simple way to do what you're asking. You put all your style information in the CSS (what it's intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this
$(function() {
$('#execute')
.someCoolFunction()
.anotherCoolFunction();
});
You use $(function() { /* code */ }); to run the code when your document is ready, and you use $('#execute') to grab the element with the execute tag. You can then do a lot of cool javascript really easily with that jQuery element.
No, you cannot mix CSS and Javascript this way. Why would you want to?
If you simply want a common JavaScript include, do it like this:
<script type="text/javascript" src="yourscript.js"></script>
You can't do this in standard CSS.
There is a way in which you can run code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.
However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn't have which are in other browsers. An example of this in use is CSS3Pie.
If you're working on a site which will never be used in any browser other than IE, and you're happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don't do this.
More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.
With JQuery, you would write code like this (in a normal script block, not in the CSS!):
$('.execute').each(function() {
/* your code here; it would be run for each element on the page with the class of 'execute' */
}
As you can see, it uses a CSS-style selector syntax to select the elements to work with.
(also NB: I've used execute as a classname here, not as an ID, because you imply that you want more than one of them -- note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.
JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.
Hope that helps.
[EDIT]
Given the edit to your question, can you not just place the advertisment <script> tag inside the <div> on the page where you want it?
So with JQuery, you could write something like this to run your ad in each place you want it:
HTML:
....
<div class='execute'></div>
....
<div class='execute'></div>
....
Javascript code (remember to also include the JQuery library, or this won't work):
$(document).ready(function () {
$('.execute').each(function() {
advertisement(this); //change to whatever the advertisement script function is called.
});
});
Hopefully that will get you started. I can't really help you much more without knowing more about the advertisement script, though.
Also, the people who supplied the advert script should be able to tell you how to use it.
I believe a Javascript library like JQuery or Dojo is what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.
EDIT
Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any <div class="execute"></div> block:
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script> <!-- load Dojo from Google CDN
<!-- Let's register a onClick handle for any .execute div. -->
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
Edit 2
This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.
Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:
// myScript.js
function foo()
{
// ...
}
// page.htm
<html>
<head>
<script src="path/to/myScript.js"></script>
</head>
<!-- ... -->
<div class="execute">
<script>
<!--
// Call foo()
foo();
-->
</script>
</div>
<!-- ... -->
It doesn't really make sense to abstract a script into CSS like that, and even if it was a good idea, it can't be done.
Why do you need to run the same script over and over in different places? Consider whether or not there might be a better or simpler way to do whatever it is you're doing.
Plus, when you include a script with the src attribute in the script tag, if you modify the script's source file, the changes persist everywhere.
No, but you can use script to alter the CSS properties of any element in the DOM.
Can someone guide me how to include html file with an html file. I have been trying to embed my file within object tags but to no avail.
Thanks!
You can use the iframe tag.
Another option is to used Server Side inclusion using SHTML, this require that the web server support it, see Server Side Includes
You are quite limited in HTML. You can use iframe tag but it's the same type of embedding as embedding of flash in html pages.
OT: It would be quite easy in PHP. Can you use it? Or do you need static web page?
Can you perhaps use Javascript to dynamically load it in?
You can have it loaded via JQuery as shown here: Include another HTML file in a HTML file
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function{
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p> This is my include file </p>
May be this help:
Inside js/utils.js define functions:
function loadFileSync(fileName) {
var req = new XMLHttpRequest();
req.open('GET', fileName, false);
req.send(null);
if (req.status === 200) {
//console.log(req.responseText);
return req.responseText
} else
return "ERROR!!!"
}
function includeFile(fileName) {
document.write(loadFileSync(fileName))
}
And in main html file add this:
<script src="js/utils.js"></script>
<script> includeFile("navigation.html") </script>
I am trying to throw together a website using Ajax for the first time, to finally get with the times and figure it out. So far it is nothing but HTML pages and a bit of JS. Using some basic AJAX script I found online, I have the main index.htm which has a title, navigation, and content divs. The Ajax calls grab other content includes (which are just files with text content for the most part) to throw into the content div. For the most part it works, except for when I am trying to add the Google Directions gadget. When I add the script code it gives me to a file and call that file, there is no noticeable output.
Any suggestions on what I am doing wrong or what I'm missing?
If I am understanding you correctly this is an unnecessary use of AJAX. From what it seems like you want to do is load JavaScript via a JavaScript call. This can be accomplished using either method described here. Example:
<script type="text/javascript">
function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function()
{
dhtmlLoadScript("dhtml_way.js");
}
</script>
If the above link does not help or I am misunderstanding your question please provide further clarification or some sort of code example.
Following up on your comment
Here is a work around for your gadget, the below code would be on your main page (the one that is initially loaded). Here is my test HTML page:
<html>
<head>
<script type="text/javascript">
var gadget;
function getGadgetAndMove(node)
{
gadget = document.getElementsByTagName("table")[0];
node.appendChild(gadget);
gadget.style.visibility = "visible";
gadget.style.display = "inline-block";
}
</script>
<style>
.ig_reset, .ig_tbl_line { visibility:hidden;}
</style>
</head>
<body>
<div onclick="getGadgetAndMove(this);">Test</div>
</body>
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=1600%20Amphitheatre%20Pkway%2C%20Mountain%20View%2C%20CA&synd=open&w=320&h=55&title=Directions+by+Google+Maps&brand=light&lang=en&country=US&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</html>
If you need further explanation please let me know.
I believe I know what you want to accomplish, because I ran into the same problem. And I found a solution. So I would say that no it is not an improper use of ajax, because you could run into this in some circumstances.
Put the directions gadget not directly in the page content that is being loaded via ajax, but in a separate file such as "directionsgadget.html" (insert the script tag for the gadget in this file).
Then use an iframe with src="/path/to/directionsgadget.html" in your ajax loaded content.
The gadget should get loaded this way.
If you want the gadget centered within the iframe, you can wrap the script tag in directionsgadget.html in a div with a set width and style="margin:0px auto". That will center the gadget.
Here is an example:
Your main page is "index.html", and contains a div that will contain ajax loaded content:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'ajaxcontent.html',
success: function(returndata){ $('#ajaxcontent').html(returndata); }
});
});
</script>
</head>
<body>
<div id="ajaxcontent"></div>
</body>
</html>
Then you have a file with the content that is to be loaded via ajax, and this has among other things a google gadget. Were not going to put the gadget directly here, but were going to put it in a separate file and point to it with an iframe. Let's call this first file ajaxcontent.html, as indicated in the ajax call in the head section of the first file:
<span>Here is some content that will be loaded onto the main page via ajax.</span><br />
<span>Among other things, there is a google directions gadget that will be loaded.</span>
<div id="getdirections" style="margin:0px auto;">
<iframe style="width:365px;height:216px;" src="directions.html"></iframe>
</div>
Now we will put the script for the google gadget itself in a separate file "directions.html" (as indicated in the src of the iframe above), and in order for the rendered gadget to be centered we are going to wrap the script tag within a div just so:
<div style="width:336px;height:116px;margin:0px auto;">
<script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=_a_bunch_of_information_with_personal_list_of_locations_&synd=open&w=320&h=55&title=Street+directions+by+Google+Maps&brand=light&lang=it&country=ALL&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>
</div>
I hope this example was clear enough!