|
JavaScript - Multiple Mouseover Effects Does Not Work.
Hi Coders,
I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page. The first effect changes the picture within a table - works fine The second effect should change the text within another table. - does not work. I am receiving the error message: 'document.text' is null or not an object. Here is the code which lies on my image: Code: <td style="height: 101px; width: 20%" valign="top"> <img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td> Here is the newchange() script: Code: <script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>
And I am sure that the table in which the text should appear has its Id and Name defined as "text" Here is it: Code: <td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top"> <strong class="style10">Endavour has launched</strong></td> But could not make it work error free. Thanks for any comments. Similar TutorialsI need help with the script for multiple mouseOver Effects for my Menu Bar. The script I have is: <script type="text/javascript"> function mouseOver() { document.getElementById("b1").src ="home1.jpg"; } function mouseOut() { document.getElementById("b1").src ="home.jpg"; } </script> <A HREF="Index.html" rel="nofollow" target="_blank"><img src="home.jpg" id="b1" width="167" height="60" onmouseover="mouseOver()" onmouseout="mouseOut()"/></A> However, that only does one mouseover effect. Can someone help me with this? Happy Turkey Day!! I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you Link Code: <script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
</script>
<img alt="Default Image" name="pic" src="default.gif"
height="100" width="150" /><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
href="your-page.html"><img alt="Button 1" name="a"
src="upbutton1.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
href="your-page.html"><img alt="Button 2" name="b"
src="upbutton2.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
href="your-page.html"><img alt="Button 3" name="c"
src="upbutton3.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
plz i want to know how to make the effects that exists on this link in the upper part : http://www.masrawy.com/new/ 1-) changing color when pressing on the color 2-) changing font (+) to increase it (-) to decrease it (N) to set it to the normal style 3-) decrease and increase the width of the page (from كبر حجم الصفحة or صغر حجم الصفحة ) can anyone help me in doing this task????? Hi, I'm been struggling with this for a week now, I'm new to javascript so please bear with me. What I have been trying to do is get the div to swap once you go over a <td>, at the moment the when you point on one of the <td> it takes the div away. I have a feeling it's got to do with this piece of code: Code: if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
Here is the complete code: Code: <script language="javascript">
function showDiv(elem)
{
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
var styler = document.getElementById("style1_"+arr[i].id);
styler.className = "stylegray";
var styler = document.getElementById("style2_"+arr[i].id);
styler.className = "stylegray";
}
}
var arr = document.getElementsByTagName('img')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,5) == "arrow") {
arr[i].src = 'images/blank.jpg';
}
}
var arr = document.getElementsByTagName('a')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,7) == "style3_") {
var styler = document.getElementById(arr[i].id);
styler.style.color = "#e3e3e3";
}
}
e2 = document.getElementById(elem);
e2.style.display = 'block';
e3 = document.getElementById("style1_"+elem);
e3.className = "stylered";
e3 = document.getElementById("style2_"+elem);
e3.className = "stylegray2";
e3 = document.getElementById("style3_"+elem);
e3.style.color = "darkred";
e3 = document.getElementById("arrow_"+elem);
e3.src = "images/arrow.png";
}
</script>
<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%" onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');" valign="top">
I would really appreciate it if someone can just point me into the right direction. Thanks Hello everyone, right now I have this in my site:
Code: <html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
And I was wondering if there's a way to get rid of the button, and make it so when the user opens the webpage, it automatically opens the multiple webpages. -- If that's not possible, I was also wondering if there's a way to make the button "click" on a mouseover, so when they move their mouse across the button, it opens the pages. I would rather have the 1st option, if possible. Thanks. Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to. The objective is this: I want to have a div appear below my mouse when mousing over different parts of my website. I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes. I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div. Here is the code I'm working on, maybe I'm just missing something obvious? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
background-image: url(resources/cursors/Inactive_Halo.png);
height: 44px;
width: 44px;
position: absolute;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
height: 100px;
width: 400px;
background-color: #0F0;
left: 149px;
top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>
Thanks, everyone. This has been driving me nuts for an entire week. The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects. I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated. ********* Coding Example ********* <HTML> <HEAD> <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE> <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache"> <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end."> <META NAME="date" CONTENT="2005-12-27"> <META NAME="channel" CONTENT="Developer"> <META NAME="author" CONTENT="James Crooke"> <META NAME="section" CONTENT="Miscellaneous"> <style type="text/css"> <!-- .question { color:darkblue; font-size:14px; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var useranswers = new Array(); var answered = 0; function renderQuiz() { for(i=0;i<questions.length;i++) { document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>'); for(j=0;j<choices[i].length;j++) { document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />'); } } document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>'); } function resetQuiz(showConfirm) { if(showConfirm) if(!confirm("Are you sure you want to reset your answers and start from the beginning?")) return false; document.location = document.location; } function submitAnswer(questionId, obj, classId, labelId) { useranswers[questionId] = obj.value; document.getElementById(labelId).style.color = "grey"; //disableQuestion(classId); showResult(questionId); answered++; } function showResult(questionId) { if(answers[questionId] == useranswers[questionId]) { document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px'; } else { document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />'; } } function showScore() { if(answered != answers.length) { alert("You have not answered all of the questions yet!"); return false; } questionCount = answers.length; correct = 0; incorrect = 0; for(i=0;i<questionCount;i++) { if(useranswers[i] == answers[i]) correct++; else incorrect++; } pc = Math.round((correct / questionCount) * 100); alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n"; alertMsg += "You correctly answered " + pc + "% of the questions! \n\n"; if(pc == 100) alertMsg += response[0]; else if(pc >= 90) alertMsg += response[1]; else if(pc >= 70) alertMsg += response[2]; else if(pc > 50) alertMsg += response[3]; else if(pc >= 40) alertMsg += response[4]; else if(pc >= 20) alertMsg += response[5]; else if(pc >= 10) alertMsg += response[6]; else alertMsg += response[7]; if(pc < 100) { if(confirm(alertMsg)) resetQuiz(false); else return false; } else { alert(alertMsg); } } function disableQuestion(classId) { var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++) { if (alltags[i].className == classId) { alltags[i].disabled = true; } } } var questions = new Array(); var choices = new Array(); var answers = new Array(); var response = new Array(); // To add more questions, just follow the format below. questions[0] = "1) JavaScript is ..." ; choices[0] = new Array(); choices[0][0] = "the same as Java"; choices[0][1] = "kind of like Java"; choices[0][2] = "different than Java"; choices[0][3] = "ther written part of Java"; answers[0] = choices[0][2]; ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON ///////// // image works, but sound doesn't // questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML" onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>"; choices[1] = new Array(); choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>"; choices[1][1] = "objective"; choices[1][2] = "evil"; choices[1][3] = "object based"; answers[1] = choices[1][3]; ///////////////////////////////////////////////////////////////// questions[2] = "3) To comment out a line in JavaScript ..."; choices[2] = new Array(); choices[2][0] = "Precede it with two forward slashes, i.e. '//'"; choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'"; choices[2][2] = "Precede it with an asterisk, i.e. '*'"; choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'"; answers[2] = choices[2][0]; questions[3] = "4) JavaScript can only run on Windows"; choices[3] = new Array(); choices[3][0] = "True"; choices[3][1] = "False"; answers[3] = choices[3][1]; questions[4] = "5) Semicolons are optional at the end of a JavaScript statement."; choices[4] = new Array(); choices[4][0] = "True"; choices[4][1] = "False"; answers[4] = choices[4][0]; questions[5] = "strings are..."; choices[5] = new Array(); choices[5][0] = "strings, numbers, BooBoos, and nulls"; choices[5][1] = "strings, text, Booleans, and nulls"; choices[5][2] = "strings, numbers, Booleans, and nulls"; choices[5][3] = "strings, numbers, Booleans, and zeros"; answers[5] = choices[5][2]; // response for getting 100% response[0] = "Excellent, top marks!"; // response for getting 90% or more response[1] = "Excellent, try again to get 100%!" // response for getting 70% or more response[2] = "Well done, that is a good score, can you do better?"; // response for getting over 50% response[3] = "Nice one, you got more than half of the questions right, can you do better?"; // response for getting 40% or more response[4] = "You got some questions right, you can do better!"; // response for getting 20% or more response[5] = "You didn't do too well, why not try again!?"; // response for getting 10% or more response[6] = "That was pretty poor! Try again to improve!"; // response for getting 9% or less response[7] = "Oh dear, I think you need to go back to school (or try again)!"; //--> </script> </HEAD> <BODY BGCOLOR=#ffffff vlink=#0000ff > <script> function DHTMLSound(surl) { document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script> <script type="text/javascript"> <!-- renderQuiz(); //--> </script> </body></html> ********* I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question. For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer. Any help at all would be really appreciated. hello, I posted a threat a couple of days ago, but i got no answer. I guess it was just too messy. So i'm trying over again. You might therefore have a little deja vu, but still, any help will be greatly appreciated. I need this function to work on all my div, separately, on loading. here is the function: Code: <script>
// Random Position Script
var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));
function start()
{var x = (posLeft()+xxx) + 'px';
var y = (posTop()+yyy) + 'px';
moveObjTo('myobj',x,y);
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document
</script>
At the moment, the function is working on one object ('myObj'). I laced all my documents into separate divs and i need them all (and seperatly) to load on a random position at start. So i need to write in something that makes this function keep on going for all my objects. It might seem like a very dumb question, but 'm just starting with javascript, so not much of a coder yet. Hope you can help o this one. nice day to everybody! So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems. However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all. ShowNext function is the new one I added that doesn't work. PHP Code: <script type="text/javascript"> function ShowReg(op) { document.getElementById('public').style.display='none'; document.getElementById('alliance').style.display='none'; switch (op) { case 1 : document.getElementById('public').style.display="block"; break; case 2 : document.getElementById('alliance').style.display="block"; break; default : break; } } function ShowNext(op) { document.getElementById('randomwin').style.display='none'; document.getElementById('setentry').style.display='none'; document.getElementById('highestlevel').style.display='none'; document.getElementById('question').style.display='none'; switch (op) { case 1 : document.getElementById('randomwin').style.display="block"; break; case 2 : document.getElementById('setentry').style.display="block"; break; case 3 : document.getElementById('highestlevel').style.display="block"; break; case 4 : document.getElementById('question').style.display="block"; break; default : break; } } </script> PHP Code: <tr><td><b>Privacy:</b></td><td> <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)"> <option value="error">Select One</option> <option value="public">Public</option> <option value="alliance">Alliance Only</option> </select> </td></tr></table><br /> <div id="public" style="display:none"> <p><b>Contest will be made Public for all players to use.</b> </div> <div id="alliance" style="display:none"> <p><b>Contest will be made available to only alliance members.</b> </div> <tr><td><b>Type:</b></td><td> <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)"> <option value="error">Select One</option> <option value="randomwin">Random Draw</option> <option value="setentry">Marked Entry</option> <option value="highestlevel">Highest Level</option> <option value="question">Answer Question</option> </select></td></tr></table><br /> <div id="randomwin" style="display:none"> <p>Random draw selected </div> <div id="winner" style="display:none"> <p>Select Entry number to auto win: <select name="entrypick"> <option value="5">Entry 5</option> <option value="6">Entry 6</option> <option value="7">Entry 7</option> <option value="8">Entry 8</option> <option value="9">Entry 9</option> <option value="10">Entry 10</option> <option value="11">Entry 11</option> <option value="12">Entry 12</option> <option value="13">Entry 13</option> <option value="14">Entry 14</option> <option value="15">Entry 15</option> <option value="16">Entry 16</option> <option value="17">Entry 17</option> <option value="18">Entry 18</option> <option value="19">Entry 19</option> <option value="20">Entry 20</option> <option value="21">Entry 21</option> <option value="22">Entry 22</option> <option value="23">Entry 23</option> <option value="24">Entry 24</option> <option value="25">Entry 25</option> <option value="26">Entry 26</option> <option value="27">Entry 27</option> <option value="28">Entry 28</option> <option value="29">Entry 29</option> <option value="30">Entry 30</option> </select> </div> What I have to do is, "Ask for number1, ask for number2 and show them added, subtracted and multiplied." Here is my code, what's wrong? <script type="text/javascript"> var number1= parseFloat ( window.prompt ("What is the first number?","")) || 0; var number2= parseFloat ( window.prompt ("What is the second number?","")) || 0; var addition= num1*1 + num2*1; var subtraction= num1*1 - num2*1; var multiplication= num1*1 * num2*1; document.write (Addition is: " num1+" + "+num2+"="+ addition); document.write (subtraction is: " num1" + "+num2+"="+ subtraction); document.write (muliplication is: " num1" + "+num2+"="+ multiplication); </script> Hello here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together please help me! thanks for any help here is my script <head> <title>Easy Slider jQuery Plugin Demo</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, nextId: "slider1next", prevId: "slider1prev" }); }); </script> <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="leidyba/css/demo.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/styleleidyba.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/jquery.jscrollpane.css" media="all" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' /> <div id="container"> <div id="header"> <h1>Easy Slider jQuery Plugin - Multiple sliders</h1> </div> <div id="content"> <div id="slider"> <ul> <li><a href="http://templatica.com/preview/30"><img src="slide/images/01.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="slide/images/02.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="slide/images/03.jpg" alt="Css Template Preview" /></a></li> </ul> </div> <div class="container"> <div id="ca-container" class="ca-container"> <div class="ca-wrapper"> <div class="ca-item ca-item-1"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Knygų leidyba</h3> <h4> <span class="ca-quote">“</span> <span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Knygų leidyba</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my </p> <p>When, while the </p> <p>She packed her .</p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> <div class="ca-item ca-item-2"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Reklaminiai bukletai</h3> <h4> <span class="ca-quote">“</span> <span>I hold that the more </span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Would you eat your dog?</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my .</p> <p>When, while the </p> <p>She packed her </p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="leidyba/js/jquery.easing.1.3.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="leidyba/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="leidyba/js/jquery.contentcarousel.js"></script> <script type="text/javascript"> $('#ca-container').contentcarousel({ }); </script> </div> </body> </html> The following code works find in firefox and chrome. In IE, it only works the first time I click on a link. Any ideas? Thanks in advance, // I have some div's where help is, which I make non-viewable <div id='help_guides'> <div id='issue1'>Help with issue 1</div> <div id='issue2'>Help with issue 2</div> </div> <a href="#" id="issue_1_link">Help with issue #1</a> <a href="#" id="issue_2_link">Help with issue #2</a> <div id='help'></div> // I grab the help guide div into a variable var issue_1_help = $('issue_1').remove(); var issue_2_help = $('issue_2').remove(); // When the help link is clicked, the help DIV displays the help guide Event.observe( $('issue_1_link'), 'click', function() { $('help').update( issue_1_help ); }); Event.observe( $('issue_2_link'), 'click', function() { $('help').update( issue_2_help ); }); please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox please follow this link: http://particletree.com/examples/lightbox/ while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data... and on third page he will have a message that his registration is done successfully.. so how to switch between pages in lightbox effects??? hi all, i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is: Code: <script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>
in my body is: Code: <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')">
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet">
(latest tweet generating code)
</div>
this creates a little bird, which displays latest tweet when rolled-over. you can see a working example of this he http://nang-nang.net/tumblr/blog/try.html my question a (1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately? also (2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above. an answer to (1) at least would be very much appreciated! Hi guys I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added: Code: <script type="text/javascript">
$(document).ready(function () {
$('ul.dropdown li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);
}
);
});
</script>
When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here. Any ideas on how I can fix this? I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories. i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want. I'm working with the following images: arrow1: arrow2: arrow3: in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself) the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1". this is the code I'm working with, hope someone can help Code: <SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"
second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>
<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>
this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this? Code: // SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
alert("SpryDOMEffects.js requires SpryDOMUtils.js");
return;
}
if (!Spry.Effect) Spry.Effect = {};
Spry.Effect.Animator = function(opts)
{
Spry.Effect.Animator.Notifier.call(this);
this.animatorID = Spry.Effect.Animator.nextID++;
this.dropFrames = true;
this.fps = 60; // frames per-second
this.duration = 500; // msecs
this.timer = 0;
this.startTime = 0; // Used only when dropFrames is true.
this.currentFrame = 0;
this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
this.stopped = false;
Spry.Effect.Animator.copyProps(this, opts);
this.interval = 1000 / this.fps;
this.numFrames = (this.duration / 1000) * this.fps;
if (this.onComplete)
{
var self = this;
this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
}
};
Spry.Effect.Animator.nextID = 1;
Spry.Effect.Animator.copyProps = function(dst, src)
{
if (src)
{
for (prop in src)
dst[prop] = src[prop];
}
return dst;
};
Spry.Effect.Animator.getElement = function(element)
{
if (arguments.length > 1)
{
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push(Spry.Effect.Animator.getElement(arguments[i]));
return elements;
}
if (typeof element == 'string')
element = document.getElementById(element);
return element;
};
Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Effect.Animator.Notifier = function()
{
this.observers = [];
this.suppressNotifications = 0;
};
Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
if (!observer)
return;
// Make sure the observer isn't already on the list.
var len = this.observers.length;
for (var i = 0; i < len; i++)
{
if (this.observers[i] == observer)
return;
}
this.observers[len] = observer;
};
Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
if (!observer)
return;
for (var i = 0; i < this.observers.length; i++)
{
if (this.observers[i] == observer)
{
this.observers.splice(i, 1);
break;
}
}
};
Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
if (!methodName)
return;
if (!this.suppressNotifications)
{
var len = this.observers.length;
for (var i = 0; i < len; i++)
{
var obs = this.observers[i];
if (obs)
{
if (typeof obs == "function")
obs(methodName, this, data);
else if (obs[methodName])
obs[methodName](this, data);
}
}
}
};
Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
if (--this.suppressNotifications < 0)
{
this.suppressNotifications = 0;
Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
}
};
Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
++this.suppressNotifications;
};
Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;
Spry.Effect.Animator.prototype.start = function()
{
this.stopped = false;
this.currentFrame = 0;
this.startTime = (new Date()).getTime();
this.notifyObservers("onAnimationStart");
var self = this;
this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};
Spry.Effect.Animator.prototype.stop = function()
{
if (this.timer)
clearTimeout(this.timer);
this.timer = 0;
this.stopped = true;
this.notifyObservers("onAnimationStopped");
};
Spry.Effect.Animator.prototype.onStepAnimation = function()
{
var obj = {};
if (this.dropFrames)
{
obj.duration = this.duration;
obj.elapsed = ((new Date).getTime()) - this.startTime;
if (obj.elapsed > obj.duration)
obj.elapsed = obj.duration;
}
else
{
obj.duration = this.numFrames;
obj.elapsed = ++this.currentFrame;
}
obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)
this.notifyObservers("onPreDraw", obj);
this.draw(obj.elapsed, obj.duration, obj.easingConst);
this.notifyObservers("onPostDraw", obj);
if (!this.stopped)
{
if (obj.elapsed < obj.duration)
{
var self = this;
this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
}
else
{
this.stop();
this.notifyObservers("onAnimationComplete");
}
}
};
Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
// The default draw method does nothing. It is assumed that
// derived classes will provide their own implementation of this
// method.
debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};
///////////////////////////////////////////////////////////////////////////////
Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
this.animationSets = [];
Spry.Effect.Animator.call(this, opts);
this.add(elements, styleStr);
};
Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;
Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
// The first argument for the CSSAnimator can be
// the id of an element, an element node, or an array of
// elements and/or ids.
elements = Spry.$$(elements);
if (elements.length < 1)
return;
var animSet = { elements: elements, cssProps: []};
this.animationSets.push(animSet);
// Convert the styleStr into an object.
var toObj = Spry.Utils.styleStringToObject(styleStr);
for (var p in toObj)
{
var obj = new Object;
var v = toObj[p];
obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
obj.units = v.replace(/[-\d+\.]/g, "");
toObj[p] = obj;
}
for (var i = 0; i < elements.length; i++)
{
var obj = animSet.cssProps[i] = new Object;
for (var p in toObj)
{
var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
if (!pFuncs)
pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
obj[p] = new Object;
obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
obj[p].to = toObj[p].value;
obj[p].distance = obj[p].to - obj[p].from;
obj[p].units = toObj[p].units;
}
}
};
Spry.Effect.CSSAnimator.prototype.start = function()
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var eleProps = ele.spryCSSAnimatorProps;
if (!eleProps)
eleProps = ele.spryCSSAnimatorProps = new Object;
var obj = cssProps[i];
for (var p in obj)
eleProps[p] = this.animatorID;
}
}
return Spry.Effect.Animator.prototype.start.call(this);
};
Spry.Effect.CSSAnimator.prototype.stop = function()
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var obj = cssProps[i];
var eleProps = ele.spryCSSAnimatorProps;
for (var p in obj)
{
if (eleProps[p] == this.animatorID)
delete eleProps[p];
}
}
}
return Spry.Effect.Animator.prototype.stop.call(this);
};
Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var eleProps = ele.spryCSSAnimatorProps;
var obj = cssProps[i];
for (var p in obj)
{
if (eleProps[p] == this.animatorID)
{
var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
if (!pFuncs)
pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
if (elapsed > duration)
pFuncs.set(ele, p, obj[p].to + obj[p].units);
else
pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
}
}
}
}
};
Spry.Effect.CSSAnimator.stylePropFuncs = {};
Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
get: function(ele, prop)
{
return ele.style[prop];
},
set: function(ele, prop, val)
{
ele.style[prop] = val;
}
};
Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
get: function(ele, prop)
{
var val = 1;
if (ele.style.opacity)
val = ele.style.opacity;
else if (ele.style.filter)
{
var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
if (strVal)
val = parseInt(strVal) / 100;
}
return val + "";
},
set: function(ele, prop, val)
{
ele.style.opacity = "" + val;
ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
}
};
///////////////////////////////////////////////////////////////////////////////
Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
Spry.Effect.Animator.copyProps(opts, options);
var objs = [];
for (var i = 0; i < this.length; i++)
{
var obj = objs[i] = new Object;
obj.ele = this[i];
obj.from = obj.ele[propName];
obj.distance = to - obj.from;
}
var startTime = (new Date).getTime();
var animateFunc = function()
{
var elapsedTime = ((new Date).getTime()) - startTime;
if (elapsedTime > opts.duration)
{
for (var i = 0; i < objs.length; i++)
objs[i].ele[propName] = to;
if (opts.onComplete)
opts.onComplete();
}
else
{
for (var i = 0; i < objs.length; i++)
{
var obj = objs[i];
obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
}
setTimeout(animateFunc, opts.interval);
}
};
setTimeout(animateFunc, opts.interval);
return this;
};
Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
a.start();
return this;
};
})(); // EndSpryComponent
Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
|
|||||||