|
JavaScript - Mouseover Piechart Slice -> Textbox
I am relatively new to JS and was wondering what would be the best way of creating a colurful pie chart that produces a text and picture box when the cursor goes over a particular pie chart 'slice' (i.e. a different text/picture box for each 'slice')?
Im not looking for someone to do all the work for me, I am enjoying the programming so far, but if someone could point me in the right direction? I have access to Dreamweaver CS6 and Fireworks CS5 if they could be of any help? Similar Tutorialsi have in my JS: Code: function viewornot(blocked_status)
{
alert(blocked_status);
var id = blocked_status.slice(0,"/");
}
where blocked_status consists of two parts part one is the id of the user part to is "/0" so a typical value of blocked_status = 63/0 63 is the id id can grow from being 1 digit to x digits as users grow how can i get whatever is in front of the "/" thus the id please??? thank you Code: <html>
<head>
<title>Variable - Examples 1</title>
<script type="text/javascript">
function Student(firstName, lastName, email, courseID, titleArray, pointsArray){
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.courseID = courseID;
this.title = titleArray;
this.points = pointsArray;
this.assign = this.points.slice(0,4);
this.exams = this.points.slice(-2);
this.assignments = function() { return task(this.title,this.points); }
this.totalPoints = function() {return addExam(this.assign,this.exams); }
this.finalGrade = calcGrade;
}
Student.prototype = {
constructor : Student,
toString : studentInfo
};
//assign and exam doesn't seem to hold no values inside.. ???
function addExam(assign,exams){
var exams=this.exams;
var high1=exams[0];
var high2=0;
while(high2<exams.length){
high1=Math.max(high1,exams[high2]);
high2++;
}
var sum = 0;
for (var i=0; i < assign.length; i++){
sum += assign[i];
}
return sum + high1;
}
var totalPoints = addExam();
function calcGrade(){
var grade;
if (totalPoints >= 190){
return "A+";
}else if (totalPoints >= 180){
return "A";
}else if (totalPoints >= 175){
return "B+"
}else if (totalPoints >= 170){
return "B";
}else if (totalPoints >= 165){
return "B-";
}else if (totalPoints >= 160){
return "C";
}else if (totalPoints >= 150){
return "D";
}else if (totalPoints < 150){
return "F";
}
}
function studentInfo(){
return "Student : " + this.lastName + "," + this.firstName + "<br>"+ "eMail : " + this.email + "<br>" + "Course ID : " + this.courseID + "<br>" + "--------------------------------" + "<br>" + this.assignments() + "--------------------------------" + "<br>" + "Total Points : " + this.totalPoints() + "<br>" + "Final Grade : " + this.finalGrade();
}
function createStudents(){
var student1 = new Student("Jake", "Hennry", "jhennery@gmail.com","COIN-070B.01", ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"], [25, 25, 28, 20, 29, 40, 40] );
alert("Student : " + student1.lastName + "," + student1.firstName + "\n"+ "eMail : " + student1.email + "\n" + "Course ID : " + student1.courseID + "\n" + "---------------------------------------" + "\n" + student1.assignments() + "\n" + "---------------------------------------" + "\n" + "Total Points : " + student1.totalPoints() + "\n" + "Final Grade : " + student1.finalGrade());
}
var titleArray = ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"];
var pointsArray = [30, 30, 28, 27, 29, 41, 45];
var student = new Student("Haripriyaa", "Ganesan", "haripriyaa@gmail.com","COIN-070B.01", titleArray, pointsArray );
</script>
</head>
<body>
<script type="text/javascript">
document.writeln(student.toString());
</script>
</body>
</html>
Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! Why is the callwhy is the slice method only a method of an Array instance? The reason why I ask is because if you want to use it for the arguments property of function object, or a string, or an object, or a number instance, you are forced to use Array.prototype.slice.call(). And by doing that, you can pass in any type of object instance (Array, Number, String, Object) into it. So why not just default it as a method of all object instances built into the language? In other words, instead of doing this: Code: function Core(){
var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';
console.log(typeof arguments);//Object
console.log(arguments instanceof Array);//false
var args1 = Array.prototype.slice.call(arguments);
console.log(args1);
var args2 = Array.prototype.slice.call(obj);
console.log(args2);
var args3 = Array.prototype.slice.call(num);
console.log(args3);
var args4 = Array.prototype.slice.call(string);
console.log(args4);
Core('dom','event','ajax');
Why not just be able to do this: Code: function Core(){
var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';
var args = arguments.slice(0);
var args2 = obj.slice(0);
var args3 = num.slice(0);
var args4 = string.slice(0);
//right now none of the above would work but it's more convenient than using the call alternative.
}
Core('dom','event','ajax');
Why did the designers of the javascript scripting language make this decision? Thanks for response. I set up an image mouseover for the next button but its not working. I have two images set up but the second one wont appear when mousing over image. You can see it at www.college-ebook.com I have created a page using the code below and it works fine. Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery. Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")
</script>
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
Hi, i got a textbox with a submit button but when submit button is clicked it works but it reloads the page. is possible to submit without reload the page? thanks I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.
Hey guys, I need some help. I have divs placed in a html document, and what I need to do is have a sound play when a person is to hover their mouse over the,. I used this code that I've butchered together from researching on the internet, but it just isn't working. The sound plays automatically as soon as the site loads. Can you please help me? Here is my code: Code: <html>
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
<embed src="C.mp3" autostart=false width=0 height=0 name="C"
enablejavascript="true">
<embed src="D.mp3" autostart=false width=0 height=0 name="D"
enablejavascript="true">
</head>
<link rel="stylesheet" type="text/css" href="NavTest.css">
<div id=red alt="#" onMouseOver="EvalSound('C')"></div>
<div id=blue alt="#" onMouseOver="EvalSound('D')"></div>
</html>
Thank you! [: Sorry, maybe I should also mention that my knowledge of Javascript is NONE! :| Hello, I've got a strange image with mouse overs on a menu. my code; Code: function SwapImage(strName,strImage){
ImageFlip= new Image()
ImageFlip.src = "images/" + strImage;
var strImageOn = document.getElementById(strName);
strImageOn.src = ImageFlip.src; return true;
}
<table border='0' cellpadding='5' cellspacing='5'>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem1','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem1','MouseOut.png');\"><a href='/'><img src='images/home_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem1' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem2','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem2','MouseOut.png');\"><a href='/artwork.php'><img src='images/artwork_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem2' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem3','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem3','MouseOut.png');\"><a href='/artists.php'><img src='images/artists_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem3' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem4','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem4','MouseOut.png');\"><a href='/about.php'><img src='images/about_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem4' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem5','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem5','MouseOut.png');\"><a href='/links.php'><img src='images/links_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem5' /></td>
</tr>
</table>
this is in a php page, thats the reason for the extra slashes/espaces. for some reason, only the last row of the menu works with the mouse over, maybe I'm missing something, but it seems like it should all work. any ideas would be really helpful. cheers, -Ken http://www.outwarstop.com/woz/woz09r3a.php On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located. I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers. I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name. And now i'm trying to learn how mask the various url/links in the menus. As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain. Hope that all made some sense The following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott Good morning all, I am trying to write a JavaScript that performs the following action: When I roll my mouse over on a paragraph with a Code: <p class="hover-target"> Paragraph goes here</p> It will do a reverse video of it. Currently the web page is in white background, black text. So when the mouse rolls over that particular paragraph it will be a black background, white text for that paragraph only. The JavaScript I wrote is: Code: {
Core.start
(
( function()
{
function mouseoverListener(evt)
{
evt = evt ? evt : window.event;
core.addClass (this, " over");
}
function mouseoutListener(evt)
{
evt = evt ? evt : window.event;
core.removeClass (this, " over");
}
return {
init: function()
{
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++);
{
if (core.hasClass(allElements[i], "hover-target"))
core.addEventListener(allElements[i], 'mouseover', mouseoverListener);
core.addEventListener(allElements[i], 'mouseout', mouseoutListener);
}
}
};
}
)()
);
}
The HTML document has the right path to the scripts (core. js and the rollover.js) as well as the stylesheet (index_style.css). Also, the CSS stylesheet code is: Code: .over{
color:white;
background:black;
}
There is more to this stylesheet but I am only highlighting the rollover style. Am I missing something from my code? Thanks for your time. I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly |
|||||||