|
JavaScript - Simple Function Killing Me...
Code:
function splook(val){
return speciesDB.queryBy(function(row){
return row.data.species_id == val;
}).itemAt(0).data.speciesDB;
}
and the speciesDB Code: {success:true,rows:[{"species_id":"1","species_idx":"1","species":"Boa Constrictor"},{"species_id":"2","species_idx":"2","species":"Ball Python"},{"species_id":"3","species_idx":"3","species":"Reticulated Python"},{"species_id":"4","species_idx":"4","species":"SriLanka Python"},{"species_id":"5","species_idx":"5","species":"Blood Python"},{"species_id":"6","species_idx":"6","species":"Burmese Python"}]}
I need to take val and match it with the data and return species. I just can't figure it out though! Thanks! Similar TutorialsI was roughing out a feature I want to add to my site in notepad with no doctype declared. I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working... So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working... FF works fine every damn way of course.... I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html Also when it was functioning, the lower set of icons background wasn't showing. You can load that link ^^ in FF to see exactly what I'm going for....it works in ff css: Code: body {
margin: 0px;
font-family: "Georgia", serif;
}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
position:absolute;
top:70px;
left:500px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 0px;
color: #666;
font-size: .5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
// margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 250px;
height: 120px;
border: 3px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div */
float: left;
-moz-width:35px;
-moz-height:35px;
width: 35px;
height: 35px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 5 5 5 5px;
// background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0px;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 5px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
#card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
#card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
#card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
#card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
#card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
#card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
#card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
#card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#displayCardNum {
height:400px;
width:500px;
position:absolute;
top:80px;
right:25px;
}
#score {
width:200px;
font-size:25px;
height:50px;
position:absolute;
top:300px;
right:300px;
}
#status {
width:300px;
font-size:25px;
height:50px;
position:absolute;
top:150px;
right:200px;
}
html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 1.0 Strict validated</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
<div id="reset">
<h2>Reset</h2>
<button onclick="init()">Reset?</button>
</div>
</div>
<div id="displayCardNum">Error Msg: </div>
<div id="score">Sco <span id="myTextToShow"></span>
</div>
<div id="status"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
javascript: Quote: var correctCards = 0; var points = 0; $( init ); function init() { // Hide the success message $('#successMessage').hide(); $('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); //Card Game Below // Reset the game correctCards = 0; points=0; document.getElementById('score').innerHTML = "Sco "+ points; var status; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); // Create the pile of shuffled cards var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; numbers.sort( function() { return Math.random() - .5 } ); for ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } //Create sprite background offset for card slots var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ]; // Create the card slots var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ]; for ( var i=1; i<=10; i++ ) { $('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } //Handle the card drop function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); // If the card was dropped to the correct slot, // change the card colour, position it directly // on top of the slot, and prevent it being dragged // again if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; win(); //alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber); } else if(slotNumber != cardNumber){ updateCards(); fail(); }; function updateCards() { document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";} function win() { points+=5; status=' Win 5 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function fail() { points-=3; status=' lose 3 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function showScore() { if(points < 0) {points = 0;} document.getElementById('score').innerHTML = "Sco "+ points; document.getElementById('status').innerHTML="Status: <b>" + status + "</b>"; } // If all the cards have been placed correctly then display a message // and reset the cards for another go if ( correctCards == 10 ) { $('#successMessage').show(); $('#successMessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } } A third-party script i have no control over is interfering with my script's arrow key functions, so i wanted to find a way to nullify that script's use of the keys. After blindly punching my keyboard, I came up with this: Code: <script>
function killArrows(e){
if({ 37:1, 38:1, 39:1, 40:1 }[e.which||e.keyCode])
window.event.keyCode = 0;
}
</script>
<textarea onkeydown="killArrows(event)"></textarea>
It works great in IE (I'm still even able to use the arrow keys in the textarea without triggering the external script's arrow functions - though I'm not sure why), but doesn't work in Firefox. Any idea why? Does FF not recognize the keyCode property? Thanks for any help. ~gyz How would I add up a array of numbers in a function? My numbers keep getting written as strings, instead of adding onto each other. I am a beginner. function (myNumbers) { var number = [6,9,10,13,14]; var total = 0; for(var total=0; total < number.length; total = total + 1) { total = total + number; document.write(total); } } myNumbers(); This is just an excercise. Goodafternoon! What im trying to do is get the users location (from the iPhone) which I have working and store it in a MySQL database (semi works). My problem is that to get the location, you need to use javascript. So I thought of using Ajax to post that back to the server. I have very little knowledge in Javascript, and Ajax, so this has been a bit of a struggle. Iv tried to learn how to do it with a tutorial: http://www.tizag.com/ajaxTutorial/ajax-javascript.php And this is what I got: PHP Code: <?php function is_iPhone($agent='') { if(empty($agent)) $agent = $_SERVER['HTTP_USER_AGENT']; if(!empty($agent) and preg_match("~Mozilla/[^ ]+ \((iPhone|iPod); U; CPU [^;]+ Mac OS X; [^)]+\) AppleWebKit/[^ ]+ \(KHTML, like Gecko\) Version/[^ ]+ Mobile/[^ ]+ Safari/[^ ]+~",$agent,$match)) { return "YES"; } elseif(stristr($agent,'iphone') or stristr($agent,'ipod')){ return "MAYBE"; } else { return "NO"; } } echo is_iPhone(); ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iPhone 3.0 geolocation demo</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/> </head> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequest.responseText; } } ajaxRequest.open("GET", "UpdateLog.php?lat=" + Lat + "&long=" + Long + "&acc=" + Acc, true); ajaxRequest.send(null); } //--> var Lat = "" var Long = "" var Acc = "" function handler(location) { var message = document.getElementById("message"); message.innerHTML ='<img src="http://maps.google.com/maps/api/staticmap?center=' + location.coords.latitude + ',' + location.coords.longitude + '&zoom=12&size=400x400&markers=color:blue|label:S|'+ location.coords.latitude +','+ location.coords.longitude +'&sensor=true" alt="some_text"/>'; message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>"; message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>"; message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>"; Lat = location.coords.latitude Long = location.coords.longitude Acc = location.coords.accuracy } navigator.geolocation.getCurrentPosition(handler); ajaxFunction(); </script> <div id="message">Location unknown</div> <a href="#" onclick="ajaxFunction();" >Send</a> </body> </html> Now this works if the user clicks on "Send" that I made, but I want it to do it without the user having to click send. If anyone could help me with this, or point me in a different direction that would be better then your help would be greatly appreciated. Thanks in advance for your help. EDIT: The PHP side of this works, that is something I know about lol. Hi there, I've been scouring the web and my mind for the last 24 hours trying to find a script that will work for what I need. It seems like it would be something super simple. I need visitors to my site to be able to search if we offer service in their area. i.e. Enter Zip Code: [Search Field] (Submit Button) Pop-up results or a results page with one of two responses. Yes, we offer service. No, we do not cover your area. Something similar to what this company has on their site, http://www.oilpatchfuel.com/Pages/Welcome.aspx Any help is a greatly GREATLY appreciated!! I made a 50th anniversary guestbook to add memories/etc about our organization. The people can look at the entries and then if they want to add one of there own, there's a link that should pop up a form in a new for them to add it. I have no idea why this pop is not working in Internet Explorer (both IE6 and 7). It works beautifully in Firefox. I have no idea how you can go wrong with window.open. I'm stuck. Again, only the actual pop up function doesn't work. Everything else seems to be working fine. I included all of my code though even for the tab navigation because the link to the pop up form changes based on what tab they are in (i.e. if they're looking at the past memories tab and click on the link, it takes them to the past memories form). I know it's probably TMI on the code, but I thought it might be somehow related and better safe than sorry, right? HTML Page Code: <html>
<head>
<title>50th Anniversary Reflections</title>
<script type="text/javascript" src="js/guestbook.js"></script>
<link href="css/guestbook.css" media="all" type="text/css" rel="stylesheet">
</head>
<body>
<div id="guestbook_container">
<div id="tab_nav_container">
<ul>
<li><div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=1" onclick="change_value(1);">Past Memories</a></div></li>
<li><div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=2" onclick="change_value(2);">Career Impact</a></div></li>
<li><div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=3" onclick="change_value(3);">Future Wishes</a></div></li>
<li><div id="new" class="tabs_off" onclick="popupform();">Share Your Memories</div></li>
</ul>
</div><!-- end tab_nav_container -->
<div id="tab_content_container">
<div id="tab_1_data" class="tab_content"><p class="tab_category">What is your most important memory of NACUA?</p></div>
<div id="tab_2_data" class="tab_content" style="display: none;"><p class="tab_category">How has NACUA benefitted you and your career?</p></div>
<div id="tab_3_data" class="tab_content" style="display: none;"><p class="tab_category">What is your most important wish or hope for NACUA's future?</p></div>
</div><!-- end tab_content_container -->
<script type="text/javascript">
tabsClass.addTabs("tab_nav_container");
</script>
<br class="clear" />
<div id="iframe_container">
<iframe name="gstbk_frame" id="gstbk_frame" src="guestbook_query.asp?cat=1" width="730px" height="550px" scrolling="auto" frameborder="none"></iframe>
</div><!-- end iframe_container -->
<br class="clear" />
</div><!-- end guestbook_container -->
</body>
</html>
Here's the guestbook.js file: Code: //***** ASSIGN/CHANGE CATEGORY VALUES *****
function popupform(){
var href;
href="guestbook_submission_form.asp?cat="+catValue;
window.open(href, "Submission Form", 'width=600, height=400, scrollbars=no');
}
var catValue = "1"
function change_value(catChange){
catValue=catChange;
change_text();
}
function change_text(){
if(catValue=="1"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Memories!</a>";
}
if(catValue=="2"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Career Experiences!</a>";
}
if(catValue=="3"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Add Your Own Wish!</a>";
}
}
//***** ASSIGN/CHANGE VALUES AND TABS *****
function assignCategory(cat){
document.form.category.value=cat;
}
function onLoadAssignAndSwitch(cat){
assignCategory(cat);
tabsClass.addTabs("tab_nav_container");
var initialTab = "tab_" + cat + "_data"
if (initialTab != "tab_1_data"){
document.getElementById(initialTab).style.display = "";
document.getElementById("tab_1_data").style.display = "none";
}
document.getElementById("tab_" + cat).className = "tabs_on";
}
function assignAndSwitch(element, cat){
tabsClass.switchTab(element);
assignCategory(cat);
}
//***** TABBED MENU *****
var tabsClass = {
tabSetArray: new Array(),
classOn: "tabs_on",
classOff: "tabs_off",
addTabs: function (tabsContainer) {
tabs = document.getElementById(tabsContainer).getElementsByTagName("div");
for (x in tabs) {
if (typeof(tabs[x].id) != "undefined") {
this.tabSetArray.push(tabs[x].id);
} else {}
}
},
switchTab: function (element) {
for (x in this.tabSetArray) {
tabItem = this.tabSetArray[x];
dataElement = document.getElementById(tabItem + "_data");
if (dataElement) {
if (dataElement.style.display != "none") {
dataElement.style.display = "none";
} else {}
} else {}
tabElement = document.getElementById(tabItem);
if (tabElement) {
if (tabElement.className != this.classOff) {
tabElement.className = this.classOff;
} else {}
} else {}
}
document.getElementById(element.id + "_data").style.display = "";
element.className = this.classOn;
}
};
I'm not that advanced in javascript (although not a total idiot) Any help and/or suggestions would be greatly appreciated! Thank you! Hello I would like to know how this is not functional. surely passing the function to another function would work so I can use the same variables without having to write it out again. [ICODE] <html> <head> <title>Number Conversions</title> <script> function addNumbers () { var firstnumber = document.calculator.myFirstNumber.value; var secondnumber = document.calculator.mySecondNumber.value; var total = parseInt(firstnumber) + parseInt(secondnumber); document.calculator.myTotal.value = total; document.calculator.myHex.value = total.toString(16); document.calculator.myOct.value = total.toString(8); document.calculator.myBinary.value = total.toString(2); document.write("End of Calculation."); } function subtractNumbers (addNumbers) { var total = parseInt(firstnumber) - parseInt(secondnumber); } </script> </head> <body> <form name="calculator"> First Number <input type=text name="myFirstNumber" value=0 size=3> <br> Second Number <input type=text name="mySecondNumber" value=0 size=3><br><br> <input type="button" value="ADD" onclick="addNumbers();"> <input type="button" value="SUBTRACT" onclick="subtractNumbers();"><br> Total <input type=text name="myTotal" value=0 size=3><br> Binary <input type=text name="myBinary" value=0 size=8><br> Octal <input type=text name="myOct" value=0 size=3><br> Hexidecimal <input type=text name="myHex" value=0 size=3><br> </form> </body> </html> [ICODE] Hi, I rarely use javascript so pardon my newbieness. I'm trying to create a function that is triggered by a <select> onchange event. It's supposed to save the newly selected value in a variable, then refer the user to a link location + variable. This is what I tried: Code: <script type="text/javascript">
function categoryRef()
{
var a = this.options[this.selectedIndex].value;
document.location = 'recommend.php?cat=' + a;
}
</script>
<select name="category" onChange="categoryRef()">
<?php
$getCategoryQuery = "SELECT category FROM categories ORDER BY category";
$ConnectQuery = $database->query($getCategoryQuery);
while($category = mysql_fetch_array($ConnectQuery)){
if($getCategory == $category['category']){
echo "<option selected='selected'>" . $category['category'] . "</option>";
}
else{
echo "<option>" . $category['category'] . "</option>";
}
}
?>
</select>
When I try this and change option nothing happens. Any pointers? So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes? Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hdg').hover(function() {
$('div[title=latin]').toggle();
$('div[title=english]').toggle();
$('#').html('<h3>English</h3>');
});
});
</script>
Hello was following a tutorial online from bucky. and created a new example with different variables and such. My code in my eyes looks absolutely fine but however it does not display can anyone spot the problem? [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function cigerettes (brand, tar, price) { this.brand=brand; this.tar=tar; this.price=price; this.ReducedCost = discount; } function discount() { var reduction = 20; var finalCost = this.price - reduction; return finalCost; } var packet1 = new cigerettes("Mayfair", "2.0 mg", 399); var packet2 = new cigerettes("Sovereign", "3.4 mg", 425); </script> </head> <body> <script type="text/javascript"> document.write(packet1.brand() + " they contain " + packet1.tar() + "of tar " + "the packet cost me " + packet1.price() + ". With discount I got them for: " + packet1.ReducedCost()); </script> </body> </html> [code] hi there i'm a newb so be nice lol --> I want to use javascript in an array to submit content. I have some php background so using some techniques I worked this out. >> I need to select bathroom details and the script needs to be user friendly, however I have multiple bathrooms that can be selected. So based on a drop down list I need to select the bathrooms needed and then I will get more options as stated below. These options will need to be submitted so I need different varibles for each item selected I expect that you'll have a better way to do it I just want it to work my HTML script LOOKED as follows Code: <!-- BATHROOM TYPE SELECTOR HTML-->
<label>
<input name="fullbathr" type="checkbox" value="fullbathr" onClick="checker('yesFullba'); UpdateChecks('option');" />
Full Bathroom </label>
<span id="yesFullba" style="visibility:visible">
|
<input name="babath" type="checkbox" value="babath" id="babath" onClick="change('bathselba'); UpdateChecks('option');";/>
Bath </label>
|
<input name="bashower" type="checkbox" value="bashower" id="bashower" onClick="change('showerselba'); UpdateChecks('option');" />
Shower </label>
<span id="bathselba" style="visibility:hidden">
<br /> Bath Type: <label>
<input type="radio" name="bathtype" value="standardba" id="bathtype_0" />
Standard</label>
<label>
<input type="radio" name="bathtype" value="ovalba" id="bathtype_1" />
| Oval</label>
<label>
<input type="radio" name="bathtype" value="cornerba" id="bathtype_2" />
| Corner</label>
<label>
<input type="radio" name="bathtype" value="spaba" id="bathtype_3" />
| Spa</label>
</span>
<span id="showerselba" style="visibility:hidden">
<br /> Shower Heads: <label>
<input type="radio" name="showerheadba" value="singlesho" id="showerheadba_0" />
Single Head</label>
<label>
<input type="radio" name="showerheadba" value="doublesho" id="showerheadba_1" />
| Double Head</label> </span>
</span>
<br />
<!-- end BATHROOM TYPE SELECTOR HTML -->
i converted it as follows Code: <!-- CREATE BATHROOMS -->
function createbaths(number2) {
databaths = "";
inter = "'";
dinter = '"';
spaces=" ";
if (number2 < 7 && number2 > -1) {
for (i=1; i <= number2; i++) {
databaths = databaths + "<br><strong>Bathroom " + i + " :</strong><br>"
<!-- BATHROOM TYPE SELECTOR JAVASCRIPT-->
+ " <label>"
+ " <input name=" + dinter + "fullbathr" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "fullbathr" + dinter
+ " onClick=" + dinter + "checker(" + inter + "yesFullba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />"
+ "Full Bathroom </label>" + "<span id=" + dinter + "yesFullba" + dinter
+ " style=" + dinter + "visibility:visible" + dinter + "> | "
+ "<input name=" + dinter + "babath" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "babath" + dinter
+ " id=" + dinter + "babath" + dinter
+ " onClick=" + dinter
+ "change(" + inter + "bathselba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");"
+ dinter + ";/>"
+ "Bath </label> | "
+ "<input name=" + dinter + "bashower" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "bashower" + dinter
+ " id=" + dinter + "bashower" + dinter
+ " onClick=" + dinter
+ "change(" + inter + "showerselba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");"
+ dinter + " />"
+ "Shower </label> "
+ "<span id=" + dinter + "bathselba" + dinter
+ " style=" + dinter + "visibility:hidden" + dinter + ">" + "<br />"
+ "Bath Type: <label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "standardba" + dinter
+ " id=" + dinter + "bathtype_0" + dinter
+ " /> "
+ "Standard</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "ovalba" + dinter
+ " id=" + dinter + "bathtype_1" + dinter
+ " /> | "
+ "Oval</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "cornerba" + dinter
+ " id=" + dinter + "bathtype_2" + dinter
+ " /> | "
+ "Corner</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name="+ dinter + "bathtype" + dinter
+ " value=" + dinter + "spaba" + dinter
+ " id=" + dinter + "bathtype_3" + dinter
+ " /> | "
+ "Spa</label></span>"
+ " <span id=" + dinter + "showerselba" + dinter
+ " style=" + dinter + "visibility:hidden" + dinter
+ "><br />"
+ " Shower Heads: <label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "showerheadba" + dinter
+ " value=" + dinter + "singlesho" + dinter
+ " id=" + dinter + "showerheadba_0" + dinter
+ " />"
+ "Single Head</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "showerheadba" + dinter
+ " value=" + dinter + "doublesho" + dinter
+ " id=" + dinter + "showerheadba_1" + dinter
+ " /> | "
+ "Double Head</label>"
+ " </span> </span> <br /> "
<!-- end BATHROOM TYPE SELECTOR JAVASCRIPT -->
The entire forum is using a few different functions I've setup for this section i've got these sets Code: <!-- -->
function change(id){
if (document.all[ id ].style.visibility == 'hidden')
{
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
else
{
document.all[ id ].style.visibility = 'hidden';
document.all[ id ].value = '';
document.all[ id ].checked = '';
}
}
<!-- -->
<!-- for full bathroom selector-->
function UpdateChecks(which) {
if (which == 'fullBathroom') { fullBathroomIsChecked(); }
else if(which == 'option') { BoxesCheck(); }
}
function fullBathroomIsChecked() {
if(document.all.fullbathr.checked == false) { BoxesCheck(); }
else {
document.all.babath.checked = false;
document.all.bashower.checked = false;
}
}
function BoxesCheck() {
document.all.fullbathr.checked = false;
if((document.all.babath.checked == true) && (document.all.bashower.checked == true))
{
document.all.fullbathr.checked = true;
document.all.yesFullba.style.visibility = 'hidden';
fullBathroomIsChecked();
}
}
<!-- for full bathroom selector END -->
CURRENTLY I have a drop down list from 1 to 6 when a bathroom is selected lets say 3 then it SHOULD display full - bath - shower - PER EACH BATHROOM if bath and shower is selected they disappear and full remains ticked if u tick full bath and shower disappear. included a sub cat. that changes based on the above selection this works in html but The bathroom varibles in the javascript need to be changed to suite a changing varible I based what I understand that an array will need to be added but how to i adjust the script correctly. I might work it out just have a bit of overload at the moment. Thanks in advance Hi all, I have a newbie question. I have just started working with javascript and would appreciate some guidance. I have a webpage and there are products for sale on it(this is not live it is merely being used as practice project). Beside each product is a description a price and an 'add to cart' button. My cart is simply a div with an id of 'cart' and it has a text box within it. I need the product name to be displayed within the div (this, I have working), I also need to display the product price in the text box once the button(add to cart ) for that particular product has been pressed. Also when the button for another product is pressed, I want the cost/value for that product to be added to the other value and displayed in the text box in the cart div... I apologise for rambling on but this is the best way of me explaining my needs.... Here's where i am right now.. The HTML snippet Code: <div id ="cart">
<p><img src="images/shopping-cart.png" alt ="cart"/>Your Cart</p>
<div id="sum"><!--(this is the div where the total goes)-->
<input type="text" id="total" value="0" /><p>€ Your Total <input type="reset" value = "reset" /></p>
</div>
</div>
<h2 id ="black">Blackcurrent<br /></h2>
<p>€ 12.00 <input type = "submit" value ="add to cart" onClick = "shoppingCart('Blackcurrent',12)" /></p>
And the javascript: Code: alert ("working");
function shoppingCart (itemName,itemValue)
{
/* var thePrice = Number(itemValue);
return thePrice;*/
document.getElementById ("cart").innerHTML += itemName + "<br/>";
document.getElementById('total').value = Number(document.getElementById('total').value) + itemValue;
}
I hope i have posted correctly and am aware that i have only posted a segment of the HTML.. Please let me know if you need any more code or info.. Thanks a lot in advance for any help... Hi, I have a small script that tries to open a child window. if successful, it then closes the child window and redirects the parent window. If this process fails, there is no child window, no redirection. the script below works fine in FireFox but in Chrome, if the process fails, the redirection still happens. I'm new to JS would appreciate your help many thanks Code: <script type="text/javascript">
function openwindow(){
testWindow = window.open("popup.php","interaction");
setTimeout(function() { testWindow.close(); },1000);
setTimeout(function() { window.location = "http://www.google.com"; },1000);
}
</script>
Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<SCRIPT LANGUAGE = JavaScript>
function estimateHolidays()
{
var service1;
var service2;
var service3;
var txtGrade;
var txtHolidays;
var dblEntitlement;
var strService;
strService = cmbService.value;
if (strService == "Service1")
{
dblEntitlement = 20;
}
else if (strService == "Service2" && Grade--"1")
{
dblEntitlement = 24;
}
else if (strService == "Service2" && Grade--"2")
{
dblEntitlement = 26;
}
else if (strService == "Service2" && Grade--"3")
{
dblEntitlement = 28;
}
else if (strService == "Service3")
{
dblEntitlement = 30;
}
else
{
dblEntitlement = "Error! Please try again.";
}
txtHoliday.value = dblEntitlement;
}
</SCRIPT>
<body>
<p>
<input name="txtGrade" size="25" value="Enter Your Staff Grade">
</p>
<p>
Years of Service: <select name="cmbService" size="1">
<option value="Service1">Less than 5 years service</option>
<option value="Service2">5 to 9 years service</option>
<option value="Service3">10 or more years of service</option>
</select>
</p>
<p>
<input type="button" value="Estimate Holidays" name="cmdEstimateHolidays" onclick="estimateHolidays()">
</p>
<p>
Holiday Entitlement: <input name="txtHolidays" size="25">
</p>
</body>
</html>
Why won't this code work!? Its driving me mad. I am trying to use a user defined function and text area for a project, but nothing is showing up in the text area when i click the button. Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function Greet()
// Assumes: firstNameBox and companyName contain names
// Results: writes a message with those names in messageArea
{
firstName = document.getElementById("firstNameBox").value;
companyName = document.getElementById("companyNameBox").value;
message = "To whom it may concern, my name is " + firstName + ", I am very interested in the job opening at, " + compnayName +
". I feel that I would greatly contribute to " + companyName +
" success. I feel I fit the requirements needed to become an employee at " + companyName +
". I look forward to hearing from you.";
document.getElementById("messageArea").value = message;
}
</script>
</head>
<body>
<p>
Enter your first name: <input type="text" id="firstNameBox" size="15" />
<br />
Enter the Company name: <input type="text" id="companyNameBox" size="15" />
</p>
<p>
<input type="button" value="Click for Greeting" onclick="Greet();" />
</p>
<p>
<textarea id="messageArea" rows="4" cols="40"></textarea>
</p>
</body>
I have a simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help? works: Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait()
{
document.getElementById("first").innerHTML = ImagePlusSign
}
setTimeout(FlashImagesThenWait, 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
does NOT work : Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait(z)
{
document.getElementById("first").innerHTML = z
}
setTimeout(FlashImagesThenWait(ImagePlusSign), 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, |
|||||||