|
JavaScript - How Can I Alter A Variable On Mouseover In Multiple Browsers?
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. Similar TutorialsHi everyone I know this has probably been asked a million times before but I have been searching the net for hours and have not found a solution so I am hoping one of you clever people will be able to help me. PLEASE!! I am using this snow fall script http://www.dynamicdrive.com/dynamicindex3/rain.htm It works perfectly in IE but not in Firefox or Safari. I'd like it to work in all or most browsers if thats possible. Unfortunately, I am still learning so don't understand all the technical speak as yet so if someone can help in simple terms I'd be ever so grateful Thank you so much to anyone who can help me out! I 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? 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. 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. 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> Greetings, Does anyone know the code to create a function and form to make the position of a button change dynamically based on a mouseover event please? Whereby a viewer's cursor will chase the button around an IE page for infinity! I would prefer to do this without the need for any plugins if at all possible, and it does not need to be cross-platform, just IE is fine. Many thanks 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. Simple enough, one would think, but I'm rusty and haven't done this kind of thing in years. All I need to do is take the current page's url and replace/add a bit into the URL at the appropriate place. For Example, if this is the Current Page URL: Code: http://www.mysite.com/section/main.php?p=1 I want to be able to use the bookmarklet to change it to: Code: http://www.mysite.com/section2/main.php?p=1 This is all I've got for it so far. Probably botched that up too. Code: javascript:(function(){var%20a=document.URL.split("/section/");var%20newURL="www.mysite.com/section2/"+a;})
Hi, I've written a function to change the font, this is working in IE but not in FF or Chrome. No errors come up in Firebug. Once this is working in both browsers I will change the function to gradually increase the size of the font to make it look as if the font is growing. This is why I haven't just assigned a class to the text. URL of the site with the script is http://dev.creativepanda.co.uk/ Function in question is - Code: function alterFontSize(){
var sizeElem = document.getElementById('sizeTest').style;
if(reverse == 0 && currentFontSize < endFontSize){
currentFontSize = endFontSize;
sizeElem.fontSize = currentFontSize;
}
}
Thanks for any help. I have a multiple fields on my page and wish to have a reusable javascript to update the previous box with the selction made. how would this be done Code: <form name="form1" method="post" action="">
<p>
<input type="textone" name="textfieldone" id="textfieldone">
</p>
<p>
<select name="selectone" onChange="UpdatePreviousField()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="texttwo" name="textfieldtwo" id="textfieldtwo">
</p>
<p>
<select name="selecttwo" onChange="UpdatePreviousField()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p> </p>
</form>
Hello all, Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed. Here is the javascript: Code: var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
Here is the HTML, which I have enclosed within a div box positioned absolutely on the page: Code: <ul id="gallery"> <li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li> </ul> And here is the CSS: Code: /* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
#capt
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received. I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly. Page with drop downs: Code: var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
var xmlhttp;
function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1" onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>
get_cities.php: Code: <?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>
get_zips.php: Code: <?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>
I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty. I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross. Thanks for any advice you can offer. Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? 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 have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it. I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page. Thanks for all the help P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side... 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. |
|||||||